/*
 * Das Buchungswidget übernimmt so weit wie möglich das Aussehen des Themes.
 * Alle Farben und Abstände laufen über CSS-Variablen, die in dieser
 * Reihenfolge aufgelöst werden:
 *   1. Werte aus den Plugin-Einstellungen (falls dort gesetzt)
 *   2. Variablen des Themes (WordPress-Theme.json / gängige Theme-Variablen)
 *   3. neutrale Rückfallwerte
 * Dadurch passt sich das Widget automatisch an, lässt sich aber jederzeit
 * gezielt überschreiben.
 */
#cb-booking-widget {
    --cb-accent: var(--cb-accent-custom, var(--wp--preset--color--primary, var(--wp--preset--color--vivid-cyan-blue, #2271b1)));
    --cb-accent-text: var(--cb-accent-text-custom, #fff);
    --cb-text: var(--cb-text-custom, var(--wp--preset--color--foreground, inherit));
    --cb-muted: var(--cb-muted-custom, #6b7280);
    --cb-border: var(--cb-border-custom, rgba(0, 0, 0, .18));
    --cb-surface: var(--cb-surface-custom, transparent);
    --cb-radius: var(--cb-radius-custom, 6px);
    --cb-available-bg: var(--cb-available-bg-custom, rgba(0, 128, 60, .12));
    --cb-available-text: var(--cb-available-text-custom, #00622e);

    max-width: 520px;
    /* Schrift und Größe kommen vom Theme */
    font-family: inherit;
    font-size: inherit;
    color: var(--cb-text);
}

#cb-booking-widget .cb-field {
    margin-bottom: 16px;
}

#cb-booking-widget label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    font-family: inherit;
}

/* Formularfelder: Theme-Stile durchlassen, nur Breite und Abstand setzen */
#cb-booking-widget select,
#cb-booking-widget input[type="date"],
#cb-booking-widget input[type="time"],
#cb-booking-widget input[type="number"],
#cb-booking-widget input[type="text"],
#cb-booking-widget input[type="email"] {
    width: 100%;
    padding: 10px 12px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    border: 1px solid var(--cb-border);
    border-radius: var(--cb-radius);
    background: var(--cb-surface);
}

#cb-booking-widget select:focus,
#cb-booking-widget input:focus {
    outline: 2px solid var(--cb-accent);
    outline-offset: 1px;
}

/* Zeitfenster-Buttons */
#cb-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cb-slot-btn {
    padding: 9px 14px;
    border: 1px solid var(--cb-border);
    background: var(--cb-surface);
    color: inherit;
    cursor: pointer;
    border-radius: var(--cb-radius);
    font-family: inherit;
    font-size: inherit;
    line-height: 1.3;
}

.cb-slot-btn:hover {
    border-color: var(--cb-accent);
}

.cb-slot-btn.selected {
    background: var(--cb-accent);
    color: var(--cb-accent-text);
    border-color: var(--cb-accent);
}

/*
 * Der Absende-Button trägt zusätzlich die Button-Klassen des Themes
 * (wp-element-button / wp-block-button__link). Die folgenden Regeln greifen
 * nur, wenn das Theme selbst nichts vorgibt — daher bewusst ohne !important.
 */
.cb-button {
    padding: 12px 22px;
    background: var(--cb-accent);
    color: var(--cb-accent-text);
    border: none;
    border-radius: var(--cb-radius);
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
}

.cb-button:disabled {
    opacity: .6;
    cursor: not-allowed;
}

#cb-message {
    margin-top: 12px;
    font-weight: 600;
}

#cb-message.error {
    color: #b32d2e;
}

#cb-message.success {
    color: #00622e;
}

/* Monatskalender */
#cb-calendar {
    border: 1px solid var(--cb-border);
    border-radius: var(--cb-radius);
    padding: 12px;
    background: var(--cb-surface);
}

.cb-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-weight: 600;
}

.cb-calendar-header button {
    background: none;
    border: 1px solid var(--cb-border);
    border-radius: var(--cb-radius);
    cursor: pointer;
    padding: 4px 12px;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}

.cb-calendar-header button:hover {
    border-color: var(--cb-accent);
}

.cb-calendar-legend {
    display: flex;
    gap: 16px;
    font-size: .85em;
    color: var(--cb-muted);
    margin-bottom: 10px;
}

.cb-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
}

.cb-dot-available { background: var(--cb-accent); }
.cb-dot-full { background: var(--cb-border); }

.cb-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.cb-cal-weekday {
    text-align: center;
    font-size: .8em;
    font-weight: 600;
    color: var(--cb-muted);
    padding-bottom: 4px;
}

.cb-cal-day {
    text-align: center;
    padding: 9px 0;
    border-radius: var(--cb-radius);
    font-size: .9em;
}

.cb-cal-empty { visibility: hidden; }

.cb-cal-available {
    background: var(--cb-available-bg);
    color: var(--cb-available-text);
    cursor: pointer;
    font-weight: 600;
}

.cb-cal-available:hover {
    background: var(--cb-accent);
    color: var(--cb-accent-text);
}

.cb-cal-available.selected {
    background: var(--cb-accent);
    color: var(--cb-accent-text);
}

.cb-cal-disabled {
    background: rgba(0, 0, 0, .04);
    color: var(--cb-muted);
    opacity: .7;
}

.cb-names-hint {
    font-size: .95em;
    font-weight: 600;
    margin: 4px 0 10px;
}

#cb-attendee-names .cb-field {
    margin-bottom: 10px;
}

.cb-notice {
    margin-top: 12px;
    padding: 14px 16px;
    background: rgba(240, 195, 60, .15);
    border: 1px solid rgba(240, 195, 60, .8);
    border-radius: var(--cb-radius);
    font-size: .95em;
    line-height: 1.5;
}

.cb-cal-error {
    grid-column: 1 / -1;
    padding: 14px;
    font-size: .95em;
    line-height: 1.5;
}
.cb-cal-error a {
    text-decoration: underline;
}