@import url('/assets/noot-fonts.css');
@import url('/assets/noot-design-tokens.css');

.noot-popup {
  width: min(860px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--noot-line, #d7dfd5);
  border-radius: 8px;
  background: #fff;
  color: var(--noot-forest, #063f2d);
  box-shadow: 0 24px 80px #00000040;
  overflow: hidden;
  font: 16px/1.5 var(--noot-font-sans, 'Figtree', system-ui, sans-serif);
  letter-spacing: 0;
  color-scheme: light;
}
.noot-popup::backdrop { background: #00000099; }
.noot-popup *, .noot-popup *::before, .noot-popup *::after { box-sizing: border-box; letter-spacing: 0; }
.noot-popup .noot-popup__shell { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); max-height: calc(100dvh - 34px); }
.noot-popup .noot-popup__media { min-width: 0; min-height: 0; background: #f4f4f4; position: relative; }
.noot-popup .noot-popup__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.noot-popup .noot-popup__media img[src$='noot-v4-hero-flush-20260827.jpg'],
.noot-popup .noot-popup__media img[src$='noot-v4-mix-flush-20260827.jpg'] { object-fit: cover; object-position: 75% center; }
.noot-popup[data-image-position='top'] .noot-popup__media img[src$='noot-v4-hero-flush-20260827.jpg'] { object-position: center bottom; }
.noot-popup[data-image-position='top'] .noot-popup__media img[src$='noot-v4-mix-flush-20260827.jpg'] { object-position: center 35%; }
.noot-popup[data-image-position='right'] .noot-popup__media { order: 2; }
.noot-popup[data-image-position='none'] { width: min(500px, calc(100% - 32px)); }
.noot-popup[data-image-position='none'] .noot-popup__shell, .noot-popup[data-image-position='top'] .noot-popup__shell { grid-template-columns: minmax(0, 1fr); }
.noot-popup[data-image-position='top'] { width: min(560px, calc(100% - 32px)); }
.noot-popup[data-image-position='top'] .noot-popup__shell { grid-template-rows: min(190px, 22dvh) minmax(0, 1fr); }
.noot-popup .noot-popup__content { min-width: 0; min-height: 0; padding: 28px 32px 20px; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.noot-popup .noot-popup__brand { display: block; width: 94px; height: 48px; object-fit: contain; margin: 0 0 16px; }
.noot-popup .noot-popup__title { margin: 0 0 12px; font-size: 28px; line-height: 1.13; font-weight: 750; color: var(--noot-forest, #063f2d); overflow-wrap: anywhere; }
.noot-popup .noot-popup__body { margin: 0 0 20px; font-size: 15px; line-height: 1.5; color: #505050; overflow-wrap: anywhere; }
.noot-popup .noot-popup__form { display: grid; gap: 14px; margin: 0; }
.noot-popup .noot-popup__field { display: grid; gap: 6px; margin: 0; font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.noot-popup .noot-popup__field input, .noot-popup .noot-popup__field select, .noot-popup .noot-popup__field textarea {
  width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid #909090; border-radius: 4px;
  background: #fff; color: #1b1b1b; font: 400 16px/1.4 var(--noot-font-sans, 'Figtree', system-ui, sans-serif);
}
.noot-popup .noot-popup__field textarea { resize: vertical; max-height: 160px; }
.noot-popup .noot-popup__channels { margin: 0; padding: 0; border: 0; min-width: 0; }
.noot-popup .noot-popup__channels legend { padding: 0 0 6px; font-size: 14px; font-weight: 650; }
.noot-popup .noot-popup__channel-options { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 5px; border: 1px solid #c5d5ca; border-radius: 999px; background: #e7efe9; box-shadow: inset 0 1px 3px rgba(6, 63, 45, .08); }
.noot-popup .noot-popup__channels label { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 48px; padding: 10px 12px; border-radius: 999px; color: var(--noot-forest, #063f2d); font-size: 15px; line-height: 1.2; font-weight: 700; text-align: center; cursor: pointer; overflow-wrap: anywhere; transition: background-color .2s ease, color .2s ease; }
.noot-popup .noot-popup__channels label:not(:has(:checked)):hover { background: rgba(255, 255, 255, .52); }
.noot-popup .noot-popup__channels label:has(:checked) { background: var(--noot-forest, #063f2d); color: #fff; box-shadow: 0 5px 14px rgba(6, 63, 45, .2); }
.noot-popup .noot-popup__channels label:has(:focus-visible) { outline: 3px solid var(--noot-sun, #f3bd35); outline-offset: 2px; }
.noot-popup .noot-popup__channels label:has(:disabled) { opacity: .65; cursor: wait; }
.noot-popup .noot-popup__channels input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.noot-popup .noot-popup__channels label span { pointer-events: none; }
@supports selector(:has(*)) {
  .noot-popup .noot-popup__channel-options::before { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 2); border-radius: 999px; background: var(--noot-forest, #063f2d); box-shadow: 0 5px 14px rgba(6, 63, 45, .2); content: ""; transform: translateX(0); transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
  .noot-popup .noot-popup__channel-options:has(input[value="sms"]:checked)::before { transform: translateX(100%); }
  .noot-popup .noot-popup__channels label:has(:checked) { background: transparent; box-shadow: none; }
}
.noot-popup .noot-popup__consent { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0; cursor: pointer; }
.noot-popup .noot-popup__consent input { flex: 0 0 20px; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--noot-forest, #063f2d); }
.noot-popup .noot-popup__consent span { font-size: 12px; line-height: 1.5; color: #505050; overflow-wrap: anywhere; }
.noot-popup .noot-popup__submit { display: flex; align-items: center; justify-content: center; min-height: 56px; width: 100%; margin: 0; padding: 12px 16px; border: 1px solid var(--noot-forest, #063f2d); border-radius: 6px; background: var(--noot-forest, #063f2d); color: #fff; font: 700 16px/1.4 var(--noot-font-sans, 'Figtree', system-ui, sans-serif); text-align: center; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.noot-popup .noot-popup__submit:hover { border-color: #052f23; background: #052f23; }
.noot-popup .noot-popup__submit:disabled { opacity: .65; cursor: wait; }
.noot-popup .noot-popup__skip { display: block; width: 100%; min-height: 44px; margin: 0; padding: 10px; border: 0; background: transparent; color: #505050; font: 500 14px/1.4 var(--noot-font-sans, 'Figtree', system-ui, sans-serif); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.noot-popup .noot-popup__close { position: absolute; z-index: 1; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #c8c8c8; border-radius: 50%; background: #fff; color: #1b1b1b; font: 400 30px/1 system-ui, sans-serif; cursor: pointer; }
.noot-popup .noot-popup__error { margin: 0; color: #a53730; font-size: 14px; overflow-wrap: anywhere; }
.noot-popup .noot-popup__error:empty { display: none; }
.noot-popup .noot-popup__honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.noot-popup .noot-popup__offers { display: grid; gap: 12px; margin-top: 24px; }
.noot-popup .noot-popup__offers a + a { background: #e8f2f7; color: #1b1b1b; border-color: #909090; }
.noot-popup :focus-visible { outline: 3px solid #2d7ead; outline-offset: 3px; }
.noot-popup .noot-popup__title:focus { outline: none; }
@media (max-width: 640px) {
  .noot-popup, .noot-popup[data-image-position='none'], .noot-popup[data-image-position='top'] { width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
  .noot-popup .noot-popup__shell, .noot-popup[data-image-position='top'] .noot-popup__shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: min(155px, 19dvh) minmax(0, 1fr); max-height: calc(100dvh - 26px); }
  .noot-popup[data-image-position='none'] .noot-popup__shell { grid-template-rows: minmax(0, 1fr); }
  .noot-popup[data-image-position='right'] .noot-popup__media { order: 0; }
  .noot-popup .noot-popup__media img { object-position: center; }
  .noot-popup .noot-popup__media img[src$='noot-v4-hero-flush-20260827.jpg'] { object-position: center bottom; }
  .noot-popup .noot-popup__media img[src$='noot-v4-mix-flush-20260827.jpg'] { object-position: center 35%; }
  .noot-popup .noot-popup__content { padding: 18px 20px 12px; }
  .noot-popup .noot-popup__brand { width: 76px; height: 39px; margin-bottom: 12px; }
  .noot-popup .noot-popup__title { font-size: 24px; }
  .noot-popup .noot-popup__body { font-size: 14px; margin-bottom: 16px; }
  .noot-popup .noot-popup__form { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .noot-popup, .noot-popup *, .noot-popup *::before { scroll-behavior: auto; transition: none !important; } }
.noot-offer-banner{position:fixed;z-index:35;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;max-width:calc(100% - 120px);background:#063f2d;color:#fff;border:1px solid #fff;border-radius:6px;box-shadow:0 4px 18px #0002}
.noot-offer-banner button{appearance:none;border:0;background:transparent;color:inherit;font:700 14px/1.3 var(--noot-font-sans,Figtree,Arial,sans-serif);cursor:pointer;min-height:44px}
.noot-offer-banner__open{padding:10px 12px;text-align:left}
.noot-offer-banner .noot-offer-banner__dismiss{width:44px;min-width:44px;font-size:24px;padding:0}
.noot-offer-banner button:focus-visible{outline:3px solid #f2bd3c;outline-offset:2px}
body.noot-support-open .noot-offer-banner{visibility:hidden}