/*:root {
    --nav-hover-bg: rgba(255, 255, 255, 0.15);
    --nav-bg-2:#eec0d3;
    --nav-bg-1: #cba2d6;
    --footer-bg: #f4f4f4;
    --nav-font-family: 'Arial';
    --nav-font-weight: 600;
    --body-bg: #f9d3e9;
    --form-btn: #d8b4e2;
    --form-btn-hover: #c499d1;
    --shopping-item-bg: #f6c0db;
    --shopping-item-bg-in-cart: #b97284;
    --border-focus-bg: #d8b4e2;
}*/

:root {
    --nav-hover-bg: rgba(255, 255, 255, 0.15);
    --nav-bg-2:#0d4d91;
    --nav-bg-1: #619ed6;
    --footer-bg: #f4f4f4;
    --nav-font-weight: 600;
    --body-bg: #fdfef6;
    --form-btn: #69bfa4;
    --form-btn-hover: #f39120;
    --shopping-item-bg: #619ed6;
    --shopping-item-bg-in-cart: #b97284;
    --border-focus-bg: #69bfa4;
    --icon-grid-svg: #0d4d91;
}

body { background: var(--body-bg); font-family: Jost; margin:0;}

nav {background: linear-gradient(to right, var(--body-bg), var(--nav-bg-1), var(--nav-bg-2)); font-family: Jost; font-weight: var(--nav-font-weight);}
nav a.nav-link{color: white !important;}
.nav-item svg { height: 15px; width: 15px; fill: white; }
.nav-item .nav-link svg { height: 20px; width: 20px; fill: white; }

/* mobil nézet */
@media (max-width: 767px) {
    nav .dropdown-menu{border-radius: 0px !important; border: none !important;}
    nav .dropdown-item:active { background: linear-gradient(to right, var(--nav-bg-1), var(--nav-bg-2)) !important; }
}

/* asztali nézet */
@media (min-width: 768px) {
    nav .dropdown-menu {background: linear-gradient(to right, var(--nav-bg-1), var(--nav-bg-2)); font-family: var(--nav-font-family); font-weight: var(--nav-font-weight);}
    nav .dropdown-item {font-family: var(--nav-font-family); font-weight: var(--nav-font-weight);color:white !important;}
    nav .custom-hover {transition: background-color 0.2s ease;}
    nav .custom-hover:hover {background-color: var(--nav-hover-bg); cursor: pointer;}
}

footer {background: var(--footer-bg); padding: 10px; position: fixed; left: 0; bottom: 0; width: 100%; text-align: center;}

input, select, textarea {
    padding: 10px !important;
    border: 2px solid #eee !important;
    transition: border-color 0.3s !important;
}
input:focus, select:focus, textarea:focus {
    box-shadow: none !important;
    border: 2px solid var(--border-focus-bg) !important;
}

/*input:focus, select:focus, textarea:focus { border-color: var(--form-btn); }*/
label { font-weight: bold; color: var(--bs-secondary-color);; font-size: 14px; }
.btn.btn-primary {
    background: var(--form-btn) !important;
    color: white !important;
    border: none !important;
    
}

.btn.btn-primary:hover {
    background-color: var(--form-btn-hover) !important; 
}

.btn.btn-primary svg { width: 20px !important; height: 20px !important; fill: white; }