/* ===== Reset + Tokens ===== */ :root{
  --brand: #007BFF;
  --brand-2: #25D366;
  --bg: #f9f9f9;
  --text: #333;
  --elev-1: 0 6px 16px rgba(0,0,0,.12);
  --elev-2: 0 10px 24px rgba(0,0,0,.18);
  --ring: 0 0 0 3px rgba(0,123,255,.2);
  --tr-fast: .18s ease;
  --tr-med: .3s ease;
}

html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100dvh;         
  font-family: Arial, sans-serif;
  overflow-x: hidden;      
  overflow-y: auto;        
  -webkit-overflow-scrolling: touch; 
  background: var(--bg);
}

/* Smooth scroll with reduced-motion respect */ html{ scroll-behavior: smooth; }

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

/* ===== Splash ===== */ #splash{
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 70px;
  z-index: 1000;
  animation: fadeOut 1s ease 3.5s forwards;
}

#splash .logo{
  width: 260px;           
  height: auto;           
  object-fit: contain;    
  margin: 60px 0 15px 0;
  opacity: 0;
  animation: fadeIn 1s forwards;
}

.splash-main{
  font-weight: bold;
  opacity: 0;
}

.splash-main.welcome{
  font-size: 32px;
  color: #007BFF;
  margin-bottom: 25px;
  animation: fadeIn 1s forwards 1s;
}

.splash-main.tagline{
  font-size: 24px;
  background: linear-gradient(90deg, #007BFF, #25D366);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fadeIn 1s forwards 2s;
}

.splash-sub{
  position: absolute;
  bottom: 100px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  opacity: 0;
  animation: fadeIn 1s forwards 2.3s;
}

@keyframes fadeIn{ from { opacity: 0 } to { opacity: 1 } }

@keyframes fadeOut{ to { opacity: 0; visibility: hidden } }

/* ===== Map + Loading ===== */ .iframe-container{
  width: 100%;
  height: 100%;
  display: block; 
  position: relative;
}

@media (max-width: 600px){
  .iframe-container {
    height: calc(100vh - 50px);
  }
}

iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Page frame wrapper: ensure touch scrolling passes to inner content, avoid scroll chaining */ #pageFrameWrap{ 
  -webkit-overflow-scrolling: touch; 
  touch-action: pan-y; 
  overflow: hidden; 
  overscroll-behavior: contain;
}

#pageFrameWrap iframe{ touch-action: pan-y; }

.loading-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  color: #007BFF;
  z-index: 10;
  transition: opacity .5s;
  flex-direction: column;
  pointer-events: auto; 
}

/* Simple spinner for the loading overlay */
.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #cfd8dc;
  border-top-color: #007BFF;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin-bottom: 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hidden{ opacity: 0; visibility: hidden; pointer-events: none; }

/* iframe */ .iframe-container.hidden{ display: none !important; }

/* ===== Menu Button ===== */ .menu-btn{
  position: fixed;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 50;
  box-shadow: 0 0 14px 2px rgba(0,123,255,.35);
  transition: transform var(--tr-fast), box-shadow var(--tr-fast), background var(--tr-fast);
}

.menu-btn:hover{ background: #0056b3; box-shadow: 0 0 24px 4px rgba(0,123,255,.55); }

.menu-btn:active{ transform: translateX(-50%) scale(.96); }

/* ripple (pure CSS) */ .menu-btn::after, .up-btn::after, .tab-buttons button::after, .pay-btn::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(255,255,255,.35), transparent 60%);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--tr-fast), transform var(--tr-fast);
  pointer-events: none;
}

.menu-btn:active::after, .up-btn:active::after, .tab-buttons button:active::after, .pay-btn:active::after{ opacity: 1; transform: scale(1); }

/* ===== Popup Menu ===== */ .menu-popup{
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--elev-2);
  display: none;
  flex-direction: column;
  z-index: 60;
  padding: 8px;
  min-width: 260px;
  backdrop-filter: saturate(1.2) blur(6px);
  animation: popupIn .18s ease;
}

.menu-popup a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  transition: background var(--tr-fast), box-shadow var(--tr-fast), transform var(--tr-fast);
}

.menu-popup a:hover{ background: #f2f6ff; box-shadow: inset 0 0 0 2px rgba(0,123,255,.12); }

.menu-popup a:active{ transform: translateY(1px); }

@keyframes popupIn{ from { opacity:.0; transform: translateX(-50%) scale(.98); } to { opacity:1; transform: translateX(-50%) scale(1); } }

/* ===== Bottom TS/AP Tabs + Up Button ===== */ .tab-buttons{
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--brand);
  z-index: 20;
  opacity: 0;
  transition: transform .5s, opacity .5s;
  pointer-events: none;
}

.tab-buttons.show{
  opacity: 1;
  transform: translateY(-80px);
  pointer-events: auto;
}

.tab-buttons button{
  flex: 1;
  padding: 15px;
  cursor: pointer;
  border: none;
  color: #fff;
  font-size: 18px;
  background: var(--brand);
  transition: background-color var(--tr-med), transform var(--tr-med), box-shadow var(--tr-fast);
}

.tab-buttons button:hover{ background: #0056b3; transform: scale(1.05); }

.tab-buttons button.active{ background: #0056b3; font-weight: bold; }

.up-btn{
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  border: none;
  font-size: 24px;
  cursor: pointer;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s infinite;
  box-shadow: var(--elev-1);
  transition: transform var(--tr-fast), box-shadow var(--tr-fast);
}

.up-btn:hover{ box-shadow: 0 0 0 6px rgba(0,123,255,.14), var(--elev-1); }

.up-btn:active{ transform: scale(.96); }

@keyframes pulse{
  0% { transform: scale(1); box-shadow: 0 0 10px rgba(0,123,255,.5); }
  50% { transform: scale(1.1); box-shadow: 0 0 20px rgba(0,123,255,.9); }
  100% { transform: scale(1); box-shadow: 0 0 10px rgba(0,123,255,.5); }
}

/* ===== WhatsApp FAB ===== */ #whatsappBtn.whatsapp-btn{
  position: fixed;
  bottom: 100px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--brand-2);
  box-shadow: 0 4px 6px rgba(0,0,0,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  z-index: 200;
  user-select: none;
  touch-action: none;
}

#whatsappBtn.whatsapp-btn img{
  width: 32px;
  height: 32px;
}

/* Footer styles now centralized in css/common.css */

/* Subtle custom scrollbar */ *::-webkit-scrollbar{ width: 10px; height: 10px; }

*::-webkit-scrollbar-thumb{ background: #cfd8dc; border-radius: 8px; }

*{ scrollbar-color: #cfd8dc transparent; scrollbar-width: thin; }

/* ===== A11y: Focus visible styles ===== */ :where(a, button, [role="button"], .menu-btn, .up-btn, .tab-buttons button, summary):focus-visible{
  outline: 2px solid #0056b3;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(0,123,255,.25);
}

/* Scroll lock when overlay open */
.no-scroll, .no-scroll body{ overflow: hidden !important; }