/* =========================================================
   ZNS Frontend (Subtle Edition)
   - subscribe shortcode + policy modal
   File: assets/frontend.css
   ========================================================= */

/* -------------------------
   Scope hardening
-------------------------- */
.zns-subscribe,
.zns-subscribe *{ box-sizing: border-box; }

#zns-modal,
#zns-modal *{ box-sizing: border-box; }

/* =========================================================
   SUBSCRIBE SHORTCODE
   ========================================================= */
.zns-subscribe{
  --zns-h: 48px;
  --zns-radius: 16px;
  --zns-gap: 10px;

  --zns-text: #111827;
  --zns-muted: rgba(17,24,39,.62);

  --zns-border: rgba(17,24,39,.14);
  --zns-border-strong: rgba(17,24,39,.22);

  --zns-surface: rgba(255,255,255,.82);
  --zns-surface-strong: rgba(255,255,255,.94);

  --zns-shadow-soft: 0 8px 22px rgba(2,6,23,.06);
  --zns-shadow: 0 14px 34px rgba(2,6,23,.08);

  --zns-ring: 0 0 0 3px rgba(17,24,39,.10);

  --zns-primary: #000000;
  --zns-primary-hover: #000000;

  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--zns-text);
  font-family: inherit;
}

.zns-subscribe-row{
  display: flex;
  gap: var(--zns-gap);
  align-items: stretch;
}

/* Input: stabilny padding i wyrównanie placeholdera */
.zns-subscribe .zns-input{
  flex: 1 1 auto;
  height: var(--zns-h) !important;

  border: 1px solid var(--zns-border) !important;
  border-radius: var(--zns-radius) !important;

  padding: 0 14px 0 18px !important;
  text-indent: 0 !important;
  text-align: left !important;

  font-size: 14px !important;
  font-weight: 550 !important;
  line-height: var(--zns-h) !important;

  color: var(--zns-text) !important;
  background: var(--zns-surface) !important;

  box-shadow: var(--zns-shadow-soft) !important;

  outline: none !important;
  -webkit-appearance: none;
  appearance: none;

  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.zns-subscribe .zns-input::placeholder{
  color: rgba(107,114,128,.90) !important;
  font-weight: 500 !important;
}

.zns-subscribe .zns-input:focus{
  border-color: var(--zns-border-strong) !important;
}

.zns-subscribe .zns-input:focus-visible{
  background: var(--zns-surface-strong) !important;
  box-shadow: var(--zns-ring), var(--zns-shadow) !important;
  transform: translateY(-1px);
}

/* Subscribe button: mniej “ciężki”, bardziej subtelny */
.zns-subscribe .zns-btn{
  flex: 0 0 auto;
  height: var(--zns-h) !important;

  border-radius: var(--zns-radius) !important;
  padding: 0 16px !important;

  border: 1px solid rgba(17,24,39,.12) !important;
  background: var(--zns-primary) !important;
  color: #fff !important;

  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .08px !important;

  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 10px 22px rgba(2,6,23,.10) !important;

  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
  user-select: none;
}

.zns-subscribe .zns-btn:hover{
  background: var(--zns-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(2,6,23,.12) !important;
}

.zns-subscribe .zns-btn:active{
  transform: translateY(0);
  box-shadow: 0 10px 22px rgba(2,6,23,.10) !important;
}

.zns-subscribe .zns-btn:disabled{
  opacity: .6 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Meta + link */
.zns-subscribe-meta{
  margin-top: 10px;
  font-size: 12px;
  color: var(--zns-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.zns-link{
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;

  color: rgba(17,24,39,.86) !important;
  font-weight: 650 !important;
  letter-spacing: .06px !important;

  cursor: pointer;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(17,24,39,.24) !important;

  transition: opacity .15s ease, border-color .15s ease;
}

.zns-link:hover{
  opacity: .95;
  border-bottom-color: rgba(17,24,39,.40) !important;
}

/* Messages */
.zns-msg{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.35;
}
.zns-msg.ok{ color: rgba(17,24,39,.90); }
.zns-msg.err{ color: #b91c1c; }

/* =========================================================
   MODAL (Subtle, clean)
   ========================================================= */
#zns-modal.zns-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;

  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;

  /* Jaśniejsze, subtelniejsze tło */
  background: rgba(255,255,255,.82) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.10) !important;
  backdrop-filter: blur(8px) saturate(1.10) !important;
}

#zns-modal.zns-modal[aria-hidden="false"]{ display: flex; }

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  #zns-modal.zns-modal{ background: rgba(255,255,255,.96) !important; }
}

/* Card: prosty, spójny, większe zaokrąglenia */
#zns-modal .zns-modal-card{
  width: min(780px, 100%) !important;

  border-radius: 30px !important;
  border: 1px solid rgba(17,24,39,.10) !important;
  background: rgba(255,255,255,.98) !important;

  /* Jeden, miękki cień */
  box-shadow: 0 22px 60px rgba(2,6,23,.12) !important;

  overflow: hidden !important;
}

/* Header: minimal */
#zns-modal .zns-modal-head{
  padding: 18px 20px !important;
  background: rgba(255,255,255,1) !important;
  border-bottom: 1px solid rgba(17,24,39,.08) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#zns-modal .zns-modal-title{
  font-size: 16px !important;
  font-weight: 750 !important;
  letter-spacing: .10px !important;
  color: rgba(17,24,39,.92) !important;
}

/* Close: delikatny */
#zns-modal .zns-modal-close{
  width: 38px !important;
  height: 38px !important;

  border-radius: 14px !important;
  border: 1px solid rgba(17,24,39,.12) !important;

  background: rgba(255,255,255,1) !important;
  color: rgba(17,24,39,.92) !important;

  box-shadow: 0 6px 16px rgba(2,6,23,.06) !important;

  font-size: 18px !important;
  font-weight: 750 !important;
  line-height: 1 !important;

  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  transition: transform .12s ease, box-shadow .12s ease !important;
}

