/* ================================
   THEME ADAPTIVE (CSS VARIABLES)
   Puedes sobreescribir en tu tema:
   .wpwar-wrap { --wpwar-accent: #f5c400; --wpwar-bg:#000; --wpwar-text:#fff; --wpwar-card:#0b0b0b; --wpwar-muted:#bbb; --wpwar-font: inherit; }
================================ */
.wpwar-wrap{
  --wpwar-bg:#000;
  --wpwar-accent:#f5c400;
  --wpwar-text:#fff;
  --wpwar-muted:#bbb;
  --wpwar-card:#0b0b0b;
  --wpwar-border:#222;
  --wpwar-btn-bg:#000;
  --wpwar-btn-taken-bg:#111;
  --wpwar-btn-taken-border:#333;
  --wpwar-btn-taken-text:#555;
  --wpwar-wa:#25D366;
  --wpwar-font: inherit;

  background: var(--wpwar-bg);
  color: var(--wpwar-text);
  font-family: var(--wpwar-font);
  padding: 12px 10px;
  border-radius: 14px;
  margin: 0 auto;
  width: 100%;
  max-width: 980px;
}
/* Header */
.wpwar-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.wpwar-title {
  color: var(--wpwar-accent);
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}

.wpwar-timer {
  color: #ccc;
  font-size: 13px;
  font-weight: 700;
}

/* Remaining bar */
.wpwar-remaining {
  width: 100%;
  margin: 10px auto 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--wpwar-card);
  border: 1px solid var(--wpwar-border);
  color: var(--wpwar-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  max-width: 900px;
}
.wpwar-remaining .label { color: var(--wpwar-muted); font-weight: 700; }
.wpwar-remaining .count { color: var(--wpwar-accent); font-size: 16px; }
.wpwar-remaining.low .count { color: #ff3b3b; }

/* Grid */
.wpwar-grid {
  display: grid;
  gap: 10px;
  width: 100%;
  margin: 0 auto;
  /* Esto hace que en PC se vea centrado como tablet */
  max-width: 900px;
  justify-content: center;
}

/* Number buttons */
.wpwar-number {
  background: #000;
  border: 2px solid var(--wpwar-accent);
  color: var(--wpwar-accent);
  font-size: 14px;
  font-weight: 900;
  padding: 12px 0;
  border-radius: 10px;
  min-height: 48px;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
  will-change: transform;
}

.wpwar-number:active { transform: scale(0.96); }

@media (hover: hover) {
  .wpwar-number:hover { background: var(--wpwar-accent); color: var(--wpwar-bg); }
}

.wpwar-number.taken {
  background: var(--wpwar-btn-taken-bg);
  border-color: var(--wpwar-btn-taken-border);
  color: var(--wpwar-btn-taken-text);
  cursor: not-allowed;
}

/* Tap pop + glow */
.wpwar-number.wpwar-picked-anim { animation: wpwarPop .22s ease-out; }
@keyframes wpwarPop {
  0%   { transform: scale(1); box-shadow: 0 0 0 rgba(245,196,0,0); }
  60%  { transform: scale(1.04); box-shadow: 0 0 18px rgba(245,196,0,.45); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(245,196,0,0); }
}

/* Last available highlight */
.wpwar-number.wpwar-last {
  border-color: #ff3b3b !important;
  color: #ff3b3b !important;
  box-shadow: 0 0 16px rgba(255,59,59,.25);
}
@keyframes wpwarPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
.wpwar-number.wpwar-last:not(.taken) {
  animation: wpwarPulse 1.2s ease-in-out infinite;
}

/* Messages */
.wpwar-msg {
  color: #ddd;
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
}

/* Modal */
.wpwar-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.wpwar-modal-card {
  background: #000;
  border: 2px solid var(--wpwar-accent);
  border-radius: 14px;
  max-width: 520px;
  width: 100%;
  padding: 14px;
  color: var(--wpwar-text);
}

.wpwar-modal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.wpwar-modal-title {
  color: var(--wpwar-accent);
  font-size: 16px;
  font-weight: 900;
}

.wpwar-close {
  border: none;
  background: transparent;
  color: var(--wpwar-accent);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

/* Form */
.wpwar-form label {
  display: block;
  color: var(--wpwar-text);
  font-size: 13px;
  font-weight: 800;
  margin-top: 10px;
}
.wpwar-form input {
  width: 100%;
  background: var(--wpwar-btn-taken-bg);
  border: 1px solid #333;
  color: var(--wpwar-text);
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  margin-top: 6px;
}
.wpwar-form input::placeholder { color: #777; }

.wpwar-submit {
  margin-top: 12px;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: var(--wpwar-wa);
  color: var(--wpwar-bg);
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
}
.wpwar-small { margin-top: 8px; font-size: 12px; opacity: .85; }

/* ================================
   RESPONSIVE (fix Elementor breakpoints)
   Elementor "Mobile Portrait (up to 767px)"
================================ */

/* MÓVIL: hasta 767px -> 4 columnas, compacto */
@media (max-width: 767px) {
  .wpwar-wrap { padding: 12px 10px; max-width: 100%; border-radius: 14px; }
  .wpwar-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 8px; max-width: 520px; }
  .wpwar-number { font-size: 13px; padding: 10px 0; min-height: 44px; border-radius: 10px; }
  .wpwar-title { font-size: 17px; }
  .wpwar-remaining { max-width: 520px; }
}

/* TABLET: 768 - 1024 -> 5 columnas, centrado */
@media (min-width: 768px) and (max-width: 1024px) {
  .wpwar-grid { grid-template-columns: repeat(5, 1fr) !important; max-width: 720px; }
  .wpwar-remaining { max-width: 720px; }
}

/* PC: >= 1025 -> NO forzamos columnas (usa el columns="" del shortcode)
   Solo centramos como tablet y ampliamos el ancho */
@media (min-width: 1025px) {
  .wpwar-grid { max-width: 900px; }
  .wpwar-remaining { max-width: 900px; }
}


/* ================================
   MOBILE HARD FIX (no horizontal overflow)
================================ */
@media (max-width: 767px) {
  .wpwar-wrap, .wpwar-wrap * { box-sizing: border-box; }
  .wpwar-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .wpwar-remaining {
    max-width: 100% !important;
    width: 100% !important;
  }

  .wpwar-grid {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 cols = garantiza que nunca desborde */
    justify-content: center;
  }

  .wpwar-number {
    min-width: 0 !important;
  }
}