/* ============================================================
   ginko-forms.css  –  GinkoForms Engine v1.0
   Erfordert: Bootstrap 5 (wird von der Host-Anwendung geladen)
   ============================================================ */

/* -------------------------------------------------------
   Animationen
   ------------------------------------------------------- */
@keyframes ginkoFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ginkoFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
}
@keyframes ginkoCheckmark {
    0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
    70%  { transform: scale(1.15) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

.ginko-fade-in  { animation: ginkoFadeIn  .35s ease both; }
.ginko-fade-out { animation: ginkoFadeOut .3s  ease both; }

/* -------------------------------------------------------
   Container
   ------------------------------------------------------- */
.ginko-form-container {
    position: relative;
    padding: 2rem;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: .75rem;
    background: #ffffff;
    box-shadow: 0 4px 24px rgba(0,0,0,.07);
    animation: ginkoFadeIn .4s ease both;
    max-width: 780px;
}

/* -------------------------------------------------------
   Formularkopf
   ------------------------------------------------------- */
.ginko-form-header {
    padding-bottom: 1.25rem;
}

.ginko-title {
    font-size:   1.6rem;
    font-weight: 700;
    margin:      0 0 .3rem;
}

.ginko-subtitle { font-size: 1.05rem; }

.ginko-intro {
    margin-top:  .75rem;
    font-size:   .95rem;
    line-height: 1.65;
}

/* -------------------------------------------------------
   Authentifizierungsschritte (E-Mail & OTP)
   ------------------------------------------------------- */
.ginko-auth-step {
    animation: ginkoFadeIn .3s ease both;
    padding:   .25rem 0;
}

/* -------------------------------------------------------
   OTP-Eingabe
   ------------------------------------------------------- */
.ginko-otp-inputs {
    display:   flex;
    gap:       .5rem;
    flex-wrap: nowrap;
}

.ginko-otp-digit {
    width:          3.2rem !important;
    height:         3.6rem;
    text-align:     center;
    font-size:      1.6rem;
    font-weight:    700;
    font-family:    'Courier New', monospace;
    padding:        0;
    border:         2px solid #ced4da;
    border-radius:  .5rem;
    transition:     border-color .2s, box-shadow .2s;
    caret-color:    transparent;
}

.ginko-otp-digit:focus {
    border-color: #4361ee;
    box-shadow:   0 0 0 .25rem rgba(67,97,238,.2);
    outline:      none;
}

/* -------------------------------------------------------
   Fortschrittsanzeige (Wizard)
   ------------------------------------------------------- */
.ginko-progress {position:relative;}

.ginko-progress-steps {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    position:        relative;
}

.ginko-progress-steps::before {
    content:    '';
    position:   absolute;
    top:        50%;
    left:       0;
    right:      0;
    height:     2px;
    background: #e0e0e0;
    z-index:    0;
    transform:  translateY(-50%);
}

.ginko-step-bubble {
    width:            2.1rem;
    height:           2.1rem;
    border-radius:    50%;
    background:       #e0e0e0;
    color:            #666;
    font-size:        .85rem;
    font-weight:      700;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    position:         relative;
    z-index:          1;
    transition:       background .25s, color .25s, transform .2s;
    flex-shrink:      0;
}

.ginko-step-bubble.active {
    background: #4361ee;
    color:      #fff;
    transform:  scale(1.15);
    box-shadow: 0 0 0 .2rem rgba(67,97,238,.25);
}

.ginko-step-bubble.completed {
    background: #2dc653;
    color:      #fff;
}

.ginko-progress-track {
    height: 1px !important;
    border-radius: 3px;
    background: #e9ecef;
    position: absolute;
    width: 100%;
    top: 50%;
}

.ginko-progress-fill {
    background:    linear-gradient(90deg, #4361ee, #7b5ea7);
    border-radius: 3px;
    transition:    width .35s ease;
}

/* -------------------------------------------------------
   Wizard-Schritte
   ------------------------------------------------------- */
.ginko-step { animation: ginkoFadeIn .3s ease both; }

.ginko-step-nav {
    border-top:  1px solid #f0f0f0;
    padding-top: 1.25rem;
    margin-top:  .5rem;
}

/* -------------------------------------------------------
   Feldgruppen (Radio / Checkbox)
   ------------------------------------------------------- */
.ginko-field-group {
    border:        none;
    padding:       0;
    margin:        0;
}

.ginko-field-group legend.form-label {
    float: none;
    width: auto;
    font-size:1rem;
    font-weight:bold;
}

/* -------------------------------------------------------
   Globale Fehlermeldung
   ------------------------------------------------------- */
.ginko-global-error { animation: ginkoFadeIn .25s ease both; }

/* -------------------------------------------------------
   Erfolgsmeldung
   ------------------------------------------------------- */
.ginko-success-box {
    animation: ginkoFadeIn .4s ease both;
}

.ginko-success-box .bi-check-circle-fill {
    animation:   ginkoCheckmark .55s cubic-bezier(.175,.885,.32,1.275) both;
    display:     block;
    line-height: 1;
}

.ginko-form-container input[type="number"], .ginko-form-container input[type="date"] {
    max-width: 140px;
}

/* make the calendar popup dark */
.ginko-form-container input[type="date"] {
    color-scheme: dark; 
}

.ginko-form-container input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

.ginko-form-container .ginko-range-output {
    text-align:center;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.ginko-form-container .ginko-range-untouched::-webkit-slider-thumb {
    background-color: #adb5bd; /* grey thumb */
}

.ginko-form-container .ginko-range-untouched::-moz-range-thumb {
    background-color: #adb5bd;
}
/* -------------------------------------------------------
   Textarea height on floating labels
   ------------------------------------------------------- */
.form-floating > textarea[rows="2"] {
    height: 78px;
}
.form-floating > textarea[rows="3"]  { height: 98px; }
.form-floating > textarea[rows="4"]  { height: 118px; }
.form-floating > textarea[rows="5"]  { height: 138px; }
.form-floating > textarea[rows="6"]  { height: 158px; }
.form-floating > textarea[rows="7"]  { height: 178px; }
.form-floating > textarea[rows="8"]  { height: 198px; }
.form-floating > textarea[rows="9"]  { height: 218px; }
.form-floating > textarea[rows="10"] { height: 240px; }
.form-floating > textarea[rows="11"] { height: 260px; }
.form-floating > textarea[rows="12"] { height: 278px; }
.form-floating > textarea[rows="13"] { height: 300px; }
.form-floating > textarea[rows="14"] { height: 318px; }
.form-floating > textarea[rows="15"] { height: 340px; }


.ginko-form-container .explanation {
    font-size: .875em;
    color: var(--bs-secondary-color);
    margin-top: -0.5rem;
    margin-bottom: 1rem;
}

    .ginko-form-container .explanation.explanation-bottom {
        margin-top: 0.5rem;
    }

div.explanation:not(legend + .explanation):not(label + .explanation) {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

/* -------------------------------------------------------
   Responsive Anpassungen
   ------------------------------------------------------- */
@media (max-width: 575.98px) {
    .ginko-form-container {
        padding: 1.25rem;
    }

    .ginko-otp-digit {
        width: 2.6rem !important;
        height: 3rem;
        font-size: 1.3rem;
    }
    /* .ginko-title          { font-size: 1.3rem; }*/
}