/**
 * SJ Captcha - Frontend Styles
 *
 * @author    sjmedia GmbH <info@sjmedia-consulting.de>
 * @copyright 2024-2025 sjmedia GmbH
 * @license   http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
 */

/* ==========================================================================
   CSS Custom Properties (Theme-Anpassbar)
   ========================================================================== */
:root {
    --sjcaptcha-font-size: 1rem;
    --sjcaptcha-input-height: 38px;
    --sjcaptcha-input-width: 60px;
    --sjcaptcha-input-bg: #fff;
    --sjcaptcha-input-border: #ced4da;
    --sjcaptcha-input-border-focus: #80bdff;
    --sjcaptcha-input-radius: 4px;
    --sjcaptcha-label-color: inherit;
    --sjcaptcha-gap: 8px;
    --sjcaptcha-margin-top: 1rem;
}

/* ==========================================================================
   Captcha Container - Allgemein
   ========================================================================== */
.sjcaptcha-form-group,
.captcha-form-group17 {
    margin-top: var(--sjcaptcha-margin-top);
    margin-bottom: 1rem;
}

.sjcaptcha-field > .sjcaptcha-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--sjcaptcha-label-color);
}

.sjcaptcha-field.row > .sjcaptcha-label {
    margin-bottom: 0;
}

.sjcaptcha-control {
    min-width: 0;
}

/* Captcha Container - verwendet Attribut-Selektor für alle Suffixe */
[id^="sjcaptcha-container"],
#captchapro-container {
    display: inline-flex;
    align-items: center;
    gap: var(--sjcaptcha-gap);
    flex-wrap: nowrap;
    vertical-align: middle;
}

