/* =========================
   Brand System / Variables
========================= */
:root{
  --black:#000000;    /* main */
  --accent:#FFA440;   /* secondary */
  --red:#EC062E;      /* third */

  --bg:#F6F7F9;
  --card:#FFFFFF;
  --text:#0B0B0C;
  --muted:#6b7280;

  --radius:18px;

  --shadow-soft: 8px 8px 18px rgba(0,0,0,.08), -8px -8px 18px rgba(255,255,255,.65);
  --shadow-inset: inset 6px 6px 10px rgba(0,0,0,.06), inset -6px -6px 10px rgba(255,255,255,.8);
}

*{box-sizing:border-box}
html,body{height:100%}
body.app-body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"PINGAR LT BLACK","Helvetica Neue",Arial;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.app-wrap{ min-height:100%; padding-bottom:72px; }

/* =========================
   Header
========================= */
.app-header{
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  border-bottom:1px solid rgba(0,0,0,.06);
  backdrop-filter:saturate(140%) blur(6px);
}
.app-header__row{
  max-width:1200px; margin:0 auto;
  padding:10px clamp(12px,4vw,24px);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ display:block; height:4rem; width:auto }

/* Call dropdown */
.header-call{ position:relative; }
.call-dropdown.open{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }

.language-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:12px; text-decoration:none; color:inherit; margin:6px 2px;
  background:var(--card); box-shadow:var(--shadow-inset);
  animation:slideIn .2s cubic-bezier(.2,.75,.25,1) both;
}
.language-item:hover{ background:#fafafa; }
.language-item.disabled{ opacity:.5; pointer-events:none; }
.flag-icon{ width:22px; height:22px; border-radius:50%; object-fit:cover }
.country-phone{ margin-left:auto; font-size:12px; color:var(--muted) }
.country-phone.muted{ font-style:italic }

@keyframes slideIn{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:translateY(0)} }

/* =========================
   Main
========================= */
/*.app-main{ padding: clamp(12px,4vw,24px); }*/

/* =========================
   Sheets (bottom panels)
========================= */
.sheet-open{ overflow:hidden; }
.sheet{
  position:fixed; inset:0; z-index:60; display:grid; place-items:end center;
  background:rgba(0,0,0,.35); opacity:0; visibility:hidden;
  transition:opacity .2s ease, visibility .2s ease;
}
.sheet[aria-hidden="false"]{ opacity:1; visibility:visible; }
.sheet__surface{
  width:100%; max-width:720px; background:var(--bg);
  border-top-left-radius:18px; border-top-right-radius:18px;
  box-shadow:0 -8px 30px rgba(0,0,0,.18);
  transform:translateY(24px); animation:sheetUp .2s ease forwards;
}
@keyframes sheetUp{ to{ transform:translateY(0) } }
.sheet__handle{ height:20px; display:grid; place-items:center; }
.sheet__handle::before{
  content:""; width:48px; height:5px; border-radius:999px; background:rgba(0,0,0,.2);
}
.sheet__header{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 16px 4px; }
.sheet__header h2{ margin:0; font-size:16px; font-weight:900; letter-spacing:.2px; }
.sheet__close{ border:0; background:transparent; font-size:18px; cursor:pointer; padding:8px; }

/* Country pills */
.country-pills{ display:flex; gap:8px; padding:0 12px 8px; overflow:auto; }
.pill{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:var(--card); box-shadow:var(--shadow-inset); border:1px solid rgba(0,0,0,.06);
  font-weight:800; white-space:nowrap; cursor:pointer;
}
.pill[aria-current="true"]{ outline:2px solid var(--accent); }
.pill-flag{ width:18px; height:18px; border-radius:50%; object-fit:cover }

