/* Sigplus Lightbox Modal — 2026 clean UX (kids-friendly, fast, mobile-first)
   Drop-in replacement for your current sigplus-lightbox.css
   Markup expected: .spm-overlay > .spm-dialog with .spm-close, .spm-stage > img.spm-img, .spm-ad, .spm-actions .spm-btn, .spm-meta, .spm-nav (.spm-prev/.spm-next)
*/

:root{
  /* Overlay */
  --spm-overlay: rgba(17, 24, 39, .50);
  --spm-overlay-strong: rgba(17, 24, 39, .62);

  /* Panel */
  --spm-panel: #ffffff;
  --spm-panel-soft: #f6f9ff;
  --spm-border: rgba(15, 23, 42, .10);
  --spm-shadow: 0 24px 70px rgba(2, 6, 23, .18);

  /* Text */
  --spm-text: #0b1220;
  --spm-muted: rgba(11, 18, 32, .62);

  /* Controls */
  --spm-radius: 22px;
  --spm-radius-sm: 14px;

  /* Buttons (cheerful but not neon) */
  --spm-primary: #2563eb;
  --spm-primary-hover: #1d4ed8;
  --spm-primary-text: #ffffff;
  --spm-chip: rgba(255,255,255,.92);
  --spm-chip-border: rgba(15,23,42,.12);
}

html.spm-lock, html.spm-lock body{
  overflow: hidden;
  touch-action: none;
}

/* ===== Overlay ===== */
.spm-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 14px;
  background: var(--spm-overlay);
}
.spm-overlay.spm-open{ display:flex; }

@supports (backdrop-filter: blur(6px)){
  .spm-overlay{
    backdrop-filter: blur(6px);
    background: var(--spm-overlay-strong);
  }
}

/* ===== Dialog layout ===== */
.spm-dialog{
  position: relative;
  width: min(960px, 96vw);
  max-height: min(94dvh, 940px); /* iOS modern */
  background: var(--spm-panel);
  color: var(--spm-text);
  border: 1px solid var(--spm-border);
  border-radius: var(--spm-radius);
  overflow: hidden;
  box-shadow: var(--spm-shadow);
  display: grid;
  grid-template-rows: 1fr auto auto auto; /* stage / ad / actions / meta */
}

/* ===== Close button (always visible) ===== */
.spm-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--spm-chip-border);
  background: var(--spm-chip);
  color: var(--spm-text);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 24px rgba(2, 6, 23, .12);
}
.spm-close:hover{ filter: brightness(.98); }
.spm-close:active{ transform: translateY(1px); }
.spm-close:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(37,99,235,.18), 0 10px 24px rgba(2, 6, 23, .12);
}

/* ===== Stage ===== */
.spm-stage{
  background: linear-gradient(180deg, var(--spm-panel-soft), #ffffff 70%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 22px;
}

/* IMPORTANT: constrain the image (your breakage came from missing constraints) */
.spm-img{
  max-width: 100%;
  width: auto;
  height: auto;

  max-height: 56dvh; /* iOS modern */
  border-radius: var(--spm-radius-sm);
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(2, 6, 23, .10);
}

/* ===== Ad block (do not touch content; just keep space stable) ===== */
.spm-ad{
  min-height: 120px; /* reserve */
  background: #ffffff;
  border-top: 1px solid var(--spm-border);
  border-bottom: 1px solid var(--spm-border);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
}

/* ===== Actions ===== */
.spm-actions{
  display:flex;
  gap: 10px;
  padding: 14px 18px 10px;
  align-items:center;
  justify-content:center;
  flex-wrap: wrap;
  background: #ffffff;
}

/* Same-size buttons (not by word length) */
.spm-btn{
  appearance: none;
  border: 0;
  border-radius: 999px;
  height: 44px;
  padding: 0 16px;
  font-weight: 800;
  cursor: pointer;
  background: var(--spm-primary);
  color: var(--spm-primary-text);
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;

  /* equal widths */
  flex: 1 1 160px;
  min-width: 160px;
  max-width: 200px;
  text-align: center;
}

.spm-btn:hover{
  background: var(--spm-primary-hover);
  box-shadow: 0 10px 22px rgba(37,99,235,.20);
}
.spm-btn:active{ transform: translateY(1px); }
.spm-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(37,99,235,.22), 0 12px 26px rgba(37,99,235,.22);
}

