/* Okapi'SW — Instalaciones: carrusel de fotos, vista ampliada e imagen revelada. */

/* ---------- Instalaciones: carrusel de fotos (puntos de corte del original) ---------- */
.fx-gallery-track { transition-timing-function: cubic-bezier(.4,0,.2,1); will-change: transform; }
.fx-gallery-arrow:active { transform: translateY(-50%) scale(.92) !important; }
.fx-gallery-arrow[disabled] { opacity: .35; cursor: default; pointer-events: none; }
@media (max-width: 980px) { .fx-gallery-item { flex: 0 0 calc((100% - 2 * 14px) / 3) !important; } }
@media (max-width: 700px) {
  .fx-gallery { padding: 0 44px !important; }
  .fx-gallery-track { gap: 10px !important; }
  .fx-gallery-item { flex: 0 0 calc((100% - 10px) / 2) !important; }
}
@media (max-width: 560px) {
  .fx-gallery-arrow { width: 38px !important; height: 38px !important; }
  .fx-gallery-arrow:first-child { left: -19px !important; }
  .fx-gallery-arrow:last-child { right: -19px !important; }
}
@media (max-width: 480px) { .fx-gallery-item { flex: 0 0 100% !important; } }

/* ---------- Vista ampliada de fotos ---------- */
.okfx-lightbox {
  position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center;
  background: rgba(10,10,10,.92); padding: 40px; opacity: 0; transition: opacity .25s ease;
}
.okfx-lightbox.is-open { display: flex; opacity: 1; }
.okfx-lightbox__img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.okfx-lightbox__close {
  position: absolute; top: 20px; right: 28px; background: transparent !important; border: none !important; color: #fff !important;
  font-size: 2.4rem; line-height: 1; cursor: pointer; opacity: .85; transition: opacity .2s ease; padding: 0;
}
.okfx-lightbox__close:hover { opacity: 1; }
.okfx-lightbox__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.25) !important; color: #fff !important;
  width: 48px; height: 48px; border-radius: 50% !important; font-size: 1.4rem; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; transition: background .2s ease;
}
.okfx-lightbox__arrow:hover { background: rgba(255,255,255,.2) !important; }
.okfx-lightbox__arrow--prev { left: 20px; }
.okfx-lightbox__arrow--next { right: 20px; }
.okfx-lightbox__counter { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.75); font-size: .85rem; letter-spacing: .04em; }
@media (max-width: 700px) {
  .okfx-lightbox { padding: 16px; }
  .okfx-lightbox__arrow { width: 40px; height: 40px; font-size: 1.1rem; }
  .okfx-lightbox__close { top: 12px; right: 16px; font-size: 2rem; }
}

/* ---------- Imagen revelada tras el cursor ---------- */
.fx-img-reveal-layer img { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }

/* ---------- Horarios: foto de la cena revelada tras el cursor ---------- */
.fx-img-card-base, .fx-img-card-reveal { -webkit-clip-path: inset(0 round 18px); clip-path: inset(0 round 18px); }
.fx-img-card-reveal { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }

/* ---------- Horarios: tabla en escritorio, pestañas en móvil (punto de corte del original: 860 px) ---------- */
.fx-tabs:not(.is-ready) .fx-tab-panel ~ .fx-tab-panel { display: none; }
@media (min-width: 860px) { .fx-tabs { display: none !important; } }
@media (max-width: 859px) {
  .fx-price-table { display: none !important; }
  .ok-hours-grid { grid-template-columns: 1fr !important; }
}

/* ---------- Normas y FAQ: acordeón (en el editor las respuestas se ven abiertas para poder editarlas) ---------- */
.fx-faq .fx-faq-a { overflow: hidden; max-height: 0; transition: max-height .35s ease; }
.fx-faq-item.is-open { border-color: rgba(255,172,65,.28) !important; box-shadow: 0 10px 26px rgba(0,0,0,.3) !important; }

/* ---------- Normas y FAQ: franja 768–900 px del original (una columna, foto en tarjeta de cristal) ---------- */
@media (min-width: 768px) and (max-width: 900px) {
  .ok-faq-section { padding-top: 28px !important; }
  .ok-faq-grid { grid-template-columns: 1fr !important; margin-top: 16px !important; }
  .ok-faq-imgwrap {
    display: flex !important; padding: 26px !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 20px !important;
    background-color: rgba(255,255,255,.06) !important; -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  }
  .ok-faq-imgwrap .fx-img-card { position: relative !important; top: auto !important; flex: 1 1 auto; }
}