/*!
 * WebCoopTHC Modal Pro — Frontend Stylesheet
 * Version 1.0.0 · https://coopthc.org
 */

/* ══════════════════════════════════════════════════════
   OVERLAY
══════════════════════════════════════════════════════ */

.wcthc-overlay {
  position: fixed;
  inset: 0;
  z-index: 999900;
  background: var(--wcthc-ov-c, #000);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--wcthc-dur, 300ms) ease;
  -webkit-backdrop-filter: blur(var(--wcthc-ov-b, 0px));
          backdrop-filter: blur(var(--wcthc-ov-b, 0px));
}

.wcthc-overlay.wcthc-ov--on {
  opacity: var(--wcthc-ov-o, 0.5);
  pointer-events: auto;
}

/* ══════════════════════════════════════════════════════
   MODAL WRAPPER
══════════════════════════════════════════════════════ */

.wcthc-modal {
  position: fixed;
  inset: 0;
  z-index: 999901;
  display: flex;
  flex-direction: column;
  align-items: var(--wcthc-ph, center) !important; /* !important: previene override theme */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  pointer-events: none;
  visibility: hidden;
  box-sizing: border-box;
}

/* Compensa la barra admin WP (32px desktop, 46px mobile) */
.admin-bar .wcthc-modal { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .wcthc-modal { top: 46px; }
}

.wcthc-modal.wcthc-modal--on,
.wcthc-modal.wcthc-modal--out {
  visibility: visible;
  pointer-events: auto;
}

/* ══════════════════════════════════════════════════════
   MODAL BOX (inner container)
══════════════════════════════════════════════════════ */

.wcthc-modal__box {
  position: relative;
  background: var(--wcthc-bg, #fff);
  border-radius: var(--wcthc-box-r, 14px);
  box-shadow: var(--wcthc-box-sh, 0 24px 80px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.08));
  width:      var(--wcthc-w,   100%);
  max-width:  var(--wcthc-mxw, 600px);
  height:     var(--wcthc-h,   auto);
  max-height: var(--wcthc-mxh, 90vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
  will-change: transform, opacity;
  /* !important previene override da theme CSS (es. * { margin:0 }) */
  margin-top:    var(--wcthc-mt, auto) !important;
  margin-bottom: var(--wcthc-mb, auto) !important;
  /* scrollbar sottile */
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.18) transparent;
}

.wcthc-modal__box::-webkit-scrollbar          { width: 5px; }
.wcthc-modal__box::-webkit-scrollbar-track    { background: transparent; }
.wcthc-modal__box::-webkit-scrollbar-thumb    { background: rgba(0,0,0,.2); border-radius: 5px; }
.wcthc-modal__box::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.35); }

/* Fullscreen removes radius */
.wcthc-modal[style*="100vw"] .wcthc-modal__box {
  border-radius: 0;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
}

/* ══════════════════════════════════════════════════════
   CLOSE BUTTON
══════════════════════════════════════════════════════ */

.wcthc-modal__x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.08);
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: background .15s, transform .18s;
}

.wcthc-modal__x:hover   { background: rgba(0,0,0,.16); transform: rotate(90deg); }
.wcthc-modal__x:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ══════════════════════════════════════════════════════
   CONTENT AREA
══════════════════════════════════════════════════════ */

.wcthc-modal__body {
  padding: var(--wcthc-pad, 30px);
}

.wcthc-modal__body > *:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════
   ANIMATIONS — shared pattern
   .wcthc-modal--on  → enter keyframe
   .wcthc-modal--out → leave keyframe
══════════════════════════════════════════════════════ */

/* ── FADE ─────────────────────────────────────────── */
@keyframes wcIn-fade  { from { opacity:0 }              to { opacity:1 } }
@keyframes wcOut-fade { from { opacity:1 }              to { opacity:0 } }

.wcthc-anim-fade .wcthc-modal__box             { opacity:0 }
.wcthc-anim-fade.wcthc-modal--on  .wcthc-modal__box { animation: wcIn-fade  var(--wcthc-dur,300ms) ease forwards }
.wcthc-anim-fade.wcthc-modal--out .wcthc-modal__box { animation: wcOut-fade var(--wcthc-dur,300ms) ease forwards }