/* ===== Meta (counter) ===== */
.spm-meta,
.spm-counter,
.spm-pager,
.spm-pagination{
  padding: 2px 18px 2px;
  text-align: center;
  font-size: 13px;
  color: var(--spm-muted);
  display: block;
  position: relative;
  z-index: 2;
}

/* ===== Nav buttons ===== */
.spm-nav{
  position: absolute;
  top: 30%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--spm-chip-border);
  background: var(--spm-chip);
  color: var(--spm-text);
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 30px;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(2, 6, 23, .12);
  user-select: none;
}
.spm-prev{ left: 14px; }
.spm-next{ right: 14px; }

.spm-nav:hover{ filter: brightness(.98); }
.spm-nav:active{ transform: translateY(-50%) translateY(1px); }

.spm-nav[disabled]{
  opacity: .35;
  cursor: default;
  box-shadow: none;
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .spm-dialog{ width: 96vw; }
  .spm-stage{ padding: 16px; }
  .spm-img{ max-height: 58vh; max-height: 58dvh; }
}

@media (max-width: 520px){
  .spm-overlay{ padding: 10px; }
  .spm-dialog{
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 18px;
  }
  .spm-close{ top: 10px; right: 10px; width: 42px; height: 42px; }
  .spm-nav{ width: 42px; height: 42px; font-size: 28px; }
  .spm-prev{ left: 10px; }
  .spm-next{ right: 10px; }

  /* Buttons stack nicely on iPhone */
  .spm-actions{ padding: 12px 12px; gap: 10px; }
  .spm-btn{
    flex: 1 1 100%;
    min-width: 100%;
    max-width: 100%;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .spm-btn, .spm-nav, .spm-close{ transition: none; }
}


@media (max-width: 560px){
  .spm-actions{ padding: 12px 14px 8px; }
  .spm-actions a{ width: 100%; min-width: 0; }
  .spm-meta, .spm-counter, .spm-pager, .spm-pagination{ padding: 6px 14px 12px; }
  .spm-ad{ padding: 10px 12px; min-height: 120px; }
}
.spm-dialog{ overflow: hidden; }
.spm-stage{ overflow: auto; }
@keyframes printPulse{
  0%{ box-shadow: 0 0 0 0 rgba(37,99,235,.35); }
  70%{ box-shadow: 0 0 0 10px rgba(37,99,235,0); }
  100%{ box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}

/* òîëüêî êíîïêà Print */
.spm-btn.print{
  animation: printPulse 2.6s infinite;
}
.spm-btn::before{
  display: inline-block;
  transform: translateY(-1px);
}
.spm-download::before{
  content: "\1F4BE";
  margin-right: 8px;
}

.spm-print::before{
  content: "\1F5A8";
  margin-right: 8px;
}

.spm-printhalf::before{
  content: "\1F5A8";
  margin-right: 8px;
}
.spm-ad{
  min-height: 90px;           /* ðåçåðâ ïîä desktop 600x120 */
  display:flex;
  align-items:center;
  justify-content:center;
  width: 100%;
}

@media (max-width: 420px){
  .spm-ad{ min-height: 95px; } /* ðåçåðâ ïîä mobile 320x100 */
}

/* --- Fix: AdSense overlaying actions in modal --- */
.spm-ad{
  position: relative;
  z-index: 1;
  overflow: hidden;              /* íå äàÞì iframe ÒâûëåçàòüÓ */
}

.spm-actions{
  position: relative;
  z-index: 3;                    /* êíîïêè âñåãäà âûøå ðåêëàìû */
  background: #fff;              /* ÷òîáû íå ïðîñâå÷èâàëî */
}

/* AdSense container + iframe: ñòðîãî â øèðèíó ìîäàëêè */
.spm-ad ins.adsbygoogle{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
}

.spm-ad iframe{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
}

/* ÷óòü áîëüøå ðåçåðâà, ÷òîáû êðåàòèâ íå ÒëîìàëÓ ïîòîê */
.spm-ad{ min-height: 100px; }
@media (max-width: 420px){
  .spm-ad{ min-height: 95px; }
}