/**
 * Registration Fields CSS
 *
 * Estilos para campos de registro customizados.
 * Compativel com templates de login (split, centered, minimal, integrated).
 *
 * @package TUH_Account
 * @since 3.0.0
 */

/* ===========================================
   FIELD GROUP
   =========================================== */
.tuh-field-group {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--tuh-card-border, #e4e4e7);
}

.tuh-field-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.tuh-field-group-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tuh-text-muted, #a1a1aa);
    margin: 0 0 12px 0;
}

/* Header de grupo dentro do grid - ocupa as 2 colunas */
.tuh-field-group-header {
    grid-column: span 2;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--tuh-card-border, #e4e4e7);
}

.tuh-field-group-header:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.tuh-field-group-header .tuh-field-group-title {
    margin-bottom: 8px;
}

@media (max-width: 600px) {
    .tuh-field-group-header {
        grid-column: span 1;
    }
}

/* ===========================================
   FIELDS ROW (Grid)
   =========================================== */
.tuh-fields-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.tuh-fields-row--referral {
    margin-top: 12px;
}

@media (max-width: 600px) {
    .tuh-fields-row {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   INDIVIDUAL FIELD
   =========================================== */
.tuh-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tuh-form-field.tuh-field-full {
    grid-column: span 2;
}

@media (max-width: 600px) {
    .tuh-form-field.tuh-field-full {
        grid-column: span 1;
    }
}

.tuh-form-field.tuh-field-half {
    grid-column: span 1;
}

/* ===========================================
   LABELS
   =========================================== */
.tuh-form-field .tuh-form-label {
    font-size: 0.8rem !important;
    font-weight: 600;
    color: var(--tuh-text-primary, #18181b) !important;
}

.tuh-form-field .tuh-form-label .required {
    color: var(--tuh-danger, #ef4444);
}

/* ===========================================
   INPUT WRAPPER WITH ICON
   =========================================== */
.form-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.form-input-wrapper .tuh-form-input {
    width: 100%;
}

/* Force padding-left for inputs with icons - high specificity to override templates */
.tuh-form-field .form-input-wrapper .tuh-form-input,
.tuh-fields-row .form-input-wrapper .tuh-form-input,
.tuh-minimal-form .form-input-wrapper .tuh-form-input,
.tuh-centered-card .form-input-wrapper .tuh-form-input,
.tuh-integrated-card .form-input-wrapper .tuh-form-input,
.tuh-integrated-container .form-input-wrapper .tuh-form-input,
.auth-form-wrapper .form-input-wrapper .tuh-form-input,
.tuh-auth-form .form-input-wrapper .tuh-form-input,
.woocommerce-form-register .form-input-wrapper .tuh-form-input {
    padding-left: 40px !important;
}

.form-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--tuh-text-muted, #a1a1aa);
    pointer-events: none;
    flex-shrink: 0;
}

.form-input-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--tuh-text-muted, #a1a1aa);
    transition: color 0.2s;
}

.form-input-toggle:hover {
    color: var(--tuh-text-secondary, #52525b);
}

.form-input-toggle svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* When input has password toggle */
.form-input-wrapper .tuh-form-input[type="password"],
.form-input-wrapper .tuh-form-input[type="text"]:has(+ .form-input-toggle) {
    padding-right: 44px;
}

/* Fallback for browsers that don't support :has() -
   targets all inputs in wrappers that contain a toggle button.
   The .has-toggle class should be added via JS or server-side
   when the toggle is present. As a safe default, password inputs
   in form-input-wrapper always get the extra padding. */
.form-input-wrapper .tuh-form-input[type="password"] {
    padding-right: 44px;
}

/* Enhanced fallback: JS can add .has-toggle to the wrapper */
.form-input-wrapper.has-toggle .tuh-form-input {
    padding-right: 44px;
}

/* ===========================================
   INPUTS
   =========================================== */
.tuh-form-field .tuh-form-input,
.tuh-form-field .tuh-form-select,
.tuh-form-field .tuh-form-textarea {
    width: 100% !important;
    padding: 10px 12px !important;
    background: var(--tuh-background-alt, var(--tuh-input-bg, #ffffff)) !important;
    border: 1px solid var(--tuh-card-border, var(--tuh-input-border, #e4e4e7)) !important;
    border-radius: 8px !important;
    color: var(--tuh-text-primary, #18181b) !important;
    font-size: 0.875rem !important;
    font-family: inherit;
    transition: all 0.2s;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
}

.tuh-form-field .tuh-form-input:focus,
.tuh-form-field .tuh-form-select:focus,
.tuh-form-field .tuh-form-textarea:focus {
    outline: none;
    border-color: var(--tuh-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.tuh-form-field .tuh-form-input::placeholder {
    color: var(--tuh-text-muted, #a1a1aa);
}

/* Auto-filled fields (via CEP) */
.tuh-form-field .tuh-form-input.tuh-auto-filled,
.tuh-form-field .tuh-form-select.tuh-auto-filled {
    background: var(--tuh-background-alt, #f4f4f5);
}

.tuh-form-field .tuh-form-input.tuh-auto-filled:not(:focus),
.tuh-form-field .tuh-form-select.tuh-auto-filled:not(:focus) {
    border-color: transparent;
}

/* Loading state */
.tuh-form-field .tuh-form-input.tuh-loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2'%3E%3Cpath d='M12 2v4m0 12v4m-7.07-3.93l2.83-2.83m8.48-8.48l2.83-2.83M2 12h4m12 0h4m-3.93 7.07l-2.83-2.83M6.34 6.34L3.51 3.51'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    animation: tuh-spin 1s linear infinite;
}

@keyframes tuh-spin {
    from {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' style='transform: rotate(0deg)'%3E%3Ccircle cx='12' cy='12' r='10' stroke-opacity='0.25'/%3E%3Cpath d='M12 2a10 10 0 0 1 10 10'/%3E%3C/svg%3E");
    }
}

/* ===========================================
   SELECT
   =========================================== */
.tuh-form-field .tuh-form-select {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 40px;
}

/* ===========================================
   CHECKBOX
   =========================================== */
.tuh-form-field .tuh-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    line-height: 1.5;
}

/* Terms checkbox - always full width, own row */
.tuh-form-field.tuh-field-terms {
    grid-column: span 2;
    margin-top: 8px;
}

@media (max-width: 600px) {
    .tuh-form-field.tuh-field-terms {
        grid-column: span 1;
    }
}

/* Separate terms field wrapper */
.tuh-terms-field {
    grid-column: span 2;
    margin-top: 16px;
    margin-bottom: 8px;
}

@media (max-width: 600px) {
    .tuh-terms-field {
        grid-column: span 1;
    }
}

.tuh-form-field .tuh-form-checkbox {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--tuh-primary, #6366f1);
    cursor: pointer;
    flex-shrink: 0;
}

.tuh-form-field .tuh-checkbox-mark {
    display: none;
}

.tuh-form-field .tuh-checkbox-text {
    font-size: 0.8rem;
    color: var(--tuh-text-secondary, #52525b);
}

.tuh-form-field .tuh-checkbox-text a {
    color: var(--tuh-primary, #6366f1);
    text-decoration: none;
}

.tuh-form-field .tuh-checkbox-text a:hover {
    text-decoration: underline;
}

/* ===========================================
   DATE INPUT
   =========================================== */
.tuh-form-field .tuh-form-date {
    cursor: pointer;
    /* Force light color scheme for date inputs */
    color-scheme: light;
    background: var(--tuh-background-alt, var(--tuh-input-bg, #ffffff));
    color: var(--tuh-text-primary, #18181b);
}

/* Dark mode override */
.tuh-dark .tuh-form-field .tuh-form-date,
.tuh-login-split .tuh-form-field .tuh-form-date,
[data-theme="dark"] .tuh-form-field .tuh-form-date {
    color-scheme: dark;
    background: var(--tuh-background-alt, #1a1a1a);
    color: var(--tuh-text-primary, #ffffff);
}

.tuh-form-field .tuh-form-date::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    filter: var(--date-picker-filter, none);
}

.tuh-form-field .tuh-form-date::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Fix date input appearance in light themes */
.tuh-light .tuh-form-field .tuh-form-date,
.tuh-login-minimal.tuh-light .tuh-form-field .tuh-form-date,
.tuh-login-centered.tuh-light .tuh-form-field .tuh-form-date,
.tuh-integrated-wrapper .tuh-form-field .tuh-form-date {
    color-scheme: light;
    background: var(--tuh-background-alt, var(--tuh-input-bg, #ffffff));
    color: var(--tuh-text-primary, #18181b);
}

/* ===========================================
   VALIDATION STATES
   =========================================== */
.tuh-form-field.tuh-field-error .tuh-form-input,
.tuh-form-field.tuh-field-error .tuh-form-select {
    border-color: var(--tuh-danger, #ef4444);
}

.tuh-form-field.tuh-field-error .tuh-form-input:focus,
.tuh-form-field.tuh-field-error .tuh-form-select:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.tuh-form-field .tuh-field-error-message {
    font-size: 0.8rem;
    color: var(--tuh-danger, #ef4444);
    margin-top: 4px;
}

.tuh-form-field.tuh-field-success .tuh-form-input {
    border-color: var(--tuh-success, #10b981);
}

/* ===========================================
   HELPER TEXT
   =========================================== */
.tuh-form-field .tuh-field-hint {
    font-size: 0.75rem;
    color: var(--tuh-text-muted, #a1a1aa);
    margin-top: 4px;
}

/* ===========================================
   PASSWORD STRENGTH
   =========================================== */

/* Grid row alignment - alinhar itens ao topo para evitar deslocamento */
.tuh-fields-row {
    align-items: start;
}

/* Campo de senha com medidor de força - reservar espaço fixo */
.tuh-form-field.tuh-field-password,
.tuh-form-field[class*="password"]:not(.tuh-field-password_confirm) {
    /* Altura minima para conter o medidor de força */
    min-height: 105px;
}

/* Para campos de senha lado a lado (half width), mesma altura */
.tuh-form-field.tuh-field-half.tuh-field-password,
.tuh-form-field.tuh-field-half[class*="password"] {
    min-height: 105px;
}

/* Medidor após o wrapper - posicionar sem afetar layout */
.form-input-wrapper + .tuh-password-strength,
.tuh-form-field .tuh-password-strength {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}

.tuh-password-strength {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}

.tuh-password-strength-bar {
    flex: 1;
    height: 4px;
    background: var(--tuh-card-border, #e4e4e7);
    border-radius: 2px;
    transition: background 0.3s;
}

.tuh-password-strength.tuh-strength-weak .tuh-password-strength-bar:nth-child(1) {
    background: var(--tuh-danger, #ef4444);
}

.tuh-password-strength.tuh-strength-medium .tuh-password-strength-bar:nth-child(1),
.tuh-password-strength.tuh-strength-medium .tuh-password-strength-bar:nth-child(2) {
    background: var(--tuh-warning, #f59e0b);
}

.tuh-password-strength.tuh-strength-strong .tuh-password-strength-bar:nth-child(1),
.tuh-password-strength.tuh-strength-strong .tuh-password-strength-bar:nth-child(2),
.tuh-password-strength.tuh-strength-strong .tuh-password-strength-bar:nth-child(3) {
    background: var(--tuh-success, #10b981);
}

.tuh-password-strength.tuh-strength-very-strong .tuh-password-strength-bar {
    background: var(--tuh-success, #10b981);
}

.tuh-password-strength-text {
    font-size: 0.75rem;
    margin-top: 4px;
    color: var(--tuh-text-muted, #a1a1aa);
}

/* ===========================================
   DISPLAY MODES - Password Requirements
   Modos de exibição configuráveis pelo admin
   =========================================== */

/* Classe para ocultar (show-on-focus) */
.tuh-password-requirements.tuh-password-hidden {
    display: none;
}

/* Modo bar_only - Apenas barra de força, sem lista de requisitos */
.tuh-password-requirements.tuh-password-display-bar_only {
    margin-top: 8px;
    padding: 8px 12px;
}

.tuh-password-requirements.tuh-password-display-bar_only .tuh-req-title,
.tuh-password-requirements.tuh-password-display-bar_only .tuh-req-list {
    display: none;
}

.tuh-password-requirements.tuh-password-display-bar_only .tuh-password-strength-wrap {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Full width - fora do grid para ocupar largura total */
.tuh-fields-row + .tuh-password-requirements,
.woocommerce-form-register .tuh-password-requirements {
    grid-column: span 2;
    margin-top: 16px;
    width: 100%;
}

@media (max-width: 600px) {
    .tuh-fields-row + .tuh-password-requirements,
    .woocommerce-form-register .tuh-password-requirements {
        grid-column: span 1;
    }
}