/* ============================================
   BeeTravel - Auth Pages
   Premium Luxury Hotel Experience
   ============================================ */

/* ============================================
   CSS Custom Properties
   ============================================ */
:root {
    --bee-primary:       #F59E0B;
    --bee-primary-dark:  #D97706;
    --bee-primary-light: #FCD34D;
    --bee-accent:        #F97316;
    --bee-dark:          #1E293B;
    --bee-darker:        #0F172A;
    --bee-gray:          #64748B;
    --bee-light:         #F8FAFC;
    --bee-border:        #E2E8F0;
    --bee-radius:        16px;
    --bee-shadow:        0 1px 3px rgba(0,0,0,.06), 0 4px 6px rgba(0,0,0,.04);
    --bee-shadow-lg:     0 10px 15px -3px rgba(0,0,0,.08), 0 20px 25px -5px rgba(0,0,0,.04);
    --bee-transition:    all .25s cubic-bezier(.4, 0, .2, 1);
}

/* ============================================
   Keyframe Animations
   ============================================ */

/* Animated mesh gradient motion for hero panel */
@keyframes heroGlow {
    0%   { transform: translate(0%, 0%) scale(1); opacity: 1; }
    33%  { transform: translate(-3%, 2%) scale(1.06); opacity: .85; }
    66%  { transform: translate(2%, -3%) scale(1.03); opacity: .9; }
    100% { transform: translate(-1%, 1%) scale(1.08); opacity: 1; }
}

