/* ============================================================
   MEIN KONTO – Walther Systemtechnik Styleguide v1.0
   Kap. 03 Farben · Kap. 04 Typografie · Kap. 07 Buttons
   Kap. 08 Karten · Kap. 09 Formulare · Kap. 10 Tabellen
   ============================================================ */

/* ── Seiten-Layout ── */
.woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    padding: 48px 0 80px;
    align-items: start;
}
@media (max-width: 900px) {
    .woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 24px; }
}

/* ── Seitenüberschrift ── */
.woocommerce-account .entry-title,
.page-title {
    font-family: var(--font-primary);
    font-size: clamp(1.5rem, 3vw, 2.25rem); /* H2 Kap. 04 */
    font-weight: 700;
    color: var(--charcoal);                  /* #3a3a3a Kap. 03 */
    margin-bottom: 8px;
}

/* ============================================================
   SIDEBAR-NAVIGATION
   ============================================================ */
.wst-account-nav {
    background: var(--white);
    border: 1px solid var(--gray-border);    /* #e4e4e4 Kap. 03 */
    border-radius: 4px;                       /* Kap. 08 */
    overflow: hidden;
    position: sticky;
    top: 100px;
}

/* User-Block */
.wst-account-nav__user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: var(--navy);                 /* #495a65 Kap. 03 */
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.wst-account-nav__avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
}
.wst-account-nav__avatar-img { width: 100%; height: 100%; object-fit: cover; }
.wst-account-nav__avatar-initial {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--white);
}
.wst-account-nav__user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
/* Kap. 04: Small 0.875rem */
.wst-account-nav__user-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wst-account-nav__user-email {
    font-size: 0.78rem;
    color: rgba(255,255,255,.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nav-Liste */
.wst-account-nav__list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}
.wst-account-nav__item { margin: 0; }
.wst-account-nav__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    font-family: var(--font-primary);
    font-size: 0.875rem;                     /* Kap. 04: Body */
    font-weight: 500;
    color: var(--charcoal);                  /* #3a3a3a */
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;              /* Kap. 12 */
}
.wst-account-nav__link:hover {
    color: var(--blue-primary);              /* #0091d1 Kap. 03 */
    background: var(--blue-light);           /* #e6f5fb Kap. 03 */
    border-left-color: var(--blue-primary);
}
.wst-account-nav__item--active .wst-account-nav__link {
    color: var(--blue-primary);
    background: var(--blue-light);
    border-left-color: var(--blue-primary);
    font-weight: 700;
}
/* Logout: Roter Hover */
.wst-account-nav__item:last-child .wst-account-nav__link:hover {
    color: var(--danger);                    /* #d1001a Kap. 03 */
    background: #fff5f5;
    border-left-color: var(--danger);
}
.wst-account-nav__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    opacity: .55;
}
.wst-account-nav__link:hover .wst-account-nav__icon,
.wst-account-nav__item--active .wst-account-nav__icon {
    opacity: 1;
}

/* ============================================================
   HAUPT-INHALTSBEREICH
   ============================================================ */
.woocommerce-account .woocommerce-MyAccount-content {
    min-width: 0; /* Grid-Overflow verhindern */
}

/* ── Section-Titel ── */
.wst-account-section-title {
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--gray-border);
}
.wst-account-section-title h2 {
    font-size: 1.75rem;                      /* Kap. 04: H2 */
    font-weight: 700;
    color: var(--charcoal);
    margin: 0 0 6px;
}
.wst-account-section-title p {
    font-size: 0.95rem;
    color: var(--navy);                      /* #495a65 */
    margin: 0;
}

/* ── Welcome / Dashboard ── */
.wst-account-welcome {
    background: var(--blue-light);           /* #e6f5fb Kap. 03 */
    border: 1px solid rgba(0,145,209,.2);
    border-left: 4px solid var(--blue-primary);
    border-radius: 4px;                      /* Kap. 08 */
    padding: 20px 24px;
    margin-bottom: 32px;
}
.wst-account-welcome__title {
    font-size: 1.25rem;                      /* Kap. 04: H3 */
    font-weight: 700;
    color: var(--charcoal);
    margin: 0 0 8px;
}
.wst-account-welcome__text {
    font-size: 0.9rem;
    color: var(--navy);
    margin: 0;
    line-height: 1.6;
}
.wst-account-welcome__text a {
    color: var(--blue-primary);
    font-weight: 600;
}

