/*
 * ============================================================================
 * LINE DANCE CLUB - COUNTRY MEETS MODERN (STYLESHEET)
 * ============================================================================
 * 
 * @package     LDC_productive
 * @module      css
 * @component   ldc_captcha
 * 
 * @description Spezifische Stile für das Captcha Fenster
 * 
 * @status      In Progress
 * @open        
 * @ticket      
 * @version     1.0.1
 * @created     2026-08-11
 * @last_change 2026-10-04
 * 
 * @export-to-schorsch
 * ============================================================================
 */
/** Ende LDC Header */
.ALT-ldc-captcha-modal {
    box-sizing: border-box;
    width: min(100%, 720px);
    max-height: calc(100vh - 2rem);
    padding: clamp(1rem, 3vw, 2rem);
    border: 1px solid var(--ldc-gold, #c7a44a);
    border-radius: var(--ldc-border-radius);
    background: var(--ldc-card-bg-solid, rgb(45 45 45)); /* Vollständig deckendes Schwarz gegen Durchscheinen */
    color: var(--ldc-orange, #df8e31);
    text-align: center;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ldc-captcha-modal {
    box-sizing: border-box;
    width: min(92%, 520px); /* Nicht unnötig riesig auf Blöcken, aber stabil auf Handy */
    max-height: 90vh;
    padding: 1.25rem;
    border: 1px solid var(--ldc-gold, #c7a44a);
    border-radius: var(--ldc-border-radius);
    background: var(--ldc-card-bg-solid, rgb(45 45 45));
    color: var(--ldc-orange, #df8e31);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}
.ldc-captcha-modal h2 {
    font-size: 1.3rem;
/*    margin: 0 0 0.25rem 0;*/
    margin:auto;
}

.ldc-captcha-modal p {
    font-size: 0.85rem;
    margin: 0 0 0.5rem 0;
}

.ldc-captcha-options {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 0.4rem 0;
    width: 100%;
}
.ldc-captcha-tile {
    aspect-ratio: 1;
    flex: 1 1 0px;
    min-width: 44px;  /* Gute Mindestgröße für Klickbarkeit */
    max-width: 75px;
    padding: 3px;
    overflow: hidden;
    border: 2px solid var(--ldc-gold, #c7a44a);
    border-radius: var(--ldc-border-radius-small);
    background: #1a1a1a;
    cursor: pointer;
    box-sizing: border-box;
}
.ALT-ldc-captcha-tile {
    aspect-ratio: 1;
    flex: 1 1 0px; /* Zwingt alle Kacheln auf mobilen Screens in 100% verfügbare Breite */
    min-width: 0;
    max-width: 90px;
    padding: 3px;
    overflow: hidden;
    border: 2px solid var(--ldc-gold, #c7a44a);
    border-radius: var(--ldc-border-radius-small);
    background: #1a1a1a;
    cursor: pointer;
    box-sizing: border-box;
}

.ldc-captcha-tile:hover,
.ldc-captcha-tile:focus-visible {
    outline: 3px solid var(--ldc-orange, #df8e31);
    outline-offset: 2px;
}

.ldc-captcha-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 1. Der Container schrumpft exakt auf die tatsächliche Bildgröße zusammen */
.ldc-captcha-reference {
    position: relative;
    display: inline-block; /* WICHTIG: Nimmt exakt die Maße des fertigen Bildes an */
    width: auto;
    max-width: 100%;
    margin: 0.5rem auto;
}
.ldc-captcha-reference > img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 180px; /* Verhindert das Miniatur-Schrumpfen */
    max-height: 320px; /* Verhindert das Aufblähen */
    object-fit: contain;
    border-radius: var(--ldc-border-radius-small);
    margin: 0 auto;
}
/* 2. Das Bild gibt die Maße vor */
.NEU-ALTldc-captcha-reference > img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 28vh;
    border-radius: var(--ldc-border-radius-small);
    /* KEIN object-fit: contain verwenden, da sonst das Bild im Rahmen schwebt! */
}

/* 3. Das Loch bleibt prozentual IMMER exakt am richtigen Fleck im Bild */
.ldc-captcha-hole {
    position: absolute;
    box-sizing: border-box;
    border: 2px dashed var(--ldc-gold, #c7a44a);
    background: #ffffff;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}
.ALT-ldc-captcha-reference {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0.5rem auto;
}

.ALT-ldc-captcha-reference > img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 28vh; /* Verhindert vertikales Sprengen des Modals */
    object-fit: contain;
    border-radius: var(--ldc-border-radius-small);
    margin: 0 auto;
}

.ALT-ldc-captcha-hole {
    position: absolute;
    box-sizing: border-box;
    border: 2px dashed var(--ldc-gold, #c7a44a);
    background: #ffffff;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}

.ldc-captcha-error {
    color: var(--ldc-color-error, #b00020);
    font-weight: bold;
}

.ldc-captcha-cancel-btn {
    margin: 0.5rem auto 0 auto;
    display: flex;
    padding: 0.4rem 1rem;
}

@media (max-width: 480px) {
    .ldc-captcha-modal {
        padding: 0.75rem;
    }
    .ldc-captcha-tile {
        padding: 2px;
    }
}