/**
 * ASN Shop Entry Message – Stylesheet
 *
 * Aufbau:
 *  1. CSS-Variablen (Farben, Abstände, Radien)
 *  2. Overlay (halbtransparenter Hintergrund)
 *  3. Modal-Container (weißes Fenster, zentriert)
 *  4. Schließen-Button
 *  5. Inhalt: Überschrift, Empfehlungsliste, Wichtig-Box
 *  6. Aktionsbereich: „Weiter"-Button
 *  7. Login-Bereich: Toggle-Link, UM-Formular
 *  8. Einblende-Animation
 *  9. Responsive Anpassungen (max-width: 480px)
 *
 * @package ASN_Shop_Entry_Message
 */

/* ── 1. CSS-Variablen ────────────────────────────────────────────────────── */

:root {
    --asn-sem-primary:        #FFB74D;
    --asn-sem-primary-hover:  #165153;
    --asn-sem-text:           #717171;
    --asn-sem-text-muted:     #555555;
    --asn-sem-border:         #e0e0e0;
    --asn-sem-bg:             #ffffff;
    --asn-sem-overlay-bg:     rgba(0, 0, 0, 0.55);
    --asn-sem-padding:        1.5rem;
    --asn-sem-gap:            1rem;
    --asn-sem-radius:         8px;
    --asn-sem-radius-btn:     4px;
    --asn-sem-notice-bg:      #fff8e1;
    --asn-sem-notice-border:  #f0c040;
    --asn-sem-z:              99999;
}

/* ── 2. Overlay ──────────────────────────────────────────────────────────── */

#asn-sem-overlay {
    position:        fixed;
    inset:           0;
    background:      var(--asn-sem-overlay-bg);
    align-items:     center;
    justify-content: center;
    z-index:         var(--asn-sem-z);
    padding:         1rem;
    box-sizing:      border-box;
}

/* ── 3. Modal-Container ──────────────────────────────────────────────────── */

#asn-sem-modal {
    position:      relative;
    background:    var(--asn-sem-bg);
    border-radius: var(--asn-sem-radius);
    box-shadow:    0 8px 32px rgba(0, 0, 0, 0.22);
    max-width:     560px;
    width:         100%;
    max-height:    90vh;
    overflow-y:    auto;
    padding:       var(--asn-sem-padding);
    box-sizing:    border-box;
    animation:     asn-sem-fadein 0.25s ease-out;
}

/* ── 4. Schließen-Button ─────────────────────────────────────────────────── */

#asn-sem-close {
    position:      absolute;
    top:           0.75rem;
    right:         0.75rem;
    background:    none;
    border:        none;
    font-size:     1.5rem;
    line-height:   1;
    color:         var(--asn-sem-text-muted);
    cursor:        pointer;
    padding:       0.25rem 0.5rem;
    border-radius: var(--asn-sem-radius-btn);
    transition:    color 0.15s, background 0.15s;
}

#asn-sem-close:hover,
#asn-sem-close:focus {
    color:      var(--asn-sem-text);
    background: var(--asn-sem-border);
    outline:    none;
}

/* ── 5. Inhalt ───────────────────────────────────────────────────────────── */

#asn-sem-content {
    margin-bottom: var(--asn-sem-gap);
	font-size:     1rem;
}

#asn-sem-title {
    font-size:     1.25rem;
    font-weight:   700;
    margin:        0 0 0.75rem;
    padding-right: 2rem;
    color:         var(--asn-sem-text);
}

#asn-sem-content > p {
    margin: 0 0 0.5rem;
    color:  var(--asn-sem-text);
}

/* Nummerierte Empfehlungsliste */
#asn-sem-content > ol {
    margin:  0 0 1rem 1.25rem;
    padding: 0;
    color:   var(--asn-sem-text);
}

#asn-sem-content > ol li {
    margin-bottom: 0.35rem;
    line-height:   1.5;
}

/* „Wichtig"-Box mit gelbem Hintergrund */
.asn-sem-important {
    background:    var(--asn-sem-notice-bg);
   /* border-left:   4px solid var(--asn-sem-notice-border);*/
    border-left:   4px solid var(--asn-sem-primary-hover);
    border-radius: 0 var(--asn-sem-radius-btn) var(--asn-sem-radius-btn) 0;
    padding:       0.75rem 1rem;
    margin-top:    0.5rem;
}

.asn-sem-important strong {
    display:       block;
    margin-bottom: 0.4rem;
    color:         var(--asn-sem-text);
}

.asn-sem-important ol {
    margin:  0 0 0 1.25rem;
    padding: 0;
    color:   var(--asn-sem-text);
}

