/* Cotlas form styles - minimal and namespaced to avoid conflicts */
.cotlas-auth, #cotlas-login-form, #cotlas-register-form, #cotlas-lost-password-form {
	max-width: 400px;
	width: 320px;
	margin: 5px auto;
	padding: 10px;
	background: #ffffff;
	border-radius: 15px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	font-family: 'Segoe UI', sans-serif;
}

.cotlas-auth input,
.cotlas-auth button,
#cotlas-login-verify-form input,
#cotlas-register-verify-form input {
	display: block;
	width: 100%;
	margin-bottom: 15px;
	padding: 12px 15px;
	font-size: 15px;
	border-radius: 8px;
	border: 1px solid #ccc;
	box-sizing: border-box;
}

.cotlas-auth input[type="submit"],
.cotlas-auth button {
	background-color: #0073e6;
	color: #fff;
	border: none;
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.cotlas-auth input[type="submit"]:hover,
.cotlas-auth button:hover {
	background-color: #005bb5;
}



.cotlas-message { padding:10px;margin-bottom:10px;border-radius:5px;font-size:14px; }
.cotlas-message.info{ background:#eef3fc;color:#2f5dbe }
.cotlas-message.success{ background:#e6f9e6;color:#2f8f2f }
.cotlas-message.error{ background:#fbeaea;color:#d12020 }

/* Social row and buttons */
.cotlas-social-row{ display:flex; gap:8px; justify-content:center; margin-top:10px }
.cotlas-btn-social{ display:inline-flex; padding:8px; background:#f7f7f8; border-radius:8px; align-items:center; justify-content:center }
.cotlas-btn-social{ cursor:pointer }
.cotlas-or{ text-align:center; margin-top:8px; color:#666 }

/* Remember me inline left aligned */
.cotlas-remember-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    font-size: 14px;
}
.cotlas-remember-label input { margin:0; width:auto; }
/* Hide OTP wrappers by default */
#cotlas-login-otp-wrap, #cotlas-register-otp-wrap { display:none }

/* Tooltip styling for social icons */
.cotlas-tooltip{ position:absolute; background:#111; color:#fff; padding:6px 8px; border-radius:4px; font-size:12px; white-space:nowrap; transform:translateY(-8px); }
.cotlas-btn-social{ position:relative }


.social-login-divider {
    position: relative;
    text-align: center;
    margin: 20px 0;
    color: #666;
}

.social-login-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #ddd;
}

.social-login-divider span {
    background: white;
    padding: 0 15px;
    position: relative;
}