/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    font-family: 'Segoe UI', sans-serif;
    background-color: #FFFFFF;
    overflow: hidden;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.container {
    width: 100vw;
    height: 100vh;
    max-width: 1440px;
    max-height: 1024px;
    position: relative;
    margin: 0 auto;
    background-color: #FFFFFF;
    overflow: hidden;
}

/* Site Icon */
.site-icon {
    position: absolute;
    left: 14.4%; /* 207/1440 = 14.4% */
    top: 25.6%;  /* 262/1024 = 25.6% */
    width: 34.7%; /* 500/1440 = 34.7% */
    height: 48.8%; /* 500/1024 = 48.8% */
    max-width: 500px;
    max-height: 500px;
    /* Ensure proper centering for smaller screens */
    box-sizing: border-box;
}

.site-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Site Title */
.site-title {
    position: absolute;
    left: 49.1%; /* 707/1440 = 49.1% */
    top: 45.2%;  /* 463/1024 = 45.2% */
    width: 36.5%; /* 525/1440 = 36.5% */
    height: 9.5%;  /* 97/1024 = 9.5% */
    max-width: 525px;
    max-height: 97px;
}

.site-title img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Site Catch */
.site-catch {
    position: absolute;
    left: 58.1%; /* 836/1440 = 58.1% */
    top: 57.4%;  /* 588/1024 = 57.4% */
    width: 31.0%; /* 447/1440 = 31.0% */
    height: 2.3%;  /* 24/1024 = 2.3% */
    max-width: 447px;
    max-height: 24px;
}

.site-catch img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Search Bar */
.search-bar {
    position: absolute;
    left: 50%; /* 720/1440 = 50% */
    top: 64.5%;  /* 661/1024 = 64.5% */
    transform: translateX(-50%);
    width: 34.7%; /* 500/1440 = 34.7% */
    height: 4.9%;  /* 50/1024 = 4.9% */
    max-width: 500px;
    max-height: 50px;
    min-width: 300px;
    min-height: 40px;
}

.search-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.search-input {
    width: 100%;
    height: 100%;
    border: none;
    background-color: #F2F2F2;
    border-radius: 100px;
    padding-left: 24px;
    padding-right: 50px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 13px;
    color: #000000;
    outline: none;
}

.search-input::placeholder {
    color: #B7B7B7;
    font-size: 13px;
}

.search-icon {
    position: absolute;
    right: 13px; /* Figma: position from right */
    top: 50%;   /* Center vertically */
    transform: translateY(-50%);
    width: 24px;  /* Figma: width: 24 */
    height: 24px; /* Figma: height: 24 */
    pointer-events: none;
}

/* User Not Found Message */
.user-not-found {
    position: absolute;
    left: 50%; /* Center horizontally with search bar */
    top: 70.5%;  /* Search bar ends at ~69.4%, so place slightly below */
    transform: translateX(-50%);
    width: 34.7%; /* Same width as search bar */
    max-width: 500px; /* Same max-width as search bar */
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    color: #B11313;
    text-align: left; /* Align to left instead of center */
    line-height: 1.33;
    padding-left: 15px; /* Add some padding to align with search input */
    display: none; /* Hidden by default */
}

/* Footer */
.footer {
    position: absolute;
    left: 0;
    bottom: 0; /* Position at bottom instead of fixed top */
    width: 100%;
    height: 4.9%; /* 50/1024 = 4.9% */
    max-height: 50px;
    min-height: 40px;
    background-color: #838383;
}

