/* Noviqo Form storefront styles. Everything is scoped under .nf-* so the theme is never restyled,
   except the optional .nf-hide-theme-buttons switch the merchant turns on.
   Tokens come from the merchant's design settings: --nf-accent (order button), --nf-highlight (chosen offer) and
   --nf-highlight-text (text on it), --nf-text, --nf-bg, --nf-border, --nf-radius, --nf-font (text) and --nf-display
   (title and buttons). */
.nf-root { margin: 18px 0; }
.nf-root[hidden] { display: none; }
.nf-skeleton { height: 360px; border-radius: 14px; background: linear-gradient(90deg, #f3eef0, #faf7f8, #f3eef0); background-size: 200% 100%; animation: nf-shine 1.4s infinite; }
@keyframes nf-shine { to { background-position: -200% 0; } }

.nf-form {
  --nf-accent: #8a1538; --nf-accent-text: #fff; --nf-highlight: #8a1538; --nf-highlight-text: #fff; --nf-bg: #fff; --nf-text: #1c1b19;
  --nf-border: #c9b6bc; --nf-radius: 12px; --nf-font: inherit; --nf-line: 1.5px; --nf-gold: #c9a044;
  --nf-muted: color-mix(in srgb, var(--nf-text) 58%, var(--nf-bg));
  --nf-soft: color-mix(in srgb, var(--nf-highlight) 7%, var(--nf-bg));
  --nf-save: #1d7a4c;
  position: relative; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 20px 18px 18px;
  background: var(--nf-bg); color: var(--nf-text); border: var(--nf-line) solid var(--nf-border); border-radius: calc(var(--nf-radius) + 4px);
  font-family: var(--nf-font); font-size: 16px; font-weight: 500; line-height: 1.45; font-variant-numeric: lining-nums tabular-nums;
  container-type: inline-size;
}
.nf-form *, .nf-form *::before, .nf-form *::after { box-sizing: border-box; }
.nf-form :where(button, input, select, textarea) { font-family: inherit; }
.nf-shadow { box-shadow: 0 1px 2px rgba(28, 27, 25, .04), 0 8px 24px -12px rgba(28, 27, 25, .18); }
/* Qatari touch: the top edge in the order-button colour, serrated with the nine points of the Qatar flag. */
.nf-motif-qatar { padding-top: 30px; }
.nf-motif-qatar::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 11px; pointer-events: none;
  border-radius: calc(var(--nf-radius) + 3px) calc(var(--nf-radius) + 3px) 0 0; background: var(--nf-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 11' preserveAspectRatio='none'%3E%3Cpath d='M0 0h90v4l-5 7-5-7-5 7-5-7-5 7-5-7-5 7-5-7-5 7-5-7-5 7-5-7-5 7-5-7-5 7-5-7-5 7-5-7z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 11' preserveAspectRatio='none'%3E%3Cpath d='M0 0h90v4l-5 7-5-7-5 7-5-7-5 7-5-7-5 7-5-7-5 7-5-7-5 7-5-7-5 7-5-7-5 7-5-7-5 7-5-7-5 7-5-7z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }

.nf-head { text-align: center; padding-bottom: 2px; }
.nf-head-in { display: flex; flex-direction: column; gap: 4px; }
.nf-title { font-family: var(--nf-display, inherit); font-size: 1.32em; font-weight: 700; line-height: 1.35; letter-spacing: 0; }
.nf-subtitle { color: var(--nf-muted); font-size: .92em; }

/* Offer ladder: one group, rows joined by hairlines; the chosen row is lifted in the highlight colour. */
.nf-tiers { display: flex; flex-direction: column; border: var(--nf-line) solid var(--nf-border); border-radius: var(--nf-radius); background: var(--nf-bg); }
.nf-tier { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 14px; cursor: pointer;
  border-top: var(--nf-line) solid var(--nf-border); transition: background-color .15s ease; }
.nf-tier:first-child { border-top: 0; border-radius: var(--nf-radius) var(--nf-radius) 0 0; }
.nf-tier:last-child { border-radius: 0 0 var(--nf-radius) var(--nf-radius); }
.nf-tier:only-child { border-radius: var(--nf-radius); }
.nf-tier.nf-selected { background: var(--nf-soft); box-shadow: inset 0 0 0 2px var(--nf-highlight); border-top-color: transparent; z-index: 1; }
.nf-tier.nf-selected + .nf-tier { border-top-color: transparent; }
.nf-tier input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--nf-text) 35%, var(--nf-bg)); background: var(--nf-bg); display: grid; place-items: center; }
.nf-tier input::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--nf-highlight); transform: scale(0); transition: transform .15s ease; }
.nf-tier input:checked { border-color: var(--nf-highlight); }
.nf-tier input:checked::after { transform: scale(1); }
.nf-tier input:focus-visible { outline: 2px solid var(--nf-highlight); outline-offset: 2px; }
.nf-tier-img { flex: none; width: 52px; height: 52px; object-fit: cover; border-radius: calc(var(--nf-radius) * .66); background: #f4f2ee; }
.nf-tier-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.nf-tier-title { font-family: var(--nf-display, inherit); font-weight: 600; font-size: 1.02em; }
.nf-tier-save { color: var(--nf-save); font-size: .84em; font-weight: 700; }
.nf-tier-save[hidden] { display: none; }
.nf-tier-prices { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: end; }
/* Prices: the heaviest weight, thickened a hair more with a stroke so the amount is the first thing read. */
.nf-tier-price { font-weight: 700; font-size: 1.14em; white-space: nowrap; -webkit-text-stroke: .35px currentColor; }
.nf-tier-compare { color: var(--nf-muted); font-size: .8em; white-space: nowrap; }
/* Narrow columns (phones, and the theme's product column on desktop are ~340 px): the name and the saving keep one line. */
@container (max-width: 420px) {
  .nf-tier { gap: 10px; padding: 12px 10px; }
  .nf-tier-img { width: 40px; height: 40px; }
  .nf-tier-title, .nf-tier-save, .nf-tier-price { white-space: nowrap; }
  .nf-tier-price { font-size: 1.06em; }
  .nf-tier-save { font-size: .8em; }
}
@container (max-width: 300px) { .nf-tier-img { display: none; } }
.nf-ribbon { position: absolute; top: -9px; inset-inline-end: 14px; padding: 2px 10px; border-radius: 999px; font-size: .72em; font-weight: 700;
  line-height: 1.5; background: var(--nf-highlight); color: var(--nf-highlight-text, var(--nf-text)); z-index: 2; }

/* Fields: label above, quiet hairline box, the focus ring in the highlight colour. */
.nf-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.nf-label { font-size: .95em; font-weight: 700; }
.nf-req { color: var(--nf-highlight); margin-inline-start: 3px; font-weight: 700; }
.nf-control { position: relative; display: flex; align-items: stretch; }
.nf-icon { position: absolute; inset-inline-start: 13px; top: 50%; width: 18px; height: 18px; margin-top: -9px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--nf-muted); pointer-events: none; }
.nf-input { width: 100%; min-height: 50px; margin: 0; padding: 12px 14px; padding-inline-start: 42px; font: inherit; font-size: max(16px, 1em);
  font-weight: 600; color: inherit; background: var(--nf-bg); border: var(--nf-line) solid var(--nf-border); border-radius: var(--nf-radius); outline: none; appearance: auto;
  transition: border-color .15s ease, box-shadow .15s ease; }
