#donutContainer{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));width:100%;height:auto;gap:1rem;padding:1rem;overflow:hidden}#donutContainer .donut-card{background:#fff;border:1px solid #ddd;border-radius:20px;box-shadow:0 2px 4px #0000001a;padding:1rem;display:flex;flex-direction:column;align-items:center}#donutContainer .donut-card .donut-img-container{position:relative}#donutContainer .donut-card .donut-img-container .donut-img{width:100%;height:auto;border-radius:20px;object-fit:cover}#donutContainer .donut-card .donut-img-container .image-controls{position:absolute;bottom:10px;left:50%;transform:translate(-50%);display:flex;justify-content:space-between;width:100%;pointer-events:none}#donutContainer .donut-card .donut-img-container .image-controls button{background:#1a24d8b3;border:none;font-size:20px;cursor:pointer;padding:5px 10px;border-radius:15px;color:#fff;pointer-events:auto}#donutContainer .donut-card .donut-img-container .image-controls button:hover{background-color:#1a24d8e6}#donutContainer .donut-card .donut-rating{font-size:1.5rem;color:gold;margin-top:5px}#donutContainer .donut-card .donut-rating span{display:inline-block}#donutContainer .donut-card .donut-info{margin-top:1rem;text-align:center}#donutContainer .donut-card .donut-info .donut-name{font-weight:700;font-size:1.2rem;color:#181717}#donutContainer .donut-card .donut-info .donut-price{font-weight:700;border-style:outset;font-size:1rem;color:#777;margin-top:.5rem}#donutContainer .donut-card .donut-actions{margin-top:1rem;display:flex;align-items:center;gap:.5rem}#donutContainer .donut-card .donut-actions .button{background:#007bff;color:#fff;border:none;padding:.5rem 1rem;border-radius:5px;cursor:pointer}#donutContainer .donut-card .donut-actions .button:hover{background:#0056b3}#donutContainer .donut-card .donut-actions .donut-amount{font-size:.9rem;color:#161616}@media (max-width: 300px){.cart,.payment-area{font-size:12px}input[type=text],select{width:100%}}@media (max-width: 768px){header{flex-direction:column;padding:1rem}.header-container{flex-direction:column}.header-img{border-radius:0}#cart{max-width:100%;font-size:1rem}.donut-card{padding:.5rem}.donut-img{width:100%;height:auto}.payment-options{padding:8px}#confirmationMessage{width:90%;bottom:10px}}@media (min-width: 769px) and (max-width: 1024px){header{padding:2rem}.donut-card{flex-direction:row;gap:1rem}.donut-img-container{width:100%}#cart{max-width:80%;margin:auto}.payment-options{font-size:1.1rem}#confirmationMessage{width:80%}}@media (min-width: 1025px){#donutContainer{grid-template-columns:repeat(3,1fr)}.donut-card{padding:1.5rem}#cart{max-width:100%}.payment-options{font-size:1.2rem}#confirmationMessage{width:300px}}#errorContainer{color:red;font-weight:700;margin-top:10px;padding:10px;background-color:#ffe5e5;border:1px solid red;border-radius:5px;display:none}#errorContainer.visible{display:flex;margin-bottom:10px}#confirmationMessage{position:fixed;bottom:80px;left:50%;transform:translate(-50%);padding:10px 20px;background-color:#e6ffe6;color:#2a9d8f;border:2px solid #2a9d8f;border-radius:8px;box-shadow:0 4px 6px #0000001a;font-size:16px;font-weight:700;text-align:center;z-index:1000;display:flex;align-items:center;gap:10px;opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out;width:300px;height:auto}#confirmationMessage.visible{opacity:1;visibility:visible;transition:opacity .3s ease-in-out,visibility 0s linear 0s}#confirmationMessage .icon{font-size:20px}button.minus,button.plus{padding:.5rem 1rem;margin:0 .5rem;border:none;background-color:#007bff;color:#fff;cursor:pointer;border-radius:10px}button.minus:hover,button.plus:hover{background-color:#013c7b}#orderBtn{padding:.5rem 2rem;background-color:#ccc;color:#fff;border:none;border-radius:5px;cursor:not-allowed}#orderBtn:not([disabled]){background-color:#28a745;cursor:pointer}#orderBtn:not([disabled]):hover{background-color:#218838}#cart{background-color:#007bff;color:#f5f5f5;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:1rem;width:100%;max-width:55vh;padding:1rem;border-radius:20px;box-sizing:border-box;font-size:1.2rem;border:1px solid #262626;margin:auto 10px}#cart .product{display:table;display:flex;justify-content:space-between;width:100%;font-size:1rem}#cart .summary{margin-top:1rem;font-weight:700;width:100%;text-align:right}#cart:disabled{background-color:#007bff80;cursor:not-allowed}.payment-container{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:55vh;box-sizing:border-box}.payment-options{width:100%;max-width:75vh;border-radius:8px;padding:8px 16px;border:1px solid #151414;box-sizing:border-box;font-size:1.2rem;margin:30px 10px}.payment-options button{padding:8px 16px;font-size:1.2rem;background-color:green;border:0;border-radius:8px;cursor:pointer;color:#f5f5f5}.payment-options button:disabled{background-color:#0eed6f;cursor:not-allowed}.payment-options .selector{margin-block:16px;text-align:center}.payment-options input.small{width:80px}.payment-options span{color:#76550299}#card,#invoice{background-color:#eaf6f6;padding:1rem;border-radius:5px;margin:1rem 0;max-width:600px;margin:1rem auto}#card label,#invoice label{display:block;margin:.5rem 0}#invoice span,#card span{color:green}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}header{background-color:none;display:flex;justify-content:center;align-items:center;padding:0;margin:0}.header-container{height:100%;display:flex;justify-content:center;align-items:center;position:relative}.header-img{width:100%;height:100%;object-fit:cover;border-radius:20px}body{margin:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center}h1{font-size:1.6em;line-height:1}h2{font-size:1.2em;line-height:1}p{font-size:1em}input{font-size:1.2rem;padding:4px}.hidden{display:none}.visible{display:block}:root{color:#97c4e8;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}
