:root {
  --mg-bg: #2b2b2b;
  --mg-card: #f8f3e6;
  --mg-ink: #2a2a2a;
  --mg-ink-soft: #555;
  --mg-accent: #cbb89d;
  --mg-accent-2: #4d8b66; 
  --mg-success: #2e7d32;
  --mg-danger: #b00020;
  --mg-radius: 16px;
  --mg-shadow: 0 25px 60px rgba(46, 52, 64, 0.45);
}

/* IMPORT CZCIONKI */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

/* =========================================
   1. GŁÓWNY WRAPPER (Kalendarz na stronie)
   ========================================= */

#mg-calendar-wrapper {
  background: transparent; 
  color: #fff;
  font-family: 'Lato', sans-serif;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
  max-width: 100%;
}

#mg-calendar-wrapper *, 
#reservationModal * {
  box-sizing: border-box;
}

#mg-calendar-wrapper .card {
  background: var(--mg-card);
  border-radius: var(--mg-radius);
  box-shadow: var(--mg-shadow);
  padding: 24px;
  color: var(--mg-ink);
  margin-bottom: 20px;
  text-align: left;
  line-height: 1.5;
}

/* Ogłoszenia */
#mg-calendar-wrapper .announcement {
  background: #fffdf6;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: var(--mg-radius);
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 0.95rem;
  color: var(--mg-ink-soft);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,.05);
  line-height: 1.5;
  white-space: pre-line;
}
#mg-calendar-wrapper .announcement .icon {
  font-weight: bold;
  color: var(--mg-accent-2);
  font-size: 1.4em;
  line-height: 1;
  margin-top: 0;
  flex-shrink: 0;
}

/* Kalendarz */
#mg-calendar-wrapper .calendar {
  background: #fffaf0;
  border-radius: var(--mg-radius);
  border: 1px solid rgba(0,0,0,.05);
  overflow: hidden;
  max-width: 100%;
}
#mg-calendar-wrapper .cal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(0,0,0,.03);
}
#mg-calendar-wrapper .cal-nav {
  cursor: pointer;
  border: 1px solid rgba(0,0,0,.1);
  background: #fff;
  color: var(--mg-ink);
  font-weight: bold;
  padding: 8px 14px;
  border-radius: 8px;
  line-height: 1;
  transition: all 0.2s;
  display: flex; 
  align-items: center; 
  justify-content: center;
}
#mg-calendar-wrapper .cal-nav:hover { background: #f0f0f0; }
#mg-calendar-wrapper .cal-month { 
  font-weight: 700; 
  text-transform: capitalize; 
  color: var(--mg-ink);
  font-size: 1.1em;
}

/* NOWOŚĆ: Nagłówki dni tygodnia */
.cal-week-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-weight: 700;
  color: var(--mg-ink-soft);
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  font-size: 0.9rem;
  background: rgba(0,0,0,0.01);
}

#mg-calendar-wrapper .cal-grid { 
  display: grid; 
  grid-template-columns: repeat(7, 1fr); 
  border-top: 1px solid rgba(0,0,0,.05);
  gap: 0; /* Reset gapu dla desktopu */
}

#mg-calendar-wrapper .cal-cell {
  position: relative;
  text-align: center;
  padding: 10px 4px 34px 4px;
  min-height: 90px;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  color: var(--mg-ink);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
#mg-calendar-wrapper .cal-cell > div:first-child {
  font-weight: 600;
  margin-bottom: 4px;
  z-index: 2;
  font-size: 1rem;
}
#mg-calendar-wrapper .cal-cell.available { cursor: pointer; }
#mg-calendar-wrapper .cal-cell.available:hover { background: #fdf9ef; }
#mg-calendar-wrapper .cal-cell.muted { background: #f5efe2; color: #aaa; pointer-events: none; }
#mg-calendar-wrapper .cal-cell.unavailable { background: #eee; color: #bbb; }

/* NOWY STYL DLA DNI ZAJĘTYCH/WOLNYCH (Wyglądają jak normalne dni, ale z badge) */
#mg-calendar-wrapper .cal-cell.unavailable.is-busy {
    background: #fff; /* Tło jak dostępny dzień */
    color: var(--mg-ink);
    opacity: 0.8;
}

