/* glovo.css — Wolt layout + żółty Glovo */
@import url("./css.css");

:root{
  --glovoY1:#FFD300;
  --glovoY2:#FFB300;
  --glovoY3:#FFE68A;
  --glovoY4:#FFC933;

  /* css.css używa tych zmiennych — podmieniamy na żółte */
  --blueStrong: var(--glovoY3);
  --blue:       var(--glovoY1);
  --blue2:      var(--glovoY2);
}

/* tło bardziej “glovo” */
body{
  background:
    radial-gradient(circle at 8% 0%, rgba(255,211,0,.20), transparent 60%),
    radial-gradient(circle at 100% 85%, rgba(255,179,0,.14), transparent 60%),
    radial-gradient(circle at 40% 120%, rgba(255,230,138,.10), transparent 55%),
    linear-gradient(180deg,#020617,#020617);
}

/* Primary przyciski: ciemny tekst na żółtym */
.iconPill.primary,
.aBtn.primary{
  color:#1a1400 !important;
}
.iconPill.primary:hover,
.aBtn.primary:hover{
  box-shadow:0 10px 22px rgba(255,211,0,.18) !important;
}

/* chipy żółte */
.chip{
  border-color:rgba(255,211,0,.38) !important;
  background:rgba(255,211,0,.10) !important;
  color:#fff2b8 !important;
}

/* focus ring żółty */
.searchField:focus-within{
  border-color:rgba(255,211,0,.55) !important;
  box-shadow:0 0 0 3px rgba(255,211,0,.14) !important;
}

/* badgeDot glow żółty */
.badgeDot{
  box-shadow:0 0 0 3px rgba(255,211,0,.12) !important;
}
/* === Segmented control: styl jak "Szukaj" === */

.seg{
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 6px;
  gap: 6px;
}

.seg .segBtn{
  background: transparent;
  color: #cfd6e4;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
}

.seg .segBtn.active{
  background: #FFD300;   /* JEDEN żółty */
  color: #000;
}
/* =========================================
   GLOVO — tylko 3 rzeczy (bez ruszania tła)
========================================= */

/* 1) CITY PILL (Miasto) — wymuszamy żółty styl */
.cityPill{
  background:
    radial-gradient(circle at 0 0, rgba(255,211,0,.16), transparent 55%),
    linear-gradient(135deg, rgba(11,18,32,.70), rgba(2,6,23,.62)) !important;
  border:1px solid rgba(255,211,0,.28) !important;
}
.cityPill:hover{ border-color:rgba(255,211,0,.42) !important; }

/* 2) SEARCH — jasna obwódka (żeby nie “czarna plama”) + X stałe miejsce */
.searchField{
  position:relative !important;
  border:1px solid rgba(255,255,255,.14) !important;   /* jasna jak w innych */
  background:rgba(2,6,23,.50) !important;
  padding-right:46px !important;                       /* miejsce na X */
}
.searchField:focus-within{
  border-color:rgba(255,211,0,.55) !important;
  box-shadow:0 0 0 3px rgba(255,211,0,.14) !important;
}
.clearBtn{
  position:absolute !important;
  right:10px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  margin:0 !important;
}

/* 3) CITY MODAL — input + podpowiedzi na żółto (obwódki/tint) */
.sheetCard{
  border:1px solid rgba(255,255,255,.14) !important;   /* jasna rama jak wolt/uber */
}
.sheetHead{
  border-bottom:1px solid rgba(255,255,255,.10) !important;
}
.sheetX{
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(11,18,32,.60) !important;
}
.sheetInputWrap{
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(2,6,23,.55) !important;
}
.sheetInputWrap:focus-within{
  border-color:rgba(255,211,0,.55) !important;
  box-shadow:0 0 0 3px rgba(255,211,0,.14) !important;
}

/* podpowiedzi miast */
.sug{
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(11,18,32,.55) !important;
}
.sug:hover{
  border-color:rgba(255,211,0,.26) !important;
  background:rgba(15,23,42,.65) !important;
}
.sug.active{
  border-color:rgba(255,211,0,.46) !important;
  box-shadow:0 0 0 3px rgba(255,211,0,.10) !important;
}
.kbd{
  border:1px solid rgba(255,211,0,.22) !important;
  background:rgba(255,211,0,.08) !important;
  color:#fff2b8 !important;
}
/* TEST — jak tego nie zobaczysz, to NIE czyta glovo.css na końcu */


/* ===== GLOVO: wywal niebieskie tło searchCard (również z pseudo-elementów) ===== */
body .searchCard,
body .searchCard::before,
body .searchCard::after{
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

body .searchCard{
  border:1px solid rgba(255,255,255,.16) !important;
  background-color: rgba(2,6,23,.86) !important;
  /* żółte “poświaty” jak w innych apkach */
  background-image:
    radial-gradient(circle at 0 0, rgba(255,211,0,.18), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(255,179,0,.12), transparent 55%),
    linear-gradient(180deg, rgba(2,6,23,.86), rgba(2,6,23,.86)) !important;
}

/* ===== input w środku (też czyścimy pseudo) ===== */
body .searchField,
body .searchField::before,
body .searchField::after{
  background: none !important;
  background-image: none !important;
}

body .searchField{
  border:1px solid rgba(255,255,255,.16) !important;
  background: rgba(2,6,23,.50) !important;
}
body .searchField:focus-within{
  border-color: rgba(255,211,0,.55) !important;
  box-shadow: 0 0 0 3px rgba(255,211,0,.14) !important;
}

/* X — stałe miejsce, nie wyjeżdża na telefonie */
body .searchField{ position:relative !important; padding-right:52px !important; }
body .clearBtn{
  position:absolute !important;
  right:10px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  margin:0 !important;
}
/* ===== MOBILE FIX — X bliżej inputa, bez ucinania ===== */
@media (max-width: 720px){
  .searchField{
    padding-right: 40px !important; /* miejsce dokładnie pod X */
  }

  .clearBtn{
    right: 8px !important;          /* bliżej tekstu */
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
  }
}
/* ===== GLOVO MOBILE — X bliżej (MUSI być na samym końcu pliku) ===== */
@media (max-width: 860px){
  body .searchField{
    padding-right: 36px !important; /* mniej miejsca = X bliżej napisu */
  }
  body .clearBtn{
    right: 6px !important;          /* bliżej prawej krawędzi inputa */
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
  }
}
@media (max-width: 860px){
  body .searchCard .searchField{ padding-right: 36px !important; }
  body .searchCard .searchField .clearBtn{ right: 6px !important; }
}
/* GLOVO — MOBILE: X w lewo (bliżej napisu) + bez ucinania */
@media (max-width: 860px){
  body .searchCard .searchField{
    padding-right: 64px !important;   /* miejsce na X */
    overflow: visible !important;     /* jakby coś było przycinane */
  }

  body .searchCard .clearBtn{
    right: 18px !important;           /* WIĘKSZE = bardziej w lewo */
    width: 30px !important;
    height: 30px !important;
  }
}
/* === GLOVO: MOBILE — X NIEUCIĘTY (W LEWO) === */
@media (max-width: 520px){
  body .searchCard .searchField{
    overflow: visible !important;      /* na wszelki wypadek */
    padding-right: 64px !important;    /* miejsce na X */
  }

  body .searchCard #clearSearch.clearBtn{
    right: 16px !important;            /* większe = X idzie w LEWO */
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
  }

  body .searchCard .sInput{
    padding-right: 56px !important;    /* żeby wpisywanie nie wchodziło pod X */
  }
}
.seo-h1 {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.moreWrap{
  display:flex;
  justify-content:center;
  margin:16px 0 6px;
}
.moreBtn{
  min-width:220px;
}
/* MOBILE — Panel zostaje, reszta minimalnie niżej */
@media (max-width:768px){

  /* cały prawy blok (miasto + login + sort) w dół */
  header.topbar .topRight{
    margin-top: 12px !important;   /* ustaw 8–18px jak chcesz */
  }

}

/* MOBILE — Panel do prawej w tej samej linii */
@media (max-width:768px){

  header.topbar .topLeft{
    display:flex;
    width:100%;
    align-items:center;
  }

  header.topbar .topLeft .iconPill{
    margin-left:auto !important; /* wypycha Panel na prawą */
  }

}