/* style.css */
:root{--mesh-1:#6366f1;--mesh-2:#a855f7;--mesh-3:#ec4899;--glass-bg:rgba(255,255,255,0.05);--glass-border:rgba(255,255,255,0.1);--text-main:#ffffff;--text-mute:rgba(255,255,255,0.6);--font-main:'Inter',sans-serif;--font-head:'Outfit',sans-serif}
*{margin:0;padding:0;box-sizing:border-box;outline:0}
body{background-color:#0a0a0a;color:var(--text-main);font-family:var(--font-main);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow-x:hidden;position:relative;padding-bottom:40px}

/* Background Effects */
.mesh-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;filter:blur(100px);opacity:.5;pointer-events:none}
.blob{position:absolute;border-radius:50%;animation:float 10s infinite ease-in-out alternate}
.b1{width:500px;height:500px;background:var(--mesh-1);top:-10%;left:-10%}
.b2{width:400px;height:400px;background:var(--mesh-2);bottom:-10%;right:-10%;animation-delay:-5s}
.b3{width:300px;height:300px;background:var(--mesh-3);top:40%;left:40%;animation-duration:15s}
@keyframes float{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(30px,50px) rotate(10deg)}}

/* Cards & UI */
.aura-card{width:90%;max-width:400px;padding:30px;background:var(--glass-bg);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:1px solid var(--glass-border);border-radius:30px;box-shadow:0 25px 50px -12px rgba(0,0,0,.5);text-align:center;margin-bottom:30px;transform-style:preserve-3d;transition:transform .1s}
h1{font-family:var(--font-head);font-size:1.8rem;font-weight:800;margin-bottom:5px;background:linear-gradient(to right,#fff,#bfa8ff);-webkit-background-clip:text;color:transparent}
p.sub-text{color:var(--text-mute);font-size:.85rem;margin-bottom:20px}

/* Buttons & Inputs */
.toggle-box{background:rgba(0,0,0,.3);padding:5px;border-radius:15px;display:flex;margin-bottom:20px;border:1px solid var(--glass-border)}
.t-btn{flex:1;padding:10px;background:0 0;border:none;color:var(--text-mute);font-weight:600;cursor:pointer;border-radius:12px;transition:.3s;font-size:0.9rem}
.t-btn.active{background:rgba(255,255,255,.1);color:#fff}
.view-section{display:none;animation:fadeUp .5s ease}
.view-section.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.qr-box{width:220px;height:220px;margin:0 auto 15px;border:2px dashed var(--glass-border);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;padding:10px;}
.aura-input{width:100%;padding:14px;background:rgba(255,255,255,.03);border:1px solid var(--glass-border);border-radius:15px;color:#fff;margin-bottom:15px;font-size:1rem}
.aura-input:focus{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.08)}
.action-btn{width:100%;padding:14px;background:#fff;color:#000;border:none;border-radius:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:.3s;font-size:0.95rem}
.action-btn:active{transform:scale(0.98)}

/* Navigation */
.nav-dock{display:flex;gap:15px;margin-bottom:40px;background:rgba(0,0,0,.4);padding:10px 20px;border-radius:50px;border:1px solid var(--glass-border);backdrop-filter:blur(10px); flex-wrap: wrap; justify-content: center;}
.nav-btn{text-decoration:none;color:var(--text-mute);font-size:.85rem;font-weight:500;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:20px;transition:.3s}
.nav-btn:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-btn.dev-opt{color: #f59e0b;}

/* Toast & Loader */
.copyright{font-size:.7rem;color:rgba(255,255,255,.2);letter-spacing:2px;text-transform:uppercase;margin-top:10px}
.code-res{margin-top:15px;padding:15px;background:rgba(0,0,0,.3);border-radius:12px;font-family:'Outfit';letter-spacing:3px;color:#4ade80;display:none}
.loader { width: 20px; height: 20px; border: 3px solid #000; border-bottom-color: transparent; border-radius: 50%; display: inline-block; animation: rotation 1s linear infinite; }
@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 10px; width: 90%; max-width: 350px; pointer-events: none;}
.toast { padding: 12px 18px; border-radius: 12px; background: rgba(10, 10, 10, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; font-size: 0.9rem; display: flex; align-items: center; gap: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); animation: slideDown 0.4s ease forwards; opacity: 0; pointer-events: auto;}
.toast.success { border-left: 4px solid #4ade80; } .toast.success i { color: #4ade80; }
.toast.error { border-left: 4px solid #f87171; } .toast.error i { color: #f87171; }
.toast.info { border-left: 4px solid #60a5fa; } .toast.info i { color: #60a5fa; }
@keyframes slideDown { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeOut { to { transform: translateY(-20px); opacity: 0; } }


/* 1. ලිස්ට් එකේ පෙනුම තීම් එකට මැච් කිරීම */
.iti--container {
    z-index: 9999 !important; /* හැමදේටම උඩින් පේන්න */
}

.iti__country-list {
    background-color: #111827 !important; /* Aura තීම් එකේ කළු පාට */
    color: #fff !important;
    border: 1px solid #374151 !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8) !important;
    max-height: 250px !important; /* ලිස්ට් එක දිග වැඩි නොවී scroll වෙන්න */
    scrollbar-width: thin;
    scrollbar-color: #374151 #111827;
}

.iti__country:hover {
    background-color: #1f2937 !important;
}

/* 2. Copyright එක යටටම තල්ලු කිරීම */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding-bottom: 20px; /* පතුලේ පොඩි ඉඩක් */
}

/* කාඩ් එක මැදට ගෙන ඒම */
.aura-card {
    margin-top: auto;
    margin-bottom: 20px;
}

/* Copyright එක අන්තිමට තල්ලු කිරීම */
.copyright {
    margin-top: auto;
    padding: 20px 0;
    text-align: center;
    width: 100%;
    opacity: 0.6;
}

/* 3. Nav Dock එක ලොක් කිරීම */
.nav-dock {
    margin-bottom: 30px; /* Copyright එකට උඩින් තියන්න */
}


/* Copy බටන් එකක් වුණාම පෙනුම */
#pair-btn:not(:disabled) {
    cursor: pointer;
    transition: all 0.3s ease;
}

#pair-btn:not(:disabled):active {
    transform: scale(0.95); /* ඔබද්දී පොඩ්ඩක් ඇතුළට යන ලස්සනක් */
}