#zns-modal .zns-modal-close:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 20px rgba(2,6,23,.08) !important;
}

/* Body: subtelniejszy tekst zasad */
#zns-modal .zns-modal-body{
  padding: 18px 20px 12px 20px !important;

  max-height: min(62vh, 560px) !important;
  overflow: auto !important;

  font-size: 12px !important;
  line-height: 1.72 !important;

  color: rgba(17,24,39,.74) !important;
  font-weight: 450 !important;
}

#zns-modal .zns-modal-body p,
#zns-modal .zns-modal-body li,
#zns-modal .zns-modal-body a{
  font-size: 12px !important;
  line-height: 1.72 !important;
  font-weight: 450 !important;

  letter-spacing: 0 !important;
  text-transform: none !important;
}

#zns-modal .zns-modal-body strong,
#zns-modal .zns-modal-body b{
  font-weight: 650 !important;
  color: rgba(17,24,39,.88) !important;
}

#zns-modal .zns-modal-body a{
  color: rgba(17,24,39,.84) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(17,24,39,.22) !important;
}

#zns-modal .zns-modal-body a:hover{
  border-bottom-color: rgba(17,24,39,.34) !important;
}

/* Actions: prosto */
#zns-modal .zns-modal-actions{
  padding: 14px 20px 18px 20px !important;

  background: rgba(255,255,255,1) !important;
  border-top: 1px solid rgba(17,24,39,.08) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* Unsub group: bez tła/cieni */
#zns-modal .zns-unsub{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  flex-wrap: nowrap !important;
}

/* Input: subtelny */
#zns-modal .zns-unsub input{
  height: 44px !important;
  border-radius: 16px !important;

  padding: 0 14px 0 16px !important;
  text-align: left !important;
  text-indent: 0 !important;

  border: 1px solid rgba(17,24,39,.14) !important;
  background: rgba(255,255,255,1) !important;
  color: rgba(17,24,39,.90) !important;

  font-size: 14px !important;
  font-weight: 550 !important;
  line-height: 44px !important;

  box-shadow: 0 6px 16px rgba(2,6,23,.05) !important;

  outline: none !important;
  -webkit-appearance: none;
  appearance: none;

  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

#zns-modal .zns-unsub input:focus-visible{
  border-color: rgba(17,24,39,.22) !important;
  box-shadow: 0 0 0 3px rgba(17,24,39,.10), 0 10px 20px rgba(2,6,23,.07) !important;
  transform: translateY(-1px);
}

/* Buttons: mniej bold, bardziej elegancko */
#zns-modal button,
#zns-modal .zns-btn-secondary,
#zns-modal #zns-close-btn,
#zns-modal #zns-unsub-btn{
  height: 44px !important;
  border-radius: 16px !important;
  padding: 0 16px !important;

  font-size: 14px !important;
  font-weight: 550 !important;
  letter-spacing: .08px !important;
  text-transform: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease !important;
}

/* Primary: Zamknij (subtelny, nie “beton”) */
#zns-modal #zns-close-btn{
  border: 1px solid rgba(17,24,39,.12) !important;
  background: rgba(17,24,39,.96) !important;
  color: #ffffff !important;

  box-shadow: 0 10px 22px rgba(2,6,23,.10) !important;
}

#zns-modal #zns-close-btn:hover{
  background: rgba(11,18,32,.98) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 26px rgba(2,6,23,.12) !important;
}

/* Destructive: Anuluj subskrypcję (minimal outline) */
#zns-modal #zns-unsub-btn{
  border: 1px solid rgba(185,28,28,.30) !important;
  background: rgba(255,255,255,1) !important;
  color: rgba(185,28,28,.92) !important;

  box-shadow: none !important;
}

#zns-modal #zns-unsub-btn:hover{
  background: rgba(254,242,242,1) !important;
  border-color: rgba(185,28,28,.42) !important;
  transform: translateY(-1px) !important;
}

/* Responsive */
@media (max-width: 560px){
  .zns-subscribe-row{ flex-direction: column; }
  .zns-subscribe .zns-btn{ width: 100%; }

  #zns-modal .zns-modal-actions{
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #zns-modal .zns-unsub{
    flex-wrap: wrap !important;
  }

  #zns-modal .zns-unsub input{
    width: 100% !important;
    min-width: 100% !important;
  }

  #zns-modal #zns-close-btn{ width: 100% !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .zns-subscribe .zns-input,
  .zns-subscribe .zns-btn,
  #zns-modal .zns-modal-close,
  #zns-modal button{
    transition: none !important;
  }
}