/* ═══════════════════════════════════════════════════════════

   Rezervační systém – Veřejná stránka CSS (Podhaiský Digital)

   ═══════════════════════════════════════════════════════════ */



@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700;800&display=swap');



:root {

    --color-primary: #007e34;

    --color-primary-hover: #05d15a;

    --color-primary-light: rgba(5,209,90,.12);

    --color-success: #05d15a;

    --color-success-light: rgba(5,209,90,.15);

    --color-danger: #ef4444;

    --color-danger-light: rgba(239,68,68,.15);

    --color-warning: #f59e0b;

    --color-gray-50: #2b2b2b;

    --color-gray-100: rgba(255,255,255,.04);

    --color-gray-200: rgba(255,255,255,.08);

    --color-gray-300: rgba(255,255,255,.15);

    --color-gray-400: rgba(255,255,255,.4);

    --color-gray-500: rgba(255,255,255,.55);

    --color-gray-700: rgba(255,255,255,.75);

    --color-gray-900: #ffffff;

    --color-white: #ffffff;

    --radius-sm: .375rem;

    --radius-md: .5rem;

    --radius-lg: .85rem;

    --radius-xl: 1.2rem;

    --shadow-sm: 0 1px 4px rgba(0,0,0,.15);

    --shadow-md: 0 4px 12px rgba(0,0,0,.2);

    --shadow-lg: 0 10px 25px rgba(0,0,0,.3);

    --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

}



*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



html { font-size: 16px; -webkit-text-size-adjust: 100%; }



body {

    font-family: var(--font-sans);

    background: #333333;

    color: var(--color-gray-900);

    line-height: 1.6;

    min-height: 100vh;

}

h1, h2, h3 { font-family: 'Space Grotesk', var(--font-sans); }



/* ── Layout ────────────────────────────────────────────────── */

.booking-page {

    max-width: 640px;

    margin: 0 auto;

    padding: 1.5rem 1rem 3rem;

}



.booking-header {

    text-align: center;

    padding: 2rem 0 1.5rem;

}

.booking-header h1 {

    font-size: 1.75rem;

    font-weight: 700;

    color: var(--color-gray-900);

    margin-bottom: .35rem;

}

.booking-header p {

    color: var(--color-gray-500);

    font-size: 1rem;

}



/* ── Steps indicator ───────────────────────────────────────── */

.steps {

    display: flex;

    justify-content: center;

    gap: .5rem;

    margin-bottom: 2rem;

}

.step {

    display: flex;

    align-items: center;

    gap: .4rem;

    font-size: .85rem;

    color: var(--color-gray-400);

    font-weight: 500;

    transition: color .3s;

}

.step .num {

    width: 1.75rem;

    height: 1.75rem;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    font-size: .8rem;

    background: rgba(255,255,255,.1);

    color: rgba(255,255,255,.5);

    transition: all .3s;

}