.asn-sem-important ol li {
    margin-bottom: 0.3rem;
    line-height:   1.5;
}

.asn-sem-important a {
    color:           var(--asn-sem-primary);
	font-weight:     600;
	text-decoration: underline;
}

.asn-sem-important a:hover,
.asn-sem-important a:focus {
	color: var(--asn-sem-primary-hover);
}

/* ── 6. Aktionsbereich: „Weiter"-Button ──────────────────────────────────── */

#asn-sem-actions {
    border-top:  1px solid var(--asn-sem-border);
    padding-top: var(--asn-sem-gap);
    margin-top:  var(--asn-sem-gap);
    text-align:  center;
}

#asn-sem-continue {
    min-width:        180px;
    font-size:        1rem;
    padding:          0.65rem 1.5rem;
    background-color: var(--asn-sem-primary);
    color:            #ffffff;
    border:           none;
    border-radius:    var(--asn-sem-radius-btn);
    cursor:           pointer;
    font-weight:      600;
    transition:       background-color 0.15s;
}

#asn-sem-continue:hover,
#asn-sem-continue:focus {
    background-color: var(--asn-sem-primary-hover);
    outline:          none;
}

/* ── 7. Login-Bereich ────────────────────────────────────────────────────── */

#asn-sem-login-section {
    border-top:  1px solid var(--asn-sem-border);
    padding-top: var(--asn-sem-gap);
    margin-top:  var(--asn-sem-gap);
}

/* Toggle-Hinweis */
.asn-sem-login-hint {
    margin:     0 0 0.75rem;
    color:      var(--asn-sem-text-muted);
    text-align: center;
	font-size:  1rem;

}

.asn-sem-login-hint a {
    color:           var(--asn-sem-primary);
    text-decoration: none;
    font-weight:     600;
}

.asn-sem-login-hint a:hover {
	color: var(--asn-sem-primary-hover);
}

/* UM-Formular-Container */
#asn-sem-login-form {
    margin-top: 0.75rem;
}

/* UM-Formular-Felder normalisieren */
#asn-sem-login-form .um-field-label label {
    display:       block;
    margin-bottom: 0.25rem;
    font-weight:   600;
    color:         var(--asn-sem-text);
}

#asn-sem-login-form .um-field-area input {
    width:      100%;
    box-sizing: border-box;
}

/* UM-Button im Popup – WooCommerce-Primärfarbe übernehmen */
/*
#asn-sem-login-form .um-button {
    background-color: var(--asn-sem-primary) !important;
    border-color:     var(--asn-sem-primary) !important;
    width:            100%;
}

#asn-sem-login-form .um-button:hover {
    background-color: var(--asn-sem-primary-hover) !important;
    border-color:     var(--asn-sem-primary-hover) !important;
}
*/

/* ── Hinweis-Feld ausblenden ─────────────────────────────────────────────
 * data-key unterscheidet sich zwischen DEV (registrierhinweis_5) und
 * ACC/PRD (registrierhinweis) – beide Varianten werden abgedeckt.
 * Das übergeordnete .um-field wird ebenfalls versteckt, damit kein
 * leerer Abstand entsteht. :has() wird von allen modernen Browsern
 * unterstützt (Chrome 105+, Firefox 121+, Safari 15.4+).
 * ─────────────────────────────────────────────────────────────────────── */
#asn-sem-login-form .um-field:has(input[data-key="registrierhinweis_5"]),
#asn-sem-login-form .um-field:has(input[data-key="registrierhinweis"]) {
    display: none;
}

/* ── Registrieren-Button ausblenden ──────────────────────────────────────
 * Identisches HTML in DEV, ACC und PRD.
 * ─────────────────────────────────────────────────────────────────────── */
#asn-sem-login-form .um-right.um-half:has(a[href*="um_register"]) {
    display: none;
}

/* Passwort-vergessen */
#asn-sem-login-form .um-lost-password {
    margin:     0.75rem 0 0;
    text-align: center;
    font-size:  0.875rem;
}

#asn-sem-login-form .um-lost-password a {
    color: var(--asn-sem-primary);
}

/* ── 8. Einblende-Animation ──────────────────────────────────────────────── */

@keyframes asn-sem-fadein {
    from {
        opacity:   0;
        transform: translateY(16px);
    }
    to {
        opacity:   1;
        transform: translateY(0);
    }
}

/* ── 9. Responsive ───────────────────────────────────────────────────────── */

@media ( max-width: 480px ) {
    #asn-sem-modal {
        padding: 1rem;
    }

    #asn-sem-title {
        font-size: 1.1rem;
    }

    #asn-sem-content > ol,
    .asn-sem-important ol {
        margin-left: 1rem;
    }
}