/**
 * Paulto Register Form - Advanced Styles (Optimized)
 * Refactored for Modern UI, Grid Layout & Dark Mode support
 */

/* ========================================
   1. UTILITY: GRID SYSTEM (QUAN TRỌNG NHẤT)
   Dùng để chia cột First Name / Last Name
   ======================================== */

.prfc-row-grid {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Khoảng cách dọc trên mobile */
    width: 100%;
    margin-bottom: 0;
}

/* Trên màn hình lớn hơn 600px, chia thành 2 cột */
@media (min-width: 600px) {
    .prfc-row-grid {
        flex-direction: row; /* Xếp ngang */
        align-items: flex-start;
    }
    
    .prfc-row-grid .form-group {
        flex: 1; /* Chia đều không gian 50-50 */
        width: 100%;
        margin-bottom: 0; /* Loại bỏ margin thừa */
    }
    
    /* Điều chỉnh vị trí icon khi chia cột để đẹp hơn */
    .prfc-row-grid .prfc-field-icon {
        left: 12px;
    }
    
    .prfc-row-grid input {
        padding-left: 36px !important; /* Thu gọn padding trái */
    }
}

/* ========================================
   2. DARK MODE SUPPORT (Giao diện tối)
   Tự động kích hoạt khi thêm class .prfc-dark-mode
   ======================================== */

.prfc-dark-mode .wpee-lr-content-tab.lr-register {
    background: #1F2937; /* Nền xám đậm */
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
    border: 1px solid #374151;
}

.prfc-dark-mode .form-group label {
    color: #E5E7EB; /* Chữ trắng mờ */
}

/* Input trong chế độ Dark Mode */
.prfc-dark-mode .form-group input,
.prfc-dark-mode .form-group select {
    background-color: #374151;
    border-color: transparent;
    color: #F9FAFB;
}

.prfc-dark-mode .form-group input::placeholder {
    color: #9CA3AF;
}

.prfc-dark-mode .form-group input:focus,
.prfc-dark-mode .form-group select:focus {
    background-color: #4B5563;
    border-color: #6366F1; /* Viền tím khi focus */
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.prfc-dark-mode .prfc-field-icon {
    color: #9CA3AF;
}

.prfc-dark-mode .form-group.focused .prfc-field-icon {
    color: #818CF8;
}

/* Password Criteria trong Dark Mode */
.prfc-dark-mode .password-criteria {
    background: #111827;
    border-color: #374151;
}

.prfc-dark-mode .password-criteria p {
    color: #93C5FD;
}

.prfc-dark-mode .password-criteria label {
    color: #D1D5DB;
}

/* ========================================
   3. ANIMATIONS (Hiệu ứng mượt mà)
   ======================================== */

.prfc-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

.prfc-slide-up {
    animation: slideUp 0.4s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   4. GLASSMORPHISM STYLE (Tùy chọn nâng cao)
   Hiệu ứng kính mờ thời thượng
   ======================================== */

.prfc-style-glass .wpee-lr-content-tab.lr-register {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

.prfc-style-glass .form-group input,
.prfc-style-glass .form-group select {
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.prfc-style-glass .form-group input:focus {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* ========================================
   5. CHECKBOX & RADIO (Custom đẹp hơn mặc định)
   ======================================== */

.prfc-custom-radio input[type="radio"],
.prfc-custom-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #D1D5DB;
    border-radius: 4px;
    margin-right: 8px;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    transition: all 0.2s;
}

.prfc-custom-radio input[type="radio"] {
    border-radius: 50%;
}

.prfc-custom-checkbox input[type="checkbox"]:checked,
.prfc-custom-radio input[type="radio"]:checked {
    border-color: #4F46E5;
    background-color: #4F46E5;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3e%3c/svg%3e");
}