/* Floating animation for decorative circles */
@keyframes floatDecor {
    0%   { transform: translateY(0px) rotate(0deg); }
    25%  { transform: translateY(-14px) rotate(8deg); }
    50%  { transform: translateY(-6px) rotate(16deg); }
    75%  { transform: translateY(-20px) rotate(6deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

/* Secondary float with opposite phase */
@keyframes floatDecorAlt {
    0%   { transform: translateY(0px) rotate(0deg) scale(1); }
    30%  { transform: translateY(18px) rotate(-10deg) scale(1.04); }
    60%  { transform: translateY(8px) rotate(-18deg) scale(.97); }
    100% { transform: translateY(0px) rotate(0deg) scale(1); }
}

/* Form panel entrance from right */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(32px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Button shimmer sweep */
@keyframes shimmerBtn {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* Subtle pulse for feature icons */
@keyframes pulseIcon {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
    50%       { box-shadow: 0 0 0 6px rgba(245, 158, 11, .12); }
}

/* ============================================
   Base - Auth Body
   ============================================ */
.auth-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--bee-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Split Layout - Auth Wrapper
   ============================================ */
.auth-wrapper {
    display: flex;
    min-height: 100vh;
    position: relative;
}

/* ============================================
   Hero Panel - Left Side
   ============================================ */
.auth-hero {
    flex: 1;
    background: linear-gradient(
        145deg,
        var(--bee-darker) 0%,
        #12172b 30%,
        #1a1f3a 60%,
        var(--bee-dark) 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3.5rem 3rem;
    position: relative;
    overflow: hidden;
}

/* Animated mesh gradient overlay */
.auth-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 25% 45%, rgba(245, 158, 11, .18) 0%, transparent 55%),
        radial-gradient(ellipse 60% 70% at 75% 75%, rgba(249, 115, 22, .12) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 60% 20%, rgba(252, 211, 77, .08) 0%, transparent 45%);
    animation: heroGlow 10s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

/* Subtle noise texture overlay */
.auth-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.03'/%3E%3C/svg%3E");
    background-size: 256px 256px;
    opacity: .4;
    pointer-events: none;
    z-index: 0;
}

/* ============================================
   Hero Content
   ============================================ */
.auth-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 440px;
    width: 100%;
}

.auth-hero-logo-img {
    max-width: 300px;
    width: 100%;
    height: auto;
    margin-bottom: 1.75rem;
    border-radius: 18px;
    filter: drop-shadow(0 12px 32px rgba(0, 0, 0, .4)) drop-shadow(0 4px 8px rgba(0, 0, 0, .2));
    transition: filter .4s ease;
}

.auth-hero-logo-img:hover {
    filter: drop-shadow(0 16px 40px rgba(245, 158, 11, .25)) drop-shadow(0 4px 8px rgba(0, 0, 0, .2));
}

.auth-hero-logo {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(245, 158, 11, .3));
}

.auth-hero-title {
    font-size: 2.6rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: .6rem;
    letter-spacing: -0.75px;
    line-height: 1.15;
}

.auth-hero-title span {
    background: linear-gradient(
        135deg,
        var(--bee-primary-light) 0%,
        var(--bee-primary) 40%,
        var(--bee-accent) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.auth-hero-subtitle {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, .55);
    font-weight: 300;
    line-height: 1.7;
    margin-bottom: 2.5rem;
    letter-spacing: .01em;
}

/* ============================================
   Hero Features List
   ============================================ */
.auth-hero-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.auth-hero-features li {
    color: rgba(255, 255, 255, .72);
    font-size: .925rem;
    padding: .65rem 0;
    display: flex;
    align-items: center;
    gap: .875rem;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    transition: color .2s ease;
}

.auth-hero-features li:last-child {
    border-bottom: none;
}

.auth-hero-features li:hover {
    color: rgba(255, 255, 255, .92);
}

.auth-hero-features li .feature-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(245, 158, 11, .14);
    border: 1px solid rgba(245, 158, 11, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    transition: var(--bee-transition);
    animation: pulseIcon 3s ease-in-out infinite;
}

.auth-hero-features li:nth-child(2) .feature-icon {
    animation-delay: 1s;
}

.auth-hero-features li:nth-child(3) .feature-icon {
    animation-delay: 2s;
}

.auth-hero-features li:hover .feature-icon {
    background: rgba(245, 158, 11, .26);
    border-color: rgba(245, 158, 11, .4);
    transform: scale(1.08);
}

/* ============================================
   Decorative Floating Circles
   ============================================ */
.auth-hero-decor {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.auth-hero-decor-1 {
    width: 360px;
    height: 360px;
    top: -100px;
    right: -110px;
    background: radial-gradient(circle, rgba(245, 158, 11, .12) 0%, rgba(249, 115, 22, .06) 50%, transparent 70%);
    border: 1px solid rgba(245, 158, 11, .08);
    animation: floatDecor 9s ease-in-out infinite;
}

.auth-hero-decor-2 {
    width: 240px;
    height: 240px;
    bottom: -70px;
    left: -55px;
    background: radial-gradient(circle, rgba(249, 115, 22, .1) 0%, rgba(245, 158, 11, .05) 50%, transparent 70%);
    border: 1px solid rgba(249, 115, 22, .08);
    animation: floatDecorAlt 12s ease-in-out infinite;
}

/* ============================================
   Form Panel - Right Side
   ============================================ */
.auth-form-panel {
    flex: 0 0 520px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3.5rem 3rem;
    background: #ffffff;
    position: relative;
    box-shadow: -8px 0 40px rgba(0, 0, 0, .06);
    animation: fadeInRight .55s cubic-bezier(.4, 0, .2, 1) both;
}

/* Subtle top accent line */
.auth-form-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--bee-primary), var(--bee-accent), var(--bee-primary-light));
    background-size: 200% auto;
    animation: shimmerBtn 4s linear infinite;
}

/* ============================================
   Form Inner Container
   ============================================ */
.auth-form-inner {
    max-width: 390px;
    width: 100%;
    margin: 0 auto;
}

/* ============================================
   Form Header
   ============================================ */
.auth-form-header {
    margin-bottom: 2rem;
}

.auth-form-header h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--bee-darker);
    margin-bottom: .4rem;
    letter-spacing: -.5px;
    line-height: 1.2;
}

.auth-form-header p {
    color: var(--bee-gray);
    font-size: .95rem;
    margin: 0;
    line-height: 1.55;
}

/* ============================================
   Form Groups & Labels
   ============================================ */
.auth-form .form-group {
    margin-bottom: 1.25rem;
}

.auth-form .form-group label {
    display: block;
    font-size: .84rem;
    font-weight: 600;
    color: var(--bee-dark);
    margin-bottom: .45rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* ============================================
   Input Wrapper & Icons
   ============================================ */
.auth-form .input-wrapper {
    position: relative;
}

.auth-form .input-wrapper .input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bee-gray);
    font-size: .95rem;
    pointer-events: none;
    z-index: 2;
    transition: color .2s ease;
}

