/*
 * SAR Customerarea / Gästebereich — Front-End-Stylesheet
 *
 * Wird automatisch eingebunden, wenn der Shortcode [sar-customerarea] auf
 * einer Seite vorkommt (siehe register() in class-sar-customerarea.php).
 *
 * Design-Hinweise:
 *   - Tabs „Anmelden / Registrieren" sind CSS-only via Radio-Button-Trick.
 *   - Klassen-Namen sind absichtlich BEM-artig (.sar-tabs__panel--login),
 *     damit das Child-Theme leicht überschreiben kann.
 *   - Farben kommen aus CSS-Variablen mit dezenten Defaults — wenn das Theme
 *     `--sar-primary` etc. setzt, übernimmt es das Branding automatisch.
 */

:root {
    --sar-primary:        #0c2c5c;
    --sar-primary-hover:  #0a2349;
    --sar-text:           #222;
    --sar-text-muted:     #666;
    --sar-border:         #d0d4dc;
    --sar-border-active:  #0c2c5c;
    --sar-bg-soft:        #f5f7fb;
    --sar-bg-tab:         #eef1f7;
    --sar-success-bg:     #e3f4e7;
    --sar-success-border: #58a96a;
    --sar-error-bg:       #fbeaea;
    --sar-error-border:   #d04545;
    --sar-info-bg:        #e8eef9;
    --sar-info-border:    #406bba;
    --sar-radius:         8px;
    --sar-gap:            18px;
}

/* =========================================================================
 * Container
 * ========================================================================= */
.sar-customerarea {
    margin: 2rem auto;
    color: var(--sar-text);
    font-size: 1rem;
    line-height: 1.5;
}

.sar-customerarea--anonymous {
    /* Anonymous Modus = Tabs sichtbar */
}

.sar-customerarea--error {
    padding: 1rem 1.25rem;
    background: var(--sar-error-bg);
    border-left: 4px solid var(--sar-error-border);
    border-radius: var(--sar-radius);
}

/* =========================================================================
 * Tabs (Anmelden | Registrieren)
 * ========================================================================= */
.sar-tabs {
    border: 1px solid var(--sar-border);
    border-radius: var(--sar-radius);
    background: #fff;
    overflow: hidden;
}

/* Radio-Buttons unsichtbar, aber fokussierbar */
.sar-tabs__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

.sar-tabs__bar {
    display: flex;
    background: var(--sar-bg-tab);
    border-bottom: 1px solid var(--sar-border);
}

.sar-tabs__tab {
    flex: 1;
    padding: 14px 16px;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    color: var(--sar-text-muted);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    user-select: none;
}

.sar-tabs__tab:hover {
    background: rgba(0, 0, 0, 0.03);
    color: var(--sar-text);
}

/* Aktiver Tab: anhand des dazugehörigen :checked Radios */
.sar-tabs__radio--login:checked ~ .sar-tabs__bar .sar-tabs__tab--login,
.sar-tabs__radio--register:checked ~ .sar-tabs__bar .sar-tabs__tab--register {
    background: #fff;
    color: var(--sar-primary);
    border-bottom-color: var(--sar-border-active);
}

/* Fokus-Ring (Tastatur-Bedienung) */
.sar-tabs__radio:focus-visible + label,
.sar-tabs__radio:focus-visible + .sar-tabs__radio + .sar-tabs__bar .sar-tabs__tab {
    outline: 2px solid var(--sar-primary);
    outline-offset: -2px;
}

/* Panels: standardmäßig versteckt, sichtbar nur wenn passendes Radio :checked */
.sar-tabs__panel {
    display: none;
    padding: 1.5rem;
}

.sar-tabs__radio--login:checked    ~ .sar-tabs__panel--login,
.sar-tabs__radio--register:checked ~ .sar-tabs__panel--register {
    display: block;
}

/* =========================================================================
 * Formulare (Login, Signup, Forgot, Set-Password)
 * ========================================================================= */
.sar-login__form,
.sar-signup__form,
.sar-forgot__form,
.sar-setpassword__form {
    display: flex;
    flex-direction: column;
    gap: var(--sar-gap);
}

.sar-login__form label,
.sar-signup__form label,
.sar-forgot__form label,
.sar-setpassword__form label {
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
}

.sar-login__form input[type="email"],
.sar-login__form input[type="password"],
.sar-signup__form input[type="email"],
.sar-forgot__form input[type="email"],
.sar-setpassword__form input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--sar-border);
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
}

