/* ====================================
   ULTRA-OPTIMIZED LOGIN CSS
   Critical Performance + Balanced Desktop/Mobile
   ==================================== */
@import 'notification_styles.css';
/* ====================================
   CRITICAL CSS - Loads First (Above the Fold)
   ==================================== */
/* Reset - Minimal */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Variables - Optimized */
:root{
    --primary:#10b981;--primary-hover:#059669;--primary-light:#d1fae5;--primary-dark:#047857;
    --success:#10b981;--error:#ef4444;--warning:#f59e0b;
    --text-primary:#0f172a;--text-secondary:#475569;--text-tertiary:#64748b;--text-inverse:#fff;
    --bg-card:rgba(255,255,255,.98);--bg-solid:#fff;--bg-overlay:rgba(0,0,0,.7);
    --shadow-sm:0 2px 4px rgba(0,0,0,.06);--shadow-md:0 4px 8px rgba(0,0,0,.08);
    --shadow-lg:0 8px 16px rgba(0,0,0,.1);--shadow-xl:0 16px 32px rgba(0,0,0,.12);
    --shadow-btn:0 8px 20px rgba(16,185,129,.3);
    --radius-xs:6px;--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--radius-full:9999px;
    --space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:40px;
}
/* Base - Full Viewport, No Horizontal Scroll */
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','SF Pro Display',system-ui,sans-serif;background:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 50%,#bbf7d0 100%);background-attachment:fixed;min-height:100vh;min-height:-webkit-fill-available;display:flex;flex-direction:column;color:var(--text-primary);line-height:1.5;overflow-x:hidden;overflow-y:auto;transform:translateZ(0);width:100vw;max-width:100vw}
/* Container - Full Screen on Mobile */
.login-container{width:100%;min-height:100vh;min-height:-webkit-fill-available;display:flex;flex-direction:column;animation:fadeIn .4s ease;width:100vw;max-width:100vw}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* Header */
.login-header{background:linear-gradient(180deg,#065f46 0%,#047857 100%);padding:var(--space-xl) var(--space-lg);text-align:center;position:relative;overflow:hidden;transform:translateZ(0);width:100%;box-sizing:border-box}
.logo{position:relative;z-index:1;display:inline-block;margin-bottom:var(--space-md)}
.logo img{max-width:140px;height:auto;filter:brightness(0) invert(1);image-rendering:-webkit-optimize-contrast}
.login-header h1{position:relative;z-index:1;font-size:clamp(24px,5vw,28px);font-weight:700;color:var(--text-inverse);margin-bottom:var(--space-xs);letter-spacing:-.02em}
.login-header p{position:relative;z-index:1;color:rgba(255,255,255,.9);font-size:14px}
/* Card */
.login-card{flex:1;background:var(--bg-card);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:var(--space-xl) var(--space-lg);box-shadow:var(--shadow-xl);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);position:relative;margin-top:calc(-1 * var(--radius-lg));z-index:2;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;transform:translateZ(0);contain:layout style paint;width:100%;box-sizing:border-box}
/* Form */
.login-form{width:100%;max-width:500px;margin:0 auto}
.form-group{margin-bottom:var(--space-lg)}
.form-group label{display:block;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-sm);font-size:14px}
/* Input */
.input-wrapper{position:relative;display:flex;align-items:center;width:100%;box-sizing:border-box}
.input-icon{position:absolute;left:16px;color:var(--text-tertiary);pointer-events:none;z-index:2;transition:color .15s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1)}
.input-wrapper input{width:100%;padding:18px 50px;border:2px solid transparent;border-radius:var(--radius-md);font-size:16px;font-weight:500;background:var(--bg-solid);color:var(--text-primary);box-shadow:var(--shadow-sm);-webkit-appearance:none;appearance:none;transition:border-color .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1);contain:layout;box-sizing:border-box}
.input-wrapper input::placeholder{color:var(--text-tertiary);font-weight:400}
.input-wrapper input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 4px rgba(16,185,129,.12),var(--shadow-md);transform:translateY(-1px) translateZ(0)}
.input-wrapper input:focus~.input-icon,.input-wrapper input:not(:placeholder-shown)~.input-icon{color:var(--primary);transform:scale(1.08) translateZ(0)}
/* Input States */
.input-wrapper input.error{border-color:var(--error);background-color:#fee2e2;animation:shake .3s ease}
.input-wrapper input.success{border-color:var(--success);background-color:#d1fae5}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
/* Toggle Password */
.toggle-password{position:absolute;right:16px;background:0 0;border:0;padding:10px;color:var(--text-tertiary);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;border-radius:var(--radius-sm);transition:background-color .15s,transform .15s;-webkit-tap-highlight-color:transparent}
.toggle-password:active{background:rgba(0,0,0,.05);transform:scale(.95) translateZ(0)}
.toggle-password .eye-icon{width:20px;height:20px}
/* Error Message */
.error-message{display:block;color:var(--error);font-size:13px;font-weight:500;margin-top:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:#fee2e2;border-radius:var(--radius-xs);border-left:3px solid var(--error)}
/* Form Options */
.form-options{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-xl);gap:var(--space-md);width:100%;box-sizing:border-box;flex-wrap:wrap}
.checkbox-label{display:flex;align-items:center;cursor:pointer;user-select:none;padding:var(--space-xs);border-radius:var(--radius-sm);transition:background-color .15s;-webkit-tap-highlight-color:transparent}
.checkbox-label:active{background:rgba(0,0,0,.03)}
.checkbox-label input[type=checkbox]{width:20px;height:20px;margin-right:var(--space-sm);cursor:pointer;accent-color:var(--primary)}
.checkbox-label span{font-size:14px;color:var(--text-secondary);font-weight:500}
.forgot-password{color:var(--primary);text-decoration:none;font-size:14px;font-weight:600;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);transition:background-color .15s,transform .15s;-webkit-tap-highlight-color:transparent;display:inline-block}
.forgot-password:active{background:var(--primary-light);transform:scale(.98)}
/* reCAPTCHA Info */
.recaptcha-info{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:12px;background:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%);border-radius:var(--radius-md);margin-bottom:var(--space-lg);font-size:12px;color:var(--text-secondary);border:1px solid var(--primary-light);width:100%;box-sizing:border-box}
/* Submit Button */
.submit-btn{width:100%;padding:18px;background:linear-gradient(135deg,#10b981 0%,#059669 50%,#047857 100%);color:#fff;border:0;border-radius:var(--radius-md);font-size:17px;font-weight:700;cursor:pointer;box-shadow:var(--shadow-btn);position:relative;overflow:hidden;letter-spacing:.3px;-webkit-tap-highlight-color:transparent;transform:translateZ(0);transition:transform .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1);contain:layout;box-sizing:border-box}
.submit-btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.3);transform:translate(-50%,-50%);transition:width .5s,height .5s}
.submit-btn:active{transform:scale(.98) translateZ(0)}
.submit-btn:active::before{width:350px;height:350px}
.submit-btn:disabled{opacity:.6;cursor:not-allowed}
.submit-btn.loading{pointer-events:none;color:transparent}
.submit-btn.loading::after{content:'';position:absolute;top:50%;left:50%;width:22px;height:22px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;transform:translate(-50%,-50%)}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* Footer */
.login-footer{margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:2px solid rgba(0,0,0,.06);width:100%;box-sizing:border-box}
.contact-info{margin-bottom:var(--space-lg)}
.contact-item{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);margin-bottom:var(--space-sm);color:var(--text-secondary);font-size:13px}
.contact-item svg{color:var(--primary);flex-shrink:0}
.contact-item strong{color:var(--primary);font-weight:600}
.contact-item.line-id svg,.contact-item.line-id strong{color:#06c755}
.work-hours{text-align:center;color:var(--text-tertiary);font-size:12px;margin-top:var(--space-sm)}
.copyright{text-align:center;margin-top:var(--space-lg)}
.copyright p{color:var(--text-tertiary);font-size:12px;line-height:1.6}
.signup-link{text-align:center;margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid rgba(0,0,0,.06);width:100%;box-sizing:border-box}
.signup-link p{color:var(--text-secondary);font-size:14px}
.signup-link a{color:var(--primary);text-decoration:none;font-weight:700;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);transition:background-color .15s,transform .15s;display:inline-block;-webkit-tap-highlight-color:transparent}
.signup-link a:active{background:var(--primary-light);transform:scale(.98)}
/* ====================================
   NON-CRITICAL CSS - Deferred Load
   ==================================== */
