/* ==========================================
   style-mobile.merged.css
   - Start: existing style-mobile.css (if any)
   - Appended: ALL @media(max-width: ...) blocks extracted from sstyle.css
   - Order: original mobile first, then overrides from sstyle.css
   - Generated automatically
   ========================================== */

/* ===== MOBILE MENU (clean) ===== */
@media (max-width: 768px) {
  .header { position: relative; }
  .main-nav { position: relative; }

  /* hamburger zawsze nad menu */
  .menu-toggle {
    display: block;
    z-index: 5001 !important;
    pointer-events: auto;
  }

  /* menu – JEDNA definicja, spójny stacking */
  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 50vw;           /* zmień na 100% jeśli chcesz pełną szerokość */
    max-width: 400px;
    display: none !important;
    flex-direction: column;
    background: var(--gradient-main, #1a2a4f);
    padding: 1rem;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,.2);
    z-index: 4000 !important; /* < hamburger */
  }
  .menu.show {
    display: flex !important;
    flex-direction: column;
  }

  .menu li {
    border-bottom: 1px solid rgba(255,255,255,.1);
  }

  .menu .dropdown > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    position: relative;
  }
  .menu .dropdown > a::after {
    content: "\21C5";
    font-size: .8rem;
    color: #fff;
    margin-top: .2rem;
  }
  .menu .dropdown > a.active { color: var(--accent); }
  .menu .dropdown > a.active::after { transform: rotate(180deg); color: var(--accent); }

  /* submenus: domyślnie ukryte; pokazujemy TYLKO gdy JS nada klasę */
  .menu .submenu {
    display: none !important;
    flex-direction: column;
    background: var(--gradient-submenu, transparent);
    width: 100%;
    padding: .5rem 0;
    z-index: 2;
  }
  /* Używamy FLEX, żeby układ był stabilny */
  .menu li.dropdown.open > .submenu,
  .menu .submenu.submenu-show {
    display: flex !important;
  }

  .submenu li a {
    padding: .75rem 1.5rem;
    color: #f0f0f0;
    background: transparent;
    transition: background .3s ease;
  }
  .submenu li a:hover { background: rgba(255,255,255,.05); }

  /* neutralizacja desktopowego :hover na mobile */
  .menu .dropdown:hover > .submenu { display: none !important; }
}


@media (max-width: 768px) {
  .aktualnosci-grid {
    flex-direction: column;
  }

  .aktualnosci-right {
    align-items: center;
  }
}

@media (max-width: 600px) {
  ul.suggestions-list li {
    font-size: 1.05rem;
    padding: 0.75rem 1rem;
  }
}

@media (max-width: 768px) {
  .akty-blok {
    padding: 1rem;
  }
}

@media (max-width: 600px) {
  .akty-input-wrapper {
    width: 100%;
  }

  #budynek-input {
    width: 100%;
  }

 #clear-akty {
    right: 1.2rem;
    font-size: 1.5rem;
    }

  .suggestions-list li {
    font-size: 1.05rem;
    padding: 0.75rem 1rem;
    list-style: none;
  }
}

@media (max-width: 600px) {
  .emergency-card {
    width: 100% !important;
  }

  .btn-row {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-row .btn {
    width: 100%;
  }

  .pdfBtn {
    align-self: center;
    order: 3;
    margin-left: 0;
  }

  .filter-row {
    flex-direction: column;
  }

  .filter-group {
    width: 100%;
  }

  #drukZbiorczyBtn {
    width: 100%;
    order: 3;
  }
   .awaria-filter {
    max-width: 100%;
    width: 100%;
}
}

@media (max-width: 640px) {
  .content {
    padding: 0.5rem 0.5rem;
  }
}

