/* ===================================================================
   Product Page — Global Fire
   Arquivo completo e consolidado (substituir o atual)
   =================================================================== */

/* ===== Reset e utilidades básicas ===== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin:0; padding:0; overflow-x:hidden; }

img, svg, video { max-width:100%; height:auto; display:block; }

/* ===================================================================
   Container e Grid
   =================================================================== */
.product-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(8px, 3vw, 16px);
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px; /* item 1 encolhe sem overflow */
  gap: 24px;
}
.detail-grid > * { min-width: 0; }

@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
  .summary { order: 2; }
  .gallery { order: 1; }
}

/* ===================================================================
   Galeria
   =================================================================== */
.gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-width: 0;
  margin-bottom: 6px;
}

.gallery-main {
  position: relative;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  background: #000;                 /* letterbox */
  height: clamp(240px, 54vw, 480px);
  display: grid;
  place-items: center;
}
#pdMainImg {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;               /* nunca corta */
  object-position: center;
}

.main-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.5);
  color: #fff;
  border: 0;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.main-nav.left { left: 8px; }
.main-nav.right{ right: 8px; }

.thumbs-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  clear: both;
}
.thumbs-track {
  flex: 1;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 0 2px 4px;
}
.thumbs-track::-webkit-scrollbar { height: 8px; }