.sar-login__form input:focus,
.sar-signup__form input:focus,
.sar-forgot__form input:focus,
.sar-setpassword__form input:focus {
    outline: none;
    border-color: var(--sar-primary);
    box-shadow: 0 0 0 3px rgba(12, 44, 92, 0.15);
}

.sar-login__form button,
.sar-signup__form button,
.sar-forgot__form button,
.sar-setpassword__form button {
    padding: 12px 18px;
    background: var(--sar-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.sar-login__form button:hover,
.sar-signup__form button:hover,
.sar-forgot__form button:hover,
.sar-setpassword__form button:hover {
    background: var(--sar-primary-hover);
}

.sar-signup__hint,
.sar-setpassword__hint,
.sar-forgot__intro {
    font-size: 0.9rem;
    color: var(--sar-text-muted);
    margin: 0;
}

.sar-login__forgot {
    text-align: right;
    font-size: 0.9rem;
    margin: -8px 0 0 0;
}

.sar-login__forgot a {
    color: var(--sar-text-muted);
}

.sar-login__forgot a:hover {
    color: var(--sar-primary);
}

.sar-setpassword__rules {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    color: var(--sar-text-muted);
}

/* =========================================================================
 * Forgot-Sub-View (eigene Seite, ohne Tabs)
 * ========================================================================= */
.sar-forgot,
.sar-setpassword {
    border: 1px solid var(--sar-border);
    border-radius: var(--sar-radius);
    background: #fff;
    padding: 1.5rem;
}

.sar-forgot__heading,
.sar-setpassword h1 {
    margin: 0 0 0.75rem 0;
    font-size: 1.25rem;
    color: var(--sar-primary);
}

.sar-forgot__back {
    margin-top: 1.25rem;
    font-size: 0.9rem;
}

.sar-forgot__back a {
    color: var(--sar-text-muted);
}

/* =========================================================================
 * Profilansicht (eingeloggt)
 * ========================================================================= */
.sar-customerarea__greeting {
    margin: 0 0 0.5rem 0;
    color: var(--sar-primary);
}

.sar-customerarea__intro {
    margin: 0 0 1.5rem 0;
    color: var(--sar-text-muted);
}

.sar-customerarea__profile {
    margin: 0;
    padding: 0;
}

.sar-customerarea__profile dt {
    font-weight: 600;
    margin-top: 0.5rem;
}

.sar-customerarea__profile dd {
    margin: 0 0 0.75rem 0;
}

.sar-customerarea__logout {
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

.sar-customerarea__logout a {
    color: var(--sar-text-muted);
}

.sar-customerarea__logout a:hover {
    color: var(--sar-primary);
}

/* =========================================================================
 * Banner / Notices
 * ========================================================================= */
.sar-notice {
    padding: 0.75rem 1rem;
    margin: 0 0 1rem 0;
    border-radius: 6px;
    border-left: 4px solid transparent;
    font-size: 0.95rem;
}

.sar-notice--success {
    background: var(--sar-success-bg);
    border-left-color: var(--sar-success-border);
}

.sar-notice--error {
    background: var(--sar-error-bg);
    border-left-color: var(--sar-error-border);
}

.sar-notice--info {
    background: var(--sar-info-bg);
    border-left-color: var(--sar-info-border);
}

/* =========================================================================
 * Profil-Formular im Gästebereich (eingeloggt)
 * ========================================================================= */
.sar-profile-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sar-profile__group {
    border: 1px solid var(--sar-border);
    border-radius: var(--sar-radius);
    padding: 1rem 1.25rem 1.25rem;
    margin: 0;
}

.sar-profile__group legend {
    padding: 0 0.5rem;
    font-weight: 600;
    color: var(--sar-primary);
}

.sar-profile__row {
    display: grid;
    gap: var(--sar-gap);
    margin-bottom: var(--sar-gap);
}

.sar-profile__row:last-child {
    margin-bottom: 0;
}

.sar-profile__row--two {
    grid-template-columns: 1fr 1fr;
}

.sar-profile__row--street {
    grid-template-columns: 3fr 1fr;
}

.sar-profile__row--city {
    grid-template-columns: 1fr 3fr;
}

@media (max-width: 540px) {
    .sar-profile__row--two,
    .sar-profile__row--street,
    .sar-profile__row--city {
        grid-template-columns: 1fr;
    }
}

.sar-profile__field label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

.sar-profile__field input,
.sar-profile__field select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--sar-border);
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
    background: #fff;
}

.sar-profile__field input:focus,
.sar-profile__field select:focus {
    outline: none;
    border-color: var(--sar-primary);
    box-shadow: 0 0 0 3px rgba(12, 44, 92, 0.15);
}

.sar-profile__field--error input,
.sar-profile__field--error select {
    border-color: var(--sar-error-border);
    background: var(--sar-error-bg);
}

.sar-profile__field--error label {
    color: var(--sar-error-border);
}

.sar-profile__hint {
    display: block;
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--sar-text-muted);
}

