:root {
    --primary: #005daa; /* Tvoje nová modrá z loga */
    --primary-dark: #004488; /* Tmavší modrá pro efekty pojetí */
    --bg: #f8fafc;
    --text: #10171f; /* Tvoje nová tmavá z loga */
    
    /* Barvy hal podle zadání */
    --kuklenska: #6DD333;
    --sprint: #006633;       /* #063 */
    --fit4all: #f9b233;
    --lisen: #00aee5;
    --classic: #c9a25c;      /* Club Classic */
    --xarena: #9f1826;
    --padelpowers: #f59e0b;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body { font-family: 'Roboto', sans-serif; /* Změněno na Roboto */ background: var(--bg); color: var(--text); padding-bottom: 80px; }

/* HEADER */
.header { 
    background: white; height: 60px; padding: 0 20px; 
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 50;
}
.header-left { display: flex; align-items: center; gap: 4px; }
.city-select-nav { border: none; background: transparent; font-size: 13px; font-weight: 600; cursor: pointer; outline: none; }
.brand { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.brand img {
    height: 42px; /* Zvětšeno o cca 30 % */
    width: auto;
    object-fit: contain;
}
.user-area { display: flex; align-items: center; gap: 10px; }
.btn-login { background: #10171f; color: white; padding: 8px 14px; border-radius: 20px; text-decoration: none; font-size: 13px; font-weight: 600; }
.user-badge { display: none; align-items: center; gap: 8px; cursor: pointer; }
.avatar { width: 32px; height: 32px; background: #dbeafe; color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; border: 2px solid white; box-shadow: 0 0 0 1px #e2e8f0; }

.container { max-width: 600px; margin: 0 auto; padding: 20px 15px; }
.hero-section { text-align: center; margin-bottom: 24px; }
.hero-claim { font-size: 20px; font-weight: 800; color: #10171f; margin-bottom: 4px; }
.hero-sub { font-size: 13px; color: #64748b; }

/* UX: FADE EFEKT PRO SCROLL */
.sport-tabs, .hour-grid {
    display: flex; gap: 10px; overflow-x: auto; padding: 5px 0 15px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Průhlednost do ztracena vpravo */
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
}
.sport-tabs::-webkit-scrollbar, .hour-grid::-webkit-scrollbar { display: none; }

.tab-btn {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
    padding: 10px 18px; border-radius: 12px; border: 1px solid #e2e8f0;
    background: white; color: #64748b; font-size: 14px; font-weight: 600; cursor: pointer;
}
.tab-btn.active { background: #10171f; color: white; border-color: #10171f; }

/* SEARCH BOX */
.search-box { background: white; padding: 20px; border-radius: 16px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); margin-bottom: 20px; }
.search-form { display: flex; flex-direction: column; gap: 12px; }
.search-form-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.input-group.input-date { flex: 1 1 100%; min-width: 140px; cursor: pointer; }
.input-group.input-narrow { flex: 1 1 48%; min-width: 90px; }
.input-group.input-narrow select { width: 100%; }
label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; }
input, select {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 16px;
    width: 100%;
    max-width: 100%;
    outline: none;
    box-sizing: border-box;
}

/* Speciální fix pro iOS Safari datum picker */
input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    min-height: 46px;
    background-color: white;
}

.quick-dates { display: flex; gap: 8px; margin-top: 5px; }
.chip { background: #e6f0fa; color: var(--primary); padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; border: none; cursor: pointer; }

.date-input-wrapper {
    position: relative;
    width: 100%;
}

.date-input-wrapper .date-input {
    position: relative;
    z-index: 0;
    color: transparent;           /* schováme nativní zápis datumu */
    caret-color: transparent;
}

.date-display-label {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #0f172a;
    pointer-events: none;         /* kliky stále míří na input */
    z-index: 1;
}

.date-navigator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: #64748b;
    margin: 6px 0 14px;
}

.date-nav-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
}

.date-nav-btn.disabled,
.date-nav-btn:disabled {
    color: #cbd5e1;
    cursor: default;
}

.current-day-label {
    font-weight: 600;
}

/* Desktop rozložení: tři inputy v jedné řadě */
@media (min-width: 700px) {
    .search-form-row {
        flex-wrap: nowrap;
    }

    .input-group.input-date {
        flex: 0 0 45%;
    }

    .input-group.input-narrow {
        flex: 0 0 25%;
    }
}

.search-buttons-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: wrap;
}
.search-buttons-row .btn-search-main { flex: 1; min-width: 120px; }
.search-buttons-row .btn-search-extra { flex: 0 0 auto; padding: 12px 16px; }
.search-buttons-row .btn-share { flex: 0 0 auto; padding: 12px 16px; background: #e2e8f0; color: #10171f; font-size: 18px; }

.submit-btn { background: var(--primary); color: white; border: none; border-radius: 12px; font-weight: 700; font-size: 16px; padding: 16px; cursor: pointer; }

/* STATUS CHIPS – sticky při scrollování */
.progress-container {
    margin-bottom: 20px;
    display: none;
    position: sticky;
    top: 60px;
    z-index: 40;
    background: var(--bg);
    padding: 10px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.progress-grid { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; }
.status-chip { display: flex; align-items: center; gap: 6px; background: white; border: 1px solid #e2e8f0; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; color: #64748b; }
.status-chip.done { border-color: #10b981; color: #10b981; background: #f0fdf4; }
.spinner-mini { width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* TIMELINE */
.hour-block { display: flex; background: white; border-radius: 16px; border: 1px solid #e2e8f0; margin-bottom: 15px; min-height: 88px; overflow: hidden; }
.hour-left {
    width: 56px;
    background: #f1f5f9;
    border-right: 1px solid #e2e8f0;
    display: grid;
    grid-template-rows: 1fr 1fr;
    flex-shrink: 0;
}
.hour-row-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
}
.hour-row-label:last-child { border-bottom: none; }

.hour-grid {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    padding: 0 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* Jedno sportoviště = sloupec, :00 a :30 pod sebou; řádky stejné výšky jako .hour-left */
.hour-grid-place {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 0;
    width: 80px;
    flex-shrink: 0;
    height: 100%;
}

.venue-badge {
    cursor: pointer;
    border: none;
    border-radius: 8px;
    padding: 4px 6px;
    min-width: 0;
    width: 100%;
    margin: 4px 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.slot-placeholder {
    min-height: 0;
}
.count-pill {
    background: rgba(0,0,0,0.18);
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

/* Barvy hal – odlehčené odstíny, tmavý text pro čitelnost */
.sprint { background-color: #7fb87f !important; color: #0d3d0d !important; }
.xarena { background-color: #d47373 !important; color: #5c0a0a !important; }
.fit4all { background-color: #fcd88c !important; color: #5c4500 !important; }
.kuklenska { background-color: #b8ed8e !important; color: #2d5c0d !important; }
.lisen { background-color: #7dd4f2 !important; color: #0a4d66 !important; }
.clubclassic, .classic { background-color: #e5d4a3 !important; color: #4a3d1a !important; }
.padelpowers { background-color: #f9c766 !important; color: #5c3d00 !important; }

.slot-00 { }
.slot-30 { }

.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.modal-content { 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%; 
    max-width: 400px; 
    background: white; 
    border-radius: 16px; 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    max-height: 85vh; /* Okno nikdy nepřeroste 85 % výšky displeje */
    margin: 0;
}
.modal-header { padding: 15px; color: white; background: #10171f; display: flex; justify-content: space-between; }
.modal-body { 
    padding: 20px; 
    overflow-y: auto; /* Zapne scrollování uvnitř okna, pokud je text moc dlouhý */
}
.btn-reserve { display: block; background: var(--primary); color: white; text-align: center; padding: 15px; border-radius: 12px; text-decoration: none; font-weight: 700; }

.feedback-btn { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; border-radius: 50%; background: #10171f; color: white; border: none; font-size: 24px; cursor: pointer; z-index: 1000; }
.feedback-box { display: none; position: fixed; bottom: 80px; right: 20px; width: 280px; background: white; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); border: 1px solid #e2e8f0; z-index: 1000; padding: 15px; }

/* COMING SOON BLOK (Sloučeno a vyčištěno) */
.coming-soon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
    background: #f8fafc;
    border-radius: 12px;
    margin: 20px 0;
    border: 2px dashed #e2e8f0;
}

.coming-soon-container h2 {
    color: #10171f;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.coming-soon-container p {
    color: #64748b;
    margin-bottom: 25px;
}

.coming-soon-container .btn-primary {
    display: inline-flex;
    margin: 0 auto;
}

/* MODERNÍ MODÁLNÍ OKNO - SEZNAM KURTŮ */
#modalList {
    list-style-type: none; /* Odstraní odrážky */
    padding: 0;
    margin: 0;
}

.modal-list-item {
    display: flex;
    flex-direction: column; /* Pod sebe na mobilech */
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0; /* Jemná linka mezi položkami */
}

.modal-list-item:last-child {
    border-bottom: none; /* Poslední položka bez linky */
}

.court-label {
    font-weight: 700; /* Tučný název kurtu */
    color: var(--text);
    font-size: 15px;
    margin-bottom: 4px;
}

.court-details {
    font-size: 13px;
    color: #64748b; /* Světlejší šedá pro detaily (čas, cena) */
    font-weight: 500;
}

/* WATCHDOG STYLY */
.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.btn-outline:hover {
    background: #eff6ff;
}

.wd-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
}
.wd-item:last-child { border-bottom: none; }
.wd-info { display: flex; flex-direction: column; gap: 4px; }
.wd-title { font-weight: 700; font-size: 14px; color: var(--text); }
.wd-details { font-size: 12px; color: #64748b; font-weight: 500; }
.btn-delete-wd {
    background: #fee2e2;
    color: #ef4444;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

/* Notifikační tečka (Badge) */
.wd-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 900;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px white;
}

/* Taby v modálu */
.wd-tabs { display: flex; border-bottom: 1px solid #e2e8f0; margin-bottom: 15px; }
.wd-tab { flex: 1; background: none; border: none; padding: 10px; font-size: 13px; font-weight: 600; color: #64748b; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
.wd-tab.active { color: var(--primary); border-bottom: 2px solid var(--primary); }