/* ==========================================
   Tori-Lamis Detergents - Custom Styles
   ========================================== */

/* --- Color Variables --- */
:root {
    --primary-color: #0033A0;   /* Touri Blue */
    --secondary-color: #002269; /* Darker Blue */
    --accent-color: #FFDE00;    /* Touri Yellow */
    --text-dark: #111827;       /* Gray 900 */
    --text-light: #6b7280;      /* Gray 500 */
    --bg-light: #f9fafb;        /* Gray 50 */
    --bg-soft: #eef2ff;         /* Indigo 50 */
}

/* --- Base Styles --- */
body.lang-ar { 
    font-family: 'Cairo', sans-serif; 
}

body.lang-en { 
    font-family: 'Poppins', sans-serif; 
}

html { 
    scroll-behavior: smooth; 
}

/* --- Hero Background with Stars Effect --- */
.hero-bg {
    position: relative;
    background-color: var(--primary-color);
    background-image: 
        radial-gradient(circle at 15% 15%, rgba(255, 222, 0, 0.2) 0%, transparent 20%),
        radial-gradient(circle at 85% 75%, rgba(255, 255, 255, 0.1) 0%, transparent 25%);
    overflow: hidden;
}

/* --- Background Doodles Pattern --- */
.section-bg-doodles {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:black;opacity:0.03;%7D%3C/style%3E%3C/defs%3E%3Cpath class='a' d='M62.5,75.5v-8.3h-4.2v-4.2h8.3v-8.3h4.2v8.3h8.3v4.2h-8.3v25h12.5v4.2h-16.7v-25Z'/%3E%3Cpath class='a' d='M154.2,25.5c-4.6,0-8.3,3.7-8.3,8.3s3.7,8.3,8.3,8.3s8.3-3.7,8.3-8.3S158.8,25.5,154.2,25.5z M154.2,38.2 c-2.3,0-4.2-1.9-4.2-4.2s1.9-4.2,4.2-4.2s4.2,1.9,4.2,4.2S156.5,38.2,154.2,38.2z'/%3E%3Cpath class='a' d='M41.7,150.5h-25c-2.3,0-4.2-1.9-4.2-4.2v-12.5c0-2.3,1.9-4.2,4.2-4.2h25c2.3,0,4.2,1.9,4.2,4.2v12.5 C45.8,148.6,44,150.5,41.7,150.5z M20.8,133.8v8.3h16.7v-8.3H20.8z'/%3E%3Cpath class='a' d='M154.2,125.5h-12.5v-4.2h-4.2v16.7h4.2v-4.2h12.5c2.3,0,4.2-1.9,4.2-4.2S156.5,125.5,154.2,125.5z M154.2,133.8h-8.3v-4.2h8.3V133.8z'/%3E%3Cpath class='a' d='M91.7,175.5h-8.3v-12.5h-12.5v-4.2h16.7v16.7h4.2v-16.7h12.5v4.2h-12.5V175.5z'/%3E%3C/svg%3E");
    background-size: 200px;
}

/* --- Reveal Animation on Scroll --- */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1), transform 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.visible { 
    opacity: 1; 
    transform: translateY(0); 
}

/* --- Mobile Menu --- */
#mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 16rem;
    background-color: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    z-index: 50;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

#mobile-menu.open {
    transform: translateX(0) !important;
}

/* RTL Support for Mobile Menu */
html[dir="rtl"] #mobile-menu {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}

html[dir="rtl"] #mobile-menu.open {
    transform: translateX(0) !important;
}

/* Mobile Menu Overlay */
#mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 40;
}

#mobile-menu-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* --- Product Card Float Animation --- */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.product-card-image {
    animation: float 5s ease-in-out infinite;
    transition: transform 0.3s;
}

.group:hover .product-card-image {
    transform: scale(1.08);
    animation-play-state: paused;
}

/* --- Utility Classes --- */

/* Background Colors */
.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-accent { background-color: var(--accent-color); }
.bg-light { background-color: var(--bg-light); }
.bg-soft { background-color: var(--bg-soft); }

/* Text Colors */
.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-accent { color: var(--accent-color); }
.text-dark { color: var(--text-dark); }
.text-light { color: var(--text-light); }

/* Border Colors */
.border-primary { border-color: var(--primary-color); }
.border-secondary { border-color: var(--secondary-color); }
.border-accent { border-color: var(--accent-color); }

/* Hover Effects */
.hover-accent:hover { color: var(--accent-color); }
.hover-primary:hover { color: var(--primary-color); }
.hover-scale:hover { transform: scale(1.05); }

/* --- Responsive Utilities --- */

/* Container */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container { max-width: 640px; }
}

@media (min-width: 768px) {
    .container { max-width: 768px; }
}

@media (min-width: 1024px) {
    .container { max-width: 1024px; }
}

@media (min-width: 1280px) {
    .container { max-width: 1280px; }
}

@media (min-width: 1536px) {
    .container { max-width: 1536px; }
}

/* --- Header Styles --- */
header {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    position: sticky;
    top: 0;
    z-index: 50;
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
}