.thumb {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
  scroll-snap-align: start;
}
.thumb.active { border-color: #111827; }

@media (max-width: 980px){
  .gallery-main { height: clamp(220px, 60vw, 320px); }
  .thumb { width: 72px; height: 72px; }
}

@media (prefers-reduced-motion: reduce){
  .thumbs-track { scroll-behavior: auto; }
}

/* ===================================================================
   Resumo / Lateral
   =================================================================== */
.summary {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 6px 20px rgba(17,24,39,.06);
  position: sticky;
  top: 20px;
}

.pd-title { margin: 0 0 6px; }
.pd-meta  { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }

.pd-price { font-size: 1.6rem; font-weight: 700; margin: 10px 0; }
.pd-price-sub { color:#374151; font-size:.95rem; margin-top:-8px; margin-bottom:8px; }

.pd-micro { display:flex; gap:12px; flex-wrap:wrap; color:#4b5563; font-size:.9rem; margin:6px 0; }

.pd-actions { display:flex; gap:10px; flex-wrap:wrap; }
.pd-field  { display:block; margin:8px 0; }

.pay-methods { margin-top:12px; border-top:1px dashed #e5e7eb; padding-top:10px; display:grid; gap:8px; }
.pay-methods .icons { display:flex; gap:6px; flex-wrap:wrap; }
.pm {
  display:inline-grid; place-items:center;
  background:#f3f4f6; border:1px solid #e5e7eb; border-radius:6px; padding:4px 6px;
  font-size:.8rem; color:#111827;
}

.rel-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px; margin-top:8px;
}
.rel-card {
  display:block; border:1px solid #eee; border-radius:10px; overflow:hidden; background:#fff;
  text-decoration:none; color:inherit;
}
.rel-card img { width:100%; height:120px; object-fit:cover; }
.rel-title { padding:8px 10px; font-size:.95rem; line-height:1.3; min-height:46px; }
.rel-price { padding:0 10px 10px; font-weight:600; }

@media (max-width: 768px){
  .detail-grid { grid-template-columns:1fr; }

  .summary {
    position: static; top:auto; padding:16px; margin-top:12px; box-shadow:none;
  }

  .summary .pd-actions { flex-direction:column; gap:10px; }
  .summary .pd-actions .btn { width:100%; justify-content:center; }

  .summary .pd-field select,
  .summary .pd-field input[type="number"],
  .summary .pd-field input[type="text"],
  .summary .pd-field input[type="email"] { width:100%; max-width:100%; }
}

/* ===================================================================
   Breadcrumb & Trust
   =================================================================== */
.breadcrumb { margin-bottom: 8px; }
.breadcrumb a { text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }

.chip.small {
  display:inline-block; background:#f3f4f6; border:1px solid #e5e7eb;
  padding:2px 8px; border-radius:999px; font-size:.82rem; color:#111827;
}

.divider-h { border-top:1px dashed #e5e7eb; margin:16px 0; }

.pd-trust { display:grid; gap:8px; margin-top:12px; }
@media (min-width:768px){ .pd-trust { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* ===================================================================
   Campos / Inputs
   =================================================================== */
.summary .pd-field .label{ margin-bottom:6px; font-weight:600; color:#111; }

.summary .pd-field label{
  display:flex; flex-direction:column; gap:6px; color:#111;
}

.summary .pd-field input[type="number"],
.summary .pd-field input[type="text"],
.summary .pd-field input[type="email"],
.summary .pd-field input[type="tel"],
.summary .pd-field input[type="date"],
.summary .pd-field select{
  width:100%; max-width:100%;
  height:42px; padding:8px 12px;
  border:1px solid #d1d5db; border-radius:10px; background:#fff; color:#111827; font-weight:500;
  box-shadow:none;
}

.summary .pd-field textarea{
  min-height:96px; height:auto; resize:vertical;
  padding:8px 12px; border:1px solid #d1d5db; border-radius:10px; background:#fff;
}

.summary .pd-field ::placeholder{ color:#9ca3af; }

.summary .pd-field input:focus,
.summary .pd-field select:focus,
.summary .pd-field textarea:focus{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px rgba(37,99,235,.18);
  border-color:#93c5fd;
}

/* Remove spinners do number */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin:0; }
input[type="number"]{ -moz-appearance:textfield; appearance:textfield; }

/* ===================================================================
   Hóspedes — STEPPER FIX (− | INPUT | +) SEMPRE
   =================================================================== */

/* Wrapper */
.guest-controls{
  display:block !important;
  margin-bottom:12px !important;
}

/* Sempre em GRID 3 colunas; usamos !important para matar qualquer flex inline */
.adult-control,
.child-control,
.u5-control{
  display: grid !important;
  grid-template-columns: 44px 1fr 44px !important; /* [-] [label+input] [+] */
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15,47,71,.06);
  margin-bottom: 10px;
}

/* Label compacta no meio; não ocupa linha inteira */
.adult-control label,
.child-control label,
.u5-control label{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0;
  font-weight:600;
  color:#111827;
  pointer-events:none;   /* não intercepta cliques nos botões */
}
.adult-control label input,
.child-control label input,
.u5-control label input{ pointer-events:auto; }

/* Botões +/- */
.qty-btn{
  width:38px; height:38px;
  border-radius:10px;
  border:1px solid #d1d5db;
  background:#f9fafb;
  font-size:18px; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .05s;
  position:relative; z-index:1;
}
.qty-btn:hover{ background:#f3f4f6; border-color:#cbd5e1; }
.qty-btn:active{ transform:translateY(1px); }
.qty-btn:disabled{ opacity:.45; cursor:not-allowed; }

/* Inputs numéricos do stepper */
#adultsCount,
#childrenCount,
#childrenUnder5{
  width:84px; height:38px;
  text-align:center;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#fff;
  font-weight:700;
  color:#0f2f47;
}

/* Mantém 3 colunas inclusive no mobile */
@media (max-width: 640px){
  .adult-control, .child-control, .u5-control{
    grid-template-columns: 44px 1fr 44px !important;
    gap: 8px;
  }
}

/* Espaços para grupos dinâmicos */
#adultParticipantsFields,
#childrenParticipantsFields,
#childrenUnder5Fields{ margin-top:12px; }

/* Aviso */
#earlyCheckinWarning.flash.info{
  margin-top:12px;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  color:#1e40af;
  padding:12px 14px;
  border-radius:12px;
}

/* ===================================================================
   Lightbox mínimo
   =================================================================== */
.gf-lightbox{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.92); z-index:100000;
}
.gf-lightbox.open{ display:flex; }
.gf-lb-img{
  max-width:90vw; max-height:90vh;
  border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.6);
}
.gf-lb-btn{
  position:absolute; border:0; cursor:pointer;
  width:44px; height:44px; border-radius:50%;
  background:rgba(0,0,0,.5); color:#fff; font-size:28px;
  display:grid; place-items:center;
}
.gf-lb-btn:hover{ background:rgba(255,255,255,.25); }
.gf-close{ top:16px; right:18px; font-size:26px; }
.gf-prev{  left:20px; top:50%; transform:translateY(-50%); }
.gf-next{  right:20px; top:50%; transform:translateY(-50%); }
.gf-lb-count{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  color:#ddd; font-size:14px; background:rgba(0,0,0,.45); padding:4px 8px; border-radius:8px;
}

/* ===================================================================
   Acessibilidade & Interação
   =================================================================== */
.main-nav:focus-visible,
.thumb:focus-visible,
.qty-btn:focus-visible,
.room-btn:focus-visible,
.summary .pd-actions .btn:focus-visible{
  outline:3px solid #60a5fa; outline-offset:2px;
}

.qty-btn:hover{ background:#f9fafb; }
.summary .pd-actions .btn:hover { filter:brightness(0.98); }
.summary .pd-actions .btn:active { transform:translateY(1px); }
.summary .pd-actions .btn:disabled { opacity:.6; cursor:not-allowed; }