/* Header Animations - Not critical */
.login-header::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 50%,rgba(255,255,255,.1) 0%,transparent 50%);pointer-events:none}
/* Form Group Animations */
.form-group{animation:formFade .4s ease both}
.form-group:nth-child(1){animation-delay:.3s}
.form-group:nth-child(2){animation-delay:.35s}
.form-group:nth-child(3){animation-delay:.4s}
@keyframes formFade{from{opacity:0;transform:translateX(-15px)}to{opacity:1;transform:translateX(0)}}
/* Form Options Animation */
.form-options{animation:optionsFade .4s ease .45s both}
@keyframes optionsFade{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
/* reCAPTCHA Animation */
.recaptcha-info{animation:recaptchaFade .4s ease .5s both}
@keyframes recaptchaFade{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
/* Button Animation */
.submit-btn{animation:btnFade .4s ease .55s both}
@keyframes btnFade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
/* Footer Animation */
.login-footer{animation:footerFade .4s ease .6s both}
@keyframes footerFade{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
/* ====================================
   OTP & Trust Modals
   ==================================== */
.otp-container,.trust-container{position:fixed;inset:0;width:100vw;height:100vh;height:-webkit-fill-available;background:var(--bg-overlay);display:none;align-items:center;justify-content:center;z-index:9999;padding:0;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow-x:hidden}
.otp-container.active,.trust-container.active{display:flex!important;animation:fadeInModal .25s ease}
@keyframes fadeInModal{from{opacity:0}to{opacity:1}}
.otp-card,.trust-card{background:#fff;border-radius:var(--radius-xl);padding:var(--space-2xl) var(--space-lg);width:100%;max-width:500px;max-height:95vh;margin:var(--space-lg);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;box-shadow:var(--shadow-xl);animation:slideUpModal .3s cubic-bezier(.4,0,.2,1);transform:translateZ(0);contain:layout style paint;box-sizing:border-box}
@keyframes slideUpModal{from{opacity:0;transform:translateY(60px) scale(.95) translateZ(0)}to{opacity:1;transform:translateY(0) scale(1) translateZ(0)}}
.trust-card{max-width:580px}
.otp-header,.trust-header{text-align:center;margin-bottom:var(--space-xl)}
.otp-icon,.trust-icon{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;background:linear-gradient(135deg,#10b981 0%,#059669 100%);border-radius:50%;color:#fff;margin-bottom:var(--space-lg);box-shadow:0 8px 24px rgba(16,185,129,.3);animation:iconBounce .5s ease .15s both}
@keyframes iconBounce{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.trust-icon{background:linear-gradient(135deg,#10b981 0%,#059669 100%)}
.otp-header h2,.trust-header h2{font-size:26px;font-weight:700;margin-bottom:var(--space-sm);color:var(--text-primary)}
.otp-description,.trust-description{color:var(--text-secondary);font-size:14px;line-height:1.6}
.otp-description strong{color:var(--text-primary);font-weight:600}
/* OTP Inputs */
.otp-inputs{display:flex;gap:10px;justify-content:center;margin-bottom:var(--space-lg);width:100%;box-sizing:border-box;flex-wrap:wrap}
.otp-input{width:50px;height:60px;text-align:center;font-size:24px;font-weight:700;border:2px solid #e5e7eb;border-radius:var(--radius-md);background:#fff;color:var(--text-primary);box-shadow:var(--shadow-sm);-webkit-appearance:none;appearance:none;transition:all .15s cubic-bezier(.4,0,.2,1);contain:layout;box-sizing:border-box;flex:0 0 auto}
.otp-input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(16,185,129,.15),var(--shadow-md);transform:scale(1.08) translateZ(0)}
.otp-input.success{border-color:var(--success);background:#d1fae5}
.otp-input.error{border-color:var(--error);background:#fee2e2;animation:shake .3s ease}
.otp-info{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:14px;background:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%);border-radius:var(--radius-md);color:var(--text-secondary);font-size:13px;margin-bottom:var(--space-lg);border:1px solid var(--primary-light);width:100%;box-sizing:border-box}
.otp-message{padding:14px 16px;border-radius:var(--radius-md);font-size:14px;font-weight:600;text-align:center;margin-bottom:var(--space-md);border-width:2px;border-style:solid;width:100%;box-sizing:border-box}
.otp-message.success{background:#d1fae5;color:var(--success);border-color:var(--success)}
.otp-message.error{background:#fee2e2;color:var(--error);border-color:var(--error);animation:shake .3s ease}
.otp-buttons{display:flex;flex-direction:column;gap:12px;margin-bottom:var(--space-lg);width:100%;box-sizing:border-box}
.btn-otp{width:100%;padding:18px;font-size:16px;font-weight:700;border:0;border-radius:var(--radius-md);cursor:pointer;transition:transform .15s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;contain:layout;box-sizing:border-box}
.btn-otp-primary{background:linear-gradient(135deg,#10b981 0%,#059669 50%,#047857 100%);color:#fff;box-shadow:var(--shadow-btn)}
.btn-otp-primary:active{transform:scale(.98) translateZ(0)}
.btn-otp-secondary{background:#fff;color:var(--primary);border:2px solid var(--primary);box-shadow:var(--shadow-sm)}
.btn-otp-secondary:active{background:var(--primary-light);transform:scale(.98) translateZ(0)}
.btn-otp:disabled{opacity:.5;cursor:not-allowed}
.btn-otp.loading{color:transparent;pointer-events:none}
.btn-otp.loading::after{content:'';position:absolute;top:50%;left:50%;width:22px;height:22px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;transform:translate(-50%,-50%)}
.otp-help{text-align:center;padding-top:var(--space-lg);border-top:1px solid rgba(0,0,0,.06);width:100%;box-sizing:border-box}
.otp-help p{font-weight:600;color:var(--text-primary);margin-bottom:var(--space-sm);font-size:14px}
.otp-help ul{text-align:left;color:var(--text-secondary);font-size:13px;padding-left:20px}
.otp-help li{margin-bottom:6px;line-height:1.5}
/* Trust Options */
.trust-options{display:flex;flex-direction:column;gap:12px;margin-bottom:var(--space-lg);width:100%;box-sizing:border-box}
.trust-option{position:relative;display:flex;align-items:center;padding:18px;border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);background:rgba(0,0,0,.02);-webkit-tap-highlight-color:transparent;width:100%;box-sizing:border-box}
.trust-option:active{transform:scale(.98) translateZ(0)}
.trust-option.recommended{border-color:var(--primary);background:var(--primary-light)}
.trust-option input[type=radio]{margin-right:14px;width:22px;height:22px;cursor:pointer;accent-color:var(--primary)}
.trust-option-content{flex:1}
.trust-option-title{font-weight:600;color:var(--text-primary);margin-bottom:4px;display:flex;align-items:center;gap:var(--space-sm);font-size:15px}
.trust-option-desc{font-size:13px;color:var(--text-secondary);line-height:1.5}
.badge{display:inline-block;padding:4px 10px;background:var(--primary);color:#fff;border-radius:var(--radius-full);font-size:11px;font-weight:700;letter-spacing:.3px}
.trust-notice{display:flex;gap:12px;padding:16px;background:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%);border:2px solid var(--primary-light);border-radius:var(--radius-md);color:#065f46;font-size:13px;margin-bottom:var(--space-lg);line-height:1.6;width:100%;box-sizing:border-box}
.trust-notice svg{flex-shrink:0;margin-top:2px}
.trust-buttons{display:flex;gap:12px;margin:var(--space-lg) 0;width:100%;box-sizing:border-box;flex-wrap:wrap}
.trust-buttons .btn-otp{flex:1;min-width:120px}
/* ====================================
   Responsive - Mobile First
   ==================================== */
/* Extra Small Mobile */
@media (max-width:375px){
    :root{--space-lg:20px;--space-xl:28px}
    .login-header{padding:var(--space-lg) var(--space-sm)}
    .login-card{padding:var(--space-lg) var(--space-sm)}
    .login-header h1{font-size:24px}
    .otp-input{width:45px;height:55px;font-size:22px}
    .otp-inputs{gap:8px}
    .otp-card,.trust-card{padding:var(--space-xl) var(--space-md);margin:var(--space-sm)}
}
/* Small Mobile */
@media (max-width:480px){
    .form-options{flex-wrap:wrap;justify-content:center}
    .login-header{padding:var(--space-lg) var(--space-sm)}
    .login-card{padding:var(--space-lg) var(--space-sm)}
}
/* Tablet Portrait */
@media (min-width:641px){
    .login-container{padding:var(--space-lg);width:auto;max-width:100%;box-sizing:border-box}
    .login-card{border-radius:var(--radius-xl);margin-top:0;max-width:560px;margin-left:auto;margin-right:auto;width:auto}
    .login-header{border-radius:var(--radius-xl) var(--radius-xl) 0 0;width:auto}
    .login-header h1{font-size:32px}
}
/* Desktop */
@media (min-width:769px){
    body{padding:var(--space-xl);width:auto;max-width:none;overflow-x:visible}
    .login-container{max-width:640px;margin:0 auto;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-xl);min-height:auto;width:auto}
    .login-header{border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:var(--space-2xl) var(--space-xl);width:auto}
    .login-card{border-radius:0 0 var(--radius-xl) var(--radius-xl);margin-top:0;padding:var(--space-2xl) var(--space-xl);width:auto}
    .login-form{max-width:520px}
    .login-header h1{font-size:34px}
    .logo img{max-width:160px}
    .input-wrapper input{padding:18px 52px;font-size:16px}
    .submit-btn{padding:20px;font-size:18px}
    .trust-buttons{flex-direction:row}
}
/* Large Desktop */
@media (min-width:1024px){
    .login-container{max-width:660px}
    .login-card{padding:48px 40px}
    .login-header{padding:40px 40px 48px}
}
/* Extra Large Desktop */
@media (min-width:1440px){
    .login-container{max-width:720px}
    .login-header h1{font-size:36px}
    .login-header p{font-size:16px}
}
/* Landscape Mode */
@media (orientation:landscape) and (max-height:640px){
    .login-header{padding:var(--space-md) var(--space-lg)}
    .logo{margin-bottom:var(--space-sm)}
    .logo img{max-width:100px}
    .login-header h1{font-size:22px;margin-bottom:4px}
    .login-header p{font-size:13px}
    .login-card{padding:var(--space-lg)}
    .form-group{margin-bottom:var(--space-md)}
    .otp-card,.trust-card{padding:var(--space-lg);max-height:85vh}
    .otp-icon,.trust-icon{width:60px;height:60px;margin-bottom:var(--space-sm)}
}
/* ====================================
   Performance & Accessibility
   ==================================== */
/* Reduce Motion */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* Safe Area for Notched Devices */
@supports (padding:max(0px)){
    .login-container{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right))}
    .login-card{padding-bottom:max(var(--space-xl),env(safe-area-inset-bottom))}
}
/* Scrollbar */
.otp-card::-webkit-scrollbar,.trust-card::-webkit-scrollbar,.login-card::-webkit-scrollbar{width:4px}
.otp-card::-webkit-scrollbar-track,.trust-card::-webkit-scrollbar-track,.login-card::-webkit-scrollbar-track{background:0 0}
.otp-card::-webkit-scrollbar-thumb,.trust-card::-webkit-scrollbar-thumb,.login-card::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:var(--radius-full)}
/* Focus Visible */
*:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
/* High Contrast */
@media (prefers-contrast:high){
    :root{--primary:#047857;--text-primary:#000}
    .login-card,.otp-card,.trust-card{border:2px solid var(--text-primary)}
}
/* Utility Classes */
.hidden{display:none!important}
.visible{display:block!important}
.text-center{text-align:center}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Will-change management */
.input-wrapper input:focus,.submit-btn:active{will-change:transform}
.input-wrapper input:not(:focus),.submit-btn:not(:active){will-change:auto}

/* Account Held Modal Styles */
/* เพิ่มโค้ดนี้ลงใน login/css/style.css */

.account-held-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.account-held-modal.active {
    display: flex;
    opacity: 1;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    background: white;
    border-radius: 20px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.4s ease-out;
}

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

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    border: none;
    background: #f0f0f0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 1;
}

.modal-close:hover {
    background: #e74c3c;
    color: white;
    transform: rotate(90deg);
}

.modal-close svg {
    width: 20px;
    height: 20px;
}

.modal-header {
    padding: 40px 30px 20px;
    text-align: center;
    border-bottom: 2px solid #f0f0f0;
}

.modal-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(238, 90, 82, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 20px rgba(238, 90, 82, 0);
    }
}

.modal-header h2 {
    font-size: 1.5em;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
    line-height: 1.4;
}

.modal-body {
    padding: 30px;
}

.message-box {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 25px;
}

.main-message {
    font-size: 1.05em;
    line-height: 1.8;
    color: #34495e;
    margin-bottom: 25px;
    text-align: left;
}

.main-message strong {
    color: #2c5f7d;
    font-weight: 600;
}

.info-box,
.contact-box {
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
    border: 2px solid #e8f4f8;
}

.info-box h3,
.contact-box h3 {
    font-size: 1.1em;
    font-weight: 600;
    color: #2c5f7d;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.info-box p {
    font-size: 0.95em;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

.info-box strong {
    color: #e67e22;
}

.contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.95em;
    color: #555;
}

.contact-list li:last-child {
    border-bottom: none;
}

.contact-list svg {
    flex-shrink: 0;
    color: #3498db;
}

.contact-list strong {
    color: #2c5f7d;
    font-weight: 600;
}

.modal-footer {
    padding: 20px 30px 30px;
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.modal-footer .btn {
    padding: 15px 40px;
    border: none;
    border-radius: 50px;
    font-size: 1.05em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-family: 'Kanit', sans-serif;
}

.modal-footer .btn-primary {
    background: linear-gradient(135deg, #3498db 0%, #2c5f7d 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
}

.modal-footer .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.6);
}

.modal-footer .btn-secondary {
    background: #ecf0f1;
    color: #2c3e50;
    border: 2px solid #bdc3c7;
}

.modal-footer .btn-secondary:hover {
    background: #bdc3c7;
}

.modal-footer .btn svg {
    width: 20px;
    height: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .account-held-modal {
        padding: 10px;
    }

    .modal-content {
        max-height: 95vh;
        border-radius: 15px;
    }

    .modal-header {
        padding: 30px 20px 15px;
    }

    .modal-header h2 {
        font-size: 1.3em;
    }

    .modal-body {
        padding: 20px;
    }

    .message-box {
        padding: 20px;
    }

    .main-message {
        font-size: 1em;
    }

    .modal-footer {
        padding: 15px 20px 25px;
        flex-direction: column;
    }

    .modal-footer .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .modal-icon {
        width: 60px;
        height: 60px;
    }

    .modal-icon svg {
        width: 48px;
        height: 48px;
    }

    .modal-header h2 {
        font-size: 1.15em;
    }

    .main-message {
        font-size: 0.95em;
    }

    .info-box,
    .contact-box {
        padding: 15px;
    }

    .contact-list li {
        font-size: 0.9em;
    }
}

/* Prevent pointer events on overlay for account held modal */
.account-held-modal.active .modal-overlay {
    pointer-events: none;
}

.account-held-modal.active .modal-content {
    pointer-events: auto;
}