@media (max-width: 640px) {
  .card-body {
    padding: 0.8rem 1rem;
  }

  .card {
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .insurance-grid {
    flex-direction: column;
    gap: 2rem;
  }

  .insurance-provider {
    max-width: 100%;
  }
}

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

@media (max-width: 480px) {
  .oferta-mini-sub { font-size:.85rem; }
  .badge { font-size:.78rem; padding:.2rem .45rem; }
}

@media (max-width: 420px) {
  .oferta-widget-head {
    grid-template-columns: 1fr;      /* jedna kolumna */
    grid-template-areas:
      "title"
      "update"
      "tag";
  }
  .osiedle-tag { justify-self: start; margin-top: .25rem; }
}

@media (max-width: 560px) {
  /* 3 wiersze: data -> tytuł -> przycisk */
  .akt-link {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "date"
      "title"
      "cta";
    row-gap: .25rem;
    align-items: start;
    padding: .65rem 0;
  }

  /* oszczędzamy miejsce – chowamy ikonkę megafonu */
  .akt-ico { display: none; }

  /* data na górze, bardziej czytelna */
  .akt-date {
    grid-area: date;
    color: #334155;
    font-weight: 600;
    white-space: nowrap;
  }

  /* treść (tytuł) jako drugi wiersz; można przyciąć do 2 linii */
  .akt-title {
    grid-area: title;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;     /* utnij do 2 linii na bardzo małych ekranach */
    -webkit-box-orient: vertical;
  }

  /* "Przetarg" jako przycisk w trzecim wierszu */
  .akt-badge {
    grid-area: cta;
    justify-self: start;
    margin-top: .2rem;
    padding: .35rem .6rem;
    border-radius: .5rem;
    background: #1d4ed8;       /* przyciskowy wygląd */
    border-color: #1d4ed8;
    color: #fff;
    font-weight: 600;
    font-size: .82rem;
  }
}

.header, .main-nav, #main-menu, .menu-toggle { z-index: 20000 !important; position: relative; }
#main-menu.menu.show { display: flex !important; } /* wymuś widoczność na mobile */

/* === Mobile header: hamburger po prawej, menu pod przyciskiem === */
@media (max-width: 768px){
  .header-inner{ position:relative; padding-right:56px; }
  .menu-toggle{
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    z-index:10001 !important;
    pointer-events:auto;
    display:block;
  }
  .main-nav{ position:relative; z-index:10000; }

  #main-menu.menu{
    position:absolute;
    top:100%;
    right:0;
    left:auto;
    width:80vw;
    max-width:220px;
    display:none !important;
    flex-direction:column;
    z-index:9000 !important;
  }
  #main-menu.menu.show{ display:flex !important; }

  /* neutralizacja desktopowego :hover na mobile */
  .menu .dropdown:hover > .submenu{ display:none !important; }
}

/* === Mobile polish: submenu bullets off, wider buttons, safer paddings === */
@media (max-width: 768px){

  /* 1) Submenu: zero kropek i wcięć */
  .menu, .menu ul, .menu li,
  .submenu, .submenu li {
    list-style: none !important;
    margin: 0;
    padding: 0;
  }
  .menu .submenu { padding: .25rem 0 !important; }
  .menu .submenu li a {
    display: block;
    padding: .75rem 1rem !important;
  }

  /* 2) Większe „tap targets” w całym content */
  #dynamic-content a,
  #dynamic-content button,
  #dynamic-content .btn {
    min-height: 44px;                      /* WCAG touch target */
  }

  /* 3) Awaria / Sprzątanie – akcje: Wyczyść, Pokaż wszystkie, Wydruk */
  /*  — działa niezależnie od tego, czy jest .btn-row czy nie */
  .filter-row,
  .btn-row {
    display: flex;
    gap: .75rem;
    flex-direction: column;                 /* pionowo na mobile */
  }
  .filter-row .btn,
  .filter-row button,
  .btn-row .btn,
  .btn-row button,
  #drukZbiorczyBtn {
    width: 100% !important;
    padding: .75rem 1rem !important;
    text-align: center;
    white-space: normal;                    /* nie ucina tekstu */
  }
  /* jeżeli „Wydruk” ma własną klasę */
  .pdfBtn { width: 100% !important; margin-left: 0 !important; }

  /* 4) Wejściowe filtry – 100% szer. na wąskich */
  .awaria-filter,
  .filter-group,
  .akty-input-wrapper,
  #budynek-input {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 5) Marginesy kontentu – nie przyklejamy do krawędzi */
  .content {
    padding: 1rem !important;               /* było 0.5rem – za ciasno */
  }

  /* 6) Menu szerzej na mobile (żeby długie etykiety się mieściły) */
  #main-menu.menu {
    width: 80vw;         /* jeśli chcesz pełne: ustaw 100vw */
    max-width: 360px;    /* delikatnie więcej niż 220px */
  }
}

