/* =========================================================
   WhatsApp CRM — Sign In Page
   ========================================================= */

:root {
    --wa-green: #25D366;
    --wa-green-dark: #1DA851;
    --wa-green-darker: #128C4A;
    --panel-bg: #0B1F17;
    --panel-bg-2: #0E2A1E;
    --text-muted: #9FB8AC;
    --card-radius: 20px;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #F4F6F5;
    color: #1a1a1a;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

input[type="number"] {
    width: 200px;
    padding: 10px;
    font-size: 16px;
        /* Firefox */
    -moz-appearance: textfield;
    appearance: textfield;
}
    /* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--wa-green);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

.auth-wrapper {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.auth-row {
    height: 100%;
}

/* =========================================================
   LEFT PANEL
   ========================================================= */

.left-panel {
    position: relative;
    background-color: var(--panel-bg);
    background-image:
        radial-gradient(circle at 15% 15%, rgba(37, 211, 102, 0.10) 0%, rgba(37, 211, 102, 0) 40%),
        linear-gradient(160deg, rgba(11, 31, 23, 0.95) 0%, rgba(10, 41, 27, 0.92) 55%, rgba(11, 31, 23, 0.97) 100%),
        url('https://bot.kotfumes.com/assets/images/background_1.webp');
    background-size: cover;
    background-position: center;
    overflow: hidden;
    height: 100%;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
}

.left-panel::before,
.left-panel::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.left-panel::before {
    width: 520px;
    height: 520px;
    right: -180px;
    top: 45%;
    transform: translateY(-50%);
    background: radial-gradient(circle at center, rgba(37, 211, 102, 0.14) 0%, rgba(37, 211, 102, 0) 70%);
}

.left-panel::after {
    width: 260px;
    height: 260px;
    left: -100px;
    bottom: -80px;
    background: radial-gradient(circle at center, rgba(37, 211, 102, 0.10) 0%, rgba(37, 211, 102, 0) 70%);
}

.left-panel-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 620px;
    height: 100%;
    padding: clamp(1.5rem, 5vh, 3.5rem) clamp(1.75rem, 3.5vw, 3.75rem);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(0.75rem, 2.3vh, 2rem);
}

/* Brand / logo — full lockup image (icon + wordmark), shown at its
   natural aspect ratio, not cropped or stretched. Sized off the
   viewport height so it can go bigger without ever forcing a scroll. */
.brand-logo-full {
    height: clamp(70px, 11.5vh, 120px);
    width: auto;
    max-width: 250px;
    object-fit: contain;
}

/* On the light card background the dark-panel version of the logo
   needs a touch more room to stay legible. */
.brand-logo-full-dark {
    height: clamp(56px, 9.5vh, 120px);
}

.brand-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.brand-text-dark {
    font-size: 1.35rem;
    font-weight: 800;
    color: #14251d;
    letter-spacing: -0.02em;
}

.brand-accent {
    color: var(--wa-green);
}

/* Headline */
.headline {
    font-size: clamp(1.7rem, 4.4vh, 3.25rem);
    font-weight: 800;
    line-height: 1.16;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
}

.subtext {
    font-size: clamp(0.9rem, 2.1vh, 1.2rem);
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 480px;
    margin: 0;
}

/* Feature list */
.feature-list {
    display: flex;
    flex-direction: column;
    gap: clamp(0.7rem, 2.1vh, 1.6rem);
}

.feature-item {
    gap: 1rem;
    align-items: flex-start;
}

.feature-icon {
    flex: 0 0 auto;
    width: clamp(36px, 4.8vh, 54px);
    height: clamp(36px, 4.8vh, 54px);
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(37, 211, 102, 0.18), rgba(37, 211, 102, 0.06));
    border: 1px solid rgba(37, 211, 102, 0.28);
    box-shadow: 0 4px 12px -4px rgba(37, 211, 102, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wa-green);
    margin-top: 0.05rem;
}

.feature-icon svg {
    width: 62%;
    height: 62%;
}

.feature-title {
    font-size: clamp(0.92rem, 2vh, 1.2rem);
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.2rem;
}

.feature-desc {
    font-size: clamp(0.8rem, 1.7vh, 1.02rem);
    line-height: 1.45;
    color: var(--text-muted);
    max-width: 420px;
    margin: 0;
}

.copyright {
    font-size: clamp(0.78rem, 1.4vh, 0.92rem);
    color: rgba(159, 184, 172, 0.7);
    margin: 0;
}

/* =========================================================
   RIGHT PANEL
   ========================================================= */

