/* Auth Page Styles */
.auth-container {
    display: flex;
    min-height: 100vh;
    font-family: 'Ubuntu', sans-serif;
}

/* Left Column - Branding Section */
.auth-left {
    flex: 1;
    background: linear-gradient(135deg, #083B66 0%, #0866C6 50%, #007C83 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../assets/login_banner.jpg?v=3') no-repeat;
    background-size: cover;
    background-position: center;
}

.auth-left-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    padding: 40px;
    max-width: 520px;
}

/* Logo */
.auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
}

.auth-logo img {
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.7));
}

.logo-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}

.logo-text {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 2px;
    color: white;
}

/* Welcome Section - Completely Unblurred, Crisp Photo with High-Contrast Text */
.welcome-section {
    margin-bottom: 70px;
}

.welcome-title {
    font-size: 46px;
    font-weight: 800;
    margin-bottom: 18px;
    color: #ffffff;
    letter-spacing: -0.5px;
    line-height: 1.25;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.95),
        0 4px 14px rgba(0, 0, 0, 0.85),
        0 0 25px rgba(0, 0, 0, 0.75);
}

.welcome-description {
    font-size: 17.5px;
    line-height: 1.65;
    font-weight: 600;
    color: #ffffff;
    max-width: 440px;
    margin: 0 auto;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.95),
        0 3px 10px rgba(0, 0, 0, 0.85),
        0 0 18px rgba(0, 0, 0, 0.75);
}

/* Login / registration panel (auth.php): "Welcome to" (white, regular)
   over "JobNest" (Kuwait teal, bold, underlined), centred. The mobile
   code steps keep the plain title above. */
.welcome-section--login .welcome-title {
    text-align: center;
    line-height: 1.15;
}

.welcome-section--login .welcome-title-lead {
    display: block;
    font-size: 40px;
    font-weight: 400;
    letter-spacing: 0;
}

/* the deep teal on the photo: thin light outline + dark shadow keep it
   readable on bright and dark areas (as the homepage's KUWAIT highlight) */
.welcome-section--login .welcome-title-brand {
    display: inline-block;
    margin-top: 4px;
    padding-bottom: 6px;
    font-size: 56px;
    font-weight: 800;
    color: #007C83;
    -webkit-text-stroke: 0.75px rgba(255, 255, 255, 0.85);
    text-shadow:
        1px 2px 3px rgba(0, 0, 0, 0.85),
        0 2px 8px rgba(0, 0, 0, 0.55),
        0 0 18px rgba(0, 0, 0, 0.5);
    border-bottom: 2px solid #007C83;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);   /* keeps the underline visible on dark photo areas */
}

.welcome-section--login .welcome-description {
    font-size: 17px;
    line-height: 1.7;
    font-weight: 500;
    text-align: center;
    text-wrap: balance;   /* even lines where it wraps (no lone last word) */
}

/* Tablets (side-by-side layout on a narrower half panel) */
@media (min-width: 769px) and (max-width: 1199px) {
    .welcome-section--login .welcome-title-lead { font-size: 32px; }
    .welcome-section--login .welcome-title-brand { font-size: 44px; }
    .welcome-section--login .welcome-description { font-size: 15px; max-width: 340px; }
    /* the half-width panel is too narrow for the desktop line break */
    .welcome-break { display: none; }
}