/* ── Stats-Grid ── */
.wst-account-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 36px;
}
@media (max-width: 600px) { .wst-account-stats { grid-template-columns: 1fr; } }
.wst-account-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
    background: var(--white);
    border: 1px solid var(--gray-border);   /* Kap. 08 */
    border-radius: 4px;
    text-decoration: none;
    transition: box-shadow 0.25s ease, transform 0.25s ease; /* Kap. 12 */
    gap: 6px;
}
.wst-account-stat:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.12); /* Kap. 08: hover */
    transform: translateY(-4px);             /* Kap. 12: max -4px */
}
.wst-account-stat__icon {
    width: 44px;
    height: 44px;
    background: var(--blue-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue-primary);
    margin-bottom: 4px;
}
.wst-account-stat__value {
    font-size: 1.75rem;                      /* Kap. 04: H2 */
    font-weight: 700;
    color: var(--blue-primary);
    line-height: 1;
}
.wst-account-stat__label {
    font-size: 0.825rem;                     /* Kap. 04: Small */
    color: var(--navy);
    font-weight: 500;
}

/* ── Section ── */
.wst-account-section { margin-bottom: 40px; }
.wst-account-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gray-border);
}
.wst-account-section__title {
    font-size: 1rem;                         /* Kap. 04: H4 */
    font-weight: 700;
    color: var(--charcoal);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.wst-account-section__link {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--blue-primary);
    text-decoration: none;
}
.wst-account-section__link:hover { text-decoration: underline; }

/* ── Bestellungen-Tabelle ── */
.wst-account-orders-table th {
    font-size: 0.78rem;                      /* Kap. 10: Header 0.78rem */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.wst-order-number {
    font-weight: 700;
    color: var(--blue-primary);
    text-decoration: none;
}
.wst-order-number:hover { text-decoration: underline; }

/* Order-Status-Badges */
.wst-order-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 2px;                      /* Kap. 07 */
    font-size: 0.72rem;                      /* Kap. 04: Label */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.wst-order-status--processing,
.wst-order-status--on-hold    { background: #fff8e1; color: #b8860b; }
.wst-order-status--completed  { background: #e6f9f0; color: #2e7d54; }
.wst-order-status--cancelled,
.wst-order-status--refunded   { background: #fff0f0; color: var(--danger); }
.wst-order-status--pending    { background: var(--blue-light); color: var(--navy); }

/* ── Kontakt-Teaser ── */
.wst-account-contact-teaser {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: var(--navy);                 /* #495a65 Kap. 03 */
    border-radius: 4px;
    flex-wrap: wrap;
    margin-top: 32px;
}
.wst-account-contact-teaser__icon {
    color: rgba(255,255,255,.7);
    flex-shrink: 0;
}
.wst-account-contact-teaser__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wst-account-contact-teaser__text strong {
    font-size: 0.9rem;
    color: var(--white);
}
.wst-account-contact-teaser__text span {
    font-size: 0.82rem;
    color: rgba(255,255,255,.7);
}

/* ============================================================
   LOGIN-SEITE
   ============================================================ */
.wst-login-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 48px 0 80px;
}
@media (max-width: 768px) { .wst-login-page { grid-template-columns: 1fr; } }

.wst-login-box {
    background: var(--white);
    border: 1px solid var(--gray-border);   /* Kap. 08 */
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.10);  /* Kap. 08 */
}
.wst-login-box__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    background: var(--navy);                 /* #495a65 */
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.wst-login-box__icon {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    flex-shrink: 0;
}
.wst-login-box__title {
    font-size: 1.25rem;                      /* Kap. 04: H3 */
    font-weight: 700;
    color: var(--white);
    margin: 0;
}
.wst-login-box .wst-form { padding: 28px 24px; }

/* Login-Optionen-Zeile */
.wst-login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}
.wst-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--charcoal);
    cursor: pointer;
    font-weight: 400;
}
.wst-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--blue-primary);       /* #0091d1 */
    cursor: pointer;
}
.wst-login-forgot {
    font-size: 0.82rem;
    color: var(--blue-primary);
    text-decoration: none;
}
.wst-login-forgot:hover { text-decoration: underline; }
.wst-register-hint {
    font-size: 0.78rem;
    color: var(--navy);
    line-height: 1.6;
    margin: 12px 0 20px;
    padding: 10px 12px;
    background: var(--gray-light);           /* #f1f1f1 Kap. 03 */
    border-radius: 2px;
}
.wst-register-hint a { color: var(--blue-primary); }

