/* =========================================
   ZÁKLADNÝ OBAL MODÁLNEHO OKNA (Centrovanie)
   ========================================= */
.modal { 
  position: fixed; 
  top: 0; left: 0; 
  width: 100%; height: 100%; 
  background: rgba(0, 0, 0, 0.6); /* Zatemnenie pozadia */
  display: flex; 
  justify-content: center; 
  align-items: center; 
  z-index: 99999 !important;
  padding: 15px; 
}


/* =========================================
   MODÁLNE OKNO REZERVÁCIE - "FORMULAR.JPG" FARBY
   ========================================= */

.hidden { display: none !important; }

/* Hlavné pozadie modálu (Pieskovo-krémová) */
.reservation-card {
  width: 95%;
  max-width: 480px; 
  background: #F4EBE1 !important; 
  padding: 2.5rem 2rem !important;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  max-height: 90vh; 
  overflow-y: auto;
}

.reservation-card::-webkit-scrollbar { width: 5px; }
.reservation-card::-webkit-scrollbar-track { background: transparent; }
.reservation-card::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 10px; }

.close-modal {
  position: absolute;
  top: 15px; right: 20px;
  font-size: 1.5rem;
  color: #333;
  font-weight: 300;
  cursor: pointer;
}

/* HLAVIČKA */
.res-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.6rem;
  color: #1a1a1a;
  margin-bottom: 0.2rem;
  text-align: center;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.res-podtitle {
  text-align: center;
  font-size: 0.8rem;
  color: #333;
  line-height: 1.4;
  font-weight: 500;
}

.res-phone-link {
  text-decoration: none;
  color: #333;
  font-weight: 600;
}

/* SÚHRN PRODUKTU (Polopriesvitný biely box) */
.res-product-box {
  background: rgba(255, 255, 255, 0.45);
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 10px;
}

