/* Easy!Appointments — custom iframe overrides
 * Načítáno jako poslední, přepisuje výchozí styly.
 * Montováno jako volume — není součástí image.
 *
 * POZOR: asset_url() v EA automaticky přepisuje .css -> .min.css
 * Proto se v booking_layout.php používá base_url() místo asset_url(),
 * jinak by prohlížeč žádal custom.min.css (404). */

/* ── Pozadí a základní reset ────────────────────────── */
html, body { background-color: transparent !important; }

/* Globální zmenšení písma pro celý wizard — vše dědí */
#book-appointment-wizard {
    min-height: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
}

/* ── Modrý (zelený) header — kompaktní ─────────────── */
#book-appointment-wizard #header {
    padding: 6px 12px !important;
}
#book-appointment-wizard #company-name {
    font-size: 14px !important;
    margin: 4px 0 !important;
}
#book-appointment-wizard #company-name #company-logo {
    max-height: 24px !important;
    margin: 2px auto !important;
}
#book-appointment-wizard #company-name .display-booking-selection {
    font-size: 11px !important;
}
#book-appointment-wizard #steps {
    margin: 4px auto !important;
}
#book-appointment-wizard #frame-footer { display: none !important; }

/* Kompaktnější wizard frame (všechny kroky) */
#book-appointment-wizard .wizard-frame         { padding: 4px 10px !important; }
#book-appointment-wizard .wizard-frame .frame-container {
    min-height: 0 !important;
    padding: 4px 0 !important;
}

/* Menší nadpis kroku */
#book-appointment-wizard .frame-container .frame-title {
    font-size: 0.9rem !important;
    margin-bottom: 6px !important;
    margin-top: 0 !important;
}

.mt-md-5 { margin-top: 0.25rem !important; }
.mb-3    { margin-bottom: 0.4rem !important; }

/* Menší input pole */
.form-select, .form-control {
    padding: 4px 8px !important;
    font-size: 13px !important;
}

/* Tlačítkový řádek */
#book-appointment-wizard .wizard-frame .command-buttons { margin: 6px auto !important; }

/* ── Krok 2: Kalendář + časy VEDLE SEBE ─────────────── */
/* Bootstrap col-md-6 se nepustí v úzkém iframu — vynutíme flex */
#wizard-frame-2 .row.frame-content {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: flex-start !important;
}
#wizard-frame-2 .row.frame-content > .col-12 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 0 2px !important;
}

/* Flatpickr — vejde se do ~48% šířky iframu */
#wizard-frame-2 .flatpickr-calendar {
    margin: 0 !important;
    font-size: 10px !important;
    width: 100% !important;
    box-shadow: none !important;
}
#wizard-frame-2 .flatpickr-days,
#wizard-frame-2 .dayContainer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
#wizard-frame-2 .flatpickr-months          { padding: 2px 0 !important; }
#wizard-frame-2 .flatpickr-months .flatpickr-month { height: 24px !important; }
#wizard-frame-2 .flatpickr-current-month   { font-size: 11px !important; padding-top: 2px !important; }
#wizard-frame-2 .flatpickr-weekdays        { height: 20px !important; }
#wizard-frame-2 span.flatpickr-weekday     { font-size: 9px !important; line-height: 20px !important; }
#wizard-frame-2 .flatpickr-day {
    height: 26px !important;
    line-height: 26px !important;
    max-width: 100% !important;
    font-size: 10px !important;
}

/* Time sloty — scrollovatelný seznam v pravém sloupci */
#wizard-frame-2 #select-time          { padding: 0 !important; max-width: 100% !important; }
#wizard-frame-2 #select-timezone      { font-size: 11px !important; padding: 3px 6px !important; }
#wizard-frame-2 #available-hours      { max-height: 420px !important; overflow-y: auto !important; }
#wizard-frame-2 #available-hours .btn {
    display: block !important;
    width: 100% !important;
    padding: 4px 6px !important;
    font-size: 12px !important;
    margin: 2px 0 !important;
}

/* ── Labely formulářů (všechny kroky) ──────────────── */
/* Bootstrap používá rem (relativní k :root, ne ke kontejneru),
 * takže font-size na #book-appointment-wizard nestačí — musíme explicitně. */
#book-appointment-wizard .form-label {
    font-size: 12px !important;
    margin-bottom: 2px !important;
    font-weight: 500 !important;
}

/* ── Krok 3: zákaznické informace ────────────────────── */
#wizard-frame-3 .row.frame-content > .col-12 { padding: 0 4px !important; }
#wizard-frame-3 .mb-3                         { margin-bottom: 0.35rem !important; }