/*
Theme Name: Roki Menu
Theme URI: https://example.com/
Author: Balsa
Description: Jednostavna WordPress tema za meni brze hrane ROKI.
Version: 1.0
*/

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #F5E6D3 0%, #EDD5B8 100%);
    min-height: 100vh;
    padding: 20px;
    position: relative;
}
.container { max-width: 1200px; margin: 0 auto; }
header { text-align: center; margin-bottom: 40px; animation: fadeInDown 0.8s ease; }
.logo { font-size: 3.5em; font-weight: bold; color: #2C1810; text-shadow: 2px 2px 4px rgba(0,0,0,0.1); margin-bottom: 10px; }
.tagline { font-size: 1.2em; color: #C73E3A; font-weight: 600; }
.delivery-info {
    display: inline-block; background: #C73E3A; color: white; padding: 15px 30px; border-radius: 50px; margin-top: 20px; font-size: 1.3em; font-weight: bold; box-shadow: 0 4px 15px rgba(199, 62, 58, 0.4); animation: pulse 2s infinite;
}
.delivery-info a { color: white; text-decoration: none; }
/* Home View - Categories */
.categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 30px; }
.category-card {
    background: white; border-radius: 20px; padding: 40px 30px; text-align: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 20px rgba(0,0,0,0.1); border: 3px solid transparent; animation: fadeInUp 0.6s ease;
}
.category-card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(0,0,0,0.3); border-color: #C73E3A; }
.category-icon { font-size: 3em; margin-bottom: 15px; }
.category-title { font-size: 1.5em; color: #2C1810; font-weight: bold; margin-bottom: 10px; }
.category-desc { color: #666; font-size: 0.9em; }
/* Menu Items View */
.menu-view { display: none; }
.menu-view.active { display: block; animation: fadeIn 0.5s ease; }
.back-button {
    background: #2C1810; color: white; border: none; padding: 12px 30px; border-radius: 30px; font-size: 1.1em; cursor: pointer; margin-bottom: 30px; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.back-button:hover { background: #C73E3A; transform: translateX(-5px); }
.menu-header { text-align: center; margin-bottom: 40px; }
.menu-title { font-size: 2.5em; color: #C73E3A; font-weight: bold; margin-bottom: 10px; }
.items-list { display: grid; gap: 15px; }
.menu-item { background: white; border-radius: 15px; padding: 20px 25px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 3px 15px rgba(0,0,0,0.08); transition: all 0.3s ease; animation: slideIn 0.4s ease; }
.menu-item:hover { transform: translateX(10px); box-shadow: 0 5px 20px rgba(199, 62, 58, 0.2); }
.item-info { flex: 1; }
.item-name { font-size: 1.2em; color: #2C1810; font-weight: bold; margin-bottom: 5px; }
.item-weight { color: #888; font-size: 0.9em; }
.item-price {
    background: linear-gradient(135deg, #F4C430 0%, #E6B422 100%); color: #2C1810; padding: 12px 25px; border-radius: 30px; font-size: 1.3em; font-weight: bold; box-shadow: 0 3px 10px rgba(244, 196, 48, 0.3); min-width: 80px; text-align: center;
}
.special-note { background: #C73E3A; color: white; padding: 20px; border-radius: 15px; text-align: center; margin: 30px 0; font-weight: bold; font-size: 1.1em; box-shadow: 0 4px 15px rgba(199, 62, 58, 0.3); }
/* Animations */
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px);} to { opacity: 1; transform: translateY(0);} }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px);} to { opacity: 1; transform: translateY(0);} }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-20px);} to { opacity: 1; transform: translateX(0);} }
@keyframes pulse { 0%, 100% { transform: scale(1);} 50% { transform: scale(1.05);} }
/* Responsive */
@media (max-width: 768px) {
    .logo { font-size: 2.5em; }
    .category-card { padding: 30px 20px; }
    .menu-item { flex-direction: column; text-align: center; gap: 15px; }
    .item-price { width: 100%; }
}
.hidden { display: none !important; }

@media (max-width: 550px){
    #logo_roki{
        max-width: 100% !important;
    }
}

.working-hours {
    margin-top: 15px;
    background: rgb(199, 62, 58);
    color: #fff;
    padding: 12px 25px;
    border-radius: 50px;
    font-size: 1em;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

@media (max-width: 480px) {
    .working-hours {
        font-size: 0.9em;
        padding: 10px 20px;
        border-radius: 20px;
    }
}
@media (max-width: 600px) {
    .working_hours_dot {
        display: none;
    }
}

@media (min-width: 601px) {
    .working_hours_br {
        display: none;
    }
}

/* Language toggle button */
.lang-toggle {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    color: inherit;
    border: none;
    border-radius: 8px;
    padding: 4px 6px;
    font-size: 2em;
    cursor: pointer;
    z-index: 1000;
    transition: transform 0.2s ease;
    box-shadow: none;
    line-height: 1;
}
.lang-toggle:hover {
    background: transparent;
    transform: scale(1.15);
}

@media (max-width: 480px) {
    .lang-toggle {
        top: 10px;
        right: 10px;
        padding: 6px 14px;
        font-size: 1.45em;
    }
}