/* ==========================================================================
   mobile.css - runda R3: poprawki widoków mobilnych i tabletowych
   Wszystko wyłącznie w media queries max-width:1199px -> desktop (>=1200) 1:1 z produkcją.
   Ładowane po stylach strony (tuż przed </head>), dlatego wygrywa kolejnością.
   ========================================================================== */

/* ---------- Karuzela (wspólna mechanika) ----------------------------------
   Siatka zamienia się w poziomy pasek ze snapem. Swipe działa natywnie.
   Następna karta wystaje ~20%, żeby było widać, że da się przewinąć. */
@media (max-width:640px) {
  .events-grid,
  .attr-grid,
  .section .auto-grid:not(.auto-grid--sm),
  .przewodnik-wydarzenia .events-grid {
    display:flex !important;
    gap:12px !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    margin-left:-16px; margin-right:-16px;
    padding:4px 16px 12px;
    scroll-padding:0 16px;
    -webkit-overflow-scrolling:touch;
  }
  .events-grid::-webkit-scrollbar,
  .attr-grid::-webkit-scrollbar,
  .section .auto-grid::-webkit-scrollbar { display:none; }
  .events-grid > *,
  .attr-grid > *,
  .section .auto-grid:not(.auto-grid--sm) > * {
    flex:0 0 78%;
    min-width:0;
    scroll-snap-align:start;
  }
  /* karta mapy w atrakcjach jest wyższa - bez tego karty atrakcji miały pustą stopkę */
  .attr-grid { align-items:flex-start; }
  /* restauracje: węższe kafelki, widać więcej naraz */
  .section .auto-grid--md > * { flex-basis:62%; }
  /* sekcja wydarzeń w przewodniku ma własny padding 32px */
  .przewodnik-wydarzenia { padding-left:16px; padding-right:16px; }
}