/* Icon color change on sibling input focus */
.auth-form .input-wrapper:focus-within .input-icon {
    color: var(--bee-primary-dark);
}

/* ============================================
   Form Controls (Inputs)
   ============================================ */
.auth-form .form-control {
    height: 48px;
    padding: .625rem .875rem .625rem 2.875rem;
    border: 1.5px solid var(--bee-border);
    border-radius: var(--bee-radius);
    font-size: .95rem;
    font-family: inherit;
    color: var(--bee-darker);
    background: var(--bee-light);
    width: 100%;
    box-sizing: border-box;
    transition:
        border-color .22s cubic-bezier(.4, 0, .2, 1),
        box-shadow   .22s cubic-bezier(.4, 0, .2, 1),
        background   .22s cubic-bezier(.4, 0, .2, 1);
    -webkit-appearance: none;
    appearance: none;
}

.auth-form .form-control::placeholder {
    color: #a0aec0;
    font-weight: 400;
}

.auth-form .form-control:hover:not(:focus) {
    border-color: #cbd5e1;
    background: #fff;
}

.auth-form .form-control:focus {
    border-color: var(--bee-primary);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, .12), 0 1px 3px rgba(0, 0, 0, .06);
    background: #ffffff;
    outline: none;
}

.auth-form .form-control.is-invalid {
    border-color: #EF4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .08);
}

.auth-form .form-control.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .12);
}

.auth-form .invalid-feedback {
    font-size: .8rem;
    color: #EF4444;
    margin-top: .35rem;
    display: block;
}

/* ============================================
   Password Toggle Button
   ============================================ */
.auth-form .password-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--bee-gray);
    cursor: pointer;
    padding: 4px;
    font-size: 1rem;
    z-index: 2;
    border-radius: 6px;
    transition: color .18s ease, background .18s ease;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-form .password-toggle:hover {
    color: var(--bee-dark);
    background: rgba(100, 116, 139, .1);
}

.auth-form .password-toggle:focus-visible {
    outline: 2px solid var(--bee-primary);
    outline-offset: 2px;
}

/* ============================================
   Checkbox Styles
   ============================================ */
.auth-form .form-check {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.auth-form .form-check-input {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--bee-border);
    margin-top: 0;
    flex-shrink: 0;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    background: var(--bee-light);
}

.auth-form .form-check-input:hover {
    border-color: var(--bee-primary);
}

.auth-form .form-check-input:checked {
    background-color: var(--bee-primary);
    border-color: var(--bee-primary);
}

.auth-form .form-check-input:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.auth-form .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .2);
    outline: none;
}

.auth-form .form-check-label {
    font-size: .875rem;
    color: var(--bee-gray);
    cursor: pointer;
    line-height: 1.4;
    user-select: none;
}

/* ============================================
   Remember / Forgot Row
   ============================================ */
.auth-form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: .5rem;
}

.auth-form-options .forgot-link {
    font-size: .85rem;
    color: var(--bee-primary-dark);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .01em;
    transition: color .18s ease;
    white-space: nowrap;
}

.auth-form-options .forgot-link:hover {
    color: var(--bee-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ============================================
   Submit Button - Auth Btn
   ============================================ */
.auth-btn {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: var(--bee-radius);
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: .02em;
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(
        135deg,
        var(--bee-primary) 0%,
        var(--bee-accent) 100%
    );
    box-shadow:
        0 4px 14px rgba(245, 158, 11, .38),
        0 1px 3px rgba(0, 0, 0, .08);
    transition:
        transform     .22s cubic-bezier(.4, 0, .2, 1),
        box-shadow    .22s cubic-bezier(.4, 0, .2, 1),
        filter        .22s cubic-bezier(.4, 0, .2, 1);
}

/* Shimmer sweep overlay */
.auth-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255, 255, 255, .28) 50%,
        transparent 65%
    );
    background-size: 250% auto;
    background-position: -200% center;
    transition: none;
}

.auth-btn:hover::before {
    animation: shimmerBtn .7s ease forwards;
}

.auth-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(245, 158, 11, .48),
        0 3px 8px rgba(0, 0, 0, .1);
    filter: brightness(1.04);
}

