/* =========================================================
   store-locator.css — estilos del flujo "Mi Jaher más cercano"
   (botón del hero, panel de resultado y ventanas SweetAlert2
   de la sección Tiendas). Antes vivía como <style> inline en
   index.html.
   ========================================================= */

.cercano-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; }
.btn-cercano, .btn-quitar {
     border:0; border-radius:30px; padding:12px 24px; font-weight:700; font-size:16px;
     cursor:pointer; transition:transform .15s, box-shadow .15s, opacity .15s;
}
.btn-cercano { background:#0575E6; color:#fff; box-shadow:0 4px 14px rgba(5,117,230,.35); }
.btn-cercano:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(5,117,230,.45); }
.btn-cercano:disabled { opacity:.6; cursor:wait; transform:none; }
.btn-quitar { background:#eef1f5; color:#333; display:none; }
.cercano-status { font-size:14px; color:#555; }
.cercano-status.error { color:#c0392b; font-weight:600; }
.cercano-panel {
     display:none; margin-bottom:12px; padding:16px 18px; border-radius:12px;
     background:#f4f9ff; border:1px solid #cfe3fb;
}
.cercano-panel h4 { margin:0 0 4px; color:#0575E6; font-weight:700; }
.cercano-panel .meta { font-size:18px; font-weight:700; margin:6px 0 10px; }
.cercano-panel a.gmaps { display:inline-block; margin-right:14px; font-weight:600; }
.cercano-panel details { margin-top:10px; }
.cercano-panel ol { margin:8px 0 0; padding-left:20px; max-height:220px; overflow:auto; font-size:14px; }

/* ---------- Botón del inicio (hero) ---------- */
.hero-cta .btn-cercano {
     background:#e30613; font-size:18px; padding:16px 34px;
     box-shadow:0 8px 24px rgba(227,6,19,.45);
     animation: jhPulseBtn 2.6s ease-in-out infinite;
}
.hero-cta .btn-cercano:hover { box-shadow:0 10px 28px rgba(227,6,19,.55); }
@keyframes jhPulseBtn {
     0%,100% { box-shadow:0 8px 24px rgba(227,6,19,.45), 0 0 0 0 rgba(227,6,19,.45); }
     50%     { box-shadow:0 8px 24px rgba(227,6,19,.45), 0 0 0 14px rgba(227,6,19,0); }
}

/* ---------- Ventanas SweetAlert "Mi Jaher más cercano" ---------- */
.swal2-popup.jh-swal { border-radius:26px; padding:30px 24px 24px; width:32em; max-width:94vw; }
.jh-swal-title { color:#0b2a4a; font-weight:800; font-size:26px; line-height:1.2; }
.jh-swal-html { color:#3a4a5c; font-size:16px; }
.jh-btn {
     border:0; border-radius:30px; padding:13px 26px; font-weight:700; font-size:16px;
     margin:4px; cursor:pointer; transition:transform .15s, box-shadow .15s;
}
.jh-btn:hover { transform:translateY(-1px); }
.jh-btn-primary { background:linear-gradient(135deg,#1a8cff,#0575E6); color:#fff; box-shadow:0 8px 20px rgba(5,117,230,.4); }
.jh-btn-ghost   { background:#eef1f5; color:#333; }
.jh-btn-dark    { background:#1f2d3d; color:#fff; }

.jh-radar { position:relative; width:130px; height:130px; margin:4px auto 6px; display:flex; align-items:center; justify-content:center; }
.jh-radar span {
     position:absolute; inset:0; border-radius:50%; border:2px solid rgba(5,117,230,.5);
     animation: jhRadar 2.4s ease-out infinite;
}
.jh-radar span:nth-child(2) { animation-delay:.8s; }
.jh-radar span:nth-child(3) { animation-delay:1.6s; }
@keyframes jhRadar { 0% { transform:scale(.35); opacity:.95; } 100% { transform:scale(1.15); opacity:0; } }
.jh-pin {
     position:relative; width:66px; height:66px; border-radius:50%; color:#fff; font-size:30px;
     background:linear-gradient(135deg,#1a8cff,#0575E6); display:flex; align-items:center; justify-content:center;
     box-shadow:0 10px 24px rgba(5,117,230,.5); animation: jhBounce 1.6s ease-in-out infinite;
}
@keyframes jhBounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }

.jh-lead { margin:6px 0 0; }
.jh-points { list-style:none; padding:0; margin:14px 0 6px; display:flex; flex-direction:column; gap:8px; text-align:left; }
.jh-points li { background:#f1f7ff; border-radius:12px; padding:10px 14px; font-size:15px; color:#28405c; }
.jh-points i { color:#0575E6; width:24px; text-align:center; margin-right:6px; }
.jh-hint { font-size:13px; color:#7a8797; margin:10px 0 0; }
.jh-steps { text-align:left; padding-left:22px; margin:10px 0 0; }
.jh-steps li { margin-bottom:6px; }

.jh-flecha { font-size:46px; color:#0575E6; line-height:1; margin:0 0 6px; display:inline-block; transform:rotate(-40deg); animation: jhFlecha 1.1s ease-in-out infinite; }
@keyframes jhFlecha { 0%,100% { transform:rotate(-40deg) translateY(0); } 50% { transform:rotate(-40deg) translateY(-10px); } }

.jh-result { text-align:center; }
.jh-badge {
     width:70px; height:70px; margin:2px auto 10px; border-radius:50%; color:#fff; font-size:30px;
     background:linear-gradient(135deg,#ff3b47,#e30613); display:flex; align-items:center; justify-content:center;
     box-shadow:0 10px 24px rgba(227,6,19,.4); animation: jhBounce 1.8s ease-in-out infinite;
}
.jh-store { font-size:24px; font-weight:800; color:#0575E6; }
.jh-addr  { margin-top:4px; color:#5b6b7d; font-size:15px; }
.jh-stats { display:flex; gap:12px; margin-top:16px; }
.jh-stats > div { flex:1; background:#f1f7ff; border-radius:16px; padding:14px 8px; display:flex; flex-direction:column; align-items:center; gap:2px; }
.jh-stats i { color:#0575E6; font-size:20px; margin-bottom:2px; }
.jh-stats b { font-size:22px; color:#0b2a4a; }
.jh-stats small { color:#7a8797; font-size:13px; }

/* ---------- Ventana "¡Un paso más!" (guía hacia el aviso del navegador) ---------- */
.jh-arrow { display:none; }
@media (min-width: 768px) {
     .jh-arrow {
          display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin:-10px 0 4px -6px;
          color:#0575E6; font-weight:800; font-size:14px; animation: jhArrow 1.2s ease-in-out infinite;
     }
     .jh-arrow svg { transform:rotate(-38deg); transform-origin:center; }
     .jh-arrow span { margin-left:2px; letter-spacing:.3px; }
}
@keyframes jhArrow { 0%,100% { transform:translate(0,0); } 50% { transform:translate(-6px,-9px); } }
.jh-mock { margin:14px auto 12px; max-width:340px; background:#f1f7ff; border:1px solid #cfe3fb; border-radius:16px; padding:14px 16px; text-align:left; box-shadow:0 6px 18px rgba(5,117,230,.12); }
.jh-mock-q { font-weight:700; color:#0b2a4a; font-size:15px; line-height:1.3; }
.jh-mock-q i { color:#0575E6; margin-right:6px; }
.jh-mock-btns { display:flex; gap:8px; margin-top:12px; justify-content:flex-end; }
.jh-mock-btns span { border-radius:8px; padding:7px 16px; font-size:14px; font-weight:700; }
.jh-mock-allow { background:#0575E6; color:#fff; animation: jhAllow 1.4s ease-in-out infinite; }
.jh-mock-block { background:#e4e8ee; color:#4a5766; }
@keyframes jhAllow { 0%,100% { box-shadow:0 0 0 0 rgba(5,117,230,.55); } 50% { box-shadow:0 0 0 9px rgba(5,117,230,0); } }

.swal2-select.jh-select { border-radius:12px; padding:10px 14px; font-size:16px; width:92%; max-width:92%; margin:14px auto 0; border:1px solid #cfe3fb; }
.swal2-radio.jh-radio { display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left; margin:14px auto 0; max-height:260px; overflow:auto; width:100%; }
.swal2-radio.jh-radio label { background:#f1f7ff; border-radius:12px; padding:10px 14px; width:100%; font-size:14px; cursor:pointer; }