/* ===========================
   ShopFusion — Sorteo (CSS)
   =========================== */

:root{
  --sf-bg:#000;
  --sf-surface:#0b0b0b;
  --sf-text:#fff;
  --sf-muted:#c9c9c9;
  --sf-accent:#FF6A00;
  --sf-accent-2:#FF9500;
  --sf-radius:16px;
}

#sorteo-card{
  position: relative;
  padding: clamp(40px, 6vw, 80px) 20px;
  background: radial-gradient(60% 60% at 50% 20%, rgba(255,106,0,.08), transparent 60%), #000;
  overflow: hidden;
  isolation: isolate;
}

.sorteo-card-container{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(18px, 3.5vw, 34px);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  background: linear-gradient(145deg, #0a0a0a, #121212);
  border: 1px solid rgba(255,106,0,.35);
  border-radius: var(--sf-radius);
  box-shadow: 0 0 30px rgba(255,106,0,.25);
  padding: clamp(16px, 3vw, 28px);
}

@media (max-width: 980px){
  .sorteo-card-container{ grid-template-columns: 1fr; }
}

.sorteo-card-container::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent, rgba(255,106,0,.25), transparent);
  transform: translateX(-100%);
  transition: transform .8s ease;
  pointer-events:none;
}
.sorteo-card-container:hover::before{ transform: translateX(100%); }

/* Imagen premio */
.sorteo-img{
  width:100%; height: 380px; object-fit: cover;
  border-radius: calc(var(--sf-radius) - 6px);
  box-shadow: 0 0 22px rgba(255,106,0,.25);
  border: 1px solid rgba(255,106,0,.35);
}

/* Info */
.sorteo-info h2{
  font-family: 'Orbitron', system-ui, sans-serif;
  margin: 0 0 10px;
  text-shadow: 0 0 22px rgba(255,106,0,.6);
}
.sorteo-text, .sorteo-desc, .sorteo-precio{
  color: var(--sf-muted);
  margin: 8px 0;
  line-height: 1.6;
}
.sorteo-info .highlight{
  color:#fff; font-weight:700;
  text-shadow: 0 0 16px rgba(255,106,0,.6);
}

/* PayPal contenedor */
#paypal-button-container{
  margin-top: 14px;
  padding: 10px;
  background: #0e0e0e;
  border: 1px solid rgba(255,106,0,.35);
  border-radius: 12px;
  box-shadow: inset 0 0 12px rgba(255,106,0,.08);
}

/* Modal registro */
#registro-modal{
  position: fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
  z-index: 1000;
}

#registro-modal.active{ display:flex; }

#registro-modal .modal-content{
  width: min(520px, 92%);
  background: linear-gradient(180deg, #0a0a0a, #101010);
  color: #fff;
  border: 1px solid rgba(255,106,0,.35);
  border-radius: 16px;
  box-shadow: 0 0 34px rgba(255,106,0,.5);
  padding: 20px;
  transform: translateY(18px) scale(.98);
  opacity: 0;
}

#registro-modal .btn-cerrar{
  position:absolute; top:10px; right:10px;
  background: transparent; border: 0; color:#fff; cursor:pointer;
  width:38px; height:38px; border-radius: 999px;
  border:1px solid rgba(255,106,0,.45);
  transition:.25s;
}
#registro-modal .btn-cerrar:hover{
  background: rgba(255,106,0,.12);
}

#registro-modal .form-group{
  display:grid; gap: 6px; margin: 10px 0;
}
#registro-modal input{
  background: #0e0e0e; color:#fff;
  border:1px solid rgba(255,106,0,.35);
  border-radius: 10px; padding: 10px 12px; outline: 0;
  transition: .25s;
}
#registro-modal input:focus{
  border-color: var(--sf-accent);
  box-shadow: 0 0 16px rgba(255,106,0,.28);
}

#registro-modal .btn-enviar{
  width: 100%; margin-top: 10px;
  background: linear-gradient(90deg, var(--sf-accent), var(--sf-accent-2));
  color:#000; font-weight:800; letter-spacing:.3px;
  border: 0; padding: 12px 16px; border-radius: 12px; cursor:pointer;
  box-shadow: 0 0 18px rgba(255,106,0,.4);
}
#registro-modal .btn-enviar:active{ transform: scale(.98); }

