/* ============================================================
   Newsletter pop-up — glass panel over a brand photo.
   On the --tecp-pop-* tokens (popups.css): inherits the Pop-ups
   appearance controls + glass/white toggle, like every other pop-up.
   Shown / hidden by newsletter.js (after Complianz consent + frequency).
   ============================================================ */

.tecp-nl-overlay {
    position: fixed; inset: 0;
    background: var(--tecp-pop-overlay-bg);
    z-index: 100000;                         /* above the WP admin bar (99999) */
    display: flex; justify-content: flex-end;
    opacity: 0; visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.tecp-nl-overlay.open { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }

.tecp-nl-panel {
    position: relative;
    width: 640px; max-width: 100vw;          /* matches the MailerLite reference (~637px) — wider than the utility drawers */
    height: 100%;
    background-size: cover; background-position: center;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column; justify-content: flex-end;
}
.tecp-nl-overlay.open .tecp-nl-panel { transform: translateX(0); }
/* dark scrim toward the bottom so the glass + white text always read over a bright photo */
.tecp-nl-panel::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
}

.tecp-nl-close {
    position: absolute; top: 18px; right: 20px; z-index: 2;
    background: none; border: none; cursor: pointer;
    color: rgba(255, 255, 255, 0.5); font-size: 21px; line-height: 1; padding: 0;   /* #FFFFFF80 rest; 21px = site-standard × */
    transition: color 0.2s ease, transform 0.2s ease;
}
.tecp-nl-close:hover { color: #fff; transform: rotate(90deg); }                       /* #FFFFFF hover + spin */

/* the glass card — frosted panel carrying ALL the text + form, FLOATING on the photo:
   3.5rem margin from the window edge (not full-bleed) + 3.5rem padding inside (content). No border. */
.tecp-nl-glass {
    position: relative; z-index: 1;
    margin: 3.5rem;                           /* card floats 3.5rem off the photo edges */
    padding: 3.5rem;                          /* content 3.5rem inside the glass */
    background-color: var(--tecp-pop-panel-bg);
    background-image: linear-gradient(var(--tecp-pop-panel-overlay, transparent), var(--tecp-pop-panel-overlay, transparent));
    -webkit-backdrop-filter: blur(var(--tecp-pop-panel-blur)); backdrop-filter: blur(var(--tecp-pop-panel-blur));
    color: var(--tecp-pop-text);
    font-family: Verdana, Geneva, sans-serif;
}

.tecp-nl-heading {   /* 16px / ls 2px — zgrane 1:1 z tytułem ekranu sukcesu (decyzja 2026-07-06) */
    margin: 0 0 10px; font-size: 16px; font-weight: 400; letter-spacing: 2px; line-height: 1.5;
    color: var(--tecp-pop-text); text-align: center;
}
.tecp-nl-subtitle {
    margin: 0 0 22px; font-size: 12.5px; letter-spacing: 1px; text-align: center;
    color: var(--tecp-pop-text-muted);
}

.tecp-nl-form { display: flex; flex-direction: column; }

/* email — our 44px field */
.tecp-nl-email {
    /* ⚠ !important wymagane: Blocksy forsuje ~40px + własny padding na input[type=email]
       (wyższa specyficzność) — zmierzone 40px zamiast 44 (2026-07-06); ta sama pułapka
       co pole searcha (§33). Standard §3: pola i przyciski w szklanych boxach = 44px. */
    height: 44px !important; box-sizing: border-box !important; padding: 12px 16px !important;
    min-height: 44px !important;
    background: var(--tecp-pop-surface); border: none; border-radius: 0;
    color: var(--tecp-pop-text); font-family: inherit; font-size: 12px; letter-spacing: 1px;
    transition: background 0.2s ease;
}
.tecp-nl-email::placeholder { color: var(--tecp-pop-text-faint); text-transform: lowercase; }
.tecp-nl-email:focus { outline: none; background: var(--tecp-pop-surface-hover); }

.tecp-nl-consent {   /* site-standard disclaimer style: 11px / 1px */
    margin: 14px 0 0; font-size: 11px; line-height: 1.5; letter-spacing: 1px;
    color: var(--tecp-pop-text-muted);
}
/* "Privacy Policy" — site-standard inline link (§3): bold, #FFFFFFA0 → #FFFFFF, no underline, pointer */
.tecp-nl-consent a { color: rgba(255,255,255,0.63) !important; font-weight: bold; text-decoration: none !important; cursor: pointer; transition: color 0.2s ease; }
.tecp-nl-consent a:hover { color: #fff !important; }
body.tecp-theme-white .tecp-nl-consent a { color: rgba(0,0,0,0.63) !important; }
body.tecp-theme-white .tecp-nl-consent a:hover { color: #000 !important; }

/* checkbox — our 16px box */
.tecp-nl-checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; cursor: pointer; }
.tecp-nl-checkbox { position: absolute; opacity: 0; width: 0; height: 0; }
.tecp-nl-checkbox-box {
    flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px;
    border: 1px solid var(--tecp-pop-control-border); background: var(--tecp-pop-surface);
    position: relative; transition: background 0.2s ease;
}
.tecp-nl-checkbox-row:hover .tecp-nl-checkbox-box { background: var(--tecp-pop-surface-hover); }   /* hover, not only checked */
.tecp-nl-checkbox:checked + .tecp-nl-checkbox-box { background: var(--tecp-pop-surface-active); }
.tecp-nl-checkbox:checked + .tecp-nl-checkbox-box::after {
    content: ''; position: absolute; top: 2px; left: 5px; width: 4px; height: 8px;
    border: solid var(--tecp-pop-text); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.tecp-nl-checkbox-label { font-size: 11px; letter-spacing: 1px; color: var(--tecp-pop-text-muted); }

/* subscribe — full width, our grey + hover */
/* subscribe — the SITE-STANDARD button (same as everywhere): 0.08 → 0.25 hover, text 0.5 → #fff, no radius */
.tecp-nl-submit {
    /* 44px STANDARD (§3) — box-sizing + zero padding jawnie, bo motyw potrafi dołożyć
       własny padding/model pudełka do <button> (pole email miało border-box, przycisk nie —
       stąd rozjazd wysokości zauważony przez właściciela 2026-07-06) */
    height: 44px; box-sizing: border-box; padding: 0 16px; line-height: 1;
    margin-top: 20px; width: 100%;
    background: var(--tecp-pop-surface); border: none; border-radius: 0; cursor: pointer;
    color: var(--tecp-pop-text-muted); font-family: inherit; font-size: 12px; letter-spacing: 2px;
    text-transform: lowercase; transition: background 0.25s ease, color 0.25s ease;
}
.tecp-nl-submit:hover { background: var(--tecp-pop-surface-active); color: var(--tecp-pop-text); }

/* ⚠ Blocksy styles storefront inputs/buttons aggressively (transparent inputs, a white ::before
   overlay on buttons). Force our glass tokens with higher specificity + !important and kill the
   button pseudo-elements. Mirrors the cart/checkout form-element fixes (§4/§8). */
.tecp-nl-glass .tecp-nl-email {
    background: var(--tecp-pop-surface) !important;
    color: var(--tecp-pop-text) !important;
    border: none !important; border-radius: 0 !important;
}
.tecp-nl-glass .tecp-nl-email:focus { background: var(--tecp-pop-surface-hover) !important; }
.tecp-nl-glass .tecp-nl-email::placeholder { color: var(--tecp-pop-text-faint) !important; opacity: 1 !important; }   /* Blocksy forced it white + opacity .6 — restore the faint token (≈ #686868 over dark) */
.tecp-nl-glass .tecp-nl-submit {
    background: var(--tecp-pop-surface) !important;
    color: var(--tecp-pop-text-muted) !important;
    border: none !important; border-radius: 0 !important; box-shadow: none !important;
}
.tecp-nl-glass .tecp-nl-submit:hover { background: var(--tecp-pop-surface-active) !important; color: var(--tecp-pop-text) !important; }
.tecp-nl-glass .tecp-nl-submit::before, .tecp-nl-glass .tecp-nl-submit::after { content: none !important; display: none !important; background: none !important; }
.tecp-nl-glass .tecp-nl-checkbox-box { background: var(--tecp-pop-surface) !important; }
.tecp-nl-glass .tecp-nl-checkbox-row:hover .tecp-nl-checkbox-box { background: var(--tecp-pop-surface-hover) !important; }
.tecp-nl-glass .tecp-nl-checkbox:checked + .tecp-nl-checkbox-box { background: var(--tecp-pop-surface-active) !important; }
.tecp-nl-submit:disabled { opacity: 0.6; cursor: default; }

.tecp-nl-error { margin: 12px 0 0; font-size: 11px; color: rgba(255,140,140,0.95); letter-spacing: 0.5px; }

/* Success view — a composed screen, not a line glued under the form (owner 2026-07-06):
   centred, generous vertical padding (keeps the glass panel from collapsing to a sliver
   when the ~220px form disappears), soft fade-up entry per the pop-up motion standard. */
.tecp-nl-success {
    color: var(--tecp-pop-text);
    text-align: center;
    /* GÓRA (środek widoku): padding-top 3 + subtitle margin-bottom 22 = 25px (standard).
       DÓŁ: 0 — tekst→dół szkła = glass padding-bottom 56px = SYMETRIA z górą szkła
       (krawędź→„THE EÏNN" też 56px; decyzja właściciela 2026-07-06). */
    padding: 3px 8px 0;
    margin-bottom: 0;
    animation: tecpNlSuccessIn 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.tecp-nl-success-title {
    margin: 0 0 10px;
    font-size: 16px;
    letter-spacing: 2px;   /* = heading (decyzja 2026-07-06) */
    /* bez text-transform — tytuł zdaniowy z kropką: „Your invitation awaits." (2026-07-06) */
}
.tecp-nl-success-text {
    margin: 0 auto;
    max-width: 46ch;
    /* typografia 1:1 z podtytułem .tecp-nl-subtitle (decyzja właściciela) */
    font-size: 12.5px;
    letter-spacing: 1px;
    line-height: 1.7;
    color: var(--tecp-pop-text-muted);
}
@keyframes tecpNlSuccessIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .tecp-nl-success { animation: none; }
}

@media (max-width: 600px) {
    .tecp-nl-panel { width: 100vw; }
}

/* Consent required — red inset outline, SAME visual as checkout (.tecp-checkbox-error:
   box-shadow rgba(255,80,80,0.5) 0 0 0 1px inset + border rgba(255,80,80,0.7)).
   Applied by JS on submit without the tick; cleared when the box gets ticked. */
.tecp-nl-checkbox-box.tecp-nl-checkbox-error {
    box-shadow: rgba(255,80,80,0.5) 0 0 0 1px inset !important;
    border-color: rgba(255,80,80,0.7) !important;
}
/* Invalid e-mail — the SAME red inset as checkout required fields (.tecp-field-error input /
   .woocommerce-invalid input). No text hint (identyfikacja wizualna: te same rozwiązania
   na każdym etapie — decyzja właściciela 2026-07-06); cleared on input. */
.tecp-nl-email.tecp-nl-field-error {
    box-shadow: rgba(255,80,80,0.5) 0 0 0 1px inset !important;
}

/* [hidden] guard — the author display:flex above beats the UA [hidden] rule, so the
   form never actually disappeared after subscribe (form + thank-you shown together). */
.tecp-nl-form[hidden] { display: none !important; }