:root {
    --text-dark: rgb(44, 42, 41);
    --bg-light: rgb(242, 233, 219);
    --accent-orange: rgb(237, 155, 51);
    --discount-red: rgb(220, 88, 42);
    --line-blue: rgb(107, 143, 156);
}

body { 
    background-color: var(--bg-light); 
    color: var(--text-dark); 
    font-family: sans-serif; 
    margin: 0;
}

/* Header & Navigation */
.header { 
    border-bottom: none; 
    padding: 15px 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
 
}

.header img.logo {
    max-height: 50px;
}

.lang-switcher {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lang-switcher a {
    text-decoration: none;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
}

.lang-switcher a.active {
    border-color: var(--line-blue);
    background-color: rgba(107, 143, 156, 0.1);
}

.separator {
    color: var(--line-blue);
}

/* Category Sections */
.category-section { 
    margin: 40px 0; 
    padding: 0 20px; 
}

.category-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 1px solid var(--line-blue); 
    margin-bottom: 20px; 
}

.view-more { 
    color: var(--accent-orange); 
    text-decoration: none; 
    font-weight: bold; 
}

/* Product Display */
.product-row { 
    display: flex; 
    gap: 20px; 
    overflow-x: auto; 
    padding-bottom: 15px; 
}

.product-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    gap: 20px; 
    padding: 20px; 
}

.product-card { 
    border: 1px solid var(--line-blue); 
    padding: 12px; 
    background: white; 
    text-align: center; 
    flex: 0 0 200px; /* Kompaktne laius */
    display: flex; 
    flex-direction: column;
    box-sizing: border-box;
}

.product-image-container { 
    width: 100%; 
    height: 180px; 
    overflow: hidden; 
    margin-bottom: 10px; 
}

.product-image-container img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.product-card h3 {
    font-size: 0.95rem;
    height: 2.4em;
    overflow: hidden;
    margin: 5px 0;
}

.price { 
    font-weight: bold; 
    margin-bottom: 10px; 
    font-size: 1rem;
}

.discount { 
    color: var(--discount-red); 
}

.price del {
    font-size: 0.8rem;
    color: gray;
    margin-left: 5px;
}

button { 
    background-color: var(--accent-orange); 
    color: white; 
    border: none; 
    padding: 10px; 
    cursor: pointer; 
    font-weight: bold; 
    border-radius: 4px; 
    margin-top: auto; 
    transition: opacity 0.2s;
}

button:hover {
    opacity: 0.9;
}
.header-right {
    display: flex;
    flex-direction: column; /* Paneb elemendid üksteise alla */
    align-items: flex-end;   /* Joondab elemendid paremale serva */
    gap: 10px;               /* Vahe keelevaliku ja ostukorvi vahel */
}

.cart-summary {
    position: relative;
    padding-right: 10px;     /* Et märk ei oleks päris servas kinni */
}

.cart-icon {
    font-size: 1.5rem;
    text-decoration: none;
    color: var(--text-dark);
}

.cart-badge {
    background: var(--accent-orange);
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 0.75rem;
    position: absolute;
    top: -5px;
    right: -5px;
    font-weight: bold;
}
.cart-summary a {
    display: flex;
    align-items: center;
    transition: transform 0.2s;
}

.cart-summary a:hover {
    transform: scale(1.05); /* Väike efekt peale liikudes */
}
.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
}