/* Business Person Graphic */
.business-graphic {
    position: relative;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.person-silhouette {
    position: relative; /* Important */
    width: 100%;
    height: 100%; /* Or set a specific height like 400px */
 }
 
 .person-silhouette img {
    position: absolute;
    bottom: 0;  /* Align to bottom */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    max-width: 100%;
    height: auto;
    object-fit: contain;
    z-index: 1;
 }

/* =========================================================
   Login / registration panel (auth.php): logo + welcome text at the top,
   the Kuwait photo below it so the text never covers the people.

   The photo (941x1672) is a layer placed from the space left under the
   text (.auth-photo-area, a size container): in it the man's head starts
   49.3% down, the woman's chin is at 69%, both heads span 30-94.5% of
   the width. It is scaled to fill the panel width, or larger to reach the
   bottom of a tall panel, but never so wide that a face is cut off, and
   moved so the heads start --photo-gap below the text (image cropped
   above them, behind the text = the sky) - or lower, when it has to
   reach the bottom. The area is at least tall enough for both faces, so
   on short or stacked layouts the text sits in its own band above them.
   The mobile code steps keep the plain photo background (.auth-left).
   ========================================================= */
.auth-left.auth-left--login {
    --photo-gap: 16px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    container-type: inline-size;
}

.auth-left.auth-left--login::before {
    display: none;   /* replaced by .auth-photo */
}

.auth-left--login .auth-left-content {
    flex: none;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 84px 32px 0;   /* clear of "Back to Home" */
}

.auth-left--login .auth-logo {
    margin-bottom: 28px;
}

.auth-left--login .welcome-section {
    margin-bottom: 0;
}

.auth-left--login .business-graphic {
    display: none;   /* empty spacer; the photo area takes its place */
}

.auth-photo-area {
    position: relative;
    z-index: 1;   /* below the text (.auth-left-content, 2) */
    flex: 1 1 0;
    /* from the top of the heads to the woman's chin at the narrowest
       scale (photo as wide as the panel): 0.205 x height = 0.364 x width */
    min-height: calc(var(--photo-gap) + 36.4cqw + 8px);
    container-type: size;
}

.auth-photo {
    /* heads and faces span 30-94.5% of the photo's width: keep that
       within 95% of the panel */
    --img-w: min(max(100cqw, 111cqh), 100cqw / 0.68);
    --img-h: calc(var(--img-w) * 1672 / 941);
    position: absolute;
    width: var(--img-w);
    height: var(--img-h);
    /* the faces' centre (62% across) on the panel centre, never leaving a gap */
    left: clamp(100cqw - var(--img-w), 50cqw - 0.6225 * var(--img-w), 0px);
    top: max(var(--photo-gap) - 0.493 * var(--img-h), 100cqh - var(--img-h));
    background: url('../assets/login_banner.jpg?v=3') center / 100% 100% no-repeat;
}

/* Tall, narrow panels, where the photo starts below the panel top: the
   photo's own top row of sky, stretched upward, fills the space above it
   so the sky continues without a seam */
.auth-photo::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% - 1px);
    height: 300vh;
    background: url('../assets/login_banner.jpg?v=3') center top / 100% 100000% no-repeat;
}

/* Stacked layout (phones, small tablets): the panel is as tall as the text
   plus the faces, instead of a fixed 260px / 220px banner */
@media (max-width: 768px) {
    .auth-left.auth-left--login {
        --photo-gap: 10px;
        height: auto;
        padding: 0;
    }

    .auth-left--login .auth-left-content {
        padding: 60px 20px 0;
    }

    .auth-left--login .auth-logo {
        margin-bottom: 12px;
    }
}

/* Right Column - Forms Section */
.auth-right {
    flex: 1;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.auth-form-container {
    width: 100%;
    max-width: 400px;
}

/* Tab Navigation */
.auth-tabs {
    display: flex;
    margin-bottom: 30px;
    border-bottom: 1px solid #e0e0e0;
}

.tab-btn {
    background: none;
    border: none;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.tab-btn.active {
    color: #083B66;
    font-weight: 600;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: #083B66;
    border-radius: 2px 2px 0 0;
}

.tab-btn:hover {
    color: #083B66;
}

/* Forms */
.auth-form {
    display: none;
}

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

.form-title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
}

.auth-form-content {
    width: 100%;
}

.form-group {
    margin-bottom: 20px;
}

.mobile-input-row {
    display: flex;
    width: 100%;
}

.mobile-country-code {
    flex: 0 0 140px;
    max-width: 140px;
}

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

.mobile-error {
    display: block;
    width: 100%;
    color: #dc3545;
}

.form-control {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s ease;
    background: white;
}

.form-control:focus {
    outline: none;
    border-color: #083B66;
    box-shadow: 0 0 0 3px rgba(8, 59, 102, 0.1);
}

.form-options {
    text-align: right;
    margin-bottom: 25px;
}

.forgot-password {
    color: #666;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.forgot-password:hover {
    color: #083B66;
    text-decoration: none;
}

/* Auth Button */
.auth-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(110deg, #0866C6 0%, #08749B 35%, #007C83 65%, #006B70 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 25px;
}

.auth-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(8, 59, 102, 0.3);
}

/* Login page: solid navy, same as the header's active tab / Dashboard button */
#loginSubmitBtn.auth-btn,
#registerSubmitBtn.auth-btn {
    background: #083B66;
    color: #fff;
}
#loginSubmitBtn.auth-btn:hover,
#loginSubmitBtn.auth-btn:focus,
#registerSubmitBtn.auth-btn:hover,
#registerSubmitBtn.auth-btn:focus {
    background: #062E50;
    color: #fff;
}

/* Divider */
.divider {
    text-align: center;
    margin: 25px 0;
    position: relative;
    color: #999;
    font-size: 14px;
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e0e0e0;
    z-index: 1;
}

