/* ═══════════════════════════════════════════════════════════
   LIQUID GLASS AUTH — Apple iOS 26 Liquid Glass Style
   Khúc xạ ánh sáng + Trong suốt + Chiều sâu kính thật
   ═══════════════════════════════════════════════════════════ */

/* ── Page Background ── */
body:has(.profile-part) {
    background: #0e1525 !important;
}
body.auth-page {
    background: #0e1525 !important;
}

/* ── SVG Filter for Glass Refraction ── */
/* Injected via CSS - tạo hiệu ứng khúc xạ qua feTurbulence */

/* ── Section Background — rực rỡ để thấy glass ── */
.profile-part {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 40px 0;
    position: relative;
    overflow: hidden;
    background: #0e1525;
}

/* ── Mesh gradient background — nội dung phía sau glass ── */
.profile-part > .container {
    position: relative;
    z-index: 2;
}

/* Blob 1 — Xanh dương lớn */
.profile-part::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.35) 0%, rgba(59, 130, 246, 0.15) 40%, transparent 70%);
    top: -20%; left: -15%;
    animation: _meshBlob1 20s ease-in-out infinite;
    z-index: 0;
}

/* Blob 2 — Tím */
.profile-part::after {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.30) 0%, rgba(139, 92, 246, 0.10) 40%, transparent 70%);
    bottom: -15%; right: -10%;
    animation: _meshBlob2 24s ease-in-out infinite;
    z-index: 0;
}

/* ═══════════════════════════════════════
   ★ GLASS CARD — Thủy tinh Apple
   ═══════════════════════════════════════ */
.app-store-card {
    position: relative;
    border-radius: 24px;
    padding: 40px 32px;
    animation: _glassIn 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: visible;

    /*
     * ★ KHÚC XẠ — backdrop-filter tạo hiệu ứng méo nền
     * blur cao = giống kính mờ dày
     * saturate cao = màu sắc tươi hơn qua kính
     * brightness > 1 = kính sáng hơn nền
     */
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(50px) saturate(1.8) brightness(1.15) contrast(1.05);
    -webkit-backdrop-filter: blur(50px) saturate(1.8) brightness(1.15) contrast(1.05);

    /*
     * ★ VIỀN KÍNH — mô phỏng cạnh kính phản xạ ánh sáng
     * border sáng hơn ở cạnh trên (ánh sáng chiếu từ trên)
     */
    border: 1.5px solid rgba(255, 255, 255, 0.22);

    /*
     * ★ CHIỀU SÂU — tạo cảm giác tấm kính nổi
     * Shadow ngoài: kính nổi lên khỏi nền
     * Shadow trong trên: viền sáng phản xạ (caustic)
     * Shadow trong dưới: bóng chiều sâu kính
     */
    box-shadow:
        /* Bóng nổi */
        0 25px 70px -10px rgba(0, 0, 0, 0.5),
        0 10px 30px -5px rgba(0, 0, 0, 0.3),
        /* ★ Caustic — phản xạ sáng cạnh trên kính */
        inset 0 1.5px 0 rgba(255, 255, 255, 0.25),
        inset 1px 0 0 rgba(255, 255, 255, 0.08),
        inset -1px 0 0 rgba(255, 255, 255, 0.08),
        /* Bóng trong dưới — chiều dày kính */
        inset 0 -1.5px 3px rgba(0, 0, 0, 0.12);
}

/*
 * ★ HIGHLIGHT — Phản xạ ánh sáng trên nửa trên tấm kính
 * Giống ánh sáng phòng chiếu xuống mặt kính
 */
.app-store-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 55%;
    border-radius: 24px 24px 50% 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.01) 50%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}

/*
 * ★ SHIMMER — Ánh sáng refraction lướt qua kính
 * Giống khi nghiêng kính thấy cầu vồng
 */
.app-store-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 24px;
    background: linear-gradient(
        125deg,
        transparent 0%,
        transparent 35%,
        rgba(255, 255, 255, 0.04) 40%,
        rgba(120, 200, 255, 0.06) 45%,
        rgba(200, 150, 255, 0.06) 50%,
        rgba(255, 180, 220, 0.04) 55%,
        rgba(255, 255, 255, 0.03) 60%,
        transparent 65%,
        transparent 100%
    );
    animation: _glassRefraction 10s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.app-store-card > * {
    position: relative;
    z-index: 1;
}

/* ═══════════════════════════════════════
   GLASS INPUT FIELDS
   ═══════════════════════════════════════ */
.app-form-group {
    position: relative;
    margin-bottom: 14px;
}