/* === MOBILE TUNING: spacing, narrow menu, no bullets, unified clear-X === */
@media (max-width: 768px){

  /* 1) Węższe menu i odsunięcie od krawędzi ekranu */
  #main-menu.menu{
    right: 8px;                 /* nie przyklejaj do krawędzi */
    width: 72vw;                /* było 80vw – węższe, mieści długie etykiety */
    max-width: 320px;           /* bezpiecznie dla iPhone 12–15 */
    border-radius: 12px;
  }

  /* 2) Większe marginesy boczne treści */
  .content{
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  /* nagłówki niech też nie „kleją się” do krawędzi */
  .content h1, .content h2, .content h3{
    margin-left: .05rem;
    margin-right: .05rem;
  }

  /* 3) Submenu w nawigacji – zero kropek i wcięć */
  .menu, .menu ul, .menu li,
  .submenu, .submenu li{
    list-style: none !important;
    margin: 0;
    padding: 0;
  }
  .menu .submenu{ padding: .25rem 0 !important; }
  .menu .submenu li a{
    display: block;
    padding: .75rem 1rem !important;
  }

  /* 4) Pola z podpowiedziami + przycisk „X” (Akty / Awaria / Sprzątanie) */
  /* — unifikacja: wrapper ma pozycjonowanie, input ma zapas na „X” */
  .akty-input-wrapper,
  .awaria-filter,
  .with-clear{ position: relative; }

  .akty-input-wrapper input,
  .awaria-filter input,
  .with-clear input{
    padding-right: 2.25rem !important;   /* miejsce na X po prawej */
  }

  /* — sam „X” (obsłuży #clear-akty i ewentualne .clear-btn) */
  #clear-akty,
  .awaria-filter .clear-btn,
  .with-clear .clear-btn{
    position: absolute;
    right: .6rem;                        /* bliżej prawej krawędzi */
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem; height: 1.25rem;
    font-size: 1.1rem; line-height: 1.25rem;
    display: inline-flex; align-items: center; justify-content: center;
    opacity: .85; cursor: pointer; user-select: none;
  }
  #clear-akty:active,
  .awaria-filter .clear-btn:active,
  .with-clear .clear-btn:active{ transform: translateY(-50%) scale(.96); }

  /* Lista podpowiedzi – komfortowy „tap target” i brak kropek */
  .suggestions-list{ list-style: none !important; margin-top: .25rem; border-radius: 10px; }
  .suggestions-list li{ padding: .75rem 1rem !important; }

  /* 5) Przyciski akcji (Wyczyść / Pokaż wszystkie / Wydruk) – pełna szerokość i bez obcinania tekstu */
  .filter-row, .btn-row{ display:flex; flex-direction:column; gap:.75rem; }
  .filter-row .btn, .filter-row button,
  .btn-row .btn, .btn-row button,
  #drukZbiorczyBtn, .pdfBtn{
    width: 100% !important;
    padding: .75rem 1rem !important;
    white-space: normal;                 /* tekst łamie się, nie ucieka */
    text-align: center;
    margin-left: 0 !important;
  }

  /* 6) Minimalny rozmiar celu dotykowego wg WCAG */
  #dynamic-content a,
  #dynamic-content button,
  #dynamic-content .btn{
    min-height: 44px;
  }
}
 /* === MOBILE FIX: spacing dla "X" + pełna szerokość SELECT + wyrównanie list === */
@media (max-width: 768px){

  /* 1) Więcej miejsca na "X" + większy tap-target */
  .akty-input-wrapper,
  .awaria-filter,
  .with-clear { position: relative; }

  .akty-input-wrapper input,
  .awaria-filter input,
  .with-clear input {
    padding-right: 2.75rem !important;        /* więcej miejsca na X (było ~2.25) */
    box-sizing: border-box;
  }

  /* sam "X" – odsuń od prawej i powiększ */
  #clear-akty,
  .awaria-filter .clear-btn,
  .with-clear .clear-btn {
    position: absolute;
    right: .9rem;                              /* było ~.6rem → dalej od krawędzi */
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem; height: 1.5rem;            /* min. 44px z paddingiem inputu */
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 1.15rem;
    cursor: pointer; user-select: none;
  }

  /* 2) SELECT i pola filtrów zawsze na pełną szerokość */
  .awaria-filter,
  .filter-group,
  .akty-input-wrapper { width: 100% !important; max-width: 100% !important; }

  .awaria-filter select,
  .filter-group select,
  select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block;
    box-sizing: border-box;
  }

  /* 3) Lista podpowiedzi = szerokość pola, bez kropek */
  .suggestions-list {
    width: 100% !important;
    box-sizing: border-box;
    list-style: none !important;
    margin-top: .25rem;
  }
  .suggestions-list li { padding: .75rem 1rem !important; }

  /* 4) Przyciski pod filtrami — pełna szerokość i nie obcinaj tekstu */
  .filter-row, .btn-row { display: flex; flex-direction: column; gap: .75rem; }
  .filter-row .btn, .filter-row button,
  .btn-row .btn, .btn-row button,
  #drukZbiorczyBtn, .pdfBtn {
    width: 100% !important;
    padding: .75rem 1rem !important;
    white-space: normal;
    text-align: center;
    margin-left: 0 !important;
  }
}