/* airsoft.ro · a26_anunta_stoc: butonul „Anunță-mă când revine” și fereastra cu formularul (pagina produsului fără stoc).
   Culorile vin din tokenurile de design (--a26-*, definite în customCSS); valorile de rezervă sunt aceleași. */

/* ---------------------------------------------------------------- butonul din grupul de cumpărare */
/* butonul „Indisponibil” (dezactivat) e înlocuit: twig-ul nostru stă înaintea lui #button-cart */
html.route-product-product .product-info .button-group-page .a26-nwa-btn ~ #button-cart {
  display: none !important;
}

html.route-product-product .product-info .button-group-page .a26-nwa-btn {
  /* Journal3 pune „pointer-events: none” pe .cart-group la produsele fără stoc; butonul nostru trebuie să primească clicul */
  pointer-events: auto !important;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid var(--a26-black, #202020) !important;
  border-radius: var(--a26-r, 6px);
  background: var(--a26-black, #202020) !important;
  color: var(--a26-white, #FFFFFF) !important;
  font-family: var(--a26-font-display, Oswald, "Arial Narrow", Arial, sans-serif) !important;
  font-size: 17px !important;
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.1;
  text-transform: uppercase !important;
  white-space: normal;
  cursor: pointer;
  box-shadow: var(--a26-shadow-sm, 0 1px 3px rgba(32, 32, 32, .10)) !important;
  transition: background-color var(--a26-t, 180ms) var(--a26-ease, ease), transform var(--a26-t-fast, 120ms) var(--a26-ease, ease);
}
html.route-product-product .product-info .button-group-page .a26-nwa-btn .btn-text {
  color: inherit !important;
  font: inherit;
}
html.route-product-product .product-info .button-group-page .a26-nwa-btn .a26-nwa-bell {
  flex: 0 0 auto;
  color: var(--a26-yellow, #FBD21E) !important;
  transform-origin: 50% 10%;
}
html.route-product-product .product-info .button-group-page .a26-nwa-btn:hover {
  background: var(--a26-anthracite, #444349) !important;
  border-color: var(--a26-anthracite, #444349) !important;
  color: var(--a26-white, #FFFFFF) !important;
}
html.route-product-product .product-info .button-group-page .a26-nwa-btn:hover .a26-nwa-bell {
  animation: a26-nwa-ring 700ms var(--a26-ease, ease) 1;
}
html.route-product-product .product-info .button-group-page .a26-nwa-btn:active {
  background: var(--a26-black, #202020) !important;
  transform: translateY(1px);
}
html.route-product-product .product-info .button-group-page .a26-nwa-btn:focus-visible {
  outline: var(--a26-focus, 3px solid #527128);
  outline-offset: 2px;
}

@keyframes a26-nwa-ring {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(14deg); }
  45% { transform: rotate(-11deg); }
  70% { transform: rotate(6deg); }
}

/* ---------------------------------------------------------------- fereastra */
/* Încape și pe ecrane joase (laptop cu zoom 200% ≈ 930 × 430 px): antetul stă fix, corpul derulează doar la nevoie,
   emailul și butonul stau pe un rând de la 521 px în sus. Sub 521 px fereastra devine foaie lipită de marginea de jos. */
.a26-nwa-dialog {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: min(460px, calc(100vw - 32px));
  max-width: none;
  height: fit-content;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--a26-r-lg, 12px);
  background: var(--a26-white, #FFFFFF);
  color: var(--a26-ink, #2A2B2E);
  font-family: var(--a26-font-body, "Open Sans", Arial, sans-serif);
  box-shadow: var(--a26-shadow-lg, 0 24px 64px -16px rgba(32, 32, 32, .35));
  overflow: hidden;
}
.a26-nwa-dialog[open] {
  display: flex;
  flex-direction: column;
  animation: a26-nwa-in var(--a26-t-panel, 240ms) var(--a26-ease, ease);
}
.a26-nwa-dialog::backdrop {
  background: rgba(32, 32, 32, .62);
}
.a26-nwa-dialog *,
.a26-nwa-dialog *::before,
.a26-nwa-dialog *::after {
  box-sizing: border-box;
}
@keyframes a26-nwa-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes a26-nwa-sheet {
  from { transform: translateY(100%); }
  to { transform: none; }
}

.a26-nwa-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 6px 6px 6px 20px;
  background: var(--a26-black, #202020);
  border-bottom: 3px solid var(--a26-yellow, #FBD21E);
  color: var(--a26-yellow, #FBD21E);
}
.a26-nwa-head .a26-nwa-bell {
  flex: 0 0 auto;
}
.a26-nwa-dialog .a26-nwa-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--a26-white, #FFFFFF);
  font-family: var(--a26-font-display, Oswald, "Arial Narrow", Arial, sans-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.2;
  text-transform: uppercase;
}
.a26-nwa-dialog .a26-nwa-title::before,
.a26-nwa-dialog .a26-nwa-title::after {
  content: none;
}
.a26-nwa-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--a26-r, 6px);
  background: transparent;
  color: var(--a26-on-dark, #D9D9D9);
  cursor: pointer;
  transition: background-color var(--a26-t-fast, 120ms) var(--a26-ease, ease), color var(--a26-t-fast, 120ms) var(--a26-ease, ease);
}
.a26-nwa-close:hover {
  background: var(--a26-anthracite, #444349);
  color: var(--a26-white, #FFFFFF);
}
.a26-nwa-close:focus-visible {
  outline: var(--a26-focus-dark, 3px solid #FBD21E);
  outline-offset: -3px;
}

.a26-nwa-form,
.a26-nwa-done {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 18px 20px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.a26-nwa-form[hidden],
.a26-nwa-done[hidden],
.a26-nwa-msg[hidden] {
  display: none;
}
.a26-nwa-product {
  display: -webkit-box;
  margin: 0 0 4px;
  overflow: hidden;
  color: var(--a26-black, #202020);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.a26-nwa-intro {
  margin: 0 0 14px;
  color: var(--a26-text-2, #505050);
  font-size: 14px;
  line-height: 1.5;
}
.a26-nwa-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.a26-nwa-label {
  display: block;
  margin: 0 0 6px;
  color: var(--a26-ink, #2A2B2E);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

/* ordinea din pagină (și la Tab): email, acord, mesaj, buton; de la 521 px butonul urcă vizual lângă email */
.a26-nwa-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "email" "acord" "mesaj" "buton";
  gap: 12px;
}
.a26-nwa-fields .a26-nwa-input { grid-area: email; }
.a26-nwa-fields .a26-nwa-consent { grid-area: acord; }
.a26-nwa-fields .a26-nwa-msg { grid-area: mesaj; }
.a26-nwa-fields .a26-nwa-submit { grid-area: buton; }
@media (min-width: 521px) {
  .a26-nwa-fields {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "email buton" "acord acord" "mesaj mesaj";
    column-gap: 8px;
  }
}

.a26-nwa-dialog .a26-nwa-input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--a26-border-strong, #8D8D8D);
  border-radius: var(--a26-r, 6px);
  background: var(--a26-white, #FFFFFF);
  color: var(--a26-black, #202020);
  font-family: inherit;
  font-size: 16px; /* sub 16px iOS face zoom la focus */
  line-height: 1.2;
  box-shadow: none;
  transition: border-color var(--a26-t-fast, 120ms) var(--a26-ease, ease), box-shadow var(--a26-t-fast, 120ms) var(--a26-ease, ease);
}
.a26-nwa-dialog .a26-nwa-input:focus {
  border-color: var(--a26-green-text, #527128);
  box-shadow: var(--a26-ring, 0 0 0 4px #F0F6E8);
  outline: 0;
}
.a26-nwa-dialog .a26-nwa-input[aria-invalid="true"] {
  border-color: var(--a26-red, #DD0017);
  box-shadow: 0 0 0 4px var(--a26-red-tint, #FDECEE);
}
.a26-nwa-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  color: var(--a26-text-2, #505050);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  cursor: pointer;
}
.a26-nwa-consent input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--a26-green-text, #527128);
}
.a26-nwa-consent input[aria-invalid="true"] {
  outline: 2px solid var(--a26-red, #DD0017);
  outline-offset: 2px;
}
.a26-nwa-consent a {
  color: var(--a26-green-text, #527128);
  text-decoration: underline;
}
.a26-nwa-consent a:hover {
  color: var(--a26-green-text-hover, #3E561F);
}
.a26-nwa-msg {
  margin: 0;
  padding: 9px 12px;
  border-left: 4px solid var(--a26-red, #DD0017);
  border-radius: var(--a26-r-xs, 4px);
  background: var(--a26-red-tint, #FDECEE);
  color: var(--a26-red-dark, #B80013);
  font-size: 14px;
  line-height: 1.4;
}
.a26-nwa-dialog .a26-nwa-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 22px;
  border: 1px solid var(--a26-green, #7AA93C) !important;
  border-radius: var(--a26-r, 6px);
  background: var(--a26-green, #7AA93C) !important;
  color: var(--a26-on-green, #202020) !important;
  font-family: var(--a26-font-display, Oswald, "Arial Narrow", Arial, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.1;
  text-transform: uppercase !important;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none !important;
  transition: background-color var(--a26-t, 180ms) var(--a26-ease, ease), transform var(--a26-t-fast, 120ms) var(--a26-ease, ease);
}
.a26-nwa-dialog .a26-nwa-submit .btn-text {
  color: inherit !important;
  font: inherit !important;
}
.a26-nwa-dialog .a26-nwa-submit:hover {
  background: var(--a26-green-hover, #88BC43) !important;
  border-color: var(--a26-green-hover, #88BC43) !important;
}
.a26-nwa-dialog .a26-nwa-submit:active {
  background: var(--a26-green-active, #6C9635) !important;
  transform: translateY(1px);
}
.a26-nwa-dialog .a26-nwa-submit:focus-visible {
  outline: var(--a26-focus, 3px solid #527128);
  outline-offset: 2px;
}
.a26-nwa-dialog .a26-nwa-submit[disabled] {
  opacity: .7;
  cursor: progress;
}

.a26-nwa-done {
  text-align: center;
}
.a26-nwa-check {
  color: var(--a26-success, #339965);
}
.a26-nwa-done-text {
  margin: 8px 0 16px;
  color: var(--a26-black, #202020);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}

/* ecran jos (laptop cu zoom, telefon pe lat): totul mai strâns, numele pe un rând, fără textul de introducere */
@media (max-height: 460px) {
  .a26-nwa-head { min-height: 48px; }
  .a26-nwa-dialog .a26-nwa-title { font-size: 16px; }
  .a26-nwa-form, .a26-nwa-done { padding: 12px 20px 14px; }
  .a26-nwa-product { -webkit-line-clamp: 1; line-clamp: 1; margin-bottom: 8px; }
  .a26-nwa-intro { display: none; }
  .a26-nwa-fields { row-gap: 8px; }
  .a26-nwa-check { width: 36px; height: 36px; }
  .a26-nwa-done-text { margin: 6px 0 12px; font-size: 15px; }
}

/* telefon: foaie lipită de marginea de jos, pe toată lățimea */
@media (max-width: 520px) {
  .a26-nwa-dialog {
    width: 100vw;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    margin: auto 0 0;
    border-radius: 16px 16px 0 0;
  }
  .a26-nwa-dialog[open] {
    animation: a26-nwa-sheet var(--a26-t-drawer, 320ms) var(--a26-ease, ease);
  }
  .a26-nwa-head { padding-left: 16px; }
  .a26-nwa-dialog .a26-nwa-title { font-size: 16px; }
  .a26-nwa-form,
  .a26-nwa-done {
    padding: 16px 16px 18px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .a26-nwa-dialog .a26-nwa-submit { min-height: 50px; }
}

/* ---------------------------------------------------------------- caseta „Îl aducem pentru tine / Trimite cerere” */
/* Cât timp butonul „Anunță-mă când revine” e pe pagină, caseta veche (blocurile Journal3 .a26-oos) nu se mai afișează;
   învelișul de sus dispare și el când nu mai conține alt bloc. Cu modulul oprit, caseta revine singură. */
html.route-product-product .product-info:has(.a26-nwa-btn) .a26-oos {
  display: none !important;
}
html.route-product-product .product-info:has(.a26-nwa-btn) .product-blocks.blocks-top:not(:has(.product_blocks > :not(.a26-oos))) {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .a26-nwa-dialog[open],
  html.route-product-product .product-info .button-group-page .a26-nwa-btn:hover .a26-nwa-bell {
    animation: none;
  }
  html.route-product-product .product-info .button-group-page .a26-nwa-btn,
  .a26-nwa-dialog .a26-nwa-submit {
    transition: none;
  }
}