.status-paid { background-color: #d4edda; color: #155724; }
.status-pending { background-color: #fff3cd; color: #856404; }
.status-default { background-color: #f8f9fa; color: #383d41; }

/* See mõjutab ainult otsingunuppu */
.search-btn {
    height: 40px;          /* Sama kõrgus mis sisendväljal */
    width: 50px;           /* Määrame kindla laiuse */
    display: flex;         /* Kasutame Flexboxi ikooni tsentreerimiseks */
    align-items: center;   /* Joondab vertikaalselt keskele */
    justify-content: center; /* Joondab horisontaalselt keskele */
    font-size: 1.2rem;     /* Reguleerib luubi ikooni suurust */
    padding: 0;            /* Eemaldame liigse polstri, mis kuju rikub */
    border: none;
    background-color: var(--line-blue);
    color: white;
    cursor: pointer;
    border-radius: 0 20px 20px 0; /* Ümarad nurgad ainult paremal pool */
}

/* Veendu, et ka sisendväljal on sama kõrgus ja ümarad nurgad vasakul */
.search-form input[type="text"] {
    height: 40px;
    border-radius: 20px 0 0 20px;
    border: 1px solid #ddd;
    padding: 0 15px;
    outline: none;
    box-sizing: border-box; /* Oluline: hoiab kõrguse täpselt 40px peal */
}

.out-of-stock {
    color: red;
    font-weight: bold;
}

.top-bar {
    background-color: #f9f5eb; /* Sobita logo taustaga */
    padding: 10px 20px;
    display: flex;
    justify-content: flex-end; /* Viib lingid paremale serva */
    gap: 15px;
    font-size: 0.9rem;
}

.top-bar a {
    text-decoration: none; /* Eemaldab allajoonimise */
    color: #4a4a4a; /* Tumehall, mitte sinine */
    font-weight: bold;
    transition: color 0.3s;
}

.top-bar a:hover {
    color: #f3a63b; /* Oranžikas toon hiirega peale minnes */
}

.admin-btn {
    background: #3498db;
    color: white !important;
    padding: 4px 10px;
    border-radius: 4px;
}

.product-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0;
    font-size: 0.85rem;
    color: #555;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bgg-rank {
    color: #f3a63b;
    font-weight: bold;
    width: 100%;
    margin-bottom: 5px;
}
.row-paid { background-color: #fff0f5; }
.row-cancelled { background-color: #f2f2f2; color: #888; text-decoration: line-through; }
.row-shipped { background-color: #e8f5e9; }
.row-default { background-color: #ffffff; }

/* 1. Tee toote kaart Flexbox konteineriks */
.product-card {
    display: flex;
    flex-direction: column;
    height: 100%; /* Kõik kaardid ridadel on võrdse kõrgusega */
    background: white;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 5px;
    box-sizing: border-box;
}

/* 2. Toote andmete plokk (mängijad, aeg jne) */
.product-stats {
    display: grid;
    grid-template-columns: 25px 1fr; /* Vasak tulp ikoonile, parem tekstile */
    gap: 5px 10px;
    margin-bottom: 15px;
    min-height: 80px; /* Hoiab ruumi ühtlasena ka puuduvate andmete korral */
    font-size: 0.9em;
    color: #444;
}

/* 3. UUS: Konteiner hinna ja nupu jaoks */
.product-footer {
    margin-top: auto; /* Lükkab selle bloki kaardi PÕHJA */
    width: 100%;
    text-align: center; /* Joondab sisu keskele (nagu sul pildil) */
    border-top: 1px solid #eee; /* Valikuline eraldusjoon */
    padding-top: 15px;
}
/* Üksik andmerida */
.stat-item {
    display: contents; /* Võimaldab lastel (ikoon ja tekst) joonduda otse gridis */
}

/* Ikooni kujundus */
.stat-icon {
    text-align: center;
}

/* BGG Ranki eristamine */
.bgg-rank-row {
    grid-column: span 2; /* Rank võib võtta terve rea laiuse */
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--line-blue);
}
/* See muudab CKEditori sisuakna kõrgust */
.ck-editor__editable_inline {
    min-height: 400px;
}
/* Admin üldkonteiner */
.admin-content {
    font-family: 'Inter', -apple-system, sans-serif;
    background-color: #f8f9fa;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px;
}

/* Kaasaegsed sisendväljad ja textarea */
input[type="text"], 
input[type="number"], 
select, 
textarea {
    width: 100%;
    padding: 12px 15px;
    margin: 8px 0 20px 0;
    border: 1px solid #dee2e6;
    border-radius: 8px; /* Ümarad nurgad */
    transition: border-color 0.2s, box-shadow 0.2s;
    font-size: 14px;
}

input:focus, textarea:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
    outline: none;
}

/* Tootekaardi moodi vormiblokid */
.form-section {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}

/* Nupud */
.btn-save {
    background-color: #2ecc71;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s;
}

.btn-save:hover {
    background-color: #27ae60;
    transform: translateY(-1px);
}
.purchase-col {
    filter: blur(5px);
    transition: filter 0.2s;
}
.purchase-visible {
    filter: blur(0) !important;
}
/* --- MOBIILIVAADE (Kuni 768px) --- */
@media (max-width: 768px) {

    /* 1. PEAMENÜÜ SKROLLIMINE */
    .main-nav {
        display: flex !important;
        /* Tähtis: justify-content peab olema flex-start, et saaks vasakult paremale skrollida */
        justify-content: flex-start !important; 
        gap: 20px !important;
        padding: 15px 10px !important;
        
        /* Skrollimise aktiveerimine */
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important; /* Hoiab lingid ühel real */
        -webkit-overflow-scrolling: touch; /* Sujuv skroll iOS-is */
        
        /* Eemaldame piirangud, mis võivad skrollimist takistada */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Tagame, et menüü lingid ei muudaks oma suurust */
    .main-nav a {
        flex: 0 0 auto !important;
        font-size: 0.9rem !important; /* Mobiilis veidi väiksem tekst */
    }

    /* Peidame koleda kerimisriba */
    .main-nav::-webkit-scrollbar {
        display: none;
    }

    /* 2. TOOTEGRIDI PARANDUS (Kaks toodet kõrvuti) */
    .product-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        padding: 10px !important;
        gap: 10px !important;
    }

    .product-card {
        flex: 0 0 48% !important; /* Kaks toodet kõrvuti */
        max-width: 48% !important;
        box-sizing: border-box !important;
        margin-bottom: 10px !important;
    }
.top-bar {
        font-size: 0.8rem !important;
        padding: 5px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
    }

    /* 2. PÕHIPÄIS: Muudame selle reastuvaks (wrap) */
    .header {
        flex-wrap: wrap !important; /* Lubab elementidel liikuda uuele reale */
        padding: 10px !important;
        gap: 10px !important;
    }

    /* Logo ja päise parem pool (keel/ostukorv) ühele reale */
    .header > a { /* Logo link */
        order: 1 !important;
        flex: 1 !important;
    }

    .header-right {
        order: 2 !important;
        gap: 10px !important;
    }

    /* 3. OTSINGUKAST: Viime selle uuele reale ja teeme täislaiuses */
    .search-form {
        order: 3 !important; /* Liigutab otsingu logo alla */
        flex: 0 0 100% !important; /* Võtab 100% laiusest */
        margin: 10px 0 5px 0 !important; /* Lisab vahed */
        max-width: none !important;
    }

    /* Keelevaliku tekstid väiksemaks, et mahuks ära */
    .lang-switcher span {
        display: none; /* Peidab tekstid "EE" ja "EN", jätab alles lipud */
    }

    .logo {
        max-height: 40px !important; /* Teeb logo mobiilis veidi väiksemaks */
    }    
}