/* =============================================================================
 * "أعلمني عند التوفر" — back-in-stock button + subscribe modal.
 *
 * The modal reuses the review modal's markup and classes (.pdp-review-modal*),
 * so it inherits that modal's chrome. Only the few bits unique to this form
 * live here. There is one modal system on this site, not two.
 *
 * The BUTTON deliberately carries no size of its own: it is rendered with the
 * same classes as the button it replaces, so it matches its siblings. The old
 * wishlist variant set its own gap/border and ended up a different size — that
 * is the mismatch this replaces.
 * ========================================================================== */

/* Only the notify-specific accents; sizing comes from .fp-cta / .pdp-button. */
.granzia-bis-btn {
	gap: 8px;
}
.granzia-bis-btn svg {
	flex: 0 0 auto;
}

/* Card CTA variant — sold-out palette, but the OUTLINE IS AN INSET SHADOW, not a
   border. .fp-cta declares `border: 0`, so adding a real border grows the box by
   its width and the sold-out button ends up taller than its in-stock siblings.
   That is precisely the mismatch .fp-cta--wishlist had (measured: 38px vs 34px).
   An inset shadow paints the same 1.5px outline and costs no layout at all. */
.fp-cta.granzia-bis-btn {
	background: #fff;
	color: #e40045;
	border: 0;
	box-shadow: inset 0 0 0 1.5px #e40045;
	white-space: nowrap;   /* never wrap to a second line — that changes height too */
}
.fp-cta.granzia-bis-btn:hover {
	background: #e40045;
	color: #fff;
}

/* PDP variant — same reasoning: .pdp-button's metrics must not change. */
.pdp-button.granzia-bis-btn {
	gap: 10px;
	background: #fff;
	color: #e40045;
	border: 0;
	box-shadow: inset 0 0 0 1.6px #e40045;
}
.pdp-button.granzia-bis-btn:hover {
	background: #e40045;
	color: #fff;
}

/* Already-subscribed state. Muted fill, NOT disabled: the button stays
   clickable, focusable and hoverable so the customer can reopen the modal and
   correct a mistyped number. A dead button is where wrong numbers go to stay
   wrong. Colour alone does not carry the meaning — the label and the check
   icon change too. */
.granzia-bis-btn.is-subscribed {
	background: #f1f5f9;
	color: #17663a;
	box-shadow: inset 0 0 0 1.5px #a9dcc0;
	cursor: pointer;
}
.granzia-bis-btn.is-subscribed:hover {
	background: #e8f6ee;
	color: #125730;
	box-shadow: inset 0 0 0 1.5px #6cc191;
}
.fp-cta.granzia-bis-btn.is-subscribed,
.pdp-button.granzia-bis-btn.is-subscribed {
	background: #f1f5f9;
	color: #17663a;
	border: 0;
	box-shadow: inset 0 0 0 1.5px #a9dcc0;
}
.fp-cta.granzia-bis-btn.is-subscribed:hover,
.pdp-button.granzia-bis-btn.is-subscribed:hover {
	background: #e8f6ee;
	color: #125730;
	box-shadow: inset 0 0 0 1.5px #6cc191;
}

/* ---- Modal -------------------------------------------------------------- */

/* 460px: wide enough for a product name on two lines beside a 56px thumbnail,
   narrow enough that a single phone field does not float in an empty sheet. */
.granzia-bis-modal .pdp-review-modal__dialog {
	max-width: 460px;
}

/* Which product this is about — the modal is shared across every button on the
   page, so saying so is not decoration, it is the answer to "for what?". */
.granzia-bis-modal__product {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	margin: 0 0 14px;
	background: #f8fafc;
	border: 1px solid #eef2f7;
	border-radius: 12px;
}
.granzia-bis-modal__thumb {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.granzia-bis-modal__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.granzia-bis-modal__pname {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
	color: #002363;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* The reassurance chip. "Only one message, nothing else" is the objection that
   stops people typing a number into a shop, so it is answered before the field
   rather than under it. */
.granzia-bis-modal__chip {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 16px;
	padding: 11px 12px;
	background: #fff5f7;
	border-radius: 12px;
	color: #7a1230;
	font-size: 13.5px;
	line-height: 1.6;
}
.granzia-bis-modal__chip-icon {
	flex: 0 0 auto;
	display: flex;
	color: #e40045;
	margin-top: 1px;
}

/* Confirmation state. */
.granzia-bis-modal__confirm {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	background: #e8f6ee;
	border-radius: 12px;
	color: #17663a;
}
.granzia-bis-modal__confirm[hidden] { display: none; }
.granzia-bis-modal__confirm-icon {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff;
	color: #17663a;
	display: flex;
	align-items: center;
	justify-content: center;
}
.granzia-bis-modal__confirm-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 14px;
	line-height: 1.5;
	min-width: 0;
}
.granzia-bis-modal__confirm-text strong { font-size: 15px; }
.granzia-bis-modal__change {
	margin-inline-start: auto;
	flex: 0 0 auto;
	background: none;
	border: 0;
	padding: 6px 2px;
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	color: #002363;
	text-decoration: underline;
	cursor: pointer;
}
.granzia-bis-modal__change:hover { color: #e40045; }

.granzia-bis-modal__field[hidden],
.granzia-bis-modal__product[hidden] { display: none; }
.granzia-bis-modal__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.granzia-bis-modal__field > span {
	font-size: 14px;
	font-weight: 700;
	color: #002363;
}
.granzia-bis-modal__field input {
	width: 100%;
	box-sizing: border-box;
	height: 48px;
	padding: 0 14px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	font-size: 16px;      /* 16px so iOS does not zoom the page on focus */
	font-family: inherit;
	text-align: left;      /* the number itself is LTR inside an RTL page */
}
.granzia-bis-modal__field input:focus {
	outline: 2px solid var(--primary, #1d3d7c);
	outline-offset: 1px;
	border-color: transparent;
}
.granzia-bis-modal__msg {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.5;
	border-radius: 8px;
	padding: 10px 12px;
}
.granzia-bis-modal__msg.is-info    { background: #eef2f7; color: #475569; }
.granzia-bis-modal__msg.is-success { background: #e8f6ee; color: #17663a; }
.granzia-bis-modal__msg.is-error   { background: #fdecec; color: #b32d2e; }

body.bis-modal-open { overflow: hidden; }