.right-panel {
    background-color: #F4F6F5;
    padding: clamp(1rem, 4vh, 3.5rem) 1.5rem;
    height: 100%;
    overflow: hidden;
}

.form-card {
    width: 100%;
    max-width: 480px;
    max-height: 100%;
    overflow-y: visible;
    background: #ffffff;
    border: 1px solid rgba(15, 40, 28, 0.06);
    border-radius: var(--card-radius);
    padding: clamp(1.5rem, 4.4vh, 3.25rem) clamp(1.5rem, 3.4vw, 3.25rem);
    box-shadow: 0 30px 60px -25px rgba(15, 40, 28, 0.22), 0 8px 20px -12px rgba(15, 40, 28, 0.10);
}

/* Compact variant — used for longer forms (e.g. registration) so all
   fields fit inside the viewport with no scrolling, by shrinking the
   logo, title and vertical rhythm more aggressively than the default
   form-card spacing. */
.form-card.form-compact {
    padding: clamp(1rem, 3vh, 2rem) clamp(1.25rem, 3vw, 2.5rem);
}

.form-card.form-compact .welcome-logo {
    height: clamp(38px, 6vh, 64px);
    margin-bottom: 0.35rem;
}

.form-card.form-compact .welcome-title {
    font-size: clamp(1.05rem, 2.3vh, 1.45rem);
    margin-bottom: 0.1rem;
}

.form-card.form-compact .welcome-sub {
    font-size: clamp(0.78rem, 1.5vh, 0.95rem);
}

.form-card.form-compact .field-label {
    font-size: clamp(0.78rem, 1.4vh, 0.92rem);
    margin-bottom: 0.25rem;
}

.form-card.form-compact .custom-input {
    padding: clamp(0.35rem, 1.1vh, 0.65rem) 0.85rem;
    font-size: clamp(0.85rem, 1.5vh, 0.98rem);
}

.form-card.form-compact .mb-4 {
    margin-bottom: clamp(0.4rem, 1.3vh, 1rem) !important;
}

.form-card.form-compact .mb-3 {
    margin-bottom: clamp(0.35rem, 1vh, 0.85rem) !important;
}

.form-card.form-compact .mb-2 {
    margin-bottom: clamp(0.25rem, 0.8vh, 0.6rem) !important;
}

.form-card.form-compact .btn-signin {
    padding: clamp(0.45rem, 1.4vh, 0.8rem) 1rem;
    font-size: clamp(0.9rem, 1.6vh, 1.05rem);
}

.form-card::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* Full logo shown above "Welcome Back", natural aspect ratio, scaled
   with viewport height so it stays large without ever forcing scroll. */
.welcome-logo {
    height: clamp(60px, 10.5vh, 110px);
    width: auto;
    max-width: 250px;
    object-fit: contain;
}

.welcome-title {
    font-size: clamp(1.3rem, 3.3vh, 1.9rem);
    font-weight: 800;
    color: #14251d;
    letter-spacing: -0.01em;
    margin: 0 0 0.25rem;
}

.welcome-sub {
    font-size: clamp(0.85rem, 1.9vh, 1.08rem);
    color: #6b7d75;
}

/* Form fields */
.field-label {
    font-size: clamp(0.85rem, 1.7vh, 1.02rem);
    font-weight: 600;
    color: #24352c;
    margin-bottom: 0.45rem;
}

.custom-input-group {
    border: 1.5px solid #E3E8E6;
    border-radius: 10px;
    overflow: hidden;
    background: #FAFBFA;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.custom-input-group:focus-within {
    border-color: var(--wa-green);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.12);
}

.custom-input {
    border: none;
    padding: clamp(0.5rem, 1.7vh, 0.95rem) 0.95rem;
    font-size: clamp(0.92rem, 1.8vh, 1.08rem);
    color: #14251d;
    background: transparent;
}

.custom-input:focus {
    box-shadow: none;
    outline: none;
    background: transparent;
}

.custom-input::placeholder {
    color: #A6B2AC;
}

.custom-input-icon {
    background: transparent;
    border: none;
    color: #8B9A93;
}

.toggle-password {
    cursor: pointer;
}

.toggle-password.active {
    color: var(--wa-green-dark);
}

.forgot-link {
    font-size: clamp(0.85rem, 1.6vh, 1rem);
    font-weight: 600;
    color: var(--wa-green-dark);
    text-decoration: none;
}

.forgot-link:hover {
    text-decoration: underline;
}