.app-input {
    width: 100%;
    height: 52px;
    font-size: 15px;
    color: #fff;
    padding: 0 18px 0 44px;
    -webkit-appearance: none;
    transition: all 0.3s ease;

    /* Glass input — trong suốt nhẹ, viền kính */
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -0.5px 1px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.08);
}
.app-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}
.app-input:focus {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(120, 180, 255, 0.50);
    box-shadow:
        0 0 0 3px rgba(120, 180, 255, 0.12),
        0 0 24px rgba(120, 180, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    outline: none;
}

/* Icon — chính xác với display:flex */
.app-input-icon {
    position: absolute;
    left: 15px;
    top: 0;
    width: 20px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
    z-index: 2;
    pointer-events: none;
    transition: color 0.3s ease;
}
.app-form-group:focus-within .app-input-icon,
.app-input:focus ~ .app-input-icon {
    color: #78b4ff;
}

/* ═══════════════════════════════════════
   GLASS BUTTON
   ═══════════════════════════════════════ */
.app-btn {
    width: 100%;
    height: 52px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    border-radius: 14px;
    margin-top: 8px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;

    /* Glass button */
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.65) 0%, rgba(99, 102, 241, 0.55) 50%, rgba(139, 92, 246, 0.65) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.20);
    box-shadow:
        0 8px 24px rgba(59, 130, 246, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}
.app-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.25) 50%, transparent 62%);
    transition: left 0.6s ease;
}
.app-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 32px rgba(59, 130, 246, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.app-btn:hover::after { left: 100%; }
.app-btn:active { transform: translateY(0) scale(0.98); }

/* ═══════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════ */
.app-title {
    text-align: center;
    margin-bottom: 28px;
}
.app-title h2 {
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
    letter-spacing: -0.3px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.app-title p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.50);
    margin: 0;
}

/* Icon */
.app-icon {
    font-size: 44px;
    margin-bottom: 14px;
    display: inline-block;
    animation: _lgPulse 3s ease-in-out infinite;
}
.app-icon i {
    background: linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 8px rgba(96, 165, 250, 0.4));
}
.app-icon img {
    max-height: 52px;
    object-fit: contain;
    filter: drop-shadow(0 4px 16px rgba(59, 130, 246, 0.35));
}

/* Links */
.app-links {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
}
.app-links,
.app-links p {
    color: rgba(255, 255, 255, 0.5) !important;
}
.app-links a {
    color: #78b4ff !important;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}
.app-links a:hover {
    color: #a5d0ff !important;
    text-shadow: 0 0 8px rgba(120, 180, 255, 0.3);
}
.app-links.mt-4 p {
    color: rgba(255, 255, 255, 0.55) !important;
}
.app-links.mt-4 p a {
    color: #ffffff !important;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.app-links.mt-4 p a:hover {
    color: #a5d0ff !important;
}

/* ═══════════════════════════════════════
   Terms / Password / Captcha
   ═══════════════════════════════════════ */
.app-terms-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 14px;
    margin-bottom: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.app-terms-group input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: #78b4ff;
    margin-top: 2px;
    cursor: pointer;
    flex-shrink: 0;
}
.app-terms-group label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
    cursor: pointer;
    margin: 0;
}
.app-terms-group a {
    color: #78b4ff;
    text-decoration: underline;
}

#password-strength-status {
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 12px;
    margin-top: 6px;
    background: transparent !important;
    border: none !important;
}

.profile-part center.mb-3 {
    display: flex;
    justify-content: center;
}

/* ═══════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════ */
@keyframes _glassIn {
    from { opacity: 0; transform: translateY(30px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes _meshBlob1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(80px, -50px) scale(1.2); }
    50% { transform: translate(40px, 40px) scale(0.85); }
    75% { transform: translate(-30px, -20px) scale(1.1); }
}

@keyframes _meshBlob2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-60px, 40px) scale(1.15); }
    50% { transform: translate(30px, -30px) scale(0.80); }
    75% { transform: translate(-20px, 50px) scale(1.12); }
}

/*
 * ★ REFRACTION SHIMMER
 * Mô phỏng ánh sáng khúc xạ qua kính dày
 * Gradient rainbow nhẹ di chuyển chéo
 */
@keyframes _glassRefraction {
    0% { transform: translateX(-80%) translateY(-20%) rotate(0deg); opacity: 0.6; }
    50% { transform: translateX(80%) translateY(20%) rotate(0deg); opacity: 1; }
    100% { transform: translateX(-80%) translateY(-20%) rotate(0deg); opacity: 0.6; }
}

@keyframes _lgPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .profile-part::before,
    .profile-part::after,
    .app-store-card::after,
    .app-store-card,
    .app-icon { animation: none !important; }
}

/* ── Mobile ── */
@media (max-width: 575px) {
    .app-store-card {
        padding: 28px 20px;
        border-radius: 20px;
    }
    .app-store-card::before { border-radius: 20px 20px 50% 50%; }
    .app-store-card::after { border-radius: 20px; }
    .app-title h2 { font-size: 22px; }
    .app-input { height: 48px; font-size: 14px; }
    .app-input-icon { height: 48px; }
    .app-btn { height: 48px; font-size: 15px; }
    .profile-part::before { width: 350px; height: 350px; }
    .profile-part::after { width: 300px; height: 300px; }
}

/* ═══════════════════════════════════════
   END LIQUID GLASS AUTH
   ═══════════════════════════════════════ */