.res-product-img { width: 65px; height: 65px; object-fit: cover; border-radius: 6px; }
.res-product-details { display: flex; flex-direction: column; flex-grow: 1; }
.res-product-name { font-size: 1.05rem; color: #1a1a1a; font-weight: 600; margin: 0 0 2px 0; }
.res-product-size, .res-unit-price { font-size: 0.8rem; color: #1a1a1a; font-weight: 500; margin: 0; }
.res-unit-price { text-align: left; }

/* FORMULÁR OSOBNÉ ÚDAJE (Meno a Email pod sebou) */
.res-form-grid { display: flex; flex-direction: column; gap: 12px; }
.res-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; align-items: flex-end; }
.res-form-group { display: flex; flex-direction: column; gap: 6px; }
.res-form-group label { font-size: 0.85rem; font-weight: 600; color: #1a1a1a; }

/* Políčka na písanie (Biele) */
.res-form-group input {
  padding: 10px 12px;
  border: 1px solid #e0d9cc;
  border-radius: 6px;
  background-color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  width: 100%;
  height: 42px;
  color: #333;
}
.res-form-group input:focus { outline: none; border-color: #526A56; }

/* PICK & GO ČASOVAČ (Tlačidlá) */

.pick-go-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: #ffffff;
  background-color: var(--color-primary);/* Tvoja overená šalviová zelená */
  padding: 6px 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  letter-spacing: -0.02em;
}

.res-datetime-box {
  background: rgba(255, 255, 255, 0.45);
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 15px;
  margin-top: 10px;
}

.res-datetime-header { margin-bottom: 20px; }
.res-opening-hours { text-align: center; font-size: 0.75rem; color: #060606; margin-bottom: 0; }

.ui-selection-group { display: flex; flex-direction: column; gap: 10px; }
.ui-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: #1a1a1a; letter-spacing: 0.5px; }

#ui-time-container {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid rgba(0,0,0,0.05);
}

.ui-day-grid, .ui-time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.ui-btn {
  padding: 12px 10px;
  border-radius: 50px;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

/* Tlačidlá pre Dni (Biele) */
.ui-day-btn { background: #ffffff; color: #1a1a1a; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }

/* Tlačidlá pre Čas (Sivé/Béžové) */
.ui-time-btn {     
    background: #ffffff;
    color: #1a1a1a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);}

/* Aktívny stav (Šalviová Zelená) */
.ui-btn.active {
  background: #526A56 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(82, 106, 86, 0.3);
}

/* Štýl pre zakázané/sivé tlačidlo dňa */
.ui-btn.disabled {
  background: #EAE6DF !important; /* Rovnaká farba ako pozadie časových slotov */
  color: #A3A099 !important;      /* Vyblednutý text */
  cursor: not-allowed;            /* Zmena kurzora na "zakázané" */
  box-shadow: none !important;    /* Žiadny tieň */
  opacity: 0.6;
}

/* Zabezpečíme, aby na hover (prejdenie myšou) nereagovalo zmenou farby */
.ui-btn.disabled:hover {
  background: #EAE6DF !important;
}


/* INFO BOX O PLATBE (Jemná púdrová) */
.res-info-box {
  display: flex;
  gap: 15px;
  background: #ffc6c6; 
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.info-icon {
  width: 20px; height: 20px; background: #7A5C58; color: white; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: serif; font-size: 0.85rem; font-style: italic; font-weight: bold; flex-shrink: 0; margin-top: 2px;
}
.info-text { font-size: 0.8rem; color: #7A5C58; line-height: 1.4; }
.info-text strong { display: block; margin-bottom: 4px; font-weight: 600; }

/* trieda pre celý container sekcie "Pick & Go" - pridajte ju v CSS a HTML */
.pick-go-section {
    background-color: var(--color-primary); /* použije tvoju primárnu zelenú farbu z hlavičky */
    color: white; /* zmení farbu textu na bielu pre kontrast */
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;
}

/* zmena na dvojstĺpcovú mriežku pre dni */
.day-slot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem; /* menšia medzera */
}

/* styling pre pill buttons (gombíky) pre dni a časy */
.day-slot-pill {
    padding: 0.5rem;
    border: 1px solid white; /* biely okraj na zelenom pozadí */
    border-radius: 9999px; /* pill tvar */
    font-size: 0.875rem;
    background-color: transparent;
    color: white;
    transition: all 0.2s;
    text-align: center;
}

/* styling pre vybraný gombík */
.day-slot-pill--selected {
    background-color: white;
    color: var(--color-primary);
}

/* PÄTIČKA (Cena a Hlavné tlačidlo) */
.res-total-price { text-align: center; margin: 1rem 0 0.5rem 0; font-family: 'Playfair Display', serif !important; font-size: 1.6rem; color: #1a1a1a; }
.res-gdpr-text { font-size: 0.65rem; color: #555; text-align: center; margin-top: 15px; line-height: 1.4; padding: 0 10px; }
.res-gdpr-text a { color: #1a1a1a; text-decoration: underline; font-weight: 600; }

/* Hlavné tlačidlo na potvrdenie (Zelené) */
.btn-accent {
  background-color: #526A56 !important; color: white; padding: 14px; font-size: 1rem;
  border-radius: 8px; border: none; font-weight: 500; letter-spacing: 0.5px; width: 100%; transition: opacity 0.2s; cursor: pointer;
}
.btn-accent:hover { opacity: 0.9; }

.res-error-msg { background-color: #fee2e2; color: #991b1b; padding: 10px; border-radius: 6px; font-size: 0.85rem; text-align: center; margin-bottom: 10px; }

/* ÚSPEŠNÁ OBRAZOVKA */
.res-success-screen { text-align: center; padding: 20px 0; }
.res-success-icons { font-size: 2.2rem; margin-bottom: 20px; display: flex; justify-content: center; gap: 10px; align-items: center;}
.res-success-icons .arrow { font-size: 1.2rem; color: #cbd5e1; }
.res-success-title { font-family: 'Playfair Display', serif !important; font-size: 1.6rem; color: #1a1a1a; margin-bottom: 10px; }
.res-success-desc { color: #333; margin-bottom: 20px; font-size: 1.05rem;}
.res-success-box { background: rgba(255,255,255,0.6); padding: 15px; border-radius: 8px; margin-bottom: 15px; font-size: 0.9rem; border: 1px solid rgba(0,0,0,0.05);}
.res-warning-box { font-size: 0.8rem; color: #555; margin-bottom: 25px; }
.btn-full { width: 100%; }

/* MOBILNÉ ÚPRAVY */
@media screen and (max-width: 600px) {
  .reservation-card { padding: 2rem 1.2rem !important; }
  .res-form-row { gap: 10px; } 
}

/* ULTRA-MALÉ DISPLEJE (do 400px - iPhone 5/SE) */
@media screen and (max-width: 400px) {
  .reservation-card { padding: 1.5rem 1rem !important; }
  .res-title { font-size: 1.35rem !important; }
  .res-product-img { width: 45px; height: 45px; }
  .res-product-name { font-size: 0.95rem; }
  .res-form-row { grid-template-columns: 1fr; gap: 12px; }
  .ui-day-grid, .ui-time-grid { gap: 8px; }
  .ui-btn { padding: 8px 5px; font-size: 0.75rem; }
  .res-info-box { flex-direction: row; gap: 10px; padding: 12px; }
  .res-total-price { font-size: 1.4rem; }
  .res-gdpr-text { font-size: 0.6rem; }
}