/* ════════════════════════════════════════════════
   WY YOGA KURSE — Frontend Styles
   Sections sind direkte entry-content Kinder (alignfull).
   Layout-Tokens und wy-termin-* Basis kommen aus style.css / wy_termine.css
   ════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════
   SECTIONS
   ════════════════════════════════════════════════ */

.wy-yoga-section--login,
.wy-yoga-section--buchbare-kurse {
    background: var(--wy-color-white);
    padding: var(--wy-section-padding) !important;
}

.wy-yoga-section--meine-kurse,
.wy-yoga-section--geplante-kurse {
    background: var(--wy-color-snow);
    padding: var(--wy-section-padding) !important;
}

/* Override Astra page-builder-template max-width: none */
.wy-yoga-section > .wy-yoga-section-inner {
    max-width: var(--wy-content-max-width);
    margin: 0 auto;
}

/* Karten-BG invertiert zur Section-BG */
.wy-cards--light .wy-termin-row { background: var(--wy-color-white) !important; }
.wy-cards--dark  .wy-termin-row { background: var(--wy-color-snow) !important; }

/* ════════════════════════════════════════════════
   LOGIN
   ════════════════════════════════════════════════ */

.wy-login-form {
    background: var(--wy-color-snow);
    border: 1px solid var(--wy-color-sage-light);
    border-radius: var(--wy-radius-sm);
    padding: 2rem;
    margin: 1.5rem 0 2rem;
}

.wy-login-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.wy-login-header label {
    width: 100%;
    font-weight: 600;
    color: var(--wy-color-forest);
    margin-bottom: 0.25rem;
}

.wy-login-header input[type="text"] {
    flex: 1;
    min-width: 180px;
    padding: 0.65rem 1rem;
    border: 1px solid var(--wy-color-sage);
    border-radius: var(--wy-radius-sm);
    font-family: inherit;
    font-size: 1rem;
    background: var(--wy-color-white);
}

.wy-login-header input[type="text"]:focus {
    outline: none;
    border-color: var(--wy-color-teal);
}

.wy-login-header input.wy-input-invalid       { border-color: var(--wy-color-error); }
.wy-login-header input.wy-input-invalid:focus  { border-color: var(--wy-color-error); }

/* ════════════════════════════════════════════════
   KOMPAKTER HEADER (eingeloggt)
   ════════════════════════════════════════════════ */

.wy-compact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 0.5rem;
    background: var(--wy-color-snow);
    border: 1px solid var(--wy-color-sage-light);
    border-left: 4px solid var(--wy-color-teal);
    border-radius: 0 var(--wy-radius-sm) var(--wy-radius-sm) 0;
}

.wy-compact-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 2rem;
}

.wy-compact-identity,
.wy-compact-credits {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.05rem;
    font-weight: 400;
}

.wy-compact-identity { color: var(--wy-color-forest); }
.wy-compact-credits  { color: var(--wy-color-dark-teal); }

.wy-compact-identity svg,
.wy-compact-credits svg { flex-shrink: 0; vertical-align: middle; }

.wy-compact-actions form { margin: 0; }

/* ════════════════════════════════════════════════
   KONTAKTDATEN (details/summary)
   ════════════════════════════════════════════════ */

.wy-contact-details {
    margin-bottom: 2rem;
    border: 1px solid var(--wy-color-sage-light);
    border-radius: var(--wy-radius-sm);
    overflow: hidden;
}

.wy-contact-details summary {
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--wy-color-dark-teal);
    padding: 0.75rem 1rem;
    background: var(--wy-color-snow);
    user-select: none;
    list-style: none;
}

.wy-contact-details summary:hover        { background: var(--wy-color-sage-light); }
.wy-contact-details[open] summary        { border-bottom: 1px solid var(--wy-color-sage-light); }

#wy-contact-update-form {
    padding: 1.25rem 1rem;
    margin: 0;
}

.wy-contact-hint {
    font-size: 0.9rem;
    color: var(--wy-color-slate);
    margin: 0 0 1rem;
}

.wy-contact-fields-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 2rem;
    margin-bottom: 0.75rem;
}

.wy-contact-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wy-contact-field label {
    font-size: 0.9rem;
    color: var(--wy-color-slate);
    margin: 0;
    white-space: nowrap;
}

