/* Shared form control styles (used by multiple pages via FormAsset) */

.form-control {
    display: block;
    width: 100%;
    height: 64px;
    padding: 8px 24px;
    font-size: 20px;
    line-height: 1.4;
    background-clip: padding-box;
    border-radius: 32px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    color: black;
    background-color: rgba(255, 255, 255, 1.0);
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.form-control:focus {
    outline: 0;
    color: black;
    background-color: rgba(255, 255, 255, 1.0);
    border-color: rgba(0, 0, 0, 0.25);
}

.form-control::placeholder {
    color: #6c757d;
}

/* ------------------------------------------------------------------ */
/* Shared validation colors (used by Profile + payment pages)          */
/* ------------------------------------------------------------------ */

/* Error message under field (Yii default). */
p.help-block.help-block-error,
.help-block.help-block-error {
    font-size: 18px;
    font-family: "Inter-Tight", sans-serif;
    font-weight: 500;
    line-height: 1.4;
 
    /* Fallback + Bootstrap 5 variable-based color. */
    color: #dc3545;
    --bs-text-opacity: 1;
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity));
}

/* Yii2 default error markup often uses `.help-block` within `.has-error` container. */
.has-error .help-block,
.form-group.has-error .help-block,
.field-has-error .help-block,
.field-has-error .invalid-feedback {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity));
}

/* Bootstrap-like helpers. */
.text-danger {
    /* Fallback + Bootstrap 5 variable-based color. */
    color: #dc3545 !important;
    --bs-text-opacity: 1;
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
}

/* Match Bootstrap 5 "text-success" semantics (uses --bs-success-rgb). */
.text-success {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
}

/* ------------------------------------------------------------------ */
/* Smooth appearance for validation + status messages                  */
/* ------------------------------------------------------------------ */
/* IMPORTANT:
   - In Yii2 ActiveForm, error container often exists all the time and may contain whitespace,
     so `:empty` is unreliable.
   - Instead we animate when Yii toggles error classes on the field wrapper. */
.has-error .help-block,
.form-group.has-error .help-block,
.field-has-error .help-block,
.field-has-error .invalid-feedback,
.form-group .text-danger,
.form-group .text-success {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    transition: max-height 180ms ease-out, opacity 180ms ease-out, margin 180ms ease-out;
}

.has-error .help-block,
.form-group.has-error .help-block,
.field-has-error .help-block,
.field-has-error .invalid-feedback {
    max-height: 320px; /* enough for multi-line messages */
    opacity: 1;
    margin-top: 8px;
    margin-bottom: 16px;
}

.form-group .text-danger:not(:empty),
.form-group .text-success:not(:empty) {
    max-height: 320px;
    opacity: 1;
    margin-top: 8px;
    margin-bottom: 16px;
    animation: form-msg-reveal 180ms ease-out;
}

@keyframes form-msg-reveal {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 320px;
        opacity: 1;
    }
}

/* Promo code message wrapper (used on product purchase UI). */
.promo-code-msg {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    transition: max-height 180ms ease-out, opacity 180ms ease-out, margin 180ms ease-out;
}

.promo-code-msg:not(:empty) {
    max-height: 320px;
    opacity: 1;
    margin-top: 8px;
    margin-bottom: 16px;
    animation: form-msg-reveal 180ms ease-out;
}