.footer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Responsive Design */
/* Medium screens (tablets) */
@media (max-width: 768px) {
    .container {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    
    .site-icon {
        position: absolute;
        top: 15%;
        width: 30vw;
        height: 30vw;
        max-width: 280px;
        max-height: 280px;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
    }
    
    .site-title {
        position: absolute;
        top: 42%;
        width: 50vw;
        height: 8vh;
        max-width: 350px;
        max-height: 65px;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
    }
    
    .site-catch {
        position: absolute;
        top: 54%;
        width: 60vw;
        height: 3vh;
        max-width: 380px;
        max-height: 20px;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
    }
    
    .search-bar {
        position: absolute;
        top: 63%;
        width: 60vw;
        height: 6vh;
        max-width: 380px;
        max-height: 50px;
        min-height: 40px;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
    }
    
    .user-not-found {
        position: absolute;
        top: 74%;
        width: 50vw;
        max-width: 280px;
        font-size: clamp(12px, 2vw, 14px);
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
    }
    
    .footer {
        height: 6vh;
        max-height: 50px;
        min-height: 35px;
    }
}

/* Mobile phones (based on Figma design: 402x874) */
@media (max-width: 480px) {
    .container {
        width: 100vw;
        height: 100vh;
        max-width: none;
        min-height: 100vh;
        overflow: hidden;
    }
    
    .site-icon {
        position: absolute;
        top: 12%; /* Adjusted to fit in viewport */
        width: 40vw; /* Responsive size */
        height: 40vw;
        max-width: 200px;
        max-height: 200px;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
    }
    
    .site-title {
        position: absolute;
        top: 35%; /* Adjusted to fit in viewport */
        width: 70vw; /* Responsive size */
        height: 8vh;
        max-width: 270px;
        max-height: 50px;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
    }
    
    .site-catch {
        position: absolute;
        top: 48%; /* Adjusted to fit in viewport */
        width: 85vw; /* Responsive size */
        height: 3vh;
        max-width: 350px;
        max-height: 18px;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
    }
    
    .search-bar {
        position: absolute;
        top: 58%; /* Adjusted to fit in viewport */
        width: 85vw; /* Responsive size */
        height: 5vh;
        max-width: 340px;
        max-height: 35px;
        min-height: 32px;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
    }
    
    .search-input {
        padding-left: 17px; /* Adjusted for mobile */
        padding-right: 40px;
        font-size: clamp(11px, 3vw, 13px);
        border-radius: 50px; /* Large radius for mobile */
    }
    
    .search-input::placeholder {
        font-size: clamp(11px, 3vw, 13px);
    }
    
    .search-icon {
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px; /* Smaller for mobile */
        height: 16px;
    }
    
    .user-not-found {
        position: absolute;
        top: 68%; /* Adjusted to fit in viewport */
        width: 80vw; /* Responsive size */
        max-width: 260px;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
        font-size: clamp(11px, 3vw, 14px); /* Keep readable on mobile */
    }
    
    .footer {
        height: 8vh; /* Responsive height */
        max-height: 45px;
        min-height: 35px;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        top: auto; /* Remove top positioning */
    }
    
    /* Mobile specific animations */
    @keyframes fadeInUpMobile {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }
    
    .site-icon {
        animation: fadeInUpMobile 1s ease-out;
    }
    
    .site-title {
        animation: fadeInUpMobile 1s ease-out 0.2s both;
    }
    
    .site-catch {
        animation: fadeInUpMobile 1s ease-out 0.4s both;
    }
    
    .search-bar {
        animation: fadeInUpMobile 1s ease-out 0.6s both;
    }
}

/* Extra small mobile devices */
@media (max-width: 360px) {
    .container {
        padding: 4px;
    }
    
    .site-icon {
        position: absolute;
        width: 180px;
        height: 180px;
        top: 15%;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
    }
    
    .site-title {
        position: absolute;
        width: 240px;
        height: 45px;
        top: 42%;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
    }
    
    .site-catch {
        position: absolute;
        width: 300px;
        height: 17px;
        top: 51%;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
    }
    
    .search-bar {
        position: absolute;
        width: 300px;
        height: 32px;
        top: 57%;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
    }
    
    .search-input {
        padding-left: 15px;
        padding-right: 35px;
        font-size: 11px;
    }
    
    .search-input::placeholder {
        font-size: 11px;
    }
    
    .search-icon {
        right: 10px;
        width: 14px;
        height: 14px;
    }
    
    .user-not-found {
        position: absolute;
        width: 240px;
        font-size: 13px;
        top: 64%;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
    }
}

/* Large screens optimization */
@media (min-width: 1441px) {
    .container {
        max-width: 1600px;
    }
    
    .site-icon {
        width: 550px;
        height: 550px;
    }
    
    .site-title {
        width: 575px;
        height: 107px;
    }
    
    .site-catch {
        width: 497px;
        height: 26px;
    }
    
    .search-bar {
        width: 550px;
        height: 55px;
    }
    
    .search-input {
        font-size: 14px;
    }
    
    .search-input::placeholder {
        font-size: 14px;
    }
    
    .user-not-found {
        font-size: 15px;
    }
    
    .footer {
        height: 55px;
    }
}


@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-input:focus {
    background-color: #EEEEEE;
    transition: background-color 0.3s ease;
}

.search-container:hover .search-icon svg {
    stroke: #666666;
    transition: stroke 0.3s ease;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .site-icon,
    .site-title,
    .site-catch,
    .search-bar {
        animation: none;
    }
    
    .search-input {
        transition: none;
    }
    
    .search-container:hover .search-icon svg {
        transition: none;
    }
}