/* ── ZOOM ─────────────────────────────────────────── */
@keyframes wcIn-zoom  { from { opacity:0; transform:scale(.82) }  to { opacity:1; transform:scale(1) } }
@keyframes wcOut-zoom { from { opacity:1; transform:scale(1) }    to { opacity:0; transform:scale(.82) } }

.wcthc-anim-zoom .wcthc-modal__box             { opacity:0; transform:scale(.82) }
.wcthc-anim-zoom.wcthc-modal--on  .wcthc-modal__box { animation: wcIn-zoom  var(--wcthc-dur,300ms) cubic-bezier(.175,.885,.32,1.275) forwards }
.wcthc-anim-zoom.wcthc-modal--out .wcthc-modal__box { animation: wcOut-zoom var(--wcthc-dur,300ms) ease forwards }

/* ── SLIDE TOP ────────────────────────────────────── */
@keyframes wcIn-slide-top  { from { opacity:0; transform:translateY(-70px) }  to { opacity:1; transform:translateY(0) } }
@keyframes wcOut-slide-top { from { opacity:1; transform:translateY(0) }       to { opacity:0; transform:translateY(-70px) } }

.wcthc-anim-slide-top .wcthc-modal__box             { opacity:0; transform:translateY(-70px) }
.wcthc-anim-slide-top.wcthc-modal--on  .wcthc-modal__box { animation: wcIn-slide-top  var(--wcthc-dur,300ms) ease forwards }
.wcthc-anim-slide-top.wcthc-modal--out .wcthc-modal__box { animation: wcOut-slide-top var(--wcthc-dur,300ms) ease forwards }

/* ── SLIDE BOTTOM ─────────────────────────────────── */
@keyframes wcIn-slide-bottom  { from { opacity:0; transform:translateY(70px) }  to { opacity:1; transform:translateY(0) } }
@keyframes wcOut-slide-bottom { from { opacity:1; transform:translateY(0) }      to { opacity:0; transform:translateY(70px) } }

.wcthc-anim-slide-bottom .wcthc-modal__box             { opacity:0; transform:translateY(70px) }
.wcthc-anim-slide-bottom.wcthc-modal--on  .wcthc-modal__box { animation: wcIn-slide-bottom  var(--wcthc-dur,300ms) ease forwards }
.wcthc-anim-slide-bottom.wcthc-modal--out .wcthc-modal__box { animation: wcOut-slide-bottom var(--wcthc-dur,300ms) ease forwards }

/* ── SLIDE LEFT ───────────────────────────────────── */
@keyframes wcIn-slide-left  { from { opacity:0; transform:translateX(-90px) }  to { opacity:1; transform:translateX(0) } }
@keyframes wcOut-slide-left { from { opacity:1; transform:translateX(0) }       to { opacity:0; transform:translateX(-90px) } }

.wcthc-anim-slide-left .wcthc-modal__box             { opacity:0; transform:translateX(-90px) }
.wcthc-anim-slide-left.wcthc-modal--on  .wcthc-modal__box { animation: wcIn-slide-left  var(--wcthc-dur,300ms) ease forwards }
.wcthc-anim-slide-left.wcthc-modal--out .wcthc-modal__box { animation: wcOut-slide-left var(--wcthc-dur,300ms) ease forwards }

/* ── SLIDE RIGHT ──────────────────────────────────── */
@keyframes wcIn-slide-right  { from { opacity:0; transform:translateX(90px) }  to { opacity:1; transform:translateX(0) } }
@keyframes wcOut-slide-right { from { opacity:1; transform:translateX(0) }      to { opacity:0; transform:translateX(90px) } }

.wcthc-anim-slide-right .wcthc-modal__box             { opacity:0; transform:translateX(90px) }
.wcthc-anim-slide-right.wcthc-modal--on  .wcthc-modal__box { animation: wcIn-slide-right  var(--wcthc-dur,300ms) ease forwards }
.wcthc-anim-slide-right.wcthc-modal--out .wcthc-modal__box { animation: wcOut-slide-right var(--wcthc-dur,300ms) ease forwards }

/* ── ROTATE ───────────────────────────────────────── */
@keyframes wcIn-rotate  { from { opacity:0; transform:rotate(-14deg) scale(.9) }  to { opacity:1; transform:rotate(0) scale(1) } }
@keyframes wcOut-rotate { from { opacity:1; transform:rotate(0) scale(1) }          to { opacity:0; transform:rotate(14deg) scale(.9) } }

