/**
 * E-Mail Code Gate – Design
 * -------------------------------------------------------------------------
 * Diese Datei steuert das Aussehen des Login-Bereichs (Button, Popup-Formular,
 * Eingabefeld, Fehlermeldungen). Passe einfach die Werte unter ":root" an –
 * der Rest der Datei nutzt diese Variablen automatisch.
 *
 * Datei liegt im selben Ordner wie das Plugin (email-code-gate.php) und
 * heißt "ecg-style.css". Wird automatisch auf Seiten mit dem Shortcode
 * [ecg_login_button] geladen.
 * ------------------------------------------------------------------------- */

:root {
    /* Farben */
    --ecg-color-primary:        #1a1a1a;   /* Haupt-Button-Hintergrund */
    --ecg-color-primary-hover:  #333333;   /* Haupt-Button-Hintergrund (Hover) */
    --ecg-color-primary-text:   #ffffff;   /* Schriftfarbe auf dem Haupt-Button */

    --ecg-color-secondary:       #ffffff;  /* "Bestätigen"-Button-Hintergrund */
    --ecg-color-secondary-hover: #f2f2f2;  /* "Bestätigen"-Button-Hintergrund (Hover) */
    --ecg-color-secondary-text:  #1a1a1a;  /* Schriftfarbe auf dem "Bestätigen"-Button */
    --ecg-color-secondary-border:#1a1a1a;  /* Rahmenfarbe des "Bestätigen"-Buttons */

    --ecg-color-background:     #f9f9f9;   /* Hintergrund des Popup-Bereichs */
    --ecg-color-border:         #e0e0e0;   /* Rahmenfarbe des Popup-Bereichs */
    --ecg-color-text:           #1a1a1a;   /* normaler Text ("Ein Code wurde versendet...") */
    --ecg-color-error:          #c00000;   /* Fehlermeldungen (falscher Code etc.) */

    --ecg-color-input-bg:       #ffffff;   /* Hintergrund des Code-Eingabefelds */
    --ecg-color-input-border:   #cccccc;   /* Rahmen des Code-Eingabefelds */
    --ecg-color-input-focus:    #1a1a1a;   /* Rahmenfarbe bei Fokus im Eingabefeld */

    /* Typografie */
    --ecg-font-family: inherit;            /* z.B. "Poppins, sans-serif" */
    --ecg-font-size-text: 15px;            /* Größe von Info- und Fehlertext */
    --ecg-font-size-button: 15px;          /* Größe der Button-Beschriftung */
    --ecg-font-size-input: 20px;           /* Größe des Code-Eingabefelds */
    --ecg-font-weight-button: 600;

    /* Form / Radien / Abstände */
    --ecg-radius: 8px;                     /* Eckenradius für Buttons, Box, Eingabefeld */
    --ecg-max-width: 360px;                /* maximale Breite des gesamten Bereichs */
    --ecg-spacing: 16px;                   /* Grundabstand zwischen den Elementen */
    --ecg-padding-box: 20px;               /* Innenabstand des Popup-Bereichs */
}

/* -------------------------------------------------------------------------
 * Grundlayout
 * ------------------------------------------------------------------------- */
.ecg-wrapper {
    font-family: var(--ecg-font-family);
    max-width: var(--ecg-max-width);
}

/* -------------------------------------------------------------------------
 * "Code anfordern"-Button
 *
 * Elementor wendet unter Site Settings -> Buttons oft ein globales Styling
 * auf JEDES <button>-Element an (teils mit höherer Spezifität/!important).
 * Deshalb: verschachtelter Selektor für mehr Spezifität + !important auf
 * den wichtigsten visuellen Eigenschaften, um Elementors Default sicher zu
 * überschreiben.
 * ------------------------------------------------------------------------- */
.ecg-wrapper .ecg-send-btn {
    display: inline-block !important;
    width: 100% !important;
    padding: 12px 20px !important;
    margin: 0 0 12px !important;
    background: var(--ecg-color-primary) !important;
    color: var(--ecg-color-primary-text) !important;
    font-size: var(--ecg-font-size-button) !important;
    font-weight: var(--ecg-font-weight-button) !important;
    font-family: var(--ecg-font-family) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: normal !important;
    border: none !important;
    border-radius: var(--ecg-radius) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease !important;
}

.ecg-wrapper .ecg-send-btn:hover:not(:disabled) {
    background: var(--ecg-color-primary-hover) !important;
    color: var(--ecg-color-primary-text) !important;
}

.ecg-wrapper .ecg-send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* -------------------------------------------------------------------------
 * Popup-Bereich mit Code-Eingabe
 * ------------------------------------------------------------------------- */
.ecg-form {
    margin-top: var(--ecg-spacing);
    padding: var(--ecg-padding-box);
    background: var(--ecg-color-background);
    border: 1px solid var(--ecg-color-border);
    border-radius: var(--ecg-radius);
}

.ecg-wrapper .ecg-info {
    margin: 0 0 12px;
    font-size: var(--ecg-font-size-text);
    color: var(--ecg-color-text);
}

.ecg-wrapper .ecg-email-hint {
    margin: 0 0 12px;
    font-size: var(--ecg-font-size-text);
    color: var(--ecg-color-text);
}

.ecg-wrapper .ecg-email-hint strong {
    font-weight: 600;
}

.ecg-wrapper .ecg-code-input {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    margin: 0 0 12px !important;
    font-size: var(--ecg-font-size-input) !important;
    font-family: var(--ecg-font-family) !important;
    text-align: center !important;
    letter-spacing: 6px !important;
    color: var(--ecg-color-text) !important;
    background: var(--ecg-color-input-bg) !important;
    border: 1px solid var(--ecg-color-input-border) !important;
    border-radius: var(--ecg-radius) !important;
    box-shadow: none !important;
    outline: none;
    transition: border-color 0.2s ease;
}

.ecg-wrapper .ecg-code-input:focus {
    border-color: var(--ecg-color-input-focus) !important;
    box-shadow: none !important;
}

.ecg-wrapper .ecg-code-input::placeholder {
    letter-spacing: normal;
    color: #999999;
}

/* -------------------------------------------------------------------------
 * "Bestätigen"-Button
 * ------------------------------------------------------------------------- */
.ecg-wrapper .ecg-verify-btn {
    display: inline-block !important;
    width: 100% !important;
    padding: 12px 20px !important;
    margin: 0 !important;
    background: var(--ecg-color-secondary) !important;
    color: var(--ecg-color-secondary-text) !important;
    font-size: var(--ecg-font-size-button) !important;
    font-weight: var(--ecg-font-weight-button) !important;
    font-family: var(--ecg-font-family) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: normal !important;
    border: 1px solid var(--ecg-color-secondary-border) !important;
    border-radius: var(--ecg-radius) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease !important;
}

.ecg-wrapper .ecg-verify-btn:hover {
    background: var(--ecg-color-secondary-hover) !important;
    color: var(--ecg-color-secondary-text) !important;
}

/* -------------------------------------------------------------------------
 * Fehlermeldungen
 * ------------------------------------------------------------------------- */
.ecg-msg {
    margin: 12px 0 0;
    font-size: var(--ecg-font-size-text);
    color: var(--ecg-color-error);
    min-height: 1em;
}

.ecg-msg:empty {
    margin: 0;
}