@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: #f0f8f4;

    background-size: 40px 40px;
}

body[lang="ar"] {
    font-family: 'Cairo', sans-serif;
    direction: rtl;
}

.selected-age {
    background-color: #6366f1;
    color: white;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transform: translateY(-2px);
}

.input-group {
    display: flex;
    align-items: center;
    border-radius: 12px;
    background-color: #f3f4f6;
    transition: all 0.2s ease-in-out;
}

.input-group:focus-within {
    background-color: white;
    box-shadow: 0 0 0 2px #c7d2fe, 0 0 0 4px #a5b4fc;
}

.book-cover {
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.selected-cover {
    outline: 4px solid #6366f1;
    outline-offset: 4px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: scale(1.05);
}

.story-image {
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.selected-story-image {
    outline: 4px solid #6366f1;
    outline-offset: 4px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: scale(1.05);
}

/* Social Media Icons */
.social-icons {
    display: flex;
    align-items: center;
}

.social-icon-link {
    margin-right: 12px;
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.social-icon-link:last-child {
    margin-right: 0;
}

.social-icon-link i {
    font-size: 20px;
}

.social-icon-link:hover {
    color: #6366f1;
}

/* Footer Language Dropdown */
.footer-language-select {
    position: relative;
}

.footer-language-dropdown {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 8px 12px;
    background-color: #f6f1e9;
    border: 2px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 32px;
}

.footer-language-dropdown:hover {
    border-color: #3BB273;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.footer-language-dropdown:focus {
    outline: none;
    border-color: #3BB273;
    box-shadow: 0 0 0 3px rgba(59, 178, 115, 0.1);
}

.footer-language-dropdown option {
    background-color: #f6f1e9;
    color: #333;
    padding: 8px;
}

/* Mobile responsiveness for footer language dropdown */
@media (max-width: 768px) {
    .footer-language-dropdown {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 10px 12px;
    }
}