.divider span {
    background: white;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* Social Login */
.social-login {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
}

.google-btn {
  background: conic-gradient(
    rgb(66,133,244),
    rgb(219,68,55),
    rgb(244,180,0),
    rgb(15,157,88),
    rgb(66,133,244)
  );
  color: white;            /* text color */
    border: 2px solid #e0e0e0;
}

.google-btn:hover {
    background: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.facebook-btn {
    background: #1877F2;
    color: white;
}

.facebook-btn:hover {
    background: #166FE5;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
}

.linkedin-btn {
    background: #0077B5;
    color: white;
}

.linkedin-btn:hover {
    background: #006BA1;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 119, 181, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .auth-container {
        flex-direction: column;
    }

    .auth-left {
        flex: none;
        min-height: 0;
        height: 260px;
        padding: 20px;
    }

    .auth-left-content {
        padding: 0;
    }

    .auth-logo {
        margin-bottom: 16px;
    }

    .auth-logo img {
        width: 110px !important;
    }

    .welcome-section {
        margin-bottom: 0;
    }

    .welcome-title {
        font-size: 26px;
        margin-bottom: 8px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 3px 8px rgba(0, 0, 0, 0.85);
    }

    .welcome-description {
        font-size: 14px;
        line-height: 1.5;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 3px 8px rgba(0, 0, 0, 0.85);
    }

    .welcome-section--login .welcome-title-lead { font-size: 22px; }

    .welcome-section--login .welcome-title-brand {
        margin-top: 2px;
        padding-bottom: 3px;
        font-size: 30px;
        -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.85);
    }

    .welcome-section--login .welcome-description {
        font-size: 14px;
        line-height: 1.55;
    }

    /* let the sentence wrap naturally on narrow screens */
    .welcome-break {
        display: none;
    }

    /* Empty decorative graphic — only adds inconsistent blank space on mobile */
    .business-graphic {
        display: none;
    }

    .auth-right {
        padding: 24px 20px 20px;
        flex: 1;
        align-items: flex-start;
    }

    .auth-form-container {
        max-width: 100%;
    }
    
    .tab-btn {
        padding: 12px 20px;
        font-size: 14px;
    }
    
    .form-title {
        font-size: 20px;
    }
    
    .form-control {
        padding: 12px 16px;
        font-size: 14px;
    }
    
    .auth-btn {
        padding: 12px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .auth-left {
        height: 220px;
        padding: 16px;
    }

    .auth-left-content {
        padding: 0;
    }

    .auth-logo {
        margin-bottom: 12px;
    }

    .auth-logo img {
        width: 90px !important;
    }

    .logo-text {
        font-size: 24px;
    }

    .welcome-title {
        font-size: 22px;
        margin-bottom: 4px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95);
    }

    .welcome-description {
        display: none;
    }

    .welcome-section--login .welcome-title-lead { font-size: 18px; }

    .welcome-section--login .welcome-title-brand { font-size: 25px; }

    /* the login panel keeps its short supporting line on small phones */
    .welcome-section--login .welcome-description {
        display: block;
        font-size: 12px;
        line-height: 1.5;
        max-width: 300px;
    }

    .auth-right {
        padding: 15px;
    }
    
    .tab-btn {
        padding: 10px 15px;
        font-size: 13px;
    }
    
    .form-title {
        font-size: 18px;
    }
    
    .social-btn {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
}

/* Ensure main wrapper can position absolute elements */
.auth-container {
    position: relative;
}

/* Styled Back to Home Button */
.btn-back-home {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
}

.btn-back-home:hover {
    background-color: #007bff;
    color: #ffffff;
    border-color: #007bff;
    transform: translateX(-3px);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.25);
}

/* Optional adjustment for small screens */
@media (max-width: 768px) {
    .btn-back-home {
        top: 12px;
        left: 12px;
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* Duplicate-registration alert (register form) */
.register-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 18px;
    padding: 14px 40px 14px 16px;
    position: relative;
    background: #FDECEC;
    border: 1px solid #F3B4B4;
    border-left: 4px solid #CE1126;
    border-radius: 8px;
    color: #7A1220;
    text-align: left;
    box-shadow: 0 2px 8px rgba(206, 17, 38, 0.08);
}
.register-alert[hidden] { display: none; }
.register-alert__icon {
    flex: 0 0 auto;
    font-size: 20px;
    color: #CE1126;
    margin-top: 2px;
}
.register-alert__body { flex: 1 1 auto; min-width: 0; }
.register-alert__title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #A50E1F;
    margin-bottom: 4px;
}
.register-alert__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.register-alert__close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: none;
    background: transparent;
    color: #A50E1F;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
}
.register-alert__close:hover,
.register-alert__close:focus-visible { color: #7A1220; }
@media (max-width: 480px) {
    .register-alert { padding: 12px 34px 12px 12px; gap: 10px; }
    .register-alert__title { font-size: 15px; }
    .register-alert__text { font-size: 13.5px; }
}