/**
 * shop-embed.css — armor for the rental popup when it runs INSIDE a foreign
 * (host) theme, loaded right after shop.css by RentPopupEmbed.
 *
 * The host site (magnus.co.il / Elementor) ships aggressive global rules such as
 *   .elementor-kit-9 button { background:#FF9A4D; color:#192622; border-radius:50px; font-family:Almoni… }
 * which target EVERY <button>. Our whole wizard is built from <button> controls
 * (segmented toggles, model cards, plan picks, date fields, close, CTAs), so
 * without defense they all turn into orange 50px pills in the host's font.
 *
 * Every rule here is scoped to `.hz-rent-modal …` (already outranks
 * `.elementor-kit-9 button`) and re-asserts our own values with !important so
 * it wins regardless of the host's specificity, load order, or inline styles.
 * Nothing here leaks OUT of the modal.
 */

/* --- 1) Stack above the host header / sticky bars / accessibility widget. --- */
.hz-rent-modal { z-index: 100000 !important; }
.hz-rent-modal__overlay { z-index: 0 !important; }
.hz-rent-modal__panel { z-index: 1 !important; }

/* --- 2) Our UI font everywhere in the popup (kills the host font override). ---
 * The modal class is DOUBLED (`.hz-rent-modal.hz-rent-modal *`) on purpose: it
 * scores (0,2,0), which outranks the host's `.elementor-kit-9 button` (0,1,1)
 * that font-forces every control — so our font wins even if the host uses
 * !important and loads after us. Harmless CSS trick (same element, class twice). */
.hz-rent-modal.hz-rent-modal,
.hz-rent-modal.hz-rent-modal * { font-family: var( --hz-font-ui ) !important; }

/* --- 3) CTAs (.hz-btn variants) — restore fill/outline looks + pill radius. --- */
.hz-rent-modal .hz-btn { border: none !important; border-radius: var( --hz-radius-pill ) !important; }
.hz-rent-modal .hz-btn--primary   { background: var( --hz-signal-600 ) !important; color: var( --hz-ink ) !important; }
.hz-rent-modal .hz-btn--secondary { background: var( --hz-ink ) !important; color: var( --hz-text-inverse ) !important; }
.hz-rent-modal .hz-btn--outline   { background: transparent !important; color: var( --hz-ink ) !important; border: 1.5px solid var( --hz-sand-300 ) !important; }
.hz-rent-modal .hz-btn--ghost     { background: transparent !important; color: var( --hz-ink ) !important; }
.hz-rent-modal .hz-btn--danger    { background: var( --hz-danger ) !important; color: #fff !important; }

/* --- 4) Segmented toggles (בארץ / לחו״ל, השכרה / רכישה). --- */
.hz-rent-modal .hz-segmented__opt {
	background: transparent !important; color: var( --hz-teal ) !important;
	border: none !important; border-radius: var( --hz-radius-pill ) !important;
}
.hz-rent-modal .hz-segmented__opt.is-selected {
	background: var( --hz-pine-500 ) !important; color: #fff !important;
}

/* --- 5) Model cards (Magnus SE+ / mini 2). --- */
.hz-rent-modal .hz-device-pick {
	background: var( --hz-surface ) !important; color: var( --hz-ink ) !important;
	border: 1.5px solid var( --hz-sand-300 ) !important; border-radius: var( --hz-radius-card ) !important;
}
.hz-rent-modal .hz-device-pick.is-selected {
	border-color: var( --hz-ink ) !important; background: var( --hz-signal-50 ) !important;
}

/* --- 6) Plan picks (ESSENTIAL / BASIC / PRO / PREMIUM). --- */
.hz-rent-modal .hz-plan-pick__btn {
	background: none !important; color: inherit !important;
	border: none !important; border-radius: 0 !important;
}

/* --- 7) Date fields. --- */
.hz-rent-modal .hz-datefield {
	background-color: var( --hz-surface ) !important; color: var( --hz-text ) !important;
	border: 1px solid var( --hz-sand-300 ) !important; border-radius: var( --hz-radius-input ) !important;
}

/* --- 8) Close (X) button. --- */
.hz-rent-modal .hz-rent-modal__close {
	background: var( --hz-surface ) !important; color: var( --hz-ink ) !important;
	border: none !important; border-radius: 50% !important;
}

/* --- 9) Basket line controls (edit / remove). --- */
.hz-rent-modal .hz-basket-line__edit { background: transparent !important; border-radius: var( --hz-radius-pill ) !important; }
.hz-rent-modal .hz-basket-line__remove,
.hz-rent-modal .hz-basket-added__remove { background: transparent !important; color: var( --hz-ink ) !important; border-radius: 50% !important; }