.goappily-auth-wrap {
max-width: 1100px;
margin: 40px auto;
padding: 0 16px;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.goappily-auth-card {
display: grid;
grid-template-columns: 1.1fr 1.3fr;
border-radius: 24px;
overflow: hidden;
-webkit-box-shadow: 0px 0px 25px 10px rgba(5, 72, 47, 0.5);
box-shadow: 0px 0px 25px 10px rgba(5, 72, 47, 0.5);
background: linear-gradient(120deg, var(--goappily-secondary-color, #7fb33f), var(--goappily-primary-color, #05482f));
}

.goappily-auth-left {
padding: 32px 28px;
color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
text-align: left;
}

.goappily-auth-logo {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}

.goappily-auth-logo img {
width: 90%;
max-width: 340px;
height: auto;
display: block;
}

.goappily-auth-left h2 {
margin: 0 0 8px;
font-size: 26px;
font-weight: 800;
letter-spacing: 0.5px;
text-align: center;
}

.goappily-auth-left p {
margin: 0 0 8px;
font-size: 16px;
text-align: center;
}

.goappily-auth-small {
margin-top: 11px;
font-size: 14px !Important;
font-weight: 700;
text-align: center;
}

.goappily-auth-right {
background: #f9fafb;
padding: 28px 32px;
}

.goappily-auth-tabs {
display: inline-flex;
border-radius: 999px;
border: 1px solid #e5e7eb;
padding: 3px;
margin-bottom: 18px;
background: #ffffff;
}

.goappily-auth-tab {
border: 0;
padding: 7px 20px;
border-radius: 999px;
font-size: 13px;
cursor: pointer;
background: transparent;
color: #4b5563;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.goappily-auth-tab:hover {
background: #e5f3dc;
}

.goappily-auth-tab.active {
background: var(--goappily-secondary-color, #7fb33f);
color: #ffffff;
-webkit-box-shadow: 0px 0px 10px 1px var(--goappily-primary-color, #05482f);
box-shadow: 0px 0px 10px 1px var(--goappily-primary-color, #05482f);
}

.goappily-auth-social {
margin-bottom: 16px;
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}

.goappily-auth-social-btn {
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 8px 14px;
font-size: 13px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
border: 1px solid #d1d5db;
background: #ffffff;
color: #111827;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.goappily-auth-social-btn:hover {
background: #f3f4f6;
border-color: #cbd5f5;
}

.goappily-auth-social-btn.goappily-apple {
border-color: #111827;
color: #111827;
}

.goappily-auth-social-btn.goappily-apple:hover {
background: #111827;
color: #ffffff;
}

.goappily-auth-social-btn.goappily-google {
border-color: #d1d5db;
}

.goappily-auth-social-btn.goappily-facebook {
border-color: #1d4ed8;
color: #1d4ed8;
}

.goappily-auth-social-btn.goappily-facebook:hover {
background: #1d4ed8;
color: #ffffff;
}

.goappily-auth-divider {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
margin-top: 4px;
}

.goappily-auth-divider::before,
.goappily-auth-divider::after {
content: "";
flex: 1;
height: 1px;
background: #e5e7eb;
}

.goappily-auth-divider span {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #6b7280;
}

.goappily-auth-errors {
background: var(--goappily-primary-color, #05482f);
border-radius: 10px;
padding: 10px 12px;
margin-bottom: 14px;
font-size: 13px;
color: #ffffff;
}

.goappily-auth-errors p {
margin: 0;
}

.goappily-auth-forms {
position: relative;
}

.goappily-auth-form {
display: none;
}

.goappily-auth-form.active {
display: block;
}

.goappily-auth-form h3 {
margin: 0 0 12px;
font-size: 18px;
font-weight: 600;
color: #111827;
}

.goappily-auth-form label {
display: block;
margin-bottom: 10px;
font-size: 13px;
color: #374151;
}

/* Registration form: two-column layout */
.goappily-auth-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 14px;
}

.goappily-auth-grid label {
margin-bottom: 0;
}

.goappily-auth-form label span {
display: block;
margin-bottom: 3px;
}

.goappily-auth-form input[type="text"],
.goappily-auth-form input[type="email"],
.goappily-auth-form input[type="password"],
.goappily-auth-form input[type="tel"] {
width: 100%;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #d1d5db;
padding: 8px 10px;
font-size: 14px;
background: #ffffff;
}

.goappily-auth-submit {
width: 180px;
margin-top: 10px;
border-radius: 999px;
border: none;
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
background: var(--goappily-primary-color, #05482f);
color: #ffffff;
cursor: pointer;
-webkit-box-shadow: 0px 0px 10px 1px var(--goappily-primary-color, #05482f);
box-shadow: 0px 0px 10px 1px var(--goappily-primary-color, #05482f);
transition: background 0.15s ease, box-shadow 0.15s ease;
}

.goappily-auth-submit:hover {
    background: var(--goappily-secondary-color, #7fb33f); /* secondary */
    box-shadow: 0 10px 22px rgba(5, 72, 47, 0.6); /* primary shadow */
}

.goappily-auth-extra-links {
margin-top: 8px;
font-size: 12px;
}

.goappily-auth-extra-links a {
color: var(--goappily-primary-color, #05482f);
text-decoration: none;
}

.goappily-auth-extra-links a:hover {
text-decoration: underline;
}

/* Mobile */

@media (max-width: 800px) {
.goappily-auth-card {
grid-template-columns: 1fr;
}

/* Collapse registration grid on small screens */
.goappily-auth-grid {
grid-template-columns: 1fr;
}

.goappily-auth-left {
    text-align: center;
    align-items: center;
}

.goappily-auth-logo img {
    margin-left: auto;
    margin-right: auto;
}


}

/* Password show/hide toggle */
.goappily-password-field{
    position: relative;
    width: 100%;
}
.goappily-password-field input[type="password"],
.goappily-password-field input[type="text"]{
    padding-right: 44px;
}
.goappily-toggle-password{
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    opacity: 0.65;
    display: flex;
    align-items: center;
    justify-content: center;
}
.goappily-toggle-password:hover{ opacity: 1; }

.goappily-toggle-password i{ font-size: 16px; color: #666; }
.goappily-toggle-password:hover i{ color: #2f7d32; }

.goappily-honeypot-field {
position: absolute !important;
left: -9999px !important;
opacity: 0 !important;
pointer-events: none !important;
height: 0 !important;
overflow: hidden !important;
}