#mg-calendar-wrapper .cal-cell .badge {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--mg-accent);
  color: #fff;
  font-size: 11px;
  line-height: 1.2;
  padding: 4px 8px;
  border-radius: 99px;
  width: max-content;
  max-width: 90%;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 5;
}
/* CZERWONY BADGE DLA ZAJĘTYCH/WOLNYCH */
#mg-calendar-wrapper .cal-cell .badge.full { background: var(--mg-danger); }


/* =========================================
   2. MODAL
   ========================================= */

#reservationModal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fffaf0;
  color: var(--mg-ink);
  border-radius: 18px;
  box-shadow: 0 25px 80px rgba(0,0,0,.45);
  width: min(92vw, 680px);
  max-height: 90vh;
  overflow-y: auto;
  display: none;
  z-index: 999999;
  font-family: 'Lato', sans-serif;
  text-align: left;
  line-height: normal;
}
#reservationModal.open { display: block; animation: fadeIn 0.2s ease-out; }

@keyframes fadeIn { from { opacity: 0; transform: translate(-50%, -48%); } to { opacity: 1; transform: translate(-50%, -50%); } }

#reservationModal h2, 
#reservationModal h3, 
#reservationModal h4 {
    color: var(--mg-ink) !important;
    font-family: 'Lato', sans-serif !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    font-weight: 700 !important;
}
#reservationModal form h3 {
    font-size: 1.15rem !important;
    text-align: left !important;
    margin-bottom: 8px !important;
}

#reservationModal .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
}
#reservationModal .modal-title { font-weight: bold; font-size: 1.15rem; color: var(--mg-ink); }
#reservationModal .modal-close {
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: bold;
  color: var(--mg-ink);
  transition: background 0.2s;
  padding: 0;
}
#reservationModal .modal-close:hover { background: #eee; }
#reservationModal .modal-body { padding: 20px; }

/* SLOTY */
#reservationModal .slot {
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
  background: #fffdf6;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  transition: all 0.2s ease;
  color: var(--mg-ink);
  position: relative;
}
#reservationModal .slot:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
#reservationModal .slot-active {
  border: 2px solid var(--mg-accent) !important;
  background: #fff !important;
  box-shadow: 0 4px 12px rgba(203,184,157,.4) !important;
}
#reservationModal .slot-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#reservationModal .slot-time { line-height: 1.3; font-size: 0.95rem; color: var(--mg-ink); }
#reservationModal .slot-time small { color: #666; font-size: 0.85em; font-weight: normal; }

#reservationModal .slot-btn {
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  background: #d8ccb3 !important;
  color: #2a2a2a !important;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  line-height: 1;
  text-decoration: none;
}
#reservationModal .slot-btn:hover { background: #cbbfa0 !important; }

/* OPCJE */
#reservationModal .options { 
    margin-top: 12px; 
    padding-top: 8px; 
    border-top: 1px solid rgba(0,0,0,0.08); 
    display: none !important;
}
#reservationModal .options.open { display: block !important; }
#reservationModal .opt-item { 
    display: flex !important; 
    align-items: center !important; 
    gap: 10px !important; 
    padding: 6px 0 !important; 
    cursor: pointer; 
    font-weight: normal !important;
    margin: 0 !important;
}
#reservationModal input[type="radio"] {
    margin: 0 !important;
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--mg-accent-2);
    cursor: pointer;
    appearance: auto !important;
    display: inline-block !important;
    flex-shrink: 0;
    border: 1px solid #ccc !important;
}
#reservationModal .opt-item span { font-size: 0.95rem; color: var(--mg-ink); line-height: 1.3; }

/* FORMULARZ */
#reservationModal .form {
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 12px;
  padding: 20px;
  margin-top: 10px;
}
#reservationModal .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#reservationModal .field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }

#reservationModal label { 
    font-size: 0.9rem !important; 
    font-weight: 600 !important; 
    color: var(--mg-ink-soft) !important; 
    display: block !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
}
#reservationModal input[type="text"], 
#reservationModal input[type="email"], 
#reservationModal textarea {
  border: 1px solid #ccc !important;
  border-radius: 8px !important;
  padding: 10px !important;
  font-size: 1rem !important;
  width: 100% !important;
  font-family: inherit !important;
  background: #fff !important;
  color: #000 !important;
  box-shadow: none !important;
  height: auto !important;
}
#reservationModal input:focus, #reservationModal textarea:focus {
  border-color: var(--mg-accent-2) !important;
  outline: none;
}