.step.active { color: #05d15a; }

.step.active .num { background: #007e34; color: #fff; }

.step.done { color: var(--color-success); }

.step.done .num { background: var(--color-success); color: var(--color-white); }

.step-line {

    width: 2rem;

    height: 2px;

    background: rgba(255,255,255,.1);

    align-self: center;

    transition: background .3s;

}

.step-line.done { background: var(--color-success); }



/* ── Section card ──────────────────────────────────────────── */

.section-card {

    background: rgba(38,50,56,0.45);

    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-md);

    padding: 1.5rem;

    margin-bottom: 1.25rem;

    animation: fadeUp .35s ease-out;

    border: 1.5px solid rgba(255,255,255,.08);

}

@keyframes fadeUp {

    from { opacity: 0; transform: translateY(12px); }

    to { opacity: 1; transform: translateY(0); }

}

.section-card h2 {

    font-size: 1.1rem;

    font-weight: 700;

    margin-bottom: 1rem;

    color: #fff;

}

.section-card.hidden { display: none; }



/* ── Service cards ─────────────────────────────────────────── */

.service-list { display: flex; flex-direction: column; gap: .75rem; }

.service-card {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1rem 1.25rem;

    border: 2px solid rgba(255,255,255,.1);

    border-radius: var(--radius-lg);

    cursor: pointer;

    transition: all .2s;

}

.service-card:hover { border-color: #05d15a; background: rgba(5,209,90,.08); }

.service-card.selected { border-color: #05d15a; background: rgba(5,209,90,.12); }

.service-card .svc-info h3 { font-size: 1rem; font-weight: 600; }

.service-card .svc-info p { font-size: .85rem; color: var(--color-gray-500); margin-top: .15rem; }

.service-card .svc-meta { text-align: right; flex-shrink: 0; }

.service-card .svc-meta .duration { font-size: .85rem; color: var(--color-gray-500); }

.service-card .svc-meta .price { font-size: 1.05rem; font-weight: 700; color: #05d15a; }



/* ── Calendar ──────────────────────────────────────────────── */

.calendar-nav  {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: .75rem;

}

.calendar-nav button {

    background: none;

    border: 1px solid rgba(255,255,255,.15);

    border-radius: var(--radius-md);

    padding: .4rem .75rem;

    cursor: pointer;

    font-size: .9rem;

    color: rgba(255,255,255,.7);

    transition: all .2s;

}

.calendar-nav button:hover { background: rgba(255,255,255,.06); }

.calendar-nav .month-label { font-weight: 600; font-size: 1rem; }



.calendar-grid {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    gap: 4px;

    text-align: center;

}

.calendar-grid .day-name {

    font-size: .75rem;

    font-weight: 600;

    color: var(--color-gray-400);

    text-transform: uppercase;

    padding: .25rem 0;

}

.calendar-grid .day {

    aspect-ratio: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: var(--radius-md);

    font-size: .9rem;

    font-weight: 500;

    cursor: pointer;

    transition: all .2s;

    border: 2px solid transparent;

}

.calendar-grid .day:hover:not(.disabled):not(.empty) {

    background: rgba(5,209,90,.1);

    border-color: #05d15a;

}

.calendar-grid .day.selected {

    background: #007e34;

    color: #fff;

    border-color: #007e34;

}

.calendar-grid .day.today:not(.selected) {

    border-color: #05d15a;

    color: #05d15a;

    font-weight: 700;

}

.calendar-grid .day.disabled {

    color: var(--color-gray-300);

    cursor: not-allowed;

}

.calendar-grid .day.empty { cursor: default; }



/* ── Time slots ────────────────────────────────────────────── */

.time-slots-container { margin-top: 1rem; }

.time-slots-container h3 { font-size: .95rem; font-weight: 600; margin-bottom: .75rem; }

.time-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));

    gap: .5rem;

}

.time-slot {

    padding: .55rem .25rem;

    text-align: center;

    border: 2px solid rgba(255,255,255,.1);

    border-radius: var(--radius-md);

    font-size: .9rem;

    font-weight: 600;

    cursor: pointer;

    transition: all .2s;

    color: rgba(255,255,255,.8);

}

.time-slot:hover { border-color: #05d15a; background: rgba(5,209,90,.1); }

.time-slot.selected { border-color: #007e34; background: #007e34; color: #fff; }



.no-slots {

    text-align: center;

    color: var(--color-gray-500);

    padding: 1.5rem;

    font-size: .95rem;

}



/* ── Form ──────────────────────────────────────────────────── */

.form-group { margin-bottom: 1rem; }

.form-group label {

    display: block;

    font-weight: 600;

    font-size: .9rem;

    margin-bottom: .3rem;

    color: var(--color-gray-700);

}

.form-group label .required { color: var(--color-danger); }

.form-group input,

.form-group textarea {

    width: 100%;

    padding: .65rem .85rem;

    border: 1.5px solid rgba(255,255,255,.15);

    border-radius: var(--radius-md);

    font-size: 1rem;

    font-family: var(--font-sans);

    transition: border .2s, box-shadow .2s;

    background: rgba(255,255,255,.06);

    color: #fff;

}

.form-group input:focus,

.form-group textarea:focus {

    outline: none;

    border-color: #05d15a;

    box-shadow: 0 0 0 3px rgba(5,209,90,.15);

}

.form-group textarea { resize: vertical; min-height: 70px; }

.form-group .field-error {

    display: none;

    color: var(--color-danger);

    font-size: .82rem;

    margin-top: .25rem;

}

.form-group.has-error input,

.form-group.has-error textarea { border-color: var(--color-danger); }

.form-group.has-error .field-error { display: block; }



.consent-group {

    display: flex;

    gap: .5rem;

    align-items: flex-start;

    margin-bottom: 1rem;

    font-size: .85rem;

    color: var(--color-gray-500);

}

.consent-group input[type=checkbox] { margin-top: .2rem; }



/* ── Buttons ───────────────────────────────────────────────── */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: .75rem 1.5rem;

    border: none;

    border-radius: var(--radius-md);

    font-size: 1rem;

    font-weight: 600;

    font-family: var(--font-sans);

    cursor: pointer;

    transition: all .2s;

    text-decoration: none;

}

.btn-primary { background: var(--color-primary); color: var(--color-white); }

.btn-primary:hover { background: var(--color-primary-hover); }

.btn-primary:disabled { background: rgba(255,255,255,.15); cursor: not-allowed; }

.btn-full { width: 100%; }

.btn-outline {

    background: transparent;

    color: #05d15a;

    border: 2px solid rgba(5,209,90,.4);

}

.btn-outline:hover { background: rgba(5,209,90,.1); }

.btn-sm { padding: .5rem 1rem; font-size: .9rem; }



/* ── Summary ───────────────────────────────────────────────── */

.booking-summary {

    background: rgba(255,255,255,.04);

    border-radius: var(--radius-lg);

    padding: 1rem 1.25rem;

    margin-bottom: 1rem;

    border: 1px solid rgba(255,255,255,.06);

}

.booking-summary .row {

    display: flex;

    justify-content: space-between;

    padding: .3rem 0;

    font-size: .92rem;

}

.booking-summary .row .label { color: var(--color-gray-500); }

.booking-summary .row .value { font-weight: 600; }



/* ── Confirmation page ─────────────────────────────────────── */

.confirmation-card {

    text-align: center;

    padding: 2rem 1.5rem;

}

.confirmation-card .icon { font-size: 3rem; margin-bottom: .75rem; color: var(--color-success); }

.confirmation-card h2 { font-size: 1.4rem; margin-bottom: .5rem; }

.confirmation-card .subtitle { color: var(--color-gray-500); margin-bottom: 1.5rem; }



.confirmation-details {

    text-align: left;

    background: rgba(255,255,255,.04);

    border-radius: var(--radius-lg);

    padding: 1.25rem;

    margin-bottom: 1.5rem;

    border: 1px solid rgba(255,255,255,.06);

}

.confirmation-details .row {

    display: flex;

    justify-content: space-between;

    padding: .35rem 0;

    font-size: .92rem;

    border-bottom: 1px solid rgba(255,255,255,.06);

}

.confirmation-details .row:last-child { border-bottom: none; }

.confirmation-details .row .label { color: var(--color-gray-500); }

.confirmation-details .row .value { font-weight: 600; }



.confirmation-footer {

    display: flex;

    flex-direction: column;

    gap: .75rem;

    align-items: center;

}



/* ── Alert / messages ──────────────────────────────────────── */

.alert {

    padding: .85rem 1rem;

    border-radius: var(--radius-md);

    margin-bottom: 1rem;

    font-size: .9rem;

    font-weight: 500;

}

.alert-error { background: var(--color-danger-light); color: var(--color-danger); }

.alert-success { background: var(--color-success-light); color: var(--color-success); }



/* ── Loading ───────────────────────────────────────────────── */

.loading {

    text-align: center;

    padding: 2rem;

    color: var(--color-gray-400);

    font-size: .95rem;

}

.spinner {

    display: inline-block;

    width: 1.5rem;

    height: 1.5rem;

    border: 3px solid rgba(255,255,255,.1);

    border-top-color: #05d15a;

    border-radius: 50%;

    animation: spin .6s linear infinite;

    margin-right: .5rem;

    vertical-align: middle;

}

@keyframes spin { to { transform: rotate(360deg); } }



/* ── Powered-by ────────────────────────────────────────────── */

.powered-by {

    text-align: center;

    margin-top: 2rem;

    font-size: .8rem;

    color: rgba(255,255,255,.3);

}

.powered-by a { color: rgba(255,255,255,.45); text-decoration: none; }

.powered-by a:hover { color: #05d15a; }



/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 480px) {

    .booking-page { padding: 1rem .75rem 2rem; }

    .booking-header h1 { font-size: 1.4rem; }

    .section-card { padding: 1.15rem; }

    .time-grid { grid-template-columns: repeat(3, 1fr); }

    .steps { gap: .25rem; }

    .step .text { display: none; }

    .step-line { width: 1.25rem; }

    .confirmation-details .row { flex-direction: column; gap: .15rem; }

    .booking-summary .row { flex-direction: column; gap: .1rem; }

}

@media (max-width: 360px) {

    .time-grid { grid-template-columns: repeat(2, 1fr); }

    .booking-header h1 { font-size: 1.2rem; }

    .section-card h2 { font-size: 1.1rem; }

}



/* ── Booked (occupied) slots ───────────────────────────────── */

.time-slot.booked {

    background: rgba(255,255,255,.04);

    border-color: rgba(255,255,255,.08);

    color: var(--color-gray-400);

    cursor: not-allowed;

    opacity: .6;

    font-size: .75rem;

    position: relative;

}

.time-slot.booked:hover { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.04); }

.booked-label {

    display: block;

    font-size: .6rem;

    text-transform: uppercase;

    letter-spacing: .05em;

    color: var(--color-danger);

    font-weight: 600;

    margin-top: .1rem;

}



/* ═══════════════════ LIGHT THEME ═══════════════════════ */

body.theme-light {

    background: #f8fafc;

    color: #1e293b;

    --color-primary: #007e34;

    --color-primary-hover: #009940;

    --color-primary-light: rgba(0,126,52,.08);

    --color-success: #059669;

    --color-success-light: rgba(5,150,105,.08);

    --color-danger: #dc2626;

    --color-danger-light: rgba(220,38,38,.08);

    --color-warning: #d97706;

    --color-gray-50: #ffffff;

    --color-gray-100: #f1f5f9;

    --color-gray-200: #e2e8f0;

    --color-gray-300: #cbd5e1;

    --color-gray-400: #94a3b8;

    --color-gray-500: #64748b;

    --color-gray-700: #334155;

    --color-gray-900: #0f172a;

    --color-white: #ffffff;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);

    --shadow-md: 0 4px 6px rgba(0,0,0,.07);

    --shadow-lg: 0 10px 15px rgba(0,0,0,.1);

}

body.theme-light .section-card {

    background: #ffffff;

    border-color: #e2e8f0;

}

body.theme-light .booking-header h1 { color: #0f172a; }

body.theme-light .booking-header p { color: #64748b; }

body.theme-light .service-card {

    background: #ffffff;

    border-color: #e2e8f0;

}

body.theme-light .service-card:hover {

    border-color: #007e34;

    background: #fafffe;

}

body.theme-light .service-card.selected {

    border-color: #007e34;

    background: rgba(0,126,52,.04);

}

body.theme-light .calendar-grid .day {

    color: #334155;

}

body.theme-light .calendar-grid .day:hover:not(.disabled) {

    background: #f0fdf4;

    border-color: #007e34;

}

body.theme-light .calendar-grid .day.selected {

    background: #007e34;

    color: #fff;

}

body.theme-light .calendar-grid .day.disabled { color: #cbd5e1; background: transparent; }

body.theme-light .calendar-grid .day.today { border-color: #007e34; }

body.theme-light .calendar-nav button { color: #334155; border-color: #e2e8f0; background: #fff; }

body.theme-light .calendar-nav button:hover { background: #f1f5f9; }

body.theme-light .time-slot {

    background: #ffffff;

    border-color: #e2e8f0;

    color: #334155;

}

body.theme-light .time-slot:hover { border-color: #007e34; background: #f0fdf4; }

body.theme-light .time-slot.selected { background: #007e34; color: #fff; border-color: #007e34; }

body.theme-light .time-slot.booked {

    background: #fafafa;

    border-color: #e2e8f0;

    color: #94a3b8;

}

body.theme-light .time-slot.booked:hover { background: #fafafa; border-color: #e2e8f0; }

body.theme-light input[type=text], body.theme-light input[type=email],

body.theme-light input[type=tel], body.theme-light textarea {

    background: #ffffff;

    border-color: #d1d5db;

    color: #1e293b;

}

body.theme-light input:focus, body.theme-light textarea:focus {

    border-color: #007e34;

    box-shadow: 0 0 0 3px rgba(0,126,52,.12);

}

body.theme-light .booking-summary {

    background: #f8fafc;

    border-color: #e2e8f0;

}

body.theme-light .booking-summary .label { color: #64748b; }

body.theme-light .booking-summary .value { color: #0f172a; }

body.theme-light .confirmation-card { color: #0f172a; }

body.theme-light .confirmation-card .icon { color: #007e34; }

body.theme-light .confirmation-details { background: #f8fafc; border-color: #e2e8f0; }

body.theme-light .powered-by { color: #94a3b8; }

body.theme-light .powered-by a { color: #64748b; }

body.theme-light .powered-by a:hover { color: #007e34; }

body.theme-light .spinner { border-color: #e2e8f0; border-top-color: #007e34; }

body.theme-light .step .num { background: #e2e8f0; color: #64748b; }

body.theme-light .step.active .num { background: #007e34; color: #fff; }

body.theme-light .step.done .num { background: #059669; color: #fff; }

body.theme-light .step .text { color: #64748b; }

body.theme-light .step.active .text { color: #007e34; }

body.theme-light .step-line { background: #e2e8f0; }

body.theme-light .step-line.done { background: #059669; }

body.theme-light .consent-group label { color: #64748b; }

body.theme-light .no-slots { color: #94a3b8; }

body.theme-light .btn-primary:disabled { background: #d1d5db; color: #9ca3af; }

body.theme-light .confirmation-details .row { border-bottom-color: #e2e8f0; }

body.theme-light .btn-outline { color: #007e34; border-color: rgba(0,126,52,.3); }

body.theme-light .btn-outline:hover { background: rgba(0,126,52,.06); }

body.theme-light .alert-error { background: rgba(220,38,38,.08); color: #dc2626; }

body.theme-light .alert-success { background: rgba(5,150,105,.08); color: #059669; }

body.theme-light .loading { color: #94a3b8; }