/* ============================================================
   FORMULARE IM ACCOUNT – Kap. 09 exakt
   ============================================================ */
.wst-form .wst-field {
    margin-bottom: 20px;
}
/* Kap. 09: Label 0.825rem, 600, #3a3a3a */
.wst-form .wst-label,
.woocommerce-account label {
    display: block;
    font-family: var(--font-primary);
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 6px;
}
.wst-form .required { color: var(--blue-primary); margin-left: 2px; }

/* Kap. 09: Input border 1px solid #b3bfcc, border-radius 2px, padding 0.65rem 0.9rem */
.wst-form input[type="text"],
.wst-form input[type="email"],
.wst-form input[type="password"],
.wst-form input[type="tel"],
.wst-form select,
.wst-form textarea,
.woocommerce-account .input-text,
.woocommerce-account select {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--gray-medium);    /* #b3bfcc Kap. 09 */
    border-radius: 2px;                      /* Kap. 09 */
    font-family: var(--font-primary);
    font-size: 1rem;                         /* Kap. 04: Body */
    color: var(--charcoal);
    background: var(--white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    line-height: 1.6;
}
/* Kap. 09: Focus */
.wst-form input:focus,
.wst-form select:focus,
.wst-form textarea:focus,
.woocommerce-account .input-text:focus,
.woocommerce-account select:focus {
    outline: none;
    border-color: var(--blue-primary);       /* #0091d1 */
    box-shadow: 0 0 0 3px rgba(0, 145, 209, 0.15);
}
/* Kap. 09: Placeholder #b3bfcc */
.wst-form input::placeholder { color: var(--gray-medium); }
/* Kap. 09: Fehler-State */
.woocommerce-account .woocommerce-invalid input,
.wst-form input.woocommerce-invalid-input {
    border-color: var(--danger);             /* #d1001a Kap. 03 */
}

/* Passwort-Wrapper */
.wst-password-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.wst-password-wrap input { padding-right: 44px; }
.wst-password-toggle {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--navy);
    display: flex;
    align-items: center;
    padding: 4px;
    transition: color 0.2s;
}
.wst-password-toggle:hover { color: var(--blue-primary); }

/* Hilfetext unter Feldern */
.wst-field-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;                      /* Kap. 04: Caption */
    color: var(--gray-medium);               /* #b3bfcc */
}

/* Trennlinie mit Text */
.wst-account-divider {
    position: relative;
    text-align: center;
    margin: 28px 0;
    padding: 0;
}
.wst-account-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gray-border);
}
.wst-account-divider span {
    position: relative;
    background: var(--white);
    padding: 0 14px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--navy);
}

/* Form-Grid */
.wst-form-grid { display: grid; gap: 16px; }
.wst-form-grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .wst-form-grid--2 { grid-template-columns: 1fr; } }

/* Form-Actions */
.wst-form-actions {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--gray-border);
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Kap. 07: Buttons */
.woocommerce-account .woocommerce-Button,
.woocommerce-account .button,
.woocommerce-account button[type="submit"]:not(.wst-password-toggle) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.75rem 1.75rem;               /* Kap. 07 */
    font-family: var(--font-primary);
    font-size: 0.875rem;                     /* Kap. 07: 14px */
    font-weight: 600;
    border-radius: 2px;                      /* Kap. 07 */
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    letter-spacing: 0.02em;
}
.woocommerce-account .button.btn--full,
.btn--full { width: 100%; }

/* WooCommerce-Nachrichten */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info {
    padding: 12px 16px;
    border-radius: 2px;
    margin-bottom: 20px;
    font-size: 0.875rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid;
}
.woocommerce-account .woocommerce-message {
    background: #e6f9f0;
    border-color: #7dd4a8;
    color: #1a5c39;
}
.woocommerce-account .woocommerce-error {
    background: #fff0f0;
    border-color: var(--danger);
    color: var(--danger);
}
.woocommerce-account .woocommerce-info {
    background: var(--blue-light);          /* #e6f5fb */
    border-color: var(--blue-primary);
    color: var(--navy);
}