#reservationModal .consent { 
    display: flex !important; 
    flex-direction: row !important; 
    align-items: flex-start !important; 
    gap: 10px !important; 
    margin-top: 10px; 
}
#reservationModal .consent input[type="checkbox"] { 
    width: 20px !important; 
    height: 20px !important; 
    margin-top: 2px !important; 
    flex-shrink: 0; 
    accent-color: var(--mg-accent-2);
    border: 1px solid #ccc !important;
}
#reservationModal .consent label { 
    font-weight: normal !important; 
    line-height: 1.4 !important; 
    font-size: 0.85rem !important; 
    display: inline-block !important;
}

/* PRZYCISKI AKCJI */
#reservationModal .btn {
  border: none;
  border-radius: 99px;
  padding: 12px 24px;
  font-weight: 700;
  background: var(--mg-accent-2) !important;
  color: #fff !important;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(77, 139, 102, 0.3);
  text-decoration: none;
  display: inline-block;
}
#reservationModal .btn:hover { background: #3e7052 !important; }

#reservationModal .btn-secondary {
  background: #fff !important;
  color: #666 !important;
  border: 1px solid #ccc !important;
  box-shadow: none !important;
  padding: 12px 24px !important;
}
#reservationModal .btn-secondary:hover { background: #f5f5f5 !important; color: #333 !important; }
#reservationModal .btn.is-disabled { opacity: 0.5; cursor: not-allowed; }

#reservationModal .form-error {
  background: #ffecec;
  border: 1px solid #f5b5b5;
  color: #b00020;
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 10px;
  font-size: 0.9rem;
  text-align: center;
}

.alert-actions {
  display: flex;
  gap: 8px; /* Odstęp między przyciskami w 2 kroku */
}

#reservationInfo { text-align: center !important; margin-bottom: 14px; }
#reservationInfo .resv-line { font-weight: 600; font-size: 1rem; margin-bottom: 4px; display: flex; justify-content: center; align-items: center; gap: 6px; }
#reservationInfo .resv-sub { font-style: italic; font-size: 0.9rem; color: #555; text-align: center !important; }
#confirmationInfo { text-align: center !important; }
#confirmationInfo .resv-line { justify-content: center; }

#reservationModal label[for]:has(+ input[required])::before,
#reservationModal label[for]:has(+ textarea[required])::before {
  content: "*" !important;
  color: #b00020 !important;
  font-weight: bold !important;
  margin-right: 4px !important;
  display: inline-block !important;
  position: static !important;
}
#reservationModal label[for="name"]::before,
#reservationModal label[for="email"]::before {
  content: "*" !important;
  color: #b00020 !important;
  font-weight: bold !important;
  margin-right: 4px !important;
}
#reservationModal .form .consent label::before { content: ""; }

/* Fix na ostatni element listy */
#stepSlots { padding-bottom: 20px; }

@media (max-width: 680px) {
  #mg-calendar-wrapper .cal-cell { min-height: 80px; padding: 6px 2px 30px 2px; }
  #reservationModal .row { grid-template-columns: 1fr; gap: 0; }
  #reservationModal { width: 95vw; }
  #reservationModal .modal-head { padding: 12px 16px; }
  #reservationModal .modal-body { padding: 16px; }
}

#mg-calendar-wrapper .rt-card { margin-top: 20px; padding: 20px; }
#mg-calendar-wrapper .rt-box { background: #fffdf6; border: 1px solid rgba(0,0,0,.1); border-radius: var(--mg-radius); padding: 15px; }
#mg-calendar-wrapper .rt-title { font-size: 1.1rem; margin-bottom: 10px; color: var(--mg-ink); font-weight: bold; }
#mg-calendar-wrapper .rt-list { list-style: none; padding: 0; margin: 0; }
#mg-calendar-wrapper .rt-link { 
  display: flex; align-items: center; gap: 10px; 
  color: var(--mg-accent-2); font-weight: 600; text-decoration: none; padding: 6px 0; 
}
#mg-calendar-wrapper .rt-link:hover { text-decoration: underline; }