/* Branch grid */
.branches__grid{
  padding:8px 12px 16px; display:grid; grid-template-columns:1fr; gap:10px;
}
@media (min-width:560px){ .branches__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:900px){ .branches__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.branch-card{ background:var(--card); border-radius:16px; box-shadow:var(--shadow-soft); padding:12px; }
.branch-card__name{ margin:.25rem 0 .5rem; font-size:16px; font-weight:900; }
.branch-card__meta{ color:var(--muted); font-size:12px; }
.branch-card__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.branch-card__link{
  display:inline-flex; gap:6px; align-items:center; text-decoration:none; font-weight:800; font-size:13px;
  color:var(--red); padding:8px 10px; background:#fff; border-radius:12px; box-shadow:var(--shadow-inset);
}
.anim-fade-up{ animation:fadeUp .25s ease both; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }

.branches__load{ display:grid; place-items:center; padding:8px 12px 16px; }
.btn-ghost{
  border:1px solid rgba(0,0,0,.12); background:var(--card); box-shadow:var(--shadow-inset);
  border-radius:999px; padding:10px 14px; font-weight:900; cursor:pointer;
}
.btn-ghost:disabled{ opacity:.5; cursor:not-allowed; }

.country-list{ padding:6px 12px 14px; }

/* =========================
   Bottom Navbar
========================= */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  display:grid; grid-template-columns:repeat(5,1fr); gap:10px;
  padding:10px; background:var(--bg); border-top:1px solid rgba(0,0,0,.06);
  box-shadow:0 -8px 20px rgba(0,0,0,.08);
}
.bn-item{
  appearance:none; border:0; background:var(--card); color:var(--text);
  box-shadow:var(--shadow-soft); border-radius:16px; min-height:54px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  text-decoration:none; text-align:center;
}
.bn-item--main{ background:var(--black); color:#fff; font-weight:900; }
.bn-ico{ font-size:18px; line-height:1; }
.bn-txt{ font-size:11px; font-weight:900; letter-spacing:.2px }

/* =========================
   Socials FAB (pops up)
========================= */
.fab{ position:fixed; right:16px; bottom:88px; z-index:70; }
.fab__main{
  width:64px; height:64px; border-radius:50%; border:0; cursor:pointer;
  background:var(--red); color:#fff; box-shadow:var(--shadow-soft); position:relative;
  transition:transform .15s ease;
}
.fab__main:active{ transform:scale(.98); }
.fab__bars,
.fab__bars::before,
.fab__bars::after{
  content:""; position:absolute; left:50%; top:50%;
  width:28px; height:4px; border-radius:4px; background:#fff;
  transform:translate(-50%,-50%); transition:transform .25s ease, opacity .2s ease;
}
.fab__bars::before{ transform:translate(-50%,calc(-50% - 8px)); }
.fab__bars::after { transform:translate(-50%,calc(-50% + 8px)); }

.fab.is-open .fab__bars{ opacity:0; }
.fab.is-open .fab__bars::before{ transform:translate(-50%,-50%) rotate(45deg); opacity:1; }
.fab.is-open .fab__bars::after { transform:translate(-50%,-50%) rotate(-45deg); opacity:1; }

.fab__actions{
  position:absolute; bottom:72px; right:8px;
  display:grid; gap:10px; pointer-events:none; opacity:0; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease;
}
.fab.is-open .fab__actions{ pointer-events:auto; opacity:1; transform:translateY(0); }

.fab__action{
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; background:var(--red); color:#fff; text-decoration:none;
  box-shadow:var(--shadow-soft); font-size:22px; transform:translateY(12px); opacity:0;
  transition:transform .2s ease, opacity .2s ease, background .2s ease;
}
.fab.is-open .fab__action{ transform:translateY(0); opacity:1; }
.fab__action:hover{ background:#000; }

/* stagger */
.fab__action:nth-child(1){ transition-delay:.00s; }
.fab__action:nth-child(2){ transition-delay:.04s; }
.fab__action:nth-child(3){ transition-delay:.08s; }

/* =========================
   Large screens tweaks
========================= */
@media (min-width:1024px){
  .app-header__row{ padding:14px 28px; }
  .brand img{ height:4rem }
}



/* --- Socials popup attached to bottom-nav Socials button --- */
.bn-item--socials{ position: relative; overflow: visible; }

.sns-actions{
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);           /* sits above the button */
  transform: translateX(-50%) translateY(8px);
  display: grid;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 80;                          /* above bottom bar */
}

/* small white “nub” for a neomorphic feel (optional) */
.sns-actions::after{
  content: "";
  position: absolute;
  bottom: -6px; left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 12px;
  border-radius: 999px;
  background: transparent;
}

/* circular red actions (reuse FAB look) */
.sns-action{
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  text-decoration: none;
  font-size: 22px; line-height: 1;
  color: #fff;
  background: var(--red);
  box-shadow: var(--shadow-soft);
  transform: translateY(12px);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease, background .2s ease;
}
.sns-action:hover{ background: #000; }

/* open state (applied to the button) */
.bn-item--socials.is-open .sns-actions{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.bn-item--socials.is-open .sns-action{
  transform: translateY(0);
  opacity: 1;
}

/* stagger the three icons upward */
#snsActions .sns-action:nth-child(1){ transition-delay: .00s; }
#snsActions .sns-action:nth-child(2){ transition-delay: .04s; }
#snsActions .sns-action:nth-child(3){ transition-delay: .08s; }

/* (Optional) remove the old floating FAB styles if they still exist */
.fab, .fab__main, .fab__actions, .fab__action { display: none !important; }



/* Force bottom-sheet behavior even if theme CSS conflicts */
.app-body .sheet{
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: end center !important;
  background: rgba(0,0,0,.35);
}
.app-body .sheet__surface{
  margin: 0 !important;
  transform: translateY(24px);
  animation: sheetUp .25s ease forwards;
}
/* --- Make bottom sheets always sit above anything sticky --- */
.app-body .sheet{
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: end center !important;
  background: rgba(0,0,0,.45) !important;
  z-index: 2000 !important;           /* higher than .catbar / header */
}

.app-body .sheet__surface{
  width: 100%;
  max-width: 720px;
  background: var(--bg);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  box-shadow: 0 -8px 30px rgba(0,0,0,.18);
  transform: translateY(24px);
  animation: sheetUp .25s ease forwards;
  z-index: 2001 !important;
}

/* Lower the sticky rail while a sheet is open (belt & suspenders) */
.sheet-open .catbar { z-index: 5 !important; }

/* Call pill in header (visual-only upgrade) */
.btn-call{
  display:inline-flex; align-items:center; gap:10px;
  border:0; cursor:pointer; border-radius:999px;
  padding:10px 16px; background:linear-gradient(180deg,#FFA440,#ff8b00);
  color:#111; font-weight:900; letter-spacing:.2px;
  box-shadow: 0 8px 22px rgba(255,132,0,.25), inset 0 1px 0 rgba(255,255,255,.65);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
  text-decoration:none;
}
.btn-call:hover{ transform:translateY(-1px); box-shadow: 0 12px 26px rgba(255,132,0,.35), inset 0 1px 0 rgba(255,255,255,.7); }
.btn-call:active{ transform:translateY(0); filter:saturate(1.05); }
.btn-call .ico{ width:18px; height:18px; display:inline-grid; place-items:center; }
.btn-call .txt{ white-space:nowrap; max-width:42vw; overflow:hidden; text-overflow:ellipsis; }
@media (min-width:1024px){ .btn-call .txt{ max-width:360px; } }