/* login.css (Redesign: Left Section to match Original.txt) */

/* --- Variables & Fonts --- */
:root {
    --primary-color: #fc5b08; /* สีส้มตามต้นฉบับ */
    --primary-hover: #e04f06;
    --bg-light: #f8f6f5;
    --text-charcoal: #464545;
    --text-white: #ffffff;
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-bg: rgba(255, 255, 255, 0.1);
}

/* --- 1. Main Layout & Structure --- */
body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    /* ป้องกัน Scrollbar ของหน้าเว็บหลัก */
    overflow: hidden; 
    font-family: 'Anuphan', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-charcoal);
}

.login-container {
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* --- 2. Branding Zone (Left Side - Redesigned) --- */
.login-branding-zone {
    width: 50%;
    height: 100%;
    position: relative;
    /* Gradient ตาม Original.txt */
    background: linear-gradient(135deg, #e08e6d 0%, #a05a46 40%, #464545 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    overflow: hidden; /* ป้องกัน Orb ล้นออกนอกจอ */
    box-sizing: border-box;
}

/* Decorative Orbs (วงกลมฟุ้งๆ ตามต้นฉบับ) */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px); /* blur-3xl equivalent */
    z-index: 1;
}

.orb-bottom-left {
    width: 24rem; /* w-96 */
    height: 24rem; /* h-96 */
    background-color: rgba(252, 91, 8, 0.2); /* bg-[#fc5b08]/20 */
    bottom: -8rem;
    left: -8rem;
}

.orb-top-right {
    width: 16rem; /* w-64 */
    height: 16rem; /* h-64 */
    background-color: rgba(255, 255, 255, 0.1); /* bg-white/10 */
    top: 5rem;
    right: 5rem;
}

.branding-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.1); /* bg-black/10 */
    z-index: 0;
}

.branding-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem; /* gap-6 */
    max-width: 32rem; /* max-w-lg */
}

/* Glass Icon Box (กล่องไอคอนโปร่งแสง) */
.glass-icon-box {
    width: 6rem; /* size-24 (96px) */
    height: 6rem;
    background-color: var(--glass-bg);
    backdrop-filter: blur(4px); /* backdrop-blur-sm */
    border-radius: 1.5rem; /* rounded-3xl */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--glass-border);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
}

.glass-icon-box i {
    font-size: 3.75rem; /* text-6xl */
    color: var(--primary-color);
}

.branding-content h1 {
    font-size: 2.5rem; /* text-4xl */
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-white);
    text-shadow: 0 4px 6px rgba(0,0,0,0.1); /* drop-shadow-lg */
    margin: 0;
}

/* ปรับขนาดฟอนต์ h1 เมื่อจอใหญ่ขึ้น */
@media (min-width: 1025px) {
    .branding-content h1 { font-size: 3rem; /* text-5xl on LG */ }
}

.branding-content .tagline {
    font-size: 1.125rem; /* text-lg */
    font-weight: 300; /* font-light */
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    max-width: 28rem;
}

/* --- 3. Login Form Zone (Right Side) --- */
.login-form-zone {
    width: 50%;
    height: 100%;
    background-color: var(--bg-light);
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    box-sizing: border-box;
    /* ปิด Scrollbar ฝั่งขวา เพื่อให้ Fixed ตามต้องการ */
    overflow: hidden; 
    position: relative;
}

.login-card-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: 100%;
}

.login-card {
    background-color: var(--text-white);
    padding: 2.5rem;
    border-radius: 1.5rem;
    box-shadow: 0 8px 30px rgba(0,0,0,0.04);
    border: 1px solid #f3f4f6;
    width: 100%;
    max-width: 448px;
    position: relative;
    box-sizing: border-box;
    margin: auto;
    transform: scale(0.95);
    transform-origin: center;
}

/* ... (ส่วน Form Styles อื่นๆ คงเดิม) ... */
.card-header-actions { position: absolute; top: 2.5rem; right: 2.5rem; }
.card-header-actions #qr-login-link { font-size: 1.5rem; color: rgba(70, 69, 69, 0.3); transition: color 0.2s; }
.card-header-actions #qr-login-link:hover { color: var(--primary-color); }
.login-card h2 { font-size: 1.875rem; font-weight: 700; color: var(--text-charcoal); margin: 0 0 0.75rem 0; text-align: center; }
.login-subtext { color: rgba(70, 69, 69, 0.6); font-size: 0.875rem; font-weight: 500; margin-bottom: 2rem; text-align: center; }