/* Zahlen und Operatoren - mittig zum Input ausgerichtet */
[id^="sjcaptcha-container"] > span,
#captchapro-container > span {
    font-size: var(--sjcaptcha-font-size);
    font-weight: 500;
    line-height: var(--sjcaptcha-input-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Input Fields
   Verwendet Attribut-Selektoren für alle Captcha-Inputs (mit/ohne Suffix)
   ========================================================================== */
input[id^="captcha-value-input"]:not([id*="-image"]),
input[name^="captcha-value-input"].sjcaptcha-answer-input:not([id*="-image"]) {
    width: var(--sjcaptcha-input-width);
    height: var(--sjcaptcha-input-height);
    padding: 0.375rem 0.5rem;
    font-size: var(--sjcaptcha-font-size);
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: var(--sjcaptcha-input-bg);
    background-clip: padding-box;
    border: 1px solid var(--sjcaptcha-input-border);
    border-radius: var(--sjcaptcha-input-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-align: center;
}

input[id^="captcha-value-input"]:focus,
input[name^="captcha-value-input"].sjcaptcha-answer-input:focus {
    border-color: var(--sjcaptcha-input-border-focus);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Image Captcha Input (breiter für Text-Eingabe) */
input[id^="captcha-value-input-image"],
.sjcaptcha-image-challenge input[name^="captcha-value-input"] {
    width: 150px;
    height: var(--sjcaptcha-input-height);
    padding: 0.375rem 0.5rem;
    font-size: var(--sjcaptcha-font-size);
    color: #495057;
    background-color: var(--sjcaptcha-input-bg);
    border: 1px solid var(--sjcaptcha-input-border);
    border-radius: var(--sjcaptcha-input-radius);
    text-align: left;
    margin-top: 0.5rem;
}

/* ==========================================================================
   Image Captcha
   ========================================================================== */
[id^="sjcaptcha-container"] img,
#captchapro-container img {
    max-width: 100%;
    height: auto;
    border-radius: var(--sjcaptcha-input-radius);
    border: 1px solid var(--sjcaptcha-input-border);
}

/* ==========================================================================
   Number Images (Dice, Roman, Arabic)
   ========================================================================== */
.cfem {
    width: 30px;
    height: 30px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
}

/* Arabic Numbers */
.at1 { background-image: url('../img/arabic/at1.png'); }
.at2 { background-image: url('../img/arabic/at2.png'); }
.at3 { background-image: url('../img/arabic/at3.png'); }
.at4 { background-image: url('../img/arabic/at4.png'); }
.at5 { background-image: url('../img/arabic/at5.png'); }
.at6 { background-image: url('../img/arabic/at6.png'); }
.at7 { background-image: url('../img/arabic/at7.png'); }
.at8 { background-image: url('../img/arabic/at8.png'); }
.at9 { background-image: url('../img/arabic/at9.png'); }
.ab1 { background-image: url('../img/arabic/ab1.png'); }
.ab2 { background-image: url('../img/arabic/ab2.png'); }
.ab3 { background-image: url('../img/arabic/ab3.png'); }
.ab4 { background-image: url('../img/arabic/ab4.png'); }
.ab5 { background-image: url('../img/arabic/ab5.png'); }
.ab6 { background-image: url('../img/arabic/ab6.png'); }
.ab7 { background-image: url('../img/arabic/ab7.png'); }
.ab8 { background-image: url('../img/arabic/ab8.png'); }
.ab9 { background-image: url('../img/arabic/ab9.png'); }

/* Roman Numbers */
.rt1 { background-image: url('../img/roman/rt1.png'); }
.rt2 { background-image: url('../img/roman/rt2.png'); }
.rt3 { background-image: url('../img/roman/rt3.png'); }
.rt4 { background-image: url('../img/roman/rt4.png'); }
.rt5 { background-image: url('../img/roman/rt5.png'); }
.rt6 { background-image: url('../img/roman/rt6.png'); }
.rt7 { background-image: url('../img/roman/rt7.png'); }
.rt8 { background-image: url('../img/roman/rt8.png'); }
.rt9 { background-image: url('../img/roman/rt9.png'); }
.rb1 { background-image: url('../img/roman/rb1.png'); }
.rb2 { background-image: url('../img/roman/rb2.png'); }
.rb3 { background-image: url('../img/roman/rb3.png'); }
.rb4 { background-image: url('../img/roman/rb4.png'); }
.rb5 { background-image: url('../img/roman/rb5.png'); }
.rb6 { background-image: url('../img/roman/rb6.png'); }
.rb7 { background-image: url('../img/roman/rb7.png'); }
.rb8 { background-image: url('../img/roman/rb8.png'); }
.rb9 { background-image: url('../img/roman/rb9.png'); }

/* Dice Numbers */
.dt1 { background-image: url('../img/dice/dt1.png'); }
.dt2 { background-image: url('../img/dice/dt2.png'); }
.dt3 { background-image: url('../img/dice/dt3.png'); }
.dt4 { background-image: url('../img/dice/dt4.png'); }
.dt5 { background-image: url('../img/dice/dt5.png'); }
.dt6 { background-image: url('../img/dice/dt6.png'); }
.dt7 { background-image: url('../img/dice/dt7.png'); }
.dt8 { background-image: url('../img/dice/dt8.png'); }
.dt9 { background-image: url('../img/dice/dt9.png'); }
.db1 { background-image: url('../img/dice/db1.png'); }
.db2 { background-image: url('../img/dice/db2.png'); }
.db3 { background-image: url('../img/dice/db3.png'); }
.db4 { background-image: url('../img/dice/db4.png'); }
.db5 { background-image: url('../img/dice/db5.png'); }
.db6 { background-image: url('../img/dice/db6.png'); }
.db7 { background-image: url('../img/dice/db7.png'); }
.db8 { background-image: url('../img/dice/db8.png'); }
.db9 { background-image: url('../img/dice/db9.png'); }

/* ==========================================================================
   Newsletter Captcha
   ========================================================================== */
.sjcaptcha-newsletter-form-group,
.captchapro-newsletter-form-group,
.captcha-newsletter-group17 {
    margin-top: 1rem;
}

/* Newsletter Container - alle Suffixe unterstützen */
.sjcaptcha-newsletter-form-group [id^="sjcaptcha-container"],
.captcha-newsletter-group17 [id^="sjcaptcha-container"] {
    display: inline-flex;
    align-items: center;
    gap: var(--sjcaptcha-gap);
    flex-wrap: wrap;
}

.sjcaptcha-newsletter-form-group label.sjcaptcha-newsletter,
.captchapro-newsletter-form-group label {
    color: inherit;
    margin-bottom: 0;
    margin-right: 0.5rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: var(--sjcaptcha-input-height);
    display: inline-flex;
    align-items: center;
}

/* Newsletter Input - kompakt, überschreibt Theme min-width (z.B. .block_newsletter 255px) */
.sjcaptcha-newsletter-form-group input[id^="captcha-value-input"],
.captcha-newsletter-group17 input[id^="captcha-value-input"],
.block_newsletter form input[id^="captcha-value-input"] {
    width: var(--sjcaptcha-input-width) !important;
    min-width: var(--sjcaptcha-input-width) !important;
    flex: 0 0 auto;
}

/* ==========================================================================
   Contact Form Captcha
   ========================================================================== */
#contact .sjcaptcha-container-contact,
#module-faqs-display .sjcaptcha-container-contact {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

#contact .sjcaptcha-container-contact .sjcaptcha-label,
#module-faqs-display .sjcaptcha-container-contact .sjcaptcha-label {
    flex: 0 0 25%;
    max-width: 25%;
    margin: 0;
    padding-right: 0.9375rem;
    line-height: var(--sjcaptcha-input-height);
    text-align: right;
}

#contact .sjcaptcha-container-contact .sjcaptcha-control,
#module-faqs-display .sjcaptcha-container-contact .sjcaptcha-control {
    flex: 0 0 75%;
    max-width: 75%;
}

