:root {
    --background-dark: linear-gradient(135deg, #6cbcff, #2575e7);
    --background-light: #f4f4f4;
    --text-dark: #ecf0f1;
    --text-light: #13111b;
    --container-dark: linear-gradient(135deg, #2a2c43, #13111b);
    --container-light: linear-gradient(135deg, #fff, #ecf0f1);
    --txt-shad: 0 0 1px #00000085, 0 0 3px #00000085, 0 0 5px #00000085, 0 0 1px #000000;
    --txt-light: 0 0 1px #ffffff85, 0 0 3px #ffffff85, 0 0 5px #ffffff85, 0 0 1px #ffffff;
    --input-dark: linear-gradient(135deg, #1d1b27, #303146);
    --input-light: linear-gradient(135deg, #e0e0e0, #f0f0f0);
    --border-dark: #13111b;
    --border-light: #ccc;
    --button-bg: #e03732;
    --red: #e03732;
    --dark-mode-btn-bg: #3498db;
    --dark-mode-btn-hover: #1c1c1c;
    --fruit-gradient: linear-gradient(135deg, #f75828, #8a2c0f);
    --vegetable-gradient: linear-gradient(135deg, #4caf50, #076a0a);
    --drink-gradient: linear-gradient(135deg, #83c0f0, #0d5093);
    --other-gradient: linear-gradient(135deg, #757575, #353535);
    --glutenfree-gradient: linear-gradient(135deg, #d7b500, #976f0a);
    --cheese-gradient: linear-gradient(135deg, #ff9800, #f57c00);
    --meat-gradient: linear-gradient(135deg, #DF2062, #640000);
    --animal-gradient: linear-gradient(135deg, #9c27b0, #3a0551);
    --cake-gradient: linear-gradient(135deg, #ffc795, #680707);
    --book-gradient: linear-gradient(135deg, #b97f6d, #512da8);
    --closet-gradient: linear-gradient(135deg, #3f51b5, #2d0951);
    --baby-gradient: linear-gradient(135deg, #00bcd4, #00555e);
    --gift-gradient: linear-gradient(135deg, #970303, #009f06);
    --milk-gradient: linear-gradient(135deg, #3e56d7, #130c60);
    --tool-gradient: linear-gradient(135deg, #795548, #401d12);
    --rice-gradient: linear-gradient(135deg, #0d0013, #c52ddf);
    --toilet-gradient: linear-gradient(135deg, #009688, #0c6054);
    --sauce-gradient: linear-gradient(135deg, #f44336, #660f0f);
    --bread-gradient: linear-gradient(135deg, #d4a574, #6f3f13);
    --coffee-gradient: linear-gradient(135deg, #7b3b1c, #4d2000);
    --snack-gradient: linear-gradient(135deg, #b37923, #4d330e);
    --frozen-gradient: linear-gradient(135deg, #56bcea, #0d5575);
    --ice-gradient: linear-gradient(135deg, #56bcea, #0d5575);
    --pasta-gradient: linear-gradient(135deg, #ffdf80, #b98200);
    --tech-gradient: linear-gradient(135deg, #4a90e2, #5319d2);
    --stationery-gradient: linear-gradient(135deg, #ff7043, #f035a7);
    --pharma-gradient: linear-gradient(135deg, #00d221, #007713);
    --aromatic-gradient: linear-gradient(135deg, #ea63af, #680722);
    --game-gradient: linear-gradient(135deg, #3d2ee8, #469701);
}

body {
    font-family: Arial, sans-serif;
    background: var(--background-dark);
    color: var(--text-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    transition: 0.3s;
}
body.light-mode {
    background: var(--input-light);
    color: var(--text-light);
}
.shopping-container {
    box-sizing: border-box;
    background: var(--container-dark);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    width: 1200px;
    max-width: calc(100% - 30px);
    transition: 0.3s;
    max-height: calc(100% - 30px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-color: #6cbcff #0d5093;
    scrollbar-width: thin;
}
body.light-mode .shopping-container {
    background: var(--container-light);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="text"] {
    font-size: 1.2em;
    width: calc(100% - 22px);
    padding: 5px 10px;
    margin-bottom: 10px;
    border: none;
    border-radius: 3px;
    background: var(--input-dark);
    border: 2px solid var(--border-dark);
    color: var(--text-dark);
    transition: background 0.3s, border-color 0.3s, color 0.3s;
}
body.light-mode input[type="text"] {
    background: var(--input-light);
    border: 2px solid var(--border-light);
    color: var(--text-light);
}
input:focus-visible {
    border: 2px solid #2575e7;
    outline: 0;
}
.item-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    text-shadow: var(--txt-shad);
    justify-content: center;
}
.item-box {
    font-weight: 600;
    padding: 5px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-dark);
    box-sizing: border-box;
    text-transform: capitalize;
    transition: background 0.3s, color 0.3s;
    overflow: auto;
    gap: 10px;
    cursor: pointer;
    box-shadow: var(--txt-shad);
    word-wrap: break-word;
}
.item-box.pharma {background: var(--pharma-gradient);order:0;}
.item-box.game {background: var(--game-gradient);order:10;}
.item-box.gift {background: var(--gift-gradient);order:20;}
.item-box.tech {background: var(--tech-gradient);order:30;}
.item-box.book {background: var(--book-gradient);order:40;}
.item-box.stationery {background: var(--stationery-gradient);order:50;}
.item-box.closet {background: var(--closet-gradient);order:60;}
.item-box.baby {background: var(--baby-gradient);order:70;}
.item-box.toilet {background: var(--toilet-gradient);order:80;}
.item-box.animal {background: var(--animal-gradient);order:90;}
.item-box.cutlery{background: var(--cutlery-gradient);order:100;}
.item-box.tool {background: var(--tool-gradient);order:110;}
.item-box.drink {background: var(--drink-gradient);order:120;}
.item-box.beer {background: var(--frozen-gradient);order:130;}


.item-box.bread {background: var(--bread-gradient);order:140;}

.item-box.fruit {background: var(--fruit-gradient);order:150;}
.item-box.vegetable {background: var(--vegetable-gradient);order:160;}

.item-box.cake {background: var(--cake-gradient);order:170;}

.item-box.aromatic {background: var(--aromatic-gradient);order:180;}
.item-box.sauce {background: var(--sauce-gradient);order:190;}
.item-box.pasta {background: var(--pasta-gradient);order:200;}
.item-box.rice {background: var(--rice-gradient);order:210;}

.item-box.snack {background: var(--snack-gradient);order:220;}
.item-box.glutenfree {background: var(--glutenfree-gradient);order:230;}
.item-box.coffee {background: var(--coffee-gradient);order:231;}

.item-box.meat {background: var(--meat-gradient);order:240;}
.item-box.milk {background: var(--milk-gradient);order:250;}
.item-box.cheese {background: var(--cheese-gradient);order:260;}

.item-box.frozen {background: var(--frozen-gradient);order:270;}
.item-box.ice {background: var(--frozen-gradient);order:280;}

.item-box.other {background: var(--other-gradient);order:999;}


button {
    background: var(--button-bg);
    color: var(--text-dark);
    border: none;
    padding: 5px 5px;
    cursor: pointer;
    font-size: 1.2em;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    transition: 0.3s;
    box-shadow: var(--txt-shad);
}
button:hover, button.delet:hover {
    color: var(--red);
    background: var(--text-dark);
    text-shadow: none;
}
button.delet {
    font-size: 30px;
    line-height: 32px;
    padding: 0;
    min-width: 30px;
    margin: 4px 0;
}
.icon {
    margin-right: 5px;
    font-size: 1.3em;
}
.clear-all-btn {
    display: none;
    width: 100%;
    border: none;
    padding: 10px;
    cursor: pointer;
    transition: 0.3s;
    border-radius:50px;
    width: 40px;
    height: 40px;
    text-shadow: var(--txt-shad);
    position: fixed;
    top: 10px;
    left: 10px;
}
.dark-mode-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    background: var(--input-light);
    color: var(--text-light);
    border: none;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}
.light-mode .dark-mode-btn {
    background: var(--input-dark);
    color: var(--text-dark);
}
.dark-mode-btn:hover {
    background: var(--dark-mode-btn-hover);
    color: var(--text-dark);
}
.light-mode .dark-mode-btn:hover {
    background: var(--text-dark);
    color: var(--dark-mode-btn-hover);
}

@media only screen and (max-width: 800px) {
  .item-box {width: calc(33% - 5px);}
}
@media only screen and (max-width: 600px) {
  body {font-size: 14px;}
  .shopping-container {padding: 12px;}
  .item-box {width: calc(50% - 5px);}
}


/* PWA installer */
#installBanner {display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--container-dark);
  color: var(--text-dark);
  border-top: 3px solid #fff;
  padding: 10px;
  text-align: center;
  z-index: 9999;
}
#installBtn, #closeBannerBtn {
   border-radius: 4px; border: 2px solid white; padding: 5px 10px; width: auto; height: auto; margin-left: 8px;transition: 0.4s;
}
#installBtn {
  background: var(--text-dark); color: color: var(--text-light);
}
#closeBannerBtn {
  background: transparent; color: var(--text-dark);
}
#installBtn:hover, #closeBannerBtn:hover {
  border: 2px solid #2575e7;
}