#login-form { text-align: left; display: flex; flex-direction: column; gap: 1.25rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--text-charcoal); font-size: 0.9rem; }
.input-wrapper { position: relative; }
.input-icon { position: absolute; top: 50%; transform: translateY(-50%); left: 1rem; color: rgba(70, 69, 69, 0.4); z-index: 2; }
#login-form input[type="text"], #login-form input[type="password"] { width: 100%; padding: 0.875rem 1rem 0.875rem 2.75rem; border: 1px solid #e5e7eb; border-radius: 0.75rem; font-size: 1rem; background-color: rgba(249, 250, 251, 0.5); color: var(--text-charcoal); outline: none; box-sizing: border-box; transition: all 0.2s ease; }
#login-form input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 2px var(--primary-color); }
.toggle-password { position: absolute; top: 50%; transform: translateY(-50%); right: 1rem; color: rgba(70, 69, 69, 0.4); cursor: pointer; }

.login-options { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; margin-top: -0.25rem; }
.checkbox-group { display: flex; align-items: center; gap: 0.5rem; }
.forgot-password-link { color: var(--primary-color); text-decoration: none; font-weight: 600; }
.login-btn { width: 100%; background-color: var(--primary-color); color: white; font-weight: 700; padding: 0.875rem; border-radius: 0.75rem; border: none; cursor: pointer; font-size: 1.125rem; box-shadow: 0 10px 15px -3px rgba(252, 91, 8, 0.2); transition: all 0.2s ease; display: flex; justify-content: center; align-items: center; }
.login-btn:hover { background-color: var(--primary-hover); transform: scale(0.98); }