/* Sign in button */
.btn-signin {
    background: linear-gradient(135deg, var(--wa-green) 0%, var(--wa-green-dark) 100%);
    border: none;
    color: #ffffff;
    font-weight: 700;
    font-size: clamp(0.98rem, 1.9vh, 1.15rem);
    padding: clamp(0.55rem, 1.8vh, 1rem) 1rem;
    border-radius: 10px;
    box-shadow: 0 10px 20px -8px rgba(29, 168, 81, 0.55);
    transition: box-shadow 0.15s ease, transform 0.12s ease, filter 0.15s ease;
}

.btn-signin:hover {
    filter: brightness(1.04);
    color: #ffffff;
    box-shadow: 0 12px 24px -8px rgba(29, 168, 81, 0.6);
    transform: translateY(-1px);
}

.btn-signin:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px -8px rgba(29, 168, 81, 0.5);
}

/* Divider */
.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #9AA6A0;
    font-size: clamp(0.82rem, 1.5vh, 0.98rem);
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #E3E8E6;
}

.divider span {
    padding: 0 0.9rem;
}

/* Google button */
.btn-google {
    background: #ffffff;
    border: 1.5px solid #E3E8E6;
    color: #24352c;
    font-weight: 600;
    font-size: clamp(0.92rem, 1.7vh, 1.08rem);
    padding: clamp(0.5rem, 1.7vh, 0.95rem) 1rem;
    border-radius: 10px;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.btn-google:hover {
    background: #F7F9F8;
    border-color: #D3DAD7;
    box-shadow: 0 6px 16px -10px rgba(15, 40, 28, 0.35);
    transform: translateY(-1px);
}

/* Sign up text */
.signup-text {
    font-size: clamp(0.88rem, 1.6vh, 1.02rem);
    color: #6b7d75;
}

.signup-link {
    color: var(--wa-green-dark);
    font-weight: 700;
    text-decoration: none;
}

.signup-link:hover {
    text-decoration: underline;
}

/* Compact, viewport-aware vertical rhythm for the form — overrides
   Bootstrap's fixed rem spacing utilities so the whole card always
   fits within the viewport height without needing to scroll, while
   growing to fill taller viewports instead of leaving dead space. */
.form-card .mb-4 {
    margin-bottom: clamp(0.6rem, 2.2vh, 2rem) !important;
}

.form-card .mb-3 {
    margin-bottom: clamp(0.5rem, 1.8vh, 1.5rem) !important;
}

.form-card .mb-2 {
    margin-bottom: clamp(0.35rem, 1.2vh, 0.75rem) !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {
    .right-panel {
        height: 100%;
        background:
            linear-gradient(180deg, rgba(11, 31, 23, 0.04) 0%, rgba(11, 31, 23, 0) 220px),
            #F4F6F5;
    }

    .form-card {
        box-shadow: 0 12px 30px -12px rgba(15, 40, 28, 0.14);
    }
}

@media (max-width: 575.98px) {
    .right-panel {
        padding: 1rem 1rem;
    }

    .form-card {
        padding: clamp(1.25rem, 3.5vh, 1.75rem) 1.25rem;
        border-radius: 16px;
    }

    .welcome-title {
        font-size: clamp(1.1rem, 4vh, 1.35rem);
    }

    .welcome-logo {
        height: clamp(48px, 9vh, 72px);
    }

    .brand-logo-full-dark {
        height: clamp(38px, 7vh, 56px);
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .left-panel-content {
        padding: clamp(1.25rem, 4vh, 2.25rem) 2.25rem;
    }
}


/* =========================================================
   MOBILE NUMBER + COUNTRY CODE
   ========================================================= */

.mobile-number-group {
    display: flex;
    align-items: stretch;
}

.country-code-select {
    flex: 0 0 105px;
    width: 105px;

    border: none;
    border-right: 1px solid #E3E8E6;
    border-radius: 0;

    padding: clamp(0.5rem, 1.7vh, 0.95rem) 0.65rem;

    font-size: clamp(0.85rem, 1.7vh, 1rem);
    font-weight: 600;
    color: #24352c;

    background-color: transparent;
    box-shadow: none;

    cursor: pointer;
}

.country-code-select:focus {
    border-color: #E3E8E6;
    box-shadow: none;
    outline: none;
}

.mobile-number-input {
    min-width: 0;
    flex: 1 1 auto;
}


/* Mobile */
@media (max-width: 575.98px) {

    .country-code-select {
        flex-basis: 92px;
        width: 92px;

        padding-left: 0.55rem;
        padding-right: 0.4rem;
    }

}