.nf-input::placeholder { color: color-mix(in srgb, var(--nf-text) 42%, var(--nf-bg)); font-weight: 500; }
.nf-field .nf-control > .nf-input:first-child { padding-inline-start: 14px; }
textarea.nf-input { min-height: 72px; resize: vertical; }
.nf-input:focus { border-color: var(--nf-highlight); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-highlight) 22%, transparent); }
.nf-input.nf-invalid { border-color: #c4321f; }
.nf-field-error { color: #b42318; font-size: .82em; }
.nf-field-error[hidden] { display: none; }
/* Phone with its country code: the number reads left to right, the code sits before it. */
.nf-has-dial { direction: ltr; }
.nf-dial { display: flex; align-items: center; padding: 0 12px; font-weight: 600; color: var(--nf-text); border: var(--nf-line) solid var(--nf-border);
  border-inline-end: 0; border-radius: var(--nf-radius) 0 0 var(--nf-radius); background: color-mix(in srgb, var(--nf-text) 3%, var(--nf-bg)); }
.nf-flag { flex: none; width: 32px; height: 12.5px; margin-inline-end: 7px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .14); }
.nf-has-dial .nf-input { padding-inline-start: 14px; border-radius: 0 var(--nf-radius) var(--nf-radius) 0; text-align: left; }

/* Delivery: the choices side by side, the chosen one outlined. */
.nf-shipping { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; }
.nf-ship { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; cursor: pointer;
  border: var(--nf-line) solid var(--nf-border); border-radius: var(--nf-radius); background: var(--nf-bg); transition: border-color .15s ease, background-color .15s ease; }
.nf-ship input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.nf-ship.nf-selected { border-color: var(--nf-highlight); box-shadow: inset 0 0 0 1px var(--nf-highlight); background: var(--nf-soft); }
.nf-ship:has(input:focus-visible) { outline: 2px solid var(--nf-highlight); outline-offset: 2px; }
.nf-ship-title { font-weight: 700; font-size: 1em; }
.nf-ship-sub { color: var(--nf-muted); font-size: .8em; }
.nf-ship-price { color: var(--nf-text); font-size: .95em; font-weight: 700; }

.nf-qty { display: flex; align-items: stretch; border: var(--nf-line) solid var(--nf-border); border-radius: var(--nf-radius); overflow: hidden; }
.nf-qty-btn { width: 52px; min-height: 48px; border: 0; background: transparent; color: inherit; font-size: 20px; cursor: pointer; }
.nf-qty-btn:focus-visible { outline: 2px solid var(--nf-highlight); outline-offset: -2px; }
.nf-qty-value { flex: 1; display: flex; align-items: center; justify-content: center; font-weight: 600; border-inline: var(--nf-line) solid var(--nf-border); }

/* Summary: quiet lines, then the total at the size of a price tag. */
.nf-summary { display: flex; flex-direction: column; gap: 6px; padding: 4px 2px 0; }
.nf-sum-row { display: flex; justify-content: space-between; gap: 12px; color: var(--nf-muted); font-size: .95em; }
.nf-sum-row span:last-child { font-weight: 600; }
.nf-sum-discount span:last-child { color: var(--nf-save); font-weight: 700; }
.nf-sum-total span:last-child { font-size: 1.08em; font-weight: 700; -webkit-text-stroke: .35px currentColor; }
.nf-sum-total { margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--nf-border); color: var(--nf-text); font-size: 1.18em; font-weight: 700; }

