/* =========================================
   SPEEKLLY AUTH STYLES
   ========================================= */

.mta-hidden { display: none !important; }

@keyframes mtaFadeIn {
    from { opacity: 0; transform: translateY(-15px); }
    to { opacity: 1; transform: translateY(0); }
}

.mta-modal {
    position: fixed;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.6); 
    display: flex;
    justify-content: center;
    align-items: center;
}

.mta-modal-content {
    background-color: #ffffff;
    padding: 25px 30px;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 380px;
    position: relative;
    animation: mtaFadeIn 0.3s ease-out;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.mta-close-button {
    position: absolute;
    top: 10px; right: 15px; color: #999; font-size: 24px; line-height: 1; cursor: pointer;
}
.mta-close-button:hover { color: #333; }

.mta-form h3 { margin: 0 0 15px; text-align: center; font-size: 20px; font-weight: 700; color: #333; }
.mta-form label { display: block; margin-bottom: 4px; font-weight: 600; color: #444; font-size: 13px; }

.mta-form input[type="text"],
.mta-form input[type="email"],
.mta-form input[type="password"] {
    width: 100%; padding: 10px; margin-bottom: 10px;
    border: 1px solid #e1e1e1; border-radius: 6px;
    font-size: 14px; box-sizing: border-box; background: #fcfcfc;
}
.mta-form input:focus { border-color: #0d6dfc; outline: none; }

.mta-checkbox { display: flex !important; align-items: center; font-weight: normal !important; margin-bottom: 15px; cursor: pointer; font-size: 13px; color: #666; }
.mta-checkbox input { margin-right: 6px; accent-color: #0d6dfc; }

.mta-submit-button {
    width: 100%; background-color: #0d6dfc; color: white;
    padding: 10px; border: none; border-radius: 6px;
    cursor: pointer; font-size: 15px; font-weight: 600;
}
.mta-submit-button:hover { background-color: #0b5ed7; }
.mta-submit-button:disabled { background-color: #a6cbfd; cursor: wait; }

/* Social Buttons */
.mta-google-button {
    width: 100%; background: #fff; border: 1px solid #0d6dfc; color: #0d6dfc;
    padding: 9px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;
    margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 10px;
}
.mta-google-button:hover { background: #eef6ff; }

.mta-line-button {
    width: 100%; background: #06C755; color: #fff; text-decoration: none;
    padding: 10px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;
    margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box;
}
.mta-line-button:hover { background: #05b34d; color: #fff; }

.mta-icon-google { width: 18px; height: 18px; background: url('https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg') no-repeat center/contain; }
.mta-icon-line { width: 20px; height: 20px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><path fill="%23ffffff" d="M424.3,212.3C424.3,109.8,329.3,26.7,212.2,26.7C95,26.7,0,109.8,0,212.3c0,95.5,84.7,175.7,199.1,184.4c7.8,0.3,18.4,2.4,21.1,5.5c2.4,2.8,1.6,7.2,0.8,10.1c-2.7,9.5-8.5,33.5-10.8,45.6c-3.2,17.2-1.6,33.5,14.6,18.3c16.2-15.1,88.7-83.3,121-112.5c41.3-34.9,78.5-72.3,78.5-151.4"/></svg>') no-repeat center/contain; }

.mta-social-login { display: flex; align-items: center; margin: 15px 0; color: #aaa; }
.mta-social-login hr { flex: 1; border: none; border-top: 1px solid #eee; margin: 0 10px; }
.mta-social-login span { font-size: 11px; font-weight: 600; color: #999; }

.mta-message { padding: 10px; margin-bottom: 15px; border-radius: 6px; font-size: 13px; text-align: center; }
.mta-error { background: #fef1f2; color: #991b1b; border: 1px solid #fecaca; }
.mta-success { background: #e6f2ff; color: #0d6dfc; border: 1px solid #cce5ff; }

.mta-disclaimer { font-size: 11px; color: #888; text-align: center; margin-top: 12px; }
.mta-disclaimer a { color: #0d6dfc; text-decoration: none; }
.mta-link { text-align: center; margin-top: 10px; font-size: 13px; color: #666; }
.mta-link a { color: #0d6dfc; text-decoration: none; font-weight: 500; }