/* Skrymie styles v1.2.1 — mobile fit <400px + no horizontal overflow */
.skrymie-wrapper, .skrymie-wrapper * {
  font-family:'Montserrat',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  box-sizing:border-box;
}
.skrymie-wrapper { max-width:100%; width:100%; overflow-x:hidden; }

/* Desktop / tablet layout */
.skrymie-wrapper .skrymie-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;
}
@media(max-width:900px){
  .skrymie-wrapper .skrymie-grid{ grid-template-columns:1fr; gap:24px }
  .skrymie-wrapper .skrymie-panel{ order:1 }
  .skrymie-wrapper .skrymie-calendar{ order:2 }
}

.skrymie-wrapper .skrymie-panel h2{
  font-size:clamp(20px,4.2vw,28px); line-height:1.1; margin:0 0 10px;
  color:#0f1f3d; font-weight:500;
}
.skrymie-wrapper .skrymie-intro{ color:#374151; margin-bottom:12px }
.skrymie-wrapper .skrymie-date-title{ font-size:22px; font-weight:700; margin:8px 0 12px; color:#0f1f3d }

.skrymie-wrapper .skrymie-calendar{
  background:#fff; border-radius:24px; box-shadow:0 10px 30px rgba(0,0,0,.06); padding:24px;
}
.skrymie-wrapper .skrymie-cal-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px }
.skrymie-wrapper .skrymie-cal-header .skrymie-month{ font-weight:700; font-size:22px; color:#0f1f3d }

/* Equal chevrons */
.skrymie-wrapper .skrymie-nav{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  background:#eef2f7; border:none; border-radius:999px; width:44px; height:44px; cursor:pointer;
  font-size:0; line-height:0;
}
.skrymie-wrapper .skrymie-nav::before{
  content:""; display:block; width:12px; height:12px; border-right:3px solid #0f1f3d; border-top:3px solid #0f1f3d; transform:rotate(45deg);
}
.skrymie-wrapper .skrymie-nav.prev::before{ transform:rotate(-135deg) }
.skrymie-wrapper .skrymie-nav.next::before{ transform:rotate(45deg) }

/* Grids */
.skrymie-wrapper .skrymie-weekdays,
.skrymie-wrapper .skrymie-days{
  display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:10px;
}
.skrymie-wrapper .skrymie-weekdays div{ font-weight:600; color:#6b7280; text-align:center; padding:6px 0 }

/* Day cells */
.skrymie-wrapper .skrymie-day{
  aspect-ratio:1/1; border-radius:16px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; background:#f8fafc; color:#0f1f3d; font-weight:700; border:1.5px solid #d5dbe6;
}
.skrymie-wrapper .skrymie-day.out{ opacity:.35; pointer-events:none }
.skrymie-wrapper .skrymie-day.today{ outline:2px solid #c9d2e3 }
.skrymie-wrapper .skrymie-day.selected{ background:#0f1f3d; color:#fff; border-color:#0f1f3d }
.skrymie-wrapper .skrymie-day:hover{ filter:brightness(.97) }

/* Slots & button */
.skrymie-wrapper .skrymie-slots{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:12px }
.skrymie-wrapper .skrymie-slot{ padding:14px 20px; border-radius:999px; background:#f3f5f9; border:2px solid transparent; font-weight:700; cursor:pointer; color:#0f1f3d }
.skrymie-wrapper .skrymie-slot.taken{ background:#f9fafb; color:#9ca3af; cursor:not-allowed; position:relative; border-color:#e5e7eb }
.skrymie-wrapper .skrymie-slot.taken:after{ content:""; position:absolute; right:10px; top:10px; width:8px; height:8px; border-radius:999px; background:#ef4444 }
.skrymie-wrapper .skrymie-slot.selected{ background:#182b53; color:#fff; border-color:#182b53 }

.skrymie-wrapper .skrymie-btn{
  background:#182b53 !important; color:#fff; border:none; border-radius:16px; padding:16px 26px;
  font-weight:600; font-size:18px; cursor:pointer; transition:filter .15s ease;
}
.skrymie-wrapper .skrymie-btn:hover{ filter:brightness(1.05) }
.skrymie-wrapper .skrymie-btn[disabled]{ opacity:.45; cursor:not-allowed }

/* Inputs */
.skrymie-wrapper .skrymie-fields{ display:flex; gap:12px; margin:12px 0; flex-wrap:wrap }
.skrymie-wrapper .skrymie-fields input{
  flex:1; min-width:220px; padding:12px 14px; border:1.5px solid #e5e7eb; border-radius:12px; background:#fff; color:#0f1f3d;
}
.skrymie-wrapper .skrymie-fields input::placeholder{ color:#9ba3af }
.skrymie-wrapper .skrymie-msg{ margin-top:12px; font-weight:600; color:#0f1f3d }

/* --------- MOBILE TIGHT MODE --------- */
@media(max-width:400px){
  .skrymie-wrapper .skrymie-grid{ gap:16px; padding:0 8px }       /* węższe marginesy */
  .skrymie-wrapper .skrymie-panel h2{ font-size:22px; margin-bottom:6px }
  .skrymie-wrapper .skrymie-intro{ font-size:13px; margin-bottom:6px }

  .skrymie-wrapper .skrymie-calendar{ padding:12px; border-radius:16px }
  .skrymie-wrapper .skrymie-cal-header .skrymie-month{ font-size:16px }
  .skrymie-wrapper .skrymie-nav{ width:34px; height:34px }
  .skrymie-wrapper .skrymie-nav::before{ width:9px; height:9px; border-width:2.5px }

  .skrymie-wrapper .skrymie-weekdays,
  .skrymie-wrapper .skrymie-days{ gap:3px }                       /* ciaśniej */
  .skrymie-wrapper .skrymie-weekdays div{ font-size:11px; padding:4px 0 }

  /* Zamiast aspect-ratio — stała wysokość i mniejsza czcionka */
  .skrymie-wrapper .skrymie-day{ aspect-ratio:auto; height:34px; border-radius:10px; font-size:12px }

  /* Pola i przycisk na pełną szerokość */
  .skrymie-wrapper .skrymie-fields{ gap:8px; margin:8px 0 }
  .skrymie-wrapper .skrymie-fields input{ min-width:0; width:100%; padding:10px 12px; border-radius:10px; font-size:14px }
  .skrymie-wrapper .skrymie-btn{ width:100%; padding:12px 18px; font-size:16px; border-radius:12px }

  /* Sloty: dwa w rzędzie, żeby się mieściły */
  .skrymie-wrapper .skrymie-slots{ gap:8px }
  .skrymie-wrapper .skrymie-slot{ padding:10px 12px; font-size:13px; flex:1 1 calc(50% - 8px); text-align:center }
}

@media(max-width:340px){
  .skrymie-wrapper .skrymie-grid{ padding:0 6px }
  .skrymie-wrapper .skrymie-day{ height:30px; font-size:11px }
  .skrymie-wrapper .skrymie-weekdays div{ font-size:10px }
  .skrymie-wrapper .skrymie-nav{ width:30px; height:30px }
  .skrymie-wrapper .skrymie-nav::before{ width:8px; height:8px }
}


/* === MOBILE: pola pod sobą + lepszy header kalendarza === */
@media (max-width: 480px) {
  /* 1) Pola formularza w kolumnie, 100% szerokości */
  .skrymie-wrapper .skrymie-fields {
    display: flex;
    flex-direction: column;   /* <-- wymusza jedno pod drugim */
    gap: 8px;
    margin: 8px 0;
  }
  .skrymie-wrapper .skrymie-fields input {
    flex: none;               /* wyłącza flex:1 */
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
  }

  /* 2) Nagłówek kalendarza w siatce: strzałka | miesiąc | strzałka */
  .skrymie-wrapper .skrymie-cal-header {
    display: grid;
    grid-template-columns: 36px 1fr 36px; /* równe szerokości po bokach */
    align-items: center;
    gap: 8px;
  }
  .skrymie-wrapper .skrymie-cal-header .skrymie-month {
    text-align: center;       /* idealne wycentrowanie tytułu miesiąca */
    font-size: 18px;
  }

  /* 3) Strzałki – rozmiar na mobile i spójny chevron */
  .skrymie-wrapper .skrymie-nav {
    width: 36px;
    height: 36px;
    background: #eef2f7;
    border-radius: 999px;
  }
  .skrymie-wrapper .skrymie-nav::before {
    width: 4px;
    height: 4px;
    border-width: 1.5px;
  }
}

/* Jeszcze ciaśniej dla bardzo małych ekranów */
@media (max-width: 340px) {
  .skrymie-wrapper .skrymie-cal-header {
    grid-template-columns: 32px 1fr 32px;
  }
  .skrymie-wrapper .skrymie-nav {
    width: 32px;
    height: 32px;
  }
  .skrymie-wrapper .skrymie-nav::before {
    width: 8px;
    height: 8px;
  }
}