/* Detalles de “brillo” del bloque principal */
.sorteo-card-container{
  animation: s_pulse 4s ease-in-out infinite;
}
@keyframes s_pulse{
  0%,100%{ box-shadow: 0 0 26px rgba(255,106,0,.25); }
  50%    { box-shadow: 0 0 44px rgba(255,106,0,.55); }
}

/* Cinta de “ticket” decorativa (opcional) */
#sorteo-card::after{
  content:"SORTEO • SHOPFUSION • SORTEO • SHOPFUSION • ";
  position:absolute; left:-10%; bottom: -18px;
  font: 700 12px/1.8 'Orbitron', system-ui, sans-serif;
  color: rgba(255,255,255,.12);
  letter-spacing: 2px;
  white-space: nowrap;
  width: 120%;
  transform: rotate(-2deg);
  border-top: 1px dashed rgba(255,106,0,.25);
  padding-top: 8px;
  animation: ticker 22s linear infinite;
}
@keyframes ticker{
  to{ transform: translateX(-20%) rotate(-2deg); }
}
/* ===== PayPal Styling (wrapper) ===== */
.paypal-wrap{
  margin-top: 14px;
  background: #0e0e0e;
  border: 1px solid rgba(255,106,0,.35);
  border-radius: 14px;
  padding: 12px;
  box-shadow: inset 0 0 12px rgba(255,106,0,.08), 0 0 18px rgba(255,106,0,.25);
}

.paypal-head{
  display:flex; align-items:center; gap:10px;
  color:#fff; font-weight:600; margin-bottom:10px;
}
.paypal-head .shield{
  display:inline-grid; place-items:center;
  width:28px; height:28px; border-radius:999px;
  border:1px solid rgba(255,106,0,.45);
  background:#0f0f0f;
  box-shadow: 0 0 10px rgba(255,106,0,.18);
}

/* Contenedor de PayPal con altura suficiente para 2 botones */
#paypal-button-container{
  position: relative;
  width: 100%;
  min-height: 120px;          /* ↗️ suficiente para PayPal + Tarjeta */
  border-radius: 10px;
  overflow: visible;           /* ↗️ NO recortar el segundo botón ni tooltips */
}

/* Cuando aún no cargan los iframes, reserva espacio visual */
#paypal-button-container.loading::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,106,0,.06) 0, rgba(255,106,0,.18) 50%, rgba(255,106,0,.06) 100%);
  animation: paypalShimmer 1.2s linear infinite;
}

/* Evita que otros elementos tapen el iframe */
.paypal-wrap, #paypal-button-container{ z-index: 2000; }


/* shimmer de carga mientras llega el iframe */
#paypal-button-container.loading::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,106,0,.06) 0, rgba(255,106,0,.18) 50%, rgba(255,106,0,.06) 100%);
  animation: paypalShimmer 1.2s linear infinite;
}
@keyframes paypalShimmer { to { transform: translateX(100%); } }

.paypal-badges{
  display:flex; gap:10px; margin-top:10px; opacity:.7; font-size:18px;
}

/* asegúrate de que nada tape el iframe (ads, etc.) */
.paypal-wrap, #paypal-button-container{ z-index: 10; }


/* =========================================================
   ShopFusion — Sorteo (LIGHT THEME)  Activo con <html data-theme="light">
   ========================================================= */
:root[data-theme="light"]{
  --sf-bg:#fafafa;
  --sf-surface:#ffffff;
  --sf-surface-2:#f6f6f6;
  --sf-text:#0b0b0b;
  --sf-muted:#444;
  --sf-accent:#FF6A00;
  --sf-accent-2:#FF9500;

  --sf-border: rgba(0,0,0,.12);
  --sf-shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --sf-shadow-md: 0 8px 24px rgba(0,0,0,.08);
  --sf-shadow-lg: 0 18px 48px rgba(0,0,0,.12);
}

/* Sección raíz */
:root[data-theme="light"] #sorteo-card{
  background:
    radial-gradient(60% 60% at 50% 20%, rgba(255,106,0,.10), transparent 60%),
    var(--sf-bg);
}

/* Contenedor principal */
:root[data-theme="light"] .sorteo-card-container{
  background: linear-gradient(145deg, #ffffff, #f7f7f7);
  border: 1px solid var(--sf-border);
  box-shadow: var(--sf-shadow-md);
}
:root[data-theme="light"] .sorteo-card-container::before{
  background: linear-gradient(120deg, transparent, rgba(255,106,0,.18), transparent);
}

/* Imagen premio */
:root[data-theme="light"] .sorteo-img{
  border: 1px solid var(--sf-border);
  box-shadow: var(--sf-shadow-sm);
}

/* Tipos y texto */
:root[data-theme="light"] .sorteo-info h2{
  color: var(--sf-text);
  text-shadow: 0 0 14px rgba(255,106,0,.25);
}
:root[data-theme="light"] .sorteo-text,
:root[data-theme="light"] .sorteo-desc,
:root[data-theme="light"] .sorteo-precio{
  color: var(--sf-muted);
}
:root[data-theme="light"] .sorteo-info .highlight{
  color: var(--sf-text);
  text-shadow: 0 0 10px rgba(255,106,0,.22);
}

/* PayPal wrapper + container */
:root[data-theme="light"] .paypal-wrap{
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  box-shadow: var(--sf-shadow-sm), inset 0 0 0 rgba(0,0,0,0);
}
:root[data-theme="light"] #paypal-button-container{
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  min-height: 120px;
  border-radius: 10px;
  /* más bajo que el buscador (que está en 4000) */
  z-index: 1000;
}
:root[data-theme="light"] #paypal-button-container.loading::before{
  background: linear-gradient(90deg,
    rgba(0,0,0,.04) 0,
    rgba(0,0,0,.08) 50%,
    rgba(0,0,0,.04) 100%);
}

/* Badges de métodos/seguridad */
:root[data-theme="light"] .paypal-head{ color: var(--sf-text); }
:root[data-theme="light"] .paypal-head .shield{
  border:1px solid var(--sf-border);
  background:#fff;
  box-shadow: var(--sf-shadow-sm);
}
:root[data-theme="light"] .paypal-badges{ opacity:.85; }

/* Modal registro */
:root[data-theme="light"] #registro-modal{
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}
:root[data-theme="light"] #registro-modal .modal-content{
  background: var(--sf-surface);
  color: var(--sf-text);
  border: 1px solid var(--sf-border);
  box-shadow: var(--sf-shadow-lg);
}
:root[data-theme="light"] #registro-modal .btn-cerrar{
  color: var(--sf-text);
  border:1px solid var(--sf-border);
}
:root[data-theme="light"] #registro-modal .btn-cerrar:hover{
  background: rgba(0,0,0,.06);
}
:root[data-theme="light"] #registro-modal .form-group input{
  background: var(--sf-surface-2);
  color: var(--sf-text);
  border:1px solid var(--sf-border);
}
:root[data-theme="light"] #registro-modal .form-group input:focus{
  border-color: var(--sf-accent);
  box-shadow: 0 0 14px rgba(255,106,0,.22);
}
:root[data-theme="light"] #registro-modal .btn-enviar{
  background: linear-gradient(90deg, var(--sf-accent), var(--sf-accent-2));
  color:#fff;
  box-shadow: var(--sf-shadow-md);
}

/* Pulso/animación del contenedor */
@keyframes s_pulse_light{
  0%,100%{ box-shadow: 0 0 26px rgba(255,106,0,.20); }
  50%    { box-shadow: 0 0 44px rgba(255,106,0,.35); }
}
:root[data-theme="light"] .sorteo-card-container{
  animation: s_pulse_light 4s ease-in-out infinite;
}

/* Cinta decorativa inferior */
:root[data-theme="light"] #sorteo-card::after{
  color: rgba(0,0,0,.10);
  border-top: 1px dashed rgba(0,0,0,.15);
}

/* Prioridad de capas (buscar > sorteo/PayPal) */
:root[data-theme="light"] #search-section{ position:relative; z-index:4000; }
:root[data-theme="light"] #search-section .search-container{ position:relative; z-index:4001; }
:root[data-theme="light"] #search-section .search-results{ position:absolute; z-index:4002; }