.sar-profile__readonly {
    padding: 10px 12px;
    background: var(--sar-bg-soft);
    border: 1px solid var(--sar-border);
    border-radius: 6px;
    color: var(--sar-text-muted);
}

.sar-profile__group--readonly legend {
    color: var(--sar-text-muted);
}

.sar-profile__submit {
    align-self: flex-start;
    padding: 12px 22px;
    background: var(--sar-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.sar-profile__submit:hover {
    background: var(--sar-primary-hover);
}

/* =========================================================================
 * Mitreisende-Sektion (Liste + Add/Edit-Form)
 * ========================================================================= */
.sar-companions {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--sar-border);
}

.sar-companions__heading {
    margin: 0 0 0.5rem 0;
    color: var(--sar-primary);
}

.sar-companions__intro {
    margin: 0 0 1.25rem 0;
    color: var(--sar-text-muted);
    font-size: 0.95rem;
}

.sar-companions__empty {
    color: var(--sar-text-muted);
    font-style: italic;
    margin: 0 0 1rem 0;
}

.sar-companions__list {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sar-companions__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--sar-bg-soft);
    border: 1px solid var(--sar-border);
    border-radius: 6px;
    gap: 1rem;
}

.sar-companions__card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.sar-companions__card-name {
    color: var(--sar-text);
}

.sar-companions__card-meta {
    font-size: 0.85rem;
    color: var(--sar-text-muted);
}

.sar-companions__card-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
}

.sar-companions__card-edit {
    color: var(--sar-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

.sar-companions__card-edit:hover {
    text-decoration: underline;
}

.sar-companions__card-delete-form {
    margin: 0;
}

.sar-companions__card-delete {
    background: none;
    border: none;
    color: var(--sar-text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 4px 8px;
}

.sar-companions__card-delete:hover {
    color: var(--sar-error-border);
    text-decoration: underline;
}

.sar-companions__add-btn {
    display: inline-block;
    padding: 8px 14px;
    background: transparent;
    color: var(--sar-primary);
    border: 1px dashed var(--sar-primary);
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
}

.sar-companions__add-btn:hover {
    background: var(--sar-primary);
    color: #fff;
}

.sar-companions__back {
    margin-top: 1rem;
    font-size: 0.9rem;
}

.sar-companions__back a {
    color: var(--sar-text-muted);
}

.sar-companions__back a:hover {
    color: var(--sar-primary);
}

.sar-companion-form__heading {
    margin: 0 0 1rem 0;
    color: var(--sar-primary);
    font-size: 1.1rem;
}

@media (max-width: 540px) {
    .sar-companions__card {
        flex-direction: column;
        align-items: flex-start;
    }
    .sar-companions__card-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* =========================================================================
 * Account-Icon (Widget / Shortcode für Header)
 *
 * Wir rendern das Icon NICHT als Inline-SVG (das würde von WordPress'
 * wp_kses_post in vielen Custom-HTML-Kontexten gefiltert), sondern als
 * CSS-mask-image aus einer SVG-Datei. background-color: currentColor sorgt
 * dafür, dass das Icon weiterhin die Theme-Farbe erbt.
 * ========================================================================= */
.sar-account-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 4px;
    transition: opacity 0.15s, background 0.15s;
}

.sar-account-icon:hover {
    opacity: 0.85;
    background: rgba(0, 0, 0, 0.04);
}

.sar-account-icon:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Icon-Container: leerer span, Inhalt kommt per mask-image */
.sar-account-icon__svg {
    display: inline-block;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    position: relative;
}

/* SVG-Datei je Status. Pfade sind relativ zu /assets/css/ → /assets/icons/. */
.sar-account-icon--out .sar-account-icon__svg {
    -webkit-mask-image: url("../icons/account-login.svg");
            mask-image: url("../icons/account-login.svg");
}

/* Eingeloggt: gefülltes Person-Icon in Grün. Wir override currentColor hier
   bewusst, damit der Status auch ohne Worte erkennbar ist. */
.sar-account-icon--in .sar-account-icon__svg {
    -webkit-mask-image: url("../icons/account-user.svg");
            mask-image: url("../icons/account-user.svg");
    background-color: var(--sar-success-border);
}

.sar-account-icon__label {
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
}