/* ============================================================
   RESPONSIVE ACCOUNT-NAV (Mobil: Horizontal-Tabs)
   ============================================================ */
@media (max-width: 900px) {
    .wst-account-nav {
        position: static;
        border-radius: 4px;
    }
    .wst-account-nav__list {
        display: flex;
        overflow-x: auto;
        padding: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 0;
        border-top: 1px solid var(--gray-border);
    }
    .wst-account-nav__list::-webkit-scrollbar { display: none; }
    .wst-account-nav__item { white-space: nowrap; flex-shrink: 0; }
    .wst-account-nav__link {
        padding: 12px 16px;
        border-left: none;
        border-bottom: 3px solid transparent;
        font-size: 0.82rem;
    }
    .wst-account-nav__link:hover,
    .wst-account-nav__item--active .wst-account-nav__link {
        border-left: none;
        border-bottom-color: var(--blue-primary);
        background: var(--blue-light);
    }
}


/* ===== Account Details: Schriftgröße 1em ===== */
.cuar-page-account-details .cuar-private-page-content,
.cuar-page-account-details .panel-body,
.cuar-page-account-details .panel-heading,
.cuar-page-account-details .nav-tabs,
.cuar-page-account-details .tab-content,
.cuar-page-account-details .form-group label,
.cuar-page-account-details .form-control,
.cuar-page-account-details input,
.cuar-page-account-details select,
.cuar-page-account-details textarea {
    font-size: 1em;
}

/* ===== Spitzname-Feld ausblenden ===== */
.cuar-page-account-details .cuar-field-nickname,
.cuar-page-account-details [data-field-id="nickname"],
.cuar-page-account-details .form-group.nickname-field,
.cuar-page-account-details #nickname,
.cuar-page-account-details label[for="nickname"],
.cuar-page-account-details label[for="nickname"] + * {
    display: none !important;
}

/* ===== Account Details: Schriftgröße 1em ===== */
.cuar-edit-account-form,
.cuar-edit-account-form *,
.cuar-readonly-field,
.cuar-readonly-field *,
.cuar-field-label,
.cuar-field-value,
.panel-body,
.panel-heading,
.panel-title,
.page-heading .cuar-title {
    font-size: 1em;
}

/* ===== Spitzname-Feld ausblenden ===== */
.cuar-field-id-nickname {
    display: none !important;
}

/* ===== WST Account Edit Form ===== */
.wst-account-edit-form .panel { margin-bottom: 20px; }
.wst-field-row { display:flex; align-items:center; padding: 10px 0; border-bottom: 1px solid #eee; font-size:1em; }
.wst-field-row:last-child { border-bottom: none; }
.wst-field-row label { width: 200px; min-width: 200px; font-weight: 600; color: #495a65; font-size:1em; }
.wst-field-row input[type=text],
.wst-field-row input[type=email],
.wst-field-row input[type=url],
.wst-field-row input[type=password] { flex:1; padding: 7px 10px; border: 1px solid #cdd4da; border-radius: 2px; font-size:1em; font-family:inherit; }
.wst-field-row input:focus { outline: none; border-color: #0091d1; box-shadow: 0 0 0 2px rgba(0,145,209,.15); }
.wst-field-static { flex:1; color: #3a4a56; font-size:1em; }
.wst-field-row--divider { border-top: 2px solid #eee; margin-top: 10px; padding-top: 14px; border-bottom: none; }
.wst-field-row--divider label { font-weight: 700; color: #0091d1; width:auto; }
.wst-notice { padding: 12px 16px; border-radius: 2px; margin-bottom: 16px; font-size:1em; }
.wst-notice--success { background: #e8f5e9; border-left: 4px solid #43a047; color: #2e7d32; }
.wst-notice--info    { background: #e3f2fd; border-left: 4px solid #1e88e5; color: #1565c0; }
.wst-notice--error   { background: #fce4ec; border-left: 4px solid #e53935; color: #b71c1c; }

/* ===== WST Speichern-Button ===== */
.wst-form-actions button[type=submit] {
    background: #0091d1;
    color: #fff;
    border: none;
    border-radius: 2px;
    padding: 12px 28px;
    font-size: 1em;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.wst-form-actions button[type=submit]:hover {
    background: #007ab5;
}