.alternative-login { margin-top: 0.75rem; }
.sso-divider { display: flex; align-items: center; margin: 1.25rem 0; }
.sso-divider span { padding: 0 1rem; color: rgba(70, 69, 69, 0.4); font-size: 0.75rem; font-weight: 500; background-color: var(--text-white); }
.sso-divider::before, .sso-divider::after { content: ''; flex: 1; border-top: 1px solid #e5e7eb; }
.sso-buttons { display: flex; flex-direction: column; gap: 0.75rem; }
.sso-button { width: 100%; background-color: white; border: 1px solid #e5e7eb; color: var(--text-charcoal); font-weight: 600; padding: 0.75rem; border-radius: 0.75rem !important; display: flex; align-items: center; justify-content: center; gap: 0.75rem; cursor: pointer; transition: all 0.2s; }
.sso-button:hover { background-color: #f9fafb; transform: scale(0.99); }

/* Verification Styles */
.verification-options { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
.verification-option-btn { background-color: white; border: 1px solid #e5e7eb; color: var(--text-charcoal); padding: 0.75rem; border-radius: 0.75rem; display: flex; align-items: center; gap: 1rem; width: 100%; cursor: pointer; transition: all 0.2s; }
.verification-option-btn:hover { border-color: var(--primary-color); background-color: #fff7ed; }
.verification-option-btn i { color: var(--primary-color); font-size: 1.25rem; }
.verification-option-btn span { font-weight: 600; flex: 1; text-align: left; }
.pin-pane { text-align: center; }
.otp-inputs { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem; }
.pin-digit { width: 3rem; height: 3.5rem; text-align: center; font-size: 1.5rem; font-weight: 700; border: 1px solid #e5e7eb; border-radius: 0.75rem; background-color: rgba(249, 250, 251, 0.5); outline: none; color: var(--text-charcoal); }
.pin-digit:focus { border-color: var(--primary-color); box-shadow: 0 0 0 2px var(--primary-color); transform: translateY(-2px); }

/* Footer */
.login-footer { position: absolute; bottom: 0; right: 0; width: 100%; text-align: right; padding: 1rem 3rem; color: rgba(70, 69, 69, 0.4); font-size: 0.75rem; font-weight: 500; pointer-events: none; }
.footer-links { display: inline-flex; gap: 0.5rem; align-items: center; pointer-events: auto; }
.footer-links a { color: inherit; text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: rgba(70, 69, 69, 0.6); }

/* Utilities */
.hidden { display: none !important; }
.spinner { border: 3px solid rgba(255,255,255,0.3); border-top: 3px solid #fff; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Responsive adjustments */
@media (max-width: 1024px) {
    .login-container { flex-direction: column; }
    .login-branding-zone { width: 100%; height: 30vh; min-height: 200px; padding: 1.5rem; }
    .orb { display: none; }
    .branding-content { flex-direction: row; text-align: left; gap: 1rem; }
    .glass-icon-box { width: 4rem; height: 4rem; border-radius: 1rem; }
    .glass-icon-box i { font-size: 2rem; }
    .branding-content h1 { font-size: 1.5rem; text-shadow: none; }
    .branding-content .tagline { display: none; }
    .login-form-zone { width: 100%; height: 70vh; padding: 1rem; }
    .login-card { padding: 1.5rem; max-width: 100%; transform: scale(0.9); box-shadow: none; border: none; }
    .login-footer { text-align: center; padding: 1rem; position: relative; }
}
@media (max-height: 600px) and (orientation: landscape) {
    .login-branding-zone { display: none; }
    .login-form-zone { width: 100%; height: 100vh; }
    .login-card { transform: scale(0.85); padding: 1rem; }
    .login-footer { display: none; }
}

/* --- Missing Styles for QR Section --- */

/* จัดระเบียบพื้นที่ QR Form */
#qr-form-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    padding-top: 0.5rem;
    animation: fadeIn 0.3s ease-out;
}

/* ลิงก์ "กลับไปหน้าหลัก" */
.back-link {
    align-self: flex-start; /* ชิดซ้าย */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: rgba(70, 69, 69, 0.6); /* สีเทาจางๆ */
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
}

.back-link:hover {
    color: var(--primary-color); /* เปลี่ยนเป็นสีส้มเมื่อชี้ */
    transform: translateX(-3px); /* ขยับซ้ายนิดนึง */
}

/* กล่องใส่ QR Code */
.qr-code-display {
    background-color: white;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem; /* มุมมน */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); /* เงาจางๆ */
}

.qr-code-display img {
    display: block;
    width: 160px;
    height: 160px;
    object-fit: contain;
}

/* ข้อความคำแนะนำด้านล่าง QR */
.qr-instructions {
    color: var(--text-charcoal);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    opacity: 0.8;
    max-width: 90%;
}

/* Animation เล็กน้อยตอนกดสลับหน้า */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Success Animation (Add to login.css) --- */

#verification-success-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: fadeIn 0.5s ease-out;
    text-align: center;
}

/* Container ของ SVG */
.success-animation {
    margin-bottom: 1.5rem;
}

/* ตัว SVG */
.checkmark {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #ffffff; /* สีเส้นถูก */
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #fc5b08; /* สีส้ม Primary */
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

/* วงกลมรอบนอก */
.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #fc5b08; /* สีส้ม */
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

/* เส้นถูก */
.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

/* Keyframes */
@keyframes stroke {
    100% { stroke-dashoffset: 0; }
}

@keyframes scale {
    0%, 100% { transform: none; }
    50% { transform: scale3d(1.1, 1.1, 1); }
}

@keyframes fill {
    100% { box-shadow: inset 0px 0px 0px 50px #fc5b08; } /* ถมสีส้มเต็มวง */
}

/* ข้อความ */
.verification-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 0.5rem 0;
}


/* --- Countdown Timer Styles --- */
.timer-container {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-charcoal);
    font-weight: 500;
    transition: color 0.3s;   
}

/* login.css */
.timer-text {
    font-weight: 700;
    color: var(--primary-color); /* 🟢 เปลี่ยนเป็นสีส้ม */
    font-variant-numeric: tabular-nums;
}

/* ส่วนตัวแจ้งเตือนเมื่อใกล้หมดเวลา (สีส้มเหมือนกัน) */
.timer-expired {
    color: var(--primary-color); 
}

.resend-link {
    color: var(--primary-color);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    opacity: 1;
    transition: opacity 0.2s;
}

.resend-link.disabled {
    opacity: 0.5;
    pointer-events: none;
    text-decoration: none;
    color: #9ca3af;
}
.login-error-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin: 0.875rem 0 1rem;
    padding: 0.75rem 0.875rem;
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.login-error-banner i {
    margin-top: 0.2rem;
    flex: 0 0 auto;
}