.wcthc-anim-rotate .wcthc-modal__box             { opacity:0 }
.wcthc-anim-rotate.wcthc-modal--on  .wcthc-modal__box { animation: wcIn-rotate  var(--wcthc-dur,300ms) ease forwards }
.wcthc-anim-rotate.wcthc-modal--out .wcthc-modal__box { animation: wcOut-rotate var(--wcthc-dur,300ms) ease forwards }

/* ── FLIP ─────────────────────────────────────────── */
@keyframes wcIn-flip  { from { opacity:0; transform:perspective(700px) rotateY(-90deg) }  to { opacity:1; transform:perspective(700px) rotateY(0) } }
@keyframes wcOut-flip { from { opacity:1; transform:perspective(700px) rotateY(0) }        to { opacity:0; transform:perspective(700px) rotateY(90deg) } }

.wcthc-anim-flip .wcthc-modal__box             { opacity:0 }
.wcthc-anim-flip.wcthc-modal--on  .wcthc-modal__box { animation: wcIn-flip  var(--wcthc-dur,300ms) ease forwards }
.wcthc-anim-flip.wcthc-modal--out .wcthc-modal__box { animation: wcOut-flip var(--wcthc-dur,300ms) ease forwards }

/* ── SCALE ────────────────────────────────────────── */
@keyframes wcIn-scale  { from { opacity:0; transform:scale(1.18) }  to { opacity:1; transform:scale(1) } }
@keyframes wcOut-scale { from { opacity:1; transform:scale(1) }      to { opacity:0; transform:scale(1.18) } }

.wcthc-anim-scale .wcthc-modal__box             { opacity:0 }
.wcthc-anim-scale.wcthc-modal--on  .wcthc-modal__box { animation: wcIn-scale  var(--wcthc-dur,300ms) ease forwards }
.wcthc-anim-scale.wcthc-modal--out .wcthc-modal__box { animation: wcOut-scale var(--wcthc-dur,300ms) ease forwards }

/* ── BLUR ─────────────────────────────────────────── */
@keyframes wcIn-blur  { from { opacity:0; filter:blur(14px) }  to { opacity:1; filter:blur(0) } }
@keyframes wcOut-blur { from { opacity:1; filter:blur(0) }      to { opacity:0; filter:blur(14px) } }

.wcthc-anim-blur .wcthc-modal__box             { opacity:0 }
.wcthc-anim-blur.wcthc-modal--on  .wcthc-modal__box { animation: wcIn-blur  var(--wcthc-dur,300ms) ease forwards }
.wcthc-anim-blur.wcthc-modal--out .wcthc-modal__box { animation: wcOut-blur var(--wcthc-dur,300ms) ease forwards }

/* ── BOUNCE ───────────────────────────────────────── */
@keyframes wcIn-bounce {
  0%   { opacity:0; transform:scale(.3) }
  55%  { opacity:1; transform:scale(1.06) }
  75%  { transform:scale(.96) }
  100% { transform:scale(1) }
}
@keyframes wcOut-bounce { from { opacity:1; transform:scale(1) } to { opacity:0; transform:scale(.3) } }

.wcthc-anim-bounce .wcthc-modal__box             { opacity:0 }
.wcthc-anim-bounce.wcthc-modal--on  .wcthc-modal__box { animation: wcIn-bounce  var(--wcthc-dur,300ms) cubic-bezier(.215,.61,.355,1) forwards }
.wcthc-anim-bounce.wcthc-modal--out .wcthc-modal__box { animation: wcOut-bounce var(--wcthc-dur,300ms) ease forwards }

/* ══════════════════════════════════════════════════════
   RESPONSIVE — mobile sheet style on small screens
══════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .wcthc-modal {
    padding: 0;
    align-items: stretch;
  }
  .wcthc-modal__box {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 18px 18px 0 0;
    max-height: 88vh !important;
    margin-top: auto;   /* spinge il box in basso → sheet style */
    margin-bottom: 0;
  }
}

/* ══════════════════════════════════════════════════════
   ACCESSIBILITY
══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .wcthc-modal__box,
  .wcthc-overlay { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* Focus visible ring inside modal */
.wcthc-modal__box :focus-visible {
  outline: 2px solid #2271b1;
  outline-offset: 2px;
}