.auth-btn:active {
    transform: translateY(0px);
    box-shadow:
        0 2px 8px rgba(245, 158, 11, .3),
        0 1px 3px rgba(0, 0, 0, .06);
    filter: brightness(.97);
    transition-duration: .08s;
}

.auth-btn:focus-visible {
    outline: 3px solid var(--bee-primary-light);
    outline-offset: 3px;
}

.auth-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 8px rgba(245, 158, 11, .2);
}

/* ============================================
   Divider - "oppure"
   ============================================ */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    color: var(--bee-gray);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--bee-border) 30%,
        var(--bee-border) 70%,
        transparent
    );
}

/* ============================================
   Form Footer - Links Below Form
   ============================================ */
.auth-form-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: .9rem;
    color: var(--bee-gray);
    line-height: 1.6;
}

.auth-form-footer a {
    color: var(--bee-primary-dark);
    text-decoration: none;
    font-weight: 700;
    transition: color .18s ease;
    text-underline-offset: 3px;
}

.auth-form-footer a:hover {
    color: var(--bee-accent);
    text-decoration: underline;
}

/* ============================================
   Alert Override
   ============================================ */
.auth-form .alert {
    border-radius: var(--bee-radius);
    font-size: .875rem;
    border: none;
    padding: .875rem 1rem;
    margin-bottom: 1.25rem;
}

.auth-form .alert-danger {
    background: rgba(239, 68, 68, .08);
    color: #b91c1c;
    border-left: 3px solid #EF4444;
}

.auth-form .alert-success {
    background: rgba(16, 185, 129, .08);
    color: #065f46;
    border-left: 3px solid #10b981;
}

.auth-form .alert-warning {
    background: rgba(245, 158, 11, .1);
    color: #92400e;
    border-left: 3px solid var(--bee-primary);
}

/* ============================================
   Responsive - Tablet (≤ 991.98px)
   ============================================ */
@media (max-width: 991.98px) {
    .auth-wrapper {
        flex-direction: column;
    }

    .auth-hero {
        flex: none;
        min-height: 290px;
        padding: 2.25rem 2rem;
    }

    .auth-hero::before {
        animation-duration: 14s;
    }

    .auth-hero-logo-img {
        max-width: 220px;
        margin-bottom: 1.25rem;
    }

    .auth-hero-title {
        font-size: 2.1rem;
    }

    .auth-hero-subtitle {
        font-size: 1rem;
        margin-bottom: 0;
    }

    .auth-hero-features {
        display: none;
    }

    .auth-hero-decor-1 {
        width: 260px;
        height: 260px;
        top: -70px;
        right: -70px;
    }

    .auth-hero-decor-2 {
        width: 160px;
        height: 160px;
        bottom: -50px;
        left: -35px;
    }

    .auth-form-panel {
        flex: 1;
        padding: 2.25rem 1.75rem;
        box-shadow: none;
        animation-duration: .4s;
    }

    .auth-form-panel::before {
        display: none;
    }
}

/* ============================================
   Responsive - Mobile (≤ 575.98px)
   ============================================ */
@media (max-width: 575.98px) {
    .auth-hero {
        min-height: 210px;
        padding: 1.75rem 1.25rem;
    }

    .auth-hero-logo-img {
        max-width: 180px;
        margin-bottom: 1rem;
    }

    .auth-hero-logo {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .auth-hero-title {
        font-size: 1.6rem;
        letter-spacing: -.25px;
    }

    .auth-hero-subtitle {
        font-size: .88rem;
        margin-bottom: 0;
    }

    .auth-form-panel {
        padding: 1.75rem 1.25rem;
    }

    .auth-form-inner {
        max-width: 100%;
    }

    .auth-form-header {
        margin-bottom: 1.5rem;
    }

    .auth-form-header h1 {
        font-size: 1.55rem;
    }

    .auth-form-header p {
        font-size: .9rem;
    }

    .auth-form .form-control {
        height: 46px;
        font-size: .9rem;
    }

    .auth-btn {
        height: 48px;
        font-size: .97rem;
    }

    .auth-form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
    }

    .auth-form-footer {
        font-size: .875rem;
    }
}