@media (min-width: 768px) {
    header nav {
        padding: 1rem 1.5rem;
    }
}

/* Logo */
#logo {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--primary-color);
}

@media (min-width: 640px) {
    #logo { font-size: 1.875rem; }
}

@media (min-width: 768px) {
    #logo { font-size: 2.25rem; }
}

/* Navigation Links */
header nav ul {
    display: none;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    header nav ul {
        display: flex;
    }
}

@media (min-width: 1024px) {
    header nav ul {
        gap: 2rem;
    }
}

header nav ul li a {
    color: #1f2937;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.3s;
}

@media (min-width: 1024px) {
    header nav ul li a {
        font-size: 1rem;
    }
}

header nav ul li a:hover {
    color: var(--primary-color);
}

/* Language Switcher Button */
#lang-switcher {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 9999px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.3s;
}

@media (min-width: 640px) {
    #lang-switcher {
        padding: 0.5rem 1rem;
    }
}

#lang-switcher:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    transform: translateY(-2px);
}

/* Mobile Menu Button */
#mobile-menu-button {
    display: block;
    font-size: 1.5rem;
    color: var(--primary-color);
    background: none;
    border: none;
    cursor: pointer;
}

@media (min-width: 640px) {
    #mobile-menu-button {
        font-size: 1.875rem;
    }
}

@media (min-width: 768px) {
    #mobile-menu-button {
        display: none;
    }
}

/* --- Section Styles --- */

section {
    padding: 7rem 1.5rem;
}

section h2 {
    font-size: 2.25rem;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 1rem;
    text-align: center;
}

@media (min-width: 768px) {
    section h2 {
        font-size: 3rem;
    }
}

/* Section Divider */
.section-divider {
    width: 6rem;
    height: 0.375rem;
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    margin: 0 auto;
    border-radius: 9999px;
}

/* --- Card Styles --- */

.card {
    background-color: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    transition: all 0.3s;
}

.card:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    transform: translateY(-8px);
}

@media (min-width: 768px) {
    .card {
        padding: 3rem;
    }
}

/* --- Footer Styles --- */

footer {
    position: relative;
    background: linear-gradient(135deg, #001845 0%, var(--secondary-color) 50%, var(--text-dark) 100%);
    color: #d1d5db;
    padding-top: 4rem;
    padding-bottom: 2rem;
    border-top: 4px solid var(--accent-color);
    overflow: hidden;
}

@media (min-width: 768px) {
    footer {
        padding-top: 5rem;
    }
}

/* Footer Background Pattern */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 16rem;
    height: 16rem;
    background-color: var(--accent-color);
    opacity: 0.05;
    border-radius: 50%;
    filter: blur(60px);
}

footer::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24rem;
    height: 24rem;
    background-color: var(--primary-color);
    opacity: 0.05;
    border-radius: 50%;
    filter: blur(60px);
}

/* Footer Logo */
footer h3 {
    font-size: 1.875rem;
    font-weight: 900;
    color: white;
    margin-bottom: 1rem;
    text-align: center;
}

@media (min-width: 768px) {
    footer h3 {
        font-size: 2.25rem;
    }
}

/* Footer Cards */
.footer-card {
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s;
    height: 100%;
}

@media (min-width: 768px) {
    .footer-card {
        padding: 2rem;
    }
}

.footer-card:hover {
    border-color: rgba(255, 222, 0, 0.5);
    box-shadow: 0 10px 15px -3px rgba(255, 222, 0, 0.2);
}

/* Footer Icon Box */
.footer-icon-box {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, var(--accent-color), #d4af00);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s;
}

.footer-card:hover .footer-icon-box {
    transform: scale(1.1);
}

/* Footer Social Links */
.footer-social-link {
    width: 3rem;
    height: 3rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #d1d5db;
    text-decoration: none;
    transition: all 0.3s;
}

.footer-social-link:hover {
    background-color: var(--accent-color);
    color: var(--secondary-color);
    transform: scale(1.1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

/* Footer Bottom Links */
.footer-link {
    color: #9ca3af;
    text-decoration: none;
    position: relative;
    transition: color 0.3s;
}

.footer-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-color);
    transition: width 0.3s;
}

.footer-link:hover {
    color: var(--accent-color);
}

.footer-link:hover::after {
    width: 100%;
}

/* --- Scroll to Top Button --- */
#scroll-to-top {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    width: 3rem;
    height: 3rem;
    background-color: var(--accent-color);
    color: var(--secondary-color);
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    z-index: 40;
}

html[dir="rtl"] #scroll-to-top {
    left: auto;
    right: 2rem;
}

#scroll-to-top:hover {
    background-color: #e6c700;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
}

/* --- RTL Support --- */
html[dir="rtl"] {
    direction: rtl;
}

html[dir="rtl"] .rtl\:space-x-reverse > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
}

/* --- Print Styles --- */
@media print {
    header {
        position: static;
    }
    
    #mobile-menu,
    #mobile-menu-overlay,
    #scroll-to-top {
        display: none !important;
    }
    
    .reveal {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}