.wy-contact-field input {
    padding: 0.4rem 0.6rem;
    min-width: 220px;
    border-radius: var(--wy-radius-sm);
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 400;
}

.wy-contact-field input[type="email"]    { min-width: 280px; }

.wy-contact-field input.wy-input-readonly {
    border: 1px solid transparent;
    background: transparent;
    padding-left: 0;
    color: var(--wy-color-forest);
}

.wy-contact-field input.wy-input-edit {
    border: 1px solid var(--wy-color-sage);
    background: var(--wy-color-white);
}

.wy-contact-form-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* ════════════════════════════════════════════════
   KURSLISTE
   gap/flex-direction via wy-termine-list (wy_termine.css)
   ════════════════════════════════════════════════ */

.wy-course-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Termin-Row Override für hellen Kontext */
.wy-yoga-section .wy-termin-row {
    border: 1px solid var(--wy-color-sage-light);
}

.wy-yoga-section .wy-termin-row:hover {
    border-color: var(--wy-color-sage);
}

/* Dreispaltiges Info-Layout: Uhrzeit | Titel | Plätze */
.wy-course-info-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.wy-course-time {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.9rem;
    color: var(--wy-color-slate);
    white-space: nowrap;
    flex: 0 0 auto;
}

.wy-course-title {
    flex: 1;
    text-align: center;
    font-size: 1rem;
    color: var(--wy-color-forest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wy-course-slots {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--wy-color-dark-teal);
    font-weight: 600;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* ════════════════════════════════════════════════
   AKTIONEN
   ════════════════════════════════════════════════ */

.wy-course-actions {
    flex-shrink: 0;
    margin-left: auto;
}

.wy-action-form { margin: 0; }

/* Buttons — Outline (Secondary) */
.wy-yoga-section button,
.wy-yoga-section input[type="submit"] {
    background: transparent !important;
    color: var(--wy-color-teal) !important;
    border: 2px solid var(--wy-color-teal) !important;
}

.wy-yoga-section button:hover,
.wy-yoga-section input[type="submit"]:hover {
    background: var(--wy-color-teal) !important;
    color: var(--wy-color-white) !important;
}

/* Absagen-Button */
.wy-action-form button.wy-btn-cancel {
    background: transparent !important;
    border-color: rgba(192,57,43,0.5) !important;
    color: var(--wy-color-error) !important;
}

.wy-action-form button.wy-btn-cancel:hover {
    background: var(--wy-color-error) !important;
    border-color: var(--wy-color-error) !important;
    color: var(--wy-color-white) !important;
}

.wy-action-disabled {
    font-size: 0.85rem;
    color: var(--wy-color-slate);
    display: block;
}

.wy-no-courses {
    color: var(--wy-color-slate);
    opacity: var(--wy-opacity-muted);
    font-style: italic;
}

/* ════════════════════════════════════════════════
   VERGANGENE KURSE
   ════════════════════════════════════════════════ */

.wy-past-courses              { margin: 0.5rem 0 1.5rem; }

.wy-past-courses > summary {
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--wy-color-slate);
    padding: 0.4rem 0;
    user-select: none;
    opacity: var(--wy-opacity-muted);
}

.wy-past-courses > summary:hover         { opacity: 1; }
.wy-past-courses[open] > summary         { margin-bottom: 0.5rem; }

.wy-past-courses .wy-termin-row {
    opacity: var(--wy-opacity-muted);
    padding: 0.7rem 1.25rem;
    border-style: dashed;
}

.wy-past-courses .wy-termin-date { min-width: 44px; padding: 0.3rem 0.6rem; }
.wy-past-courses .wy-termin-day  { font-size: 16px; }
.wy-past-courses .wy-termin-month { font-size: 12px; }

/* ════════════════════════════════════════════════
   FEHLER
   ════════════════════════════════════════════════ */

.wy-error {
    color: var(--wy-color-error);
    font-size: 0.9rem;
    margin: 0.25rem 0;
}

/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .wy-login-header input[type="text"] { width: 100%; }

    .wy-course-info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }

    .wy-course-title {
        text-align: left;
        white-space: normal;
    }

    .wy-yoga-section .wy-course-actions { flex-basis: 100%; }

    .wy-action-form,
    .wy-action-form button {
        width: 100%;
        box-sizing: border-box;
    }
}