#contact .sjcaptcha-container-contact [id^="sjcaptcha-container"],
#module-faqs-display .sjcaptcha-container-contact [id^="sjcaptcha-container"] {
    margin: 0;
}

/* ==========================================================================
   Login/Register/Password Reset Captcha
   ========================================================================== */
.sjcaptcha-login,
.captchapro-login,
.sjcaptcha-register-container,
.captchapro-register-container,
.sjcaptcha-resetp,
.captchapro-resetp {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

/* ==========================================================================
   Error Messages (PrestaShop-konform)
   ========================================================================== */
.sjcaptcha-error {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Fehler am Feld (wie bei anderen PrestaShop-Feldern) */
.sjcaptcha-form-group.has-error #captcha-value-input,
.sjcaptcha-form-group.has-error #captcha-value-input-image,
.sjcaptcha-form-group.has-error input[name^="captcha-value-input"] {
    border-color: #dc3545;
}

.sjcaptcha-form-group.has-error #captcha-value-input:focus,
.sjcaptcha-form-group.has-error #captcha-value-input-image:focus,
.sjcaptcha-form-group.has-error input[name^="captcha-value-input"]:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.sjcaptcha-form-group .sjcaptcha-field-error {
    margin-top: 0.5rem;
}

.sjcaptcha-form-group .sjcaptcha-field-error ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sjcaptcha-form-group .sjcaptcha-field-error .alert {
    margin-bottom: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

/* ==========================================================================
   ETS OnePage Checkout Kompatibilität
   ========================================================================== */
.ets_onepagecheckout_box input[id^="captcha-value-input"],
.ets_onepagecheckout_box [id^="sjcaptcha-container"] input[id^="captcha-value-input"] {
    width: 100%;
    max-width: var(--sjcaptcha-input-width);
}

/* ETS OPC: sjcaptcha-register-container (8px) + sjcaptcha-form-group (16px) stacken margin-top
   → doppelter Abstand zum vorherigen Feld. Beide auf 0 für konsistentes Spacing */
.ets_onepagecheckout_box .sjcaptcha-register-container {
    margin-top: 0;
}

.ets_onepagecheckout_box .sjcaptcha-form-group {
    margin-top: 0;
}

/* ETS OPC: .form-group--min hat Bootstrap margin-bottom: 15px → verschiebt Ziffern-Spans
   im inline-flex-Container nach unten. Auf 0 für korrekte vertikale Ausrichtung */
.ets_onepagecheckout_box [id^="sjcaptcha-container"] .form-group--min {
    margin: 0;
}

/* ETS OPC: Input in .opc_field_right bekommt ein "Antwort*"-Label (col-sm-12) darüber.
   min-width überschreibt max-width (60px) → Input mindestens so breit wie der Label-Text
   inkl. Platz für Browser-Icons (Autofill, Clear) */
.ets_onepagecheckout_box .opc_field_right input[id^="captcha-value-input"] {
    min-width: 105px;
}

.ets_onepagecheckout_box #captchapro-container,
.ets_onepagecheckout_box [id^="sjcaptcha-container"] {
    flex-wrap: wrap;
}

.ets_onepagecheckout_box #captchapro-container > *,
.ets_onepagecheckout_box [id^="sjcaptcha-container"] > * {
    flex: 0 1 auto;
    max-width: 100%;
}

.ets_onepagecheckout_box #captchapro-container .ets_opc_error,
.ets_onepagecheckout_box [id^="sjcaptcha-container"] .ets_opc_error {
    position: absolute;
    top: 100%;
    width: 100%;
}

.ets_onepagecheckout_box .sjcaptcha-login,
.ets_onepagecheckout_box .captchapro-login {
    margin-top: 0;
    align-content: center;
}

/* ==========================================================================
   Responsive Anpassungen
   ========================================================================== */
@media (max-width: 576px) {
    :root {
        --sjcaptcha-input-width: 50px;
        --sjcaptcha-gap: 5px;
    }

    [id^="sjcaptcha-container"],
    #captchapro-container {
        flex-wrap: wrap;
    }

    .cfem {
        width: 25px;
        height: 25px;
    }
}

/* ==========================================================================
   Legacy Support (alte Klassennamen)
   ========================================================================== */
.captcha-form-group15 {
    margin-top: 10px;
}

.captcha-form-group15 #captchapro-container {
    display: inline-flex;
    margin-left: 3px;
}

#password #captchapro-container,
#password [id^="sjcaptcha-container"] {
    margin-left: 0;
}

