/* =============== GLOBAL VARIABLES =============== */

:root {

    --primary-blue: #4285F4;

    --primary-red: #EA4335;

    --primary-yellow: #FBBC05;

    --primary-green: #34A853;

    --primary-orange: #FF9800;

    --text-color: #333;

    --light-gray: #f8f9fa;

    --medium-gray: #dadce0;

    --dark-gray: #70757a;

}



/* =============== BASE STYLES =============== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

a {

    text-decoration: none;

    color: var(--primary-blue);

}



a:hover {

    text-decoration: underline;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 20px;

}



/* =============== UTILITY CLASSES =============== */

.text-center {

    text-align: center;

}



.mt-1 { margin-top: 0.5rem; }

.mt-2 { margin-top: 1rem; }

.mt-3 { margin-top: 1.5rem; }

.mt-4 { margin-top: 2rem; }



/* =============== SEARCH BOX STYLES =============== */

.search-container {

    max-width: 600px;

    margin: 2rem auto;

    position: relative;

}



.search-box {

    width: 100%;

    padding: 15px 20px;

    border: 1px solid var(--medium-gray);

    border-radius: 30px;

    font-size: 16px;

    outline: none;

    box-shadow: 0 2px 5px rgba(0,0,0,0.1);

    transition: all 0.3s;

}



.search-box:hover, 

.search-box:focus {

    box-shadow: 0 4px 10px rgba(0,0,0,0.15);

}



.search-buttons {

    display: flex;

    justify-content: center;

    gap: 10px;

    margin-top: 20px;

}



.search-btn {

    padding: 10px 20px;

    background-color: var(--light-gray);

    border: 1px solid var(--light-gray);

    border-radius: 4px;

    color: #3c4043;

    font-size: 14px;

    cursor: pointer;

    transition: all 0.3s;

}



.search-btn:hover {

    border: 1px solid var(--medium-gray);

    box-shadow: 0 1px 1px rgba(0,0,0,0.1);

}



/* =============== LANGUAGE SWITCHER =============== */

.language-switcher {

    position: absolute;

    top: 10px;

    right: 10px;

}



.language-btn {

    background: none;

    border: none;

    color: var(--primary-blue);

    cursor: pointer;

    font-size: 14px;

}



/* =============== AI FEATURE BADGE =============== */

.ai-feature {

    text-align: center;

    margin: 20px 0;

    font-size: 14px;

    color: var(--dark-gray);

}



.ai-icon {

    display: inline-block;

    width: 20px;

    height: 20px;

    background-color: var(--primary-orange);

    border-radius: 50%;

    color: white;

    text-align: center;

    line-height: 20px;

    font-size: 12px;

    margin-left: 5px;

}



/* =============== CARD STYLES =============== */

.card {

    background-color: white;

    border-radius: 8px;

    padding: 20px;

    box-shadow: 0 2px 5px rgba(0,0,0,0.1);

    margin-bottom: 20px;

}



/* Responsive styles */

@media (max-width: 768px) {

    body {

        padding-top: 120px;

    }

    

    .container {

        padding: 15px;

    }

}



@media (max-width: 480px) {

    body {

        padding-top: 150px;

    }

    

    .search-buttons {

        flex-direction: column;

        align-items: center;

    }

    

    .search-btn {

        width: 100%;

        max-width: 200px;

    }

}