/* 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;
}
.cotlas-social-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
    position: relative;
}

.cotlas-btn-social {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: white;
    border: 2px solid #ddd;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cotlas-btn-social:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border-color: #007cba;
}

.cotlas-btn-social:hover .social-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.cotlas-btn-social svg {
    width: 24px;
    height: 24px;
}

/* Google specific styles */
.cotlas-btn-social[data-provider="google"]:hover {
    border-color: #DB4437;
}

/* Facebook specific styles */
.cotlas-btn-social[data-provider="facebook"]:hover {
    border-color: #4267B2;
}

/* Twitter specific styles */
.cotlas-btn-social[data-provider="twitter"]:hover {
    border-color: #1DA1F2;
}

.social-tooltip {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 5px 8px;
    border-radius: 24px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 1000;
}

.social-tooltip::before {
    content: "";
    position: absolute;
    bottom: -5px; /* arrow at bottom of tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #000; /* arrow points downward */
}
.cotlas-auth-message {
    max-width: 300px;
    width: auto;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
}
.cotlas-auth-message a {
    margin-top: 6px;
    font-weight: 600;
    color: #037020;
    text-decoration: none;
}

.cotlas-auth-message a:hover {
    text-decoration: none;
	color:#e40001;
}