/* =================================================================
   PONIŻEJ DODANE POPRAWKI - NIE ZMIENIAMY NIC POWYŻEJ!
   ================================================================= 
*/

/* 1. Zmniejszenie nagłówka w modalu */
#stepSlots h3 {
    font-size: 1.15rem !important; 
    text-align: center !important;
    margin-bottom: 20px !important;
}

/* 2. FIX MOBILNY (Styl BOOKED) - Nadpisuje style TYLKO na telefonach */
@media (max-width: 680px) {
  /* RESET GŁÓWNEGO UKŁADU */
  #mg-calendar-wrapper { 
      flex-direction: column !important; 
      padding: 2px !important; 
      gap: 10px !important; 
      width: 100% !important; 
      max-width: 100% !important;
      align-items: stretch !important;
  }
  
  #mg-calendar-wrapper .card { 
      width: 100% !important;
      max-width: 100% !important;
      padding: 10px !important; 
      margin: 0 !important;
      border-radius: 12px;
      flex: none !important;
  }
  
  /* ODSTĘP I STYL DLA POWIĄZANYCH TEMATÓW */
  .rt-card { 
      display: block !important; 
      margin-top: 40px !important; 
      padding: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
  }
  .rt-box {
      margin-top: 0 !important;
      padding: 15px !important;
  }
  .rt-title { font-size: 1rem !important; }
  .rt-link { font-size: 0.9rem !important; padding: 4px 0 !important; }
  
  /* SIATKA KALENDARZA - KWADRATY */
  .cal-grid {
      gap: 3px !important; 
  }
  
  .cal-cell {
      min-height: 0 !important;
      height: auto !important;
      aspect-ratio: 1 / 1 !important; /* To robi kwadraty */
      padding: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 6px !important;
      border: none !important; 
  }

  /* CYFRA DNIA */
  .cal-cell div:first-child {
      margin: 0 !important;
      font-size: 1rem !important;
      font-weight: bold !important;
      z-index: 10;
  }

  /* UKRYWAMY NAPISY */
  #mg-calendar-wrapper .cal-cell .badge { display: none !important; }

  /* --- KOLORY TŁA --- */

  /* Wolne */
  .cal-cell.available {
      background-color: #66bb6a !important; 
      color: #fff !important;
  }
  .cal-cell.available div:first-child { color: #fff !important; }

  /* Zajęte */
  .cal-cell.unavailable.is-busy {
      background-color: #ef5350 !important; 
      color: #fff !important;
      opacity: 1 !important;
  }
  .cal-cell.unavailable.is-busy div:first-child { color: #fff !important; }

  /* Puste/Przeszłe */
  .cal-cell.unavailable:not(.is-busy) {
      background-color: #f5f5f5 !important;
      color: #ccc !important;
      border: 1px solid #eee !important;
  }
  .cal-cell.unavailable:not(.is-busy) div:first-child { color: #ccc !important; }

  /* Modal - Poprawki Mobilne */
  #reservationModal { width: 96vw !important; padding: 0 !important; }
  
  /* Reset paddingu dla estetyki (żeby modal nie był długi bez klawiatury) */
  #reservationModal .modal-body { 
      padding: 15px !important; 
      max-height: 85vh !important; 
  }
  
  /* Margines na dole listy slotów w wersji mobilnej, żeby ostatni nie stykał się z krawędzią */
  #stepSlots { padding-bottom: 40px !important; }

  #reservationModal .row { grid-template-columns: 1fr !important; gap: 0 !important; }

  /* Kompaktowy widok dla "Kciuka" */
  #stepThanks { padding-top: 0 !important; }
  #stepThanks div[style*="font-size: 2rem"] { font-size: 1.5rem !important; margin-bottom: 5px !important; }
  #stepThanks .info-box { font-size: 1rem !important; }

  /* Wyrównanie ikonek */
  #mg-calendar-wrapper .announcement { align-items: center !important; }
  
  /* Rozdzielenie stylów ikon */
  #announcementBox .icon { font-size: 1.0em !important; } /* Mniejsza */
  #rangeBox .icon { font-size: 1.25em !important; } /* Minimalnie większa */
  
  /* Styl nagłówka tygodnia na mobile */
  .cal-week-header { 
      gap: 3px !important; 
      font-size: 0.8rem !important; 
      padding: 5px 0 !important;
  }
}