.nf-hp { position: absolute !important; top: 0 !important; inset-inline-start: 0 !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip-path: inset(50%) !important; opacity: 0 !important; pointer-events: none !important; border: 0 !important; padding: 0 !important; }
.nf-error { padding: 11px 14px; border-radius: var(--nf-radius); background: #fdf1ef; color: #9f2a17; font-size: .9em; }
.nf-error[hidden] { display: none; }

.nf-submit, .nf-open, .nf-whatsapp {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; padding: 12px 18px;
  border: 0; border-radius: var(--nf-radius); cursor: pointer; font: inherit; font-size: 1.08em; font-weight: 700; line-height: 1.2;
}
.nf-submit, .nf-open { background: var(--nf-accent, #8a1538); color: var(--nf-accent-text, #fff); font-family: var(--nf-display, var(--nf-font, inherit));
  transition: transform .1s ease, opacity .15s ease; }
.nf-submit:active, .nf-open:active { transform: scale(.99); }
/* The Qatari order button: deep maroon with a light top, a gold hairline, and one slow shine to draw the eye. */
.nf-lux { position: relative; overflow: hidden; min-height: 58px; font-size: 1.14em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nf-accent) 80%, #fff), var(--nf-accent) 60%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nf-gold, #c9a044) 75%, transparent), 0 12px 22px -14px var(--nf-accent); }
.nf-lux::after { content: ''; position: absolute; top: 0; bottom: 0; left: -45%; width: 35%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .26), transparent); animation: nf-sweep 5s ease-in-out 1.5s infinite; }
@keyframes nf-sweep { 0%, 72% { transform: translateX(0); } 100% { transform: translateX(450%); } }
.nf-submit:disabled { opacity: .55; cursor: default; }
.nf-amount { font-family: var(--nf-font, inherit); font-weight: 700; -webkit-text-stroke: .35px currentColor; }
.nf-submit:focus-visible, .nf-open:focus-visible, .nf-whatsapp:focus-visible { outline: 2px solid var(--nf-highlight, #8a1538); outline-offset: 2px; }
.nf-reassure { margin-top: -6px; text-align: center; color: var(--nf-muted); font-size: .9em; }
.nf-whatsapp { min-height: 48px; font-size: .98em; font-weight: 600; background: transparent; color: #128c4b; border: var(--nf-line) solid color-mix(in srgb, #25d366 65%, var(--nf-bg)); }
.nf-whatsapp .nf-icon { position: static; margin: 0; width: 20px; height: 20px; color: #128c4b; fill: currentColor; stroke: none; }
.nf-open.nf-inline { margin: 12px 0; }

.nf-done { align-items: center; text-align: center; padding: 30px 18px; gap: 12px; }
.nf-check { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: var(--nf-soft); color: var(--nf-text);
  box-shadow: inset 0 0 0 2px var(--nf-highlight); animation: nf-pop .35s ease-out both; }
.nf-check .nf-icon { position: static; margin: 0; width: 28px; height: 28px; color: var(--nf-text); stroke-width: 2.2; }
.nf-thanks { font-size: 1.05em; white-space: pre-line; max-width: 34ch; }
@keyframes nf-pop { from { transform: scale(.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nf-skeleton, .nf-check, .nf-alert { animation: none; } .nf-lux::after { display: none; } .nf-tier, .nf-input, .nf-ship, .nf-submit { transition: none; } }

.nf-modal { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: flex-end; justify-content: center; background: rgba(28, 27, 25, .5); }
.nf-modal[hidden] { display: none; }
.nf-modal-panel { position: relative; width: 100%; max-width: 520px; max-height: 92vh; max-height: 92dvh; overflow: auto; padding-top: 44px;
  background: #fff; border-radius: 18px 18px 0 0; }
.nf-modal-panel .nf-form { border: 0; box-shadow: none; padding-top: 4px; }
.nf-modal-panel .nf-motif-qatar::before { top: -44px; border-radius: 18px 18px 0 0; }
/* Qatari luxury (motif «qatar» with a title): a maroon header in the button colour, the title in a gold double frame, closed by
   the nine-point serrated edge of the Qatar flag; a gold frame round the card, the offers as separate cards, a gold badge. */
.nf-motif-qatar { border-color: color-mix(in srgb, var(--nf-gold) 75%, var(--nf-bg)); }
.nf-motif-qatar.nf-shadow { box-shadow: 0 2px 4px rgba(60, 10, 25, .05), 0 18px 40px -22px rgba(60, 10, 25, .38); }
.nf-motif-qatar.nf-headed { padding-top: 0; }
.nf-motif-qatar.nf-headed::before { display: none; }
.nf-motif-qatar .nf-head { position: relative; margin: 0 -18px 6px; padding: 18px 18px 28px; background: var(--nf-accent); color: var(--nf-accent-text);
  border-radius: calc(var(--nf-radius) + 2.5px) calc(var(--nf-radius) + 2.5px) 0 0; }
.nf-motif-qatar .nf-head::after { content: ''; position: absolute; inset-inline: 0; bottom: -1px; height: 11px; background: var(--nf-bg); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10L5 0l5 10 5-10 5 10 5-10 5 10 5-10 5 10 5-10 5 10 5-10 5 10 5-10 5 10 5-10 5 10 5-10 5 10z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10L5 0l5 10 5-10 5 10 5-10 5 10 5-10 5 10 5-10 5 10 5-10 5 10 5-10 5 10 5-10 5 10 5-10 5 10z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.nf-motif-qatar .nf-head-in { gap: 3px; padding: 12px 14px; border: 1px solid var(--nf-gold); border-radius: calc(var(--nf-radius) - 4px);
  outline: 1px solid color-mix(in srgb, var(--nf-gold) 45%, transparent); outline-offset: 3px; }
.nf-motif-qatar .nf-title { font-size: 1.45em; }
.nf-motif-qatar .nf-subtitle { color: color-mix(in srgb, var(--nf-accent-text) 86%, var(--nf-accent)); font-weight: 600; }
.nf-motif-qatar .nf-tiers { gap: 10px; border: 0; background: none; }
.nf-motif-qatar .nf-tier, .nf-motif-qatar .nf-tier:first-child, .nf-motif-qatar .nf-tier:last-child {
  border: var(--nf-line) solid var(--nf-border); border-radius: var(--nf-radius); background: var(--nf-bg); }
.nf-motif-qatar .nf-tier.nf-selected { border-color: var(--nf-highlight); background: var(--nf-soft);
  box-shadow: inset 0 0 0 1px var(--nf-highlight), 0 10px 20px -14px color-mix(in srgb, var(--nf-highlight) 80%, transparent); }
.nf-motif-qatar .nf-tier.nf-selected + .nf-tier { border-top-color: var(--nf-border); }
.nf-motif-qatar .nf-tier-title { font-weight: 700; }
.nf-motif-qatar .nf-ribbon { background: var(--nf-gold); color: color-mix(in srgb, var(--nf-accent) 70%, #000); box-shadow: 0 2px 6px -2px rgba(60, 10, 25, .35); }
.nf-motif-qatar .nf-sum-total span:last-child { color: var(--nf-accent); }
.nf-motif-qatar .nf-tier.nf-selected .nf-tier-price { color: var(--nf-accent); }
.nf-motif-qatar .nf-reassure { color: var(--nf-text); font-weight: 700; }
/* The Qatari header keeps the title on one line in a phone-wide form. */
@container (max-width: 420px) {
  .nf-motif-qatar .nf-head { padding-inline: 14px; }
  .nf-motif-qatar .nf-head-in { padding-inline: 8px; }
  .nf-motif-qatar .nf-title { font-size: 1.2em; }
}

.nf-close { position: absolute; z-index: 3; top: 14px; inset-inline-end: 10px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #f4f2ee;
  font-size: 22px; line-height: 1; cursor: pointer; color: #4b4741; }
@media (min-width: 640px) { .nf-modal { align-items: center; } .nf-modal-panel { border-radius: 18px; } }
/* Qatari header in the popup: it opens the sheet, the close button sits on the maroon above the gold frame. */
.nf-modal-qatar { padding-top: 0; }
.nf-modal-qatar .nf-form.nf-headed { padding-top: 0; }
.nf-modal-qatar .nf-head { border-radius: 0; padding-top: 60px; }
.nf-modal-qatar .nf-close { background: rgba(255, 255, 255, .16); color: #fff; }
html.nf-lock, html.nf-lock body { overflow: hidden; }

.nf-sticky { position: fixed; inset-inline: 0; bottom: 0; z-index: 2147482000; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97); border-top: 1px solid #ece6db; }
.nf-sticky[hidden] { display: none; }
.nf-sticky .nf-open { max-width: 560px; margin: 0 auto; }
.nf-sticky-space { height: 78px; }
/* The sticky button calls for attention: a double heartbeat and a gold ring every 5 s, between the shines of the Qatari button. */
.nf-alert { animation: nf-alert 5s ease-in-out 2.5s infinite; }
.nf-alert:focus-visible { animation: none; }
@keyframes nf-alert {
  0% { transform: scale(1); outline: 3px solid rgba(201, 160, 68, .95); outline-offset: 0; }
  8% { transform: scale(1.04); }
  16% { transform: scale(1); }
  24% { transform: scale(1.04); }
  34%, 100% { transform: scale(1); outline: 3px solid rgba(201, 160, 68, 0); outline-offset: 12px; }
}

html.nf-hide-theme-buttons form[action*="/cart/add"] [type="submit"],
html.nf-hide-theme-buttons form[action*="/cart/add"] .shopify-payment-button { display: none !important; }