/* ---------- Kropki pod karuzelą (dodawane przez mobile.js) ---------- */
.m-dots { display:none; }
@media (max-width:640px) {
  .m-dots { display:flex; justify-content:center; gap:6px; margin-top:4px; }
  .m-dots span { width:6px; height:6px; border-radius:3px; background:var(--g300, #ccc); transition:width .2s, background .2s; }
  .m-dots span.on { width:18px; background:var(--black, #0b0a0d); }
}

/* ==========================================================================
   STRONA GŁÓWNA
   ========================================================================== */
@media (max-width:1199px) {
  /* atrakcje: 4 -> 3 kolumny dopiero przy 1100 było za ciasno, od razu 2 */
  .attr-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
  /* Poznaj Wrocław (liczniki): 2 w wierszu zamiast 1 */
  .poznaj-grid { grid-template-columns:repeat(2,1fr) !important; }
  .poznaj-card { padding:18px 14px; }
  .poznaj-card .poznaj-icon { margin-bottom:10px; }
  .poznaj-icon svg { width:26px !important; height:26px !important; }
  .poznaj-title { font-size:15px; margin-bottom:4px; }
  .poznaj-desc { font-size:12px; line-height:1.45; margin-bottom:10px; }
  .poznaj-count { font-size:22px; }
  .poznaj-count span { display:block; margin:3px 0 0; font-size:11px; }
  /* nagłówki sekcji nie łamią się na 2 linie tak agresywnie */
  .p-home .section-title { font-size:22px; }
  .p-home .section-header { flex-wrap:wrap; row-gap:6px; }
}

/* ==========================================================================
   LISTING ATRAKCJI
   ========================================================================== */
@media (max-width:1199px) {
  /* z sidebarem 3 kolumny były ściśnięte (ucięte adresy i opisy) */
  .p-atrakcje-lista .cards-grid, .p-restauracje .cards-grid { grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:600px) {
  .p-atrakcje-lista .cards-grid { gap:10px !important; }
  .p-atrakcje-lista .cards-grid .card { border-radius:10px; }
  .p-atrakcje-lista .cards-grid .card-img { height:112px; }
  .p-atrakcje-lista .cards-grid .card-body { padding:9px 10px 11px; }
  .p-atrakcje-lista .cards-grid .card-name { font-size:14px; line-height:1.2; margin-bottom:4px; }
  .p-atrakcje-lista .cards-grid .card-address { font-size:11px; gap:3px; margin-bottom:4px; }
  .p-atrakcje-lista .cards-grid .card-address svg { width:12px; height:12px; }
  .p-atrakcje-lista .cards-grid .card-tagline { font-size:11.5px; line-height:1.35; -webkit-line-clamp:2; margin:0; }
  .p-atrakcje-lista .cards-grid .card-cat-badge { font-size:8.5px; padding:2px 6px; top:6px; left:6px; max-width:calc(100% - 56px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .p-atrakcje-lista .cards-grid .card-heart { top:6px; right:6px; height:24px; padding:0 6px; font-size:11px; }
  .p-atrakcje-lista .cards-grid .card-status { left:6px; bottom:6px; }
  .p-atrakcje-lista .cards-grid .card-status > span { font-size:10px; padding:2px 6px; }

  /* nagłówek: był na ponad pół ekranu */
  .p-atrakcje-lista .page-hero, .p-mapa .page-hero, .p-wydarzenia-lista .page-hero, .p-atrakcja .page-hero { padding:18px 0 12px !important; }
  .p-atrakcje-lista .page-hero-inner, .p-mapa .page-hero-inner, .p-wydarzenia-lista .page-hero-inner, .p-atrakcja .page-hero-inner { padding:0 16px !important; }
  .p-atrakcje-lista .page-hero .breadcrumb, .p-mapa .page-hero .breadcrumb, .p-wydarzenia-lista .page-hero .breadcrumb, .p-atrakcja .page-hero .breadcrumb { margin-bottom:8px !important; font-size:12px; }
  .p-atrakcje-lista .page-hero h1, .p-mapa .page-hero h1, .p-wydarzenia-lista .page-hero h1, .p-atrakcja .page-hero h1 { font-size:26px !important; line-height:1.12; margin-bottom:4px !important; }
  .p-atrakcje-lista .page-hero-sub, .p-mapa .page-hero-sub, .p-wydarzenia-lista .page-hero-sub, .p-atrakcja .page-hero-sub { font-size:13px; padding-bottom:10px; }
  /* nastroje: jeden przewijany rząd zamiast 3 wierszy */
  .mood-bar { padding:0 0 12px; }
  .mood-bar-inner { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:0 16px; gap:8px; }
  .mood-bar-inner::-webkit-scrollbar { display:none; }
  .mood-pill { flex:0 0 auto; padding:7px 14px; font-size:12px; gap:6px; }
}

/* ==========================================================================
   LISTING WYDARZEŃ - na mobile jedna kolumna, grafika NAD tekstem, w całości
   (plakaty mają wpalony tekst i różne proporcje: poziome, kwadratowe, pionowe;
   kadr 200px z object-fit:cover ucinał napisy, a układ skakał tekst z boku/pod)
   ========================================================================== */
@media (max-width:900px) {
  .date-group .event-card { flex-direction:column; flex-wrap:nowrap; }
  .date-group .event-card .event-img-link {
    width:100%; min-height:0; height:auto; flex:0 0 auto; display:block;
  }
  .date-group .event-card .event-img-link img {
    display:block; width:100%; height:auto;
    /* pionowy plakat nie może zająć kilku ekranów - zmniejszamy go, nie tniemy */
    max-height:min(72vh, 560px); object-fit:contain;
  }
  .date-group .event-card .event-img-placeholder { min-height:120px; justify-content:center; }
  .date-group .event-card .event-body { padding:14px 16px 16px; }
  .date-group .event-card .event-title { font-size:17px; }
}

/* ==========================================================================
   FILTRY PRZYKLEJONE DO GÓRY + PANEL FILTRÓW (listingi, <=900px)
   ========================================================================== */
.m-filter-btn, .m-sheet { display:none; }
@media (max-width:900px) {
  /* wydarzenia: pasek dat i pór dnia jako jeden przewijany rząd, przyklejony */
  .date-nav-bar {
    position:sticky; top:var(--m-navh, 58px); z-index:90;
    background:var(--black, #0b0a0d);
  }
  .date-nav-inner { display:flex !important; align-items:center; gap:8px; flex-wrap:nowrap !important;
    overflow-x:auto; scrollbar-width:none; padding:8px 16px !important; }
  .date-nav-inner::-webkit-scrollbar { display:none; }
  .date-nav-inner .date-chips, .date-nav-inner .time-pills { flex-wrap:nowrap; flex:0 0 auto; overflow:visible; max-width:none; }
  .date-nav-inner .date-chip { white-space:nowrap; }
  .date-nav-inner .time-pill-btn { white-space:nowrap; }

  /* atrakcje: pasek Lista / Mapa / liczba przyklejony */
  .view-tabs-bar { position:sticky; top:var(--m-navh, 58px); z-index:90; }
  .view-tabs-inner { padding:0 12px 0 16px !important; gap:8px; }

  .m-filter-btn {
    display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
    font:600 13px/1 'DM Sans',sans-serif; padding:8px 12px; border-radius:8px; cursor:pointer;
    border:1.5px solid var(--yellow, #e21b18); background:var(--yellow, #e21b18); color:var(--accent-text, #fff);
  }
  .m-filter-btn svg { width:15px; height:15px; }

  /* sidebar filtrów przeniesiony do panelu - na liście go nie ma */
  .page-layout > .sidebar:not(.m-in-sheet) { display:none !important; }

  .m-sheet { display:block; position:fixed; inset:0; z-index:1000; visibility:hidden; }
  .m-sheet.open { visibility:visible; }
  .m-sheet-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.5); opacity:0; transition:opacity .25s; }
  .m-sheet.open .m-sheet-backdrop { opacity:1; }
  .m-sheet-panel {
    position:absolute; left:0; right:0; bottom:0; max-height:86vh; background:var(--white, #fff);
    border-radius:16px 16px 0 0; display:flex; flex-direction:column;
    transform:translateY(100%); transition:transform .28s ease;
  }
  .m-sheet.open .m-sheet-panel { transform:none; }
  .m-sheet-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border, #e5e5e5); }
  .m-sheet-head strong { font:700 18px 'Bricolage Grotesque',sans-serif; }
  .m-sheet-close { width:36px; height:36px; border:0; background:var(--g100, #f3f3f3); border-radius:50%; font-size:22px; line-height:1; cursor:pointer; }
  .m-sheet-body { overflow-y:auto; padding:14px 16px 24px; -webkit-overflow-scrolling:touch; }
  .m-sheet-body .sidebar { display:flex !important; width:auto; }
  /* kolejność boksów filtrów w panelu: numer z data-m-filter (Blade), kolejność tylko w panelu, nie na desktopie */
  .m-sheet-body .m-order-1 { order:-6; }
  .m-sheet-body .m-order-2 { order:-5; }
  .m-sheet-body .m-order-3 { order:-4; }
  .m-sheet-body .m-order-4 { order:-3; }
  .m-sheet-body .m-order-5 { order:-2; }
  .m-sheet-body .m-sheet-hide { display:none; }
}

/* ==========================================================================
   MAPA ATRAKCJI - na mobile mapa miała 0 px szerokości (siatka 400px + 1fr), lista pod mapą zbędna
   ========================================================================== */
@media (max-width:900px) {
  .map-layout { grid-template-columns:1fr !important; grid-template-rows:auto auto; height:auto !important; min-height:0 !important; }
  /* na telefonie sama mapa - szczegóły atrakcji w dymku po kliknięciu znacznika */
  .map-panel-left { display:none !important; }
  .map-panel-right { height:calc(100svh - var(--m-navh, 58px) - 64px); min-height:420px; }
}

/* ==========================================================================
   POZNAJ WROCŁAW
   ========================================================================== */
@media (max-width:900px) {
  .articles-row { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
  /* 9 artykułów w 2 kolumnach zostawia jeden samotny - ukrywamy nieparzysty ostatni */
  .articles-row > :last-child:nth-child(odd) { display:none; }
  /* Wrocław na YouTube: 4 miniatury po 77px były nieczytelne */
  .yt-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
}
@media (max-width:600px) {
  .p-poznaj .cat-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px; }
  .p-poznaj .cat-card { padding:12px; gap:10px; flex-direction:column; align-items:flex-start; }
  .p-poznaj .cat-card-icon { width:34px; height:34px; }
  .p-poznaj .cat-card-name { white-space:normal; font-size:14px; }

  .articles-row .article-body { padding:10px 11px 12px; }
  .articles-row .article-cat { font-size:9.5px; letter-spacing:.06em; margin-bottom:4px; }
  .articles-row .article-title {
    font-size:14px; line-height:1.25;
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
    overflow-wrap:break-word;
  }
  .articles-row .article-read-more { font-size:12px; margin-top:6px; }
  .articles-row .article-img { height:120px; }
  .articles-row .article-heart { top:6px; right:6px; height:24px; padding:0 6px; font-size:11px; }
}

/* ==========================================================================
   SZCZEGÓŁY WYDARZENIA / ATRAKCJI
   ========================================================================== */
@media (max-width:900px) {
  /* kolumna 1fr rosła do szerokości pionowego plakatu (401px na ekranie 390) i ucinała go z prawej */
  .p-wydarzenie .detail-layout, .p-atrakcja .detail-layout { grid-template-columns:minmax(0,1fr) !important; }
  .p-wydarzenie .detail-layout > *, .p-atrakcja .detail-layout > *, .p-wydarzenie .gallery > *, .p-atrakcja .gallery > * { min-width:0; }
  .p-wydarzenie .gallery-main img, .p-atrakcja .gallery-main img { width:100%; height:auto; max-height:min(80vh, 640px); object-fit:contain; }
}
@media (max-width:600px) {
  .p-wydarzenie .detail-layout, .p-atrakcja .detail-layout { padding-left:16px !important; padding-right:16px !important; }
  .p-wydarzenie .event-hero, .p-atrakcja .event-hero { padding-top:20px !important; }
  .p-wydarzenie .event-hero-inner, .p-atrakcja .event-hero-inner { padding-left:16px !important; padding-right:16px !important; gap:20px !important; }
  .p-wydarzenie .event-hero h1, .p-atrakcja .event-hero h1 { font-size:26px !important; }
}

/* ==========================================================================
   R5: PRZYKLEJONA NAWIGACJA (wszystkie szerokości - pojawia się dopiero przy przewijaniu)
   ========================================================================== */
/* listy: pasek dat (wydarzenia), Lista/Mapa (atrakcje, restauracje) trzymają się pod menu */
.date-nav-bar { position:sticky; top:var(--m-navh, 62px); z-index:90; }
.view-tabs-bar, .m-sticky-tabs { position:sticky; top:var(--m-navh, 62px); z-index:90; }
@media (max-width:900px) {
  .m-sticky-tabs-inner { padding:0 12px 0 16px !important; gap:8px; }
  .m-sticky-tabs-inner > span { font-size:12px !important; }
  .m-sticky-tabs-inner > div > a { padding:12px 12px !important; }
  .p-restauracje .hero-inner > form.m-sheet-source:not(.m-in-sheet) { display:none; }
  .m-sheet-body form.m-sheet-source .filter-bar { flex-direction:column; align-items:stretch; background:none; border:0; padding:0; }
  .m-sheet-body form.m-sheet-source select { width:100%; font-size:15px; padding:12px 14px; }
}

/* szczegóły: menu sekcji wysuwane spod głównej nawigacji */
.m-secnav {
  position:fixed; left:0; right:0; top:var(--m-navh, 62px); z-index:95;
  background:var(--white, #fff); border-bottom:1.5px solid var(--border, #e5e5e5);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transform:translateY(-110%); visibility:hidden;
  transition:transform .25s ease, visibility 0s linear .25s;
}
.m-secnav.on { transform:none; visibility:visible; transition:transform .25s ease; }
.m-secnav-inner {
  max-width:1280px; margin:auto; padding:0 32px; display:flex; gap:4px;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.m-secnav-inner::-webkit-scrollbar { display:none; }
.m-secnav a {
  flex:0 0 auto; white-space:nowrap; text-decoration:none;
  font:600 13.5px/1 'DM Sans',sans-serif; color:var(--g500, #737373);
  padding:15px 12px 12px; border-bottom:3px solid transparent;
}
.m-secnav a:hover { color:var(--black, #0b0a0d); }
.m-secnav a.active { color:var(--black, #0b0a0d); border-bottom-color:var(--yellow, #e21b18); }
/* przyklejony sidebar szczegółów zjeżdża pod menu sekcji */
.sidebar-sticky { transition:top .25s ease; }
.m-secnav-on .sidebar-sticky { top:calc(var(--m-navh, 62px) + 64px); }
@media (max-width:900px) {
  .m-secnav-inner { padding:0 8px; }
  .m-secnav a { font-size:13px; padding:13px 10px 10px; }
}

/* ==========================================================================
   R5: RESTAURACJE, ARTYKUŁY, FILMY
   ========================================================================== */
@media (max-width:900px) {
  /* listy artykułów i filmów: 3 kolumny po 106px ucinały tytuły do 2 słów */
  .p-artykuly .grid-3, .p-filmy .grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
  .p-artykul .related-grid, .p-film .related-grid, .p-restauracja .related-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
  /* galeria restauracji: 4 wąskie paski -> duże zdjęcie + 3 miniatury */
  .p-restauracja .gallery-grid { grid-template-columns:repeat(3,1fr) !important; grid-template-rows:220px 84px; height:auto !important; }
  .p-restauracja .gallery-grid .gallery-main { grid-column:1 / -1; }
}
@media (max-width:600px) {
  .p-restauracje .hero, .p-artykuly .hero, .p-filmy .hero, .p-artykul .hero, .p-film .hero { padding-top:20px !important; padding-bottom:20px !important; }
  .p-restauracje .hero-inner, .p-artykuly .hero-inner, .p-filmy .hero-inner, .p-artykul .hero-inner, .p-film .hero-inner { padding-left:16px !important; padding-right:16px !important; }
  .p-restauracje .hero h1, .p-artykuly .hero h1, .p-filmy .hero h1, .p-artykul .hero h1, .p-film .hero h1 { font-size:28px !important; line-height:1.1; }
  .p-artykuly .grid-3 .article-card .card-title, .p-filmy .grid-3 .article-card .card-title, .p-artykuly .grid-3 [class*="title"], .p-filmy .grid-3 [class*="title"] { font-size:14px; line-height:1.25; }
}
@media (max-width:600px) {
  .p-atrakcje-lista .cards-section, .p-restauracje .cards-section { padding-left:16px !important; padding-right:16px !important; }
}

/* ==========================================================================
   R7: FORMULARZE I PANEL UŻYTKOWNIKA (Faza 8)
   Widoki: body.p-auth (logowanie, rejestracja), body.p-panel (moje konto, edycja),
   body.p-form (formularze dodawania), body.p-kreator (kreatory Alpine: firma,
   restauracja, przewodnik). Reguły zawężone klasą widoku, jak w Fazach 1-4.
   ========================================================================== */

/* ---------- pola: zaokrąglenie i stylowany wybór pliku (wszystkie szerokości, uzgodnione) ---------- */
.p-form .fi, .p-form .form-row input, .p-form .form-row textarea, .p-form .form-row select,
.p-auth .auth-form input, .p-auth .auth-form select, .p-panel .fi, .p-form .fi-ta {
  border-radius:10px;
}
/* natywny "Choose File / No file chosen": obszar do upuszczenia pliku (mobile.js dokłada nazwę pliku i podgląd) */
.p-form input[type="file"]:not([style*="display:none"]):not([style*="display: none"]):not(.gal-input),
.p-panel input[type="file"]:not([style*="display:none"]):not([style*="display: none"]) {
  display:block; width:100%; font:500 13px 'DM Sans',sans-serif; color:var(--g700, #444);
  padding:14px !important; border:1.5px dashed var(--border, #e5e5e5); border-radius:10px; background:var(--g50, #fafafa);
  cursor:pointer; box-sizing:border-box;
}
.p-form input[type="file"]:hover, .p-panel input[type="file"]:hover { border-color:var(--yellow-d, #b3140f); background:var(--yellow-p, #fdecec); }
/* przycisk natywny ("Choose File") w kolorach portalu - tekstu przeglądarka nie pozwala zmienić */
.p-form input[type="file"]::file-selector-button, .p-panel input[type="file"]::file-selector-button {
  font:700 12.5px 'DM Sans',sans-serif; color:var(--black, #0a0a0a); background:var(--yellow, #e21b18);
  border:0; border-radius:8px; padding:9px 14px; margin-right:12px; cursor:pointer;
}
.m-file-info { display:flex; align-items:center; gap:10px; margin-top:8px; font:500 12.5px 'DM Sans',sans-serif; color:var(--g500, #737373); }
.m-file-info img { width:48px; height:48px; object-fit:cover; border-radius:8px; border:1px solid var(--border, #e5e5e5); flex-shrink:0; }
.m-file-info b { color:var(--black, #0a0a0a); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.m-file-info .m-file-err { color:#dc2626; font-weight:600; }

@media (max-width:900px) {
  /* 16px to minimum, przy mniejszym iOS przybliża stronę przy wejściu w pole */
  .p-form .fi, .p-form .fi-lg, .p-form .form-row input, .p-form .form-row textarea, .p-form .form-row select,
  .p-auth .auth-form input, .p-auth .auth-form select, .p-panel .fi,
  .p-form select, .p-form textarea, .p-panel select, .p-panel textarea, .p-auth select, .p-auth textarea,
  .p-form input[type="text"], .p-form input[type="email"], .p-form input[type="tel"], .p-form input[type="url"],
  .p-form input[type="password"], .p-form input[type="number"], .p-form input[type="date"], .p-form input[type="time"],
  .p-panel input[type="text"], .p-panel input[type="email"], .p-panel input[type="tel"], .p-panel input[type="url"], .p-panel input[type="password"],
  .p-auth input[type="text"], .p-auth input[type="email"], .p-auth input[type="password"] {
    font-size:16px !important;
    min-height:48px;
    padding:12px 14px;
  }
  .p-form textarea, .p-form .fi-ta { min-height:120px; }
  .p-form .fl { font-size:11.5px; margin-bottom:5px; }
  .p-form .fg, .p-form .form-row { margin-bottom:14px; }
  /* checkboxy i radio: większy cel dotyku */
  .p-form input[type="checkbox"], .p-form input[type="radio"], .p-auth input[type="checkbox"] { width:20px; height:20px; }

  /* karty formularza: mniej marginesu, więcej treści */
  .p-form .form-card, .p-form .step-card, .p-auth .auth-card { border-radius:12px; }
  .p-form .step-card-title { font-size:15px; }

  /* kategorie ogłoszenia: 2 w wierszu zamiast listy na cały ekran */
  .p-form .cat-option { padding:12px 10px !important; }
  /* globalny arkusz daje .cat-grid 1 kolumnę poniżej 560 px (kafelki Poznaj Wrocław); w ogłoszeniu
     kategorie mają być po 2 w wierszu jak w makiecie */
  .p-form .cat-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px; }
  .p-form .cat-name { font-size:13.5px; }
  .p-form .cat-price { font-size:11px; }

  /* odznaka reCAPTCHA nie zasłania przycisku w przyklejonym pasku */
  .m-formbar-on .grecaptcha-badge { bottom:84px !important; }
  .m-formbar-on.m-formbar-price-on .grecaptcha-badge { bottom:132px !important; }
}

@media (max-width:600px) {
  /* pary pól (telefon + e-mail, cena + przełączniki) nie mieszczą się w dwóch kolumnach */
  .p-form form div[style*="grid-template-columns:1fr 1fr"], .p-form .grid-2 { grid-template-columns:1fr !important; }
  .p-form .price-row { display:block; }
  .p-form .price-row .fg { margin-bottom:10px; }
  .p-form .price-row .fi { text-align:left; }
  .p-form .price-toggles { display:flex; gap:10px; }
  .p-form .price-toggles .toggle-pill { flex:1; justify-content:center; }
}

/* ---------- logowanie i rejestracja ---------- */
@media (max-width:900px) {
  .p-auth .auth-wrap { padding:20px 16px 32px !important; }
  /* Najpierw formularz, pod nim ciemny panel z zachętą (kolejność ustawiana też w stylach widoku). */
  .p-auth .auth-split {
    display:flex !important; flex-direction:column;
    grid-template-columns:1fr !important; border-radius:14px; overflow:hidden;
  }
  .p-auth .auth-split .auth-form-side { order:1; }
  .p-auth .auth-split .auth-panel { display:flex !important; flex-direction:column; order:2; padding:24px 20px !important; }
  .p-auth .auth-panel-body { padding:0 !important; }
  .p-auth .auth-panel-heading { font-size:22px !important; margin-bottom:8px; }
  .p-auth .auth-panel-desc { font-size:14px !important; margin-bottom:18px; }
  /* logo i stopka panelu dublują nagłówek i stopkę strony */
  .p-auth .auth-panel-footer, .p-auth .auth-panel-logo { display:none !important; }
  .p-auth .auth-panel-cta-label { margin-bottom:8px; }
  .p-auth .auth-split .auth-panel-register-btn,
  .p-auth .auth-split .social-btn, .p-auth .auth-split .oauth-btn,
  .p-auth .auth-split button[type="submit"] { width:100%; justify-content:center; }
  .p-auth .auth-split .auth-panel-register-btn { min-height:50px; font-size:15px; }
  .p-auth .auth-split .social-btn, .p-auth .auth-split .oauth-btn { min-height:48px; }
}

/* ---------- panel użytkownika ---------- */
@media (max-width:900px) {
  .p-panel .page-hero-top { flex-direction:column; align-items:flex-start !important; gap:12px !important; }
  .p-panel .hero-account-actions { display:flex; gap:8px; width:100%; margin:0 !important; }
  .p-panel .hero-account-actions form { flex:1; display:flex !important; }
  .p-panel .hero-account-actions .hero-acc-btn { flex:1; justify-content:center; font-size:12.5px; padding:10px 8px; }
  /* zakładki panelu przyklejone pod menu, przewijane w poziomie (są poza .page-hero - patrz dashboard.blade.php) */
  .p-panel .profile-tabs-bar {
    position:sticky; top:var(--m-navh, 62px); z-index:90;
    background:var(--black, #0b0a0d); border-bottom:2px solid var(--yellow, #e21b18);
  }
  .p-panel .profile-tabs { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:0 8px; margin-top:0 !important; border-top:0; }
  .p-panel .profile-tabs::-webkit-scrollbar { display:none; }
  .p-panel .profile-tab { padding:12px 12px !important; font-size:13px !important; }
  .p-panel .page-hero { padding-bottom:14px !important; }
  /* nagłówek listy: tytuł nad przyciskiem, przycisk na całą szerokość */
  .p-panel .section-header { flex-wrap:wrap; gap:10px; }
  .p-panel .section-header > a, .p-panel .section-header > button { width:100%; justify-content:center; }
  .p-panel .empty-tab { padding:36px 16px !important; }
  /* tabele panelu: przewijane w poziomie zamiast ściskania kolumn */
  .p-panel .profile-section .data-table { display:block; overflow-x:auto; white-space:nowrap; }
  .p-panel .profile-section .data-table th:first-child, .p-panel .profile-section .data-table td:first-child { padding-left:14px; }
  .p-panel .profile-section .data-table th:last-child, .p-panel .profile-section .data-table td:last-child { padding-right:14px; }
  .p-panel .table-footer { flex-direction:column; align-items:stretch; gap:10px; padding:14px !important; text-align:center; }
  .p-panel .comment-row, .p-panel .like-row { padding-left:14px !important; padding-right:14px !important; }
  .p-panel .like-row { grid-template-columns:74px 1fr; row-gap:2px; }
  .p-panel .like-row > span:last-child { grid-column:2; }
}

/* ==========================================================================
   R9: FORMULARZE NA PEŁNĄ SZEROKOŚĆ EKRANU (padding strony 10 px, karty 14 px)
   align-items:stretch na .form-page poprawione u źródła w widokach.
   ========================================================================== */
@media (max-width:900px) {
  .p-form .form-page { align-items:stretch !important; padding:12px 10px 24px !important; gap:14px !important; }
  .p-form .form-main, .p-form .form-sidebar { width:100%; max-width:100%; }
  .p-auth .auth-wrap { padding:12px 10px 24px !important; }
  .p-panel .main-layout { padding:0 10px 40px !important; margin:16px auto !important; }

  .p-form .step-card-body { padding:14px !important; }
  .p-form .step-card-head { padding:12px 14px !important; }
  .p-panel .profile-section { padding:16px 14px !important; }
  .p-auth .auth-form-side { padding:20px 14px !important; }
  .p-auth .auth-split .auth-panel { padding:20px 14px !important; }
  .p-panel .section-header { padding-left:14px !important; padding-right:14px !important; }
  .p-panel .card-list { padding:12px 10px !important; }
  .p-form .form-sidebar .tip-card, .p-form .form-sidebar .step-card, .p-form .moderation-note { padding:14px !important; }
  .p-form .pricing-inner { padding-left:10px !important; padding-right:10px !important; }
}

/* ukryte pole galerii przewodnika: ogólna reguła pól nadawała mu 100% szerokości,
   a przy position:absolute wystawało poza ekran (poziome przewijanie kroku 3) */
.p-form input.gal-input { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; border:0 !important; overflow:hidden; clip:rect(0 0 0 0); }

/* ==========================================================================
   R8 / R10 / R11 (Faza 8, krok b): PRZYKLEJONY PASEK AKCJI, PASEK POSTĘPU, CENA NA LICZNIKU
   Pasek akcji (.m-formbar) i pasek postępu (.m-steps) są renderowane w Blade w każdym formularzu
   (partials/m-steps, partials/m-formbar-price), a na desktopie w ogóle się nie wyświetlają.
   Oryginalne kontenery akcji w treści mają klasę .m-formbar-src i znikają tylko poniżej 900 px.
   ========================================================================== */
.m-formbar, .m-steps { display:none; }
.m-formbar [x-cloak] { display:none !important; }
@media (max-width:900px) {
  body.m-formbar-on .m-formbar-src { display:none !important; }
  body.m-formbar-on { padding-bottom:84px; }
  body.m-formbar-price-on.m-formbar-on { padding-bottom:132px; }

  .m-formbar {
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:96;
    background:var(--white, #fff); border-top:1.5px solid var(--border, #e5e5e5);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 20px rgba(0,0,0,.08);
  }
  .m-formbar .step-nav { display:flex; align-items:center; justify-content:space-between; margin:0; gap:10px; }
  .m-formbar .step-nav > span:empty, .m-formbar .step-nav > div:empty { display:none; }
  .m-formbar .btn-next, .m-formbar .btn-next-step, .m-formbar .btn-pay, .m-formbar .btn-submit,
  .m-formbar .btn-save, .m-formbar .btn-start, .m-formbar .btn-black, .m-formbar .btn-yellow,
  .m-formbar button[type="submit"] {
    flex:1 1 auto; width:auto; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:15px 20px; font-size:15px; border-radius:10px; margin:0;
  }
  .m-formbar .btn-prev, .m-formbar .btn-back { flex:0 0 auto; padding:12px 14px; font-size:13px; margin:0; }
  .m-formbar .step-nav > a:not(.btn-prev):not(.btn-back) { flex:0 0 auto; font-size:13px; }

  /* formularze płatne: cena po lewej, "Wstecz" po prawej, pod spodem główny przycisk na całą szerokość */
  .m-formbar-price-on .m-formbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
  .m-formbar-price-on .m-formbar .step-nav { display:contents; }
  .m-formbar-price { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; line-height:1.15; order:0; }
  .m-fp-label { font-size:11.5px; color:var(--g500, #737373); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .m-fp-value b { font:800 20px 'Bricolage Grotesque',sans-serif; color:var(--black, #0a0a0a); }
  .m-fp-value small { font-size:12px; color:var(--g500, #737373); }
  .m-formbar-price-on .m-formbar .btn-prev, .m-formbar-price-on .m-formbar .btn-back { order:1; padding:9px 12px; border-radius:8px; }
  .m-formbar-price-on .m-formbar .btn-next, .m-formbar-price-on .m-formbar .btn-next-step,
  .m-formbar-price-on .m-formbar .btn-pay, .m-formbar-price-on .m-formbar .btn-submit,
  .m-formbar-price-on .m-formbar .btn-start, .m-formbar-price-on .m-formbar button[type="submit"] { order:2; flex:1 0 100%; }

  /* u góry tylko menu i pasek postępu: czarny pasek ceny kreatorów nachodził na pasek kroków */
  .m-formbar-price-on .sticky-price-bar { display:none !important; }

  .m-steps {
    display:flex; align-items:center; gap:10px;
    position:sticky; top:var(--m-navh, 62px); z-index:90;
    background:var(--white, #fff); border-bottom:1.5px solid var(--border, #e5e5e5);
    padding:10px 16px; font:600 12.5px 'DM Sans',sans-serif; color:var(--g500, #737373);
  }
  .m-steps-num { white-space:nowrap; }
  .m-steps-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:50%; }
  .m-steps-track { flex:1; min-width:40px; height:6px; border-radius:3px; background:var(--g200, #e5e5e5); overflow:hidden; }
  .m-steps-track span { display:block; height:100%; background:var(--yellow, #e21b18); transition:width .2s; }
}

/* ==========================================================================
   R11 (Faza 8, krok c): STRONA WEJŚCIOWA RESTAURACJI - cztery korzyści jako kafelki 2x2
   (ikona na żółtym tle, nagłówek, podpis). Nagłówek i podpis to osobne elementy w Blade
   (<strong> + .m-ti-sub), na desktopie span jest neutralny. Mniejsze wcięcia cennika.
   ========================================================================== */
@media (max-width:900px) {
  .p-kreator .trust-strip { padding:20px 16px !important; }
  .p-kreator .trust-inner { display:grid !important; grid-template-columns:1fr 1fr; gap:10px !important; }
  .p-kreator .trust-item {
    flex-direction:column; align-items:flex-start; gap:10px !important; text-align:left;
    background:var(--white, #fff); border:1.5px solid var(--border, #e5e5e5); border-radius:12px; padding:14px;
  }
  .p-kreator .trust-item > svg {
    width:36px !important; height:36px !important; padding:8px; box-sizing:border-box; flex-shrink:0;
    border-radius:10px; background:var(--yellow, #e21b18); color:var(--black, #0a0a0a); stroke:var(--black, #0a0a0a);
  }
  .p-kreator .trust-item > span { display:flex; flex-direction:column; gap:3px; }
  .p-kreator .trust-item strong { font:800 16px/1.15 'Bricolage Grotesque',sans-serif; color:var(--black, #0a0a0a); }
  .p-kreator .m-ti-sub { font-size:12.5px; line-height:1.35; color:var(--g500, #737373); }
  .p-kreator .pricing-wrap { padding:32px 16px 40px !important; gap:20px !important; }
  .p-kreator .pricing-card { padding:32px 20px 24px !important; }
  .p-kreator .trust-card { padding:24px 20px !important; }
}