/* ✅ HARD FIX: zabij poziomy scroll w całym dokumencie (często winny jest 100vw w base.html) */
  html, body { max-width: 100%; overflow-x: hidden; }
  *, *::before, *::after { box-sizing: border-box; }

  /* (CSS bez zmian — ten sam co wcześniej) */
  .page{ margin-top: 22px; max-width: 100%; overflow-x: hidden; }
  .hero-mini{ padding: 18px; border-radius: var(--radius); border: 1px solid rgba(9, 76, 110, .10);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86)); box-shadow: var(--shadow);
    min-width: 0; }
  .hero-mini h1{ margin: 0 0 6px; font-size: 28px; letter-spacing: -.4px; color: rgba(11,42,58,.92); }
  .hero-mini p{ margin: 0; color: rgba(11,42,58,.72); line-height: 1.6; font-size: 13px; max-width: 980px; }

  .tabs{ margin-top: 14px; display:flex; gap: 10px; flex-wrap: wrap; }
  .tab{ border: 1px solid rgba(9, 76, 110, .12); background: rgba(255,255,255,.78); padding: 10px 12px;
    border-radius: 14px; font-weight: 1100; color: rgba(11,42,58,.78); cursor:pointer; }
  .tab.active{ background: rgba(35,183,255,.14); border-color: rgba(35,183,255,.28); color: rgba(11,42,58,.92); }

  .grid{ margin-top: 14px; display:grid; grid-template-columns: 1.15fr .85fr; gap: 14px; align-items:start; min-width:0; max-width:100%; }
  @media (max-width: 980px){ .grid{ grid-template-columns: 1fr; } }

  .panel{ padding: 18px; min-width:0; }
  .panel h2{ margin: 0 0 8px; font-size: 18px; letter-spacing: -.2px; color: rgba(11,42,58,.92); }
  .hint{ margin: 0 0 14px; color: rgba(11,42,58,.66); font-size: 13px; line-height: 1.6; }
  .cta-row{ margin-top: 14px; display:flex; gap: 10px; align-items:center; flex-wrap:wrap; }

  .box{ padding: 16px; border-radius: var(--radius); border: 1px solid rgba(9, 76, 110, .10); background: rgba(255,255,255,.76);
    min-width:0; }
  .box h3{ margin: 0 0 8px; font-size: 14px; font-weight: 1100; color: rgba(11,42,58,.92); }
  .box p{ margin: 0; color: rgba(11,42,58,.70); line-height: 1.6; font-size: 13px; }

  .mode{ display:none; }
  .mode.active{ display:block; }
  .messages{ margin-top: 12px; }
  .msg{ padding: 12px 12px; border-radius: 14px; border: 1px solid rgba(9, 76, 110, .10);
    background: rgba(35,183,255,.08); color: rgba(11,42,58,.78); font-weight: 900; }
  .msg.err{ background: rgba(255,42,122,.10); border-color: rgba(255,42,122,.16); }

  .form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width:0; }
  @media (max-width: 680px){ .form-grid{ grid-template-columns: 1fr; } }
  .full{ grid-column: 1 / -1; }
  .errorlist{ margin: 10px 0; padding: 12px 12px; background: #ffe6ee; color:#8a0030; border-radius: 14px; list-style: none; }

  .online-top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; flex-wrap:wrap; margin-bottom: 10px; min-width:0; }
  .pill{ display:inline-flex; align-items:center; gap: 8px; padding: 8px 10px; border-radius: 999px;
    border: 1px solid rgba(9, 76, 110, .10); background: rgba(35,183,255,.08); color: rgba(11,42,58,.78);
    font-weight: 1000; font-size: 12px; }

  /* ✅ TU JEST KLUCZ: koniec karuzeli, dni łamią się do kolejnych wierszy */
  .days-strip{
    display:flex;
    flex-wrap:wrap;
    gap: 10px;
    overflow: visible;          /* nie przewijaj w bok */
    padding-bottom: 6px;
    max-width: 100%;
    min-width: 0;
  }
  .day-card{
    flex: 1 1 160px;            /* łamie się jak brakuje miejsca */
    max-width: 220px;           /* żeby nie robić “klocków” na desktopie */
    min-width: 140px;
    border-radius: 18px;
    border: 1px solid rgba(9, 76, 110, .10);
    background: rgba(255,255,255,.86);
    box-shadow: var(--shadow);
    padding: 12px;
    cursor:pointer;
    transition: transform .08s ease, filter .08s ease;
  }
  @media (max-width: 520px){
    .day-card{ max-width: 100%; flex-basis: 48%; }
  }
  .day-card:hover{ transform: translateY(-1px); filter: brightness(1.01); }
  .day-card.active{ outline: 3px solid rgba(35,183,255,.24); border-color: rgba(35,183,255,.30); }
  .day-title{ font-weight: 1200; color: rgba(11,42,58,.92); font-size: 13px; margin-bottom: 2px; }
  .day-sub{ color: rgba(11,42,58,.66); font-size: 12px; }

  .slots-wrap{ margin-top: 12px; border-radius: 20px; border: 1px solid rgba(9, 76, 110, .10); background: rgba(255,255,255,.82);
    overflow:hidden; max-width: 100%; min-width:0; }
  .slots-head{ padding: 12px 12px; display:flex; align-items:center; justify-content:space-between; gap: 10px;
    background: rgba(35,183,255,.10); border-bottom: 1px solid rgba(9, 76, 110, .10); min-width:0; }
  .slots-head strong{ color: rgba(11,42,58,.92); font-weight: 1100; }
  .slots-head span{ color: rgba(11,42,58,.68); font-size: 12px; }

  .times-grid{ padding: 12px; display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px; min-width:0; }
  @media (max-width: 900px){ .times-grid{ grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 520px){ .times-grid{ grid-template-columns: repeat(2, 1fr); } }

  .time-btn{ border-radius: 16px; border: 1px solid rgba(9, 76, 110, .10); background: rgba(255,255,255,.92);
    padding: 10px; cursor:pointer; transition: transform .08s ease, filter .08s ease; display:flex; flex-direction:column; gap: 6px; min-height: 68px;
    min-width:0; }
  .time-btn:hover{ transform: translateY(-1px); filter: brightness(1.01); }
  .time-btn.disabled{ opacity: .55; cursor:not-allowed; filter: grayscale(.2); }
  .time-btn.active{ outline: 3px solid rgba(35,183,255,.24); border-color: rgba(35,183,255,.30); }
  .time-top{ display:flex; align-items:center; justify-content:space-between; gap: 8px; min-width:0; }
  .time{ font-weight: 1200; color: rgba(11,42,58,.92); }
  .badge{ display:inline-flex; align-items:center; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 1100;
    letter-spacing: .2px; border: 1px solid rgba(9, 76, 110, .10); background: rgba(35,183,255,.10); color: rgba(11,42,58,.74); width: fit-content; }
  .badge.busy{ background: rgba(255,42,122,.10); border-color: rgba(255,42,122,.16); }
  .meta{ font-size: 11px; color: rgba(11,42,58,.66); line-height: 1.35; }

  .booking-box{ margin-top: 12px; border-radius: 20px; border: 1px solid rgba(9, 76, 110, .10);
    background: rgba(255,255,255,.86); box-shadow: var(--shadow); padding: 14px; min-width:0; max-width:100%; }
  .booking-box h3{ margin: 0 0 6px; font-size: 15px; font-weight: 1200; color: rgba(11,42,58,.92); }
  .booking-summary{ margin: 0 0 10px; color: rgba(11,42,58,.72); font-size: 13px; line-height: 1.55; }

  .book-form{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; min-width:0; }
  @media (max-width: 680px){ .book-form{ grid-template-columns: 1fr; } }
  .book-form .full{ grid-column: 1 / -1; }

  .rec-row{ margin-top: 10px; display:flex; gap: 10px; flex-wrap:wrap; align-items:center; padding: 10px; border-radius: 14px;
    border: 1px solid rgba(9, 76, 110, .10); background: rgba(35,183,255,.06); min-width:0; }
  .rec-row label{ display:flex; gap: 8px; align-items:center; font-weight: 1000; color: rgba(11,42,58,.78); cursor:pointer; }
  .rec-row select{ min-width: 160px; }
  .rec-help{ flex: 1 1 320px; color: rgba(11,42,58,.62); font-size: 12px; line-height: 1.4; }

  .spinner{ width: 16px; height: 16px; border-radius: 999px; border: 2px solid rgba(11,42,58,.18);
    border-top-color: rgba(11,42,58,.65); animation: spin .8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }