/**
 * SEPA.id Form Components
 * Standardized form styling extracted from index.html
 *
 * @version 2.0.0
 * @author INSTANTpay
 */

/* ========================================
   Form Container (Card)
   ======================================== */

.form-card {
    background: rgb(var(--color-background));
    border: 1px solid rgba(var(--color-border), 0.8);
    border-radius: var(--radius);
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.form-card-compact {
    padding: 1.5rem;
}

/* ========================================
   Form Structure
   ======================================== */

.form-group {
    margin-bottom: 1.5rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

.section-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: rgb(var(--color-foreground));
}

/* ========================================
   Labels
   ======================================== */

label,
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: rgb(var(--color-foreground));
}

.label-optional {
    color: rgb(var(--color-foreground-subtle));
    font-weight: 400;
}

.label-required {
    color: rgb(var(--color-destructive));
}

/* ========================================
   Text Inputs
   ======================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid rgba(var(--color-border), 0.8);
    border-radius: calc(var(--radius) - 2px);
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
.form-input:focus {
    outline: none;
    border-color: rgb(var(--color-primary));
    box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.2);
}

input.error,
.form-input.error {
    border-color: rgb(var(--color-destructive));
}

input.success,
.form-input.success {
    border-color: rgb(var(--color-success));
}

input:disabled,
.form-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   Select Dropdown
   ======================================== */

select,
.form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid rgba(var(--color-border), 0.8);
    border-radius: calc(var(--radius) - 2px);
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

select:focus,
.form-select:focus {
    outline: none;
    border-color: rgb(var(--color-primary));
    box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.2);
}

/* ========================================
   Textarea
   ======================================== */

textarea,
.form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid rgba(var(--color-border), 0.8);
    border-radius: calc(var(--radius) - 2px);
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    transition: border-color 0.2s, box-shadow 0.2s;
    resize: vertical;
    min-height: 100px;
}

textarea:focus,
.form-textarea:focus {
    outline: none;
    border-color: rgb(var(--color-primary));
    box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.2);
}

/* ========================================
   Checkbox & Radio
   ======================================== */

.form-checkbox,
.form-radio {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.form-checkbox input[type="checkbox"],
.form-radio input[type="radio"] {
    width: 1.125rem;
    height: 1.125rem;
    cursor: pointer;
}

.form-checkbox label,
.form-radio label {
    margin-bottom: 0;
    cursor: pointer;
}

/* ========================================
   Toggle Switch
   ======================================== */

.form-switch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
}

.form-switch:last-child {
    border-bottom: none;
}

.switch-label {
    font-size: 0.875rem;
    color: var(--color-foreground);
}

.switch {
    position: relative;
    width: 48px;
    height: 28px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--color-input);
    border-radius: 28px;
    transition: 0.3s;
}

.slider:before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}

input:checked + .slider {
    background: var(--color-primary);
}

input:checked + .slider:before {
    transform: translateX(20px);
}

input:disabled + .slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   Input Hints & Errors
   ======================================== */

.input-hint {
    font-size: 0.875rem;
    color: rgb(var(--color-foreground));
    margin-top: 0.5rem;
}

.input-error {
    font-size: 0.875rem;
    color: rgb(var(--color-destructive));
    margin-top: 0.5rem;
    display: none;
}

.input-error.show {
    display: block;
}

/* ========================================
   Buttons
   ======================================== */

.btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: calc(var(--radius) - 2px);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    min-height: 44px;
}

.btn-primary {
    background: rgb(var(--color-primary));
    color: rgb(var(--color-secondary-light));
}

.btn-primary:hover {
    background: rgb(var(--color-primary-dark));
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary {
    background: rgb(var(--color-secondary));
    color: rgb(var(--color-foreground));
}

.btn-secondary:hover {
    background: rgb(var(--color-secondary-dark));
}

.btn-danger {
    background: transparent;
    border: 1px solid rgb(var(--color-destructive));
    color: rgb(var(--color-destructive));
}

.btn-danger:hover {
    background: rgba(var(--color-destructive), 0.1);
}

.btn-full {
    width: 100%;
}

/* ========================================
   Input Groups
   ======================================== */

.input-group {
    display: flex;
    gap: 0.5rem;
}

.input-group > * {
    flex: 1;
}

.input-group-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.input-group-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

/* ========================================
   Form Actions
   ======================================== */

.form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.form-actions .btn {
    flex: 1;
}

.form-actions-right {
    justify-content: flex-end;
}

.form-actions-center {
    justify-content: center;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 768px) {
    .form-card {
        padding: 1.5rem;
    }

    .input-group-2,
    .input-group-3 {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
    }
}

/* ========================================
   Loading States
   ======================================== */

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgb(var(--color-secondary-light));
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.btn .loading-spinner {
    margin-right: 0.5rem;
}

/* ========================================
   Floating Label Inputs
   ======================================== */

.form-floating {
    position: relative;
}

.form-floating > input,
.form-floating > select,
.form-floating > textarea {
    padding: 1.25rem 1rem 0.5rem;
}

.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1rem;
    pointer-events: none;
    transform-origin: 0 0;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
    color: rgb(var(--color-foreground-subtle));
    font-weight: 400;
}

/* Float label when input has value or is focused */
.form-floating > input:focus ~ label,
.form-floating > input:not(:placeholder-shown) ~ label,
.form-floating > select:focus ~ label,
.form-floating > select:not([value=""]):valid ~ label,
.form-floating > textarea:focus ~ label,
.form-floating > textarea:not(:placeholder-shown) ~ label {
    opacity: 0.7;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* Ensure placeholder is transparent until focus */
.form-floating > input::placeholder,
.form-floating > textarea::placeholder {
    color: transparent;
}

.form-floating > input:focus::placeholder,
.form-floating > textarea:focus::placeholder {
    color: var(--color-foreground);
}

/* ========================================
   Character Counter
   ======================================== */

.form-group-with-counter {
    position: relative;
}

.char-counter {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    font-size: 0.75rem;
    color: rgb(var(--color-foreground-subtle));
    pointer-events: none;
    font-weight: 500;
}

.char-counter.warning {
    color: rgb(var(--color-warning));
}

.char-counter.error {
    color: rgb(var(--color-destructive));
}

/* ========================================
   Input with Icon
   ======================================== */

.input-with-icon {
    position: relative;
}

.input-with-icon > input {
    padding-left: 2.75rem;
}

.input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgb(var(--color-foreground-subtle));
    pointer-events: none;
    font-size: 1.125rem;
}

.input-icon-right {
    left: auto;
    right: 1rem;
}

.input-with-icon-right > input {
    padding-left: 1rem;
    padding-right: 2.75rem;
}

/* ========================================
   IBAN Input Component
   ======================================== */

.iban-input-group {
    position: relative;
}

.iban-input {
    font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
    letter-spacing: 0.5px;
    padding-right: 3rem;
}

.iban-flag {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    pointer-events: none;
}

.iban-copy-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: rgb(var(--color-secondary));
    color: rgb(var(--color-foreground));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 0.875rem;
}

.iban-copy-btn:hover {
    background: rgb(var(--color-input));
}

.iban-copy-btn.copied {
    background: rgb(var(--color-success));
    color: rgb(var(--color-secondary-light));
}

.iban-bank-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-secondary);
    border-radius: calc(var(--radius) - 2px);
    font-size: 0.875rem;
}

.iban-bank-logo {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: contain;
}

.iban-bank-name {
    font-weight: 500;
    color: var(--color-foreground);
}

.iban-country-name {
    color: var(--color-muted-foreground);
}

/* ========================================
   Inline Validation
   ======================================== */

.form-group.validating input {
    border-color: #f59e0b;
}

.form-group.validating::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    border: 2px solid #f59e0b;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.validation-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.125rem;
    pointer-events: none;
}

.validation-icon.success {
    color: rgb(var(--color-success));
}

.validation-icon.error {
    color: rgb(var(--color-destructive));
}

/* ========================================
   Password Strength Indicator
   ======================================== */

.password-strength {
    margin-top: 0.5rem;
    height: 4px;
    background: rgb(var(--color-secondary));
    border-radius: 2px;
    overflow: hidden;
}

.password-strength-bar {
    height: 100%;
    transition: width 0.3s, background-color 0.3s;
    width: 0;
}

.password-strength-bar.weak {
    width: 33%;
    background: rgb(var(--color-warning));
}

.password-strength-bar.medium {
    width: 66%;
    background: rgb(var(--color-warning-light));
}

.password-strength-bar.strong {
    width: 100%;
    background: rgb(var(--color-success));
}

.password-strength-text {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    color: rgb(var(--color-foreground-subtle));
}

/* ========================================
   Form Validation States
   ======================================== */

/* Input validation states with enhanced feedback */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
    border-color: rgb(var(--color-destructive));
    box-shadow: 0 0 0 3px rgba(var(--color-destructive), 0.2);
}

.form-group.has-error .input-error {
    display: block;
}

.form-group.has-success input,
.form-group.has-success select,
.form-group.has-success textarea {
    border-color: rgb(var(--color-success));
    box-shadow: 0 0 0 3px rgba(var(--color-success), 0.2);
}

/* Validation state with icons */
.form-group.validating input,
.form-group.validating select,
.form-group.validating textarea {
    border-color: rgb(var(--color-warning));
    box-shadow: 0 0 0 3px rgba(var(--color-warning), 0.2);
}

.validation-state {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.125rem;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.validation-state-icon {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}

.validation-state-icon.loading {
    animation: spin 1s linear infinite;
}

.validation-state-icon.success {
    background: rgba(var(--color-success), 0.1);
    color: rgb(var(--color-success));
}

.validation-state-icon.error {
    background: rgba(var(--color-destructive), 0.1);
    color: rgb(var(--color-destructive));
}

.validation-state-icon.warning {
    background: rgba(var(--color-warning), 0.1);
    color: rgb(var(--color-warning));
}

/* Real-time validation feedback */
.realtime-validation {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    padding: 0.25rem 0 0 0;
}

.realtime-validation.success {
    color: rgb(var(--color-success));
}

.realtime-validation.error {
    color: rgb(var(--color-destructive));
}

.realtime-validation.warning {
    color: rgb(var(--color-warning));
}

/* Advanced validation styling for floating labels */
.form-floating .validation-state {
    right: calc(1rem + 24px); /* Account for icon width */
}