#authentication .captcha-form-group17 #captchapro-container,
#authentication .captcha-form-group17 [id^="sjcaptcha-container"] {
    margin-top: 5px;
}

/* ==========================================================================
   Captcha Popup Modal
   ========================================================================== */
#sjcaptcha-modal .modal-content {
    border-radius: 8px;
}

#sjcaptcha-modal .modal-header {
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 1.5rem;
}

#sjcaptcha-modal .modal-title {
    font-weight: 600;
    font-size: 1.125rem;
}

#sjcaptcha-modal .modal-body {
    padding: 1.5rem;
}

#sjcaptcha-modal .modal-footer {
    border-top: 1px solid #dee2e6;
    padding: 1rem 1.5rem;
}

/* Captcha Content im Popup */
#sjcaptcha-popup-content {
    text-align: center;
}

#sjcaptcha-popup-content .sjcaptcha-popup-math,
#sjcaptcha-popup-content .sjcaptcha-popup-image {
    padding: 1rem 0;
}

#sjcaptcha-popup-content .captcha-question {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

#sjcaptcha-popup-content input[type="text"] {
    font-size: 1.25rem;
    text-align: center;
    max-width: 100px;
    height: 50px;
    border: 2px solid var(--sjcaptcha-input-border);
    border-radius: var(--sjcaptcha-input-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#sjcaptcha-popup-content input[type="text"]:focus {
    border-color: var(--sjcaptcha-input-border-focus);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

#sjcaptcha-popup-content input[type="text"].is-invalid {
    border-color: #dc3545;
}

#sjcaptcha-popup-content input[type="text"].is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Image Captcha im Popup */
#sjcaptcha-popup-content .captcha-image {
    margin-bottom: 1rem;
}

#sjcaptcha-popup-content .captcha-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--sjcaptcha-input-radius);
    border: 1px solid var(--sjcaptcha-input-border);
}

#sjcaptcha-popup-content .captcha-input input {
    max-width: 200px;
    margin: 0 auto;
    display: block;
}

/* Error Message im Popup */
#sjcaptcha-popup-error {
    margin-top: 1rem;
    font-size: 0.875rem;
}

/* Number Images im Popup */
#sjcaptcha-popup-content .cfem {
    width: 40px;
    height: 40px;
}

/* Popup Mobile Responsive */
@media (max-width: 576px) {
    #sjcaptcha-modal .modal-dialog {
        margin: 0.5rem;
    }

    #sjcaptcha-modal .modal-body {
        padding: 1rem;
    }

    #sjcaptcha-popup-content .captcha-question {
        font-size: 1.25rem;
    }

    #sjcaptcha-popup-content input[type="text"] {
        font-size: 1rem;
        max-width: 80px;
        height: 44px;
    }

    #sjcaptcha-popup-content .cfem {
        width: 30px;
        height: 30px;
    }
}