/* RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
background: #0f0f0f;
color: white;
min-height: 100vh;
}
/* HEADER */
.header {
position: sticky;
top: 0;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
background: rgba(15, 15, 15, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 179, 71, 0.2);
}
.logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 24px;
font-weight: bold;
color: #ffb347;
}
.logo img {
width: 45px;
height: 45px;
border-radius: 50%;
object-fit: cover;
}
.navbar {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.navbar a {
color: white;
text-decoration: none;
font-weight: bold;
padding: 8px 15px;
border-radius: 20px;
transition: 0.3s ease;
}
.navbar a:hover,
.navbar a.active {
background: #ffb347;
color: black;
}
/* HERO */
.hero {
height: 280px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)),
url("https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=1600&q=80") center/cover;
}
.drinks-hero {
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)),
url("https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=1600&q=80") center/cover;
}
.history-hero {
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)),
url("https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1600&q=80") center/cover;
}
.hero-content h1 {
font-size: 42px;
margin-bottom: 10px;
}
.hero-content p {
font-size: 18px;
color: #ddd;
}
/* SECTION TITLES */
.section-title {
text-align: center;
padding: 40px 20px 20px;
}
.section-title h2 {
font-size: 32px;
color: #ffb347;
}
/* PRODUCTS */
.products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 25px;
padding: 30px;
}
.card {
background: #1b1b1b;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0,0,0,0.4);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 30px rgba(255, 179, 71, 0.25);
}
.card img {
width: 100%;
height: 190px;
object-fit: cover;
}
.card h3 {
padding: 18px 18px 5px;
font-size: 22px;
}
.price {
padding: 0 18px 15px;
color: #ffb347;
font-size: 22px;
font-weight: bold;
}
.actions {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
padding: 0 18px 20px;
}
.actions button {
width: 42px;
height: 42px;
border: none;
border-radius: 50%;
background: #ffb347;
color: black;
font-size: 22px;
font-weight: bold;
cursor: pointer;
transition: 0.3s ease;
}
.actions button:hover {
transform: scale(1.08);
background: #ffc56a;
}
/* FLOATING BUTTONS */
.floating-buttons {
position: fixed;
right: 20px;
bottom: 20px;
display: flex;
flex-direction: column;
gap: 12px;
z-index: 900;
}
.cart-btn,
.order-btn {
border: none;
border-radius: 30px;
padding: 14px 22px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 6px 20px rgba(0,0,0,0.35);
transition: 0.3s ease;
}
.cart-btn {
background: #2a2a2a;
color: white;
}
.order-btn {
background: #ffb347;
color: black;
}
.cart-btn:hover,
.order-btn:hover {
transform: translateY(-2px);
}
/* MODALS */
.modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.75);
justify-content: center;
align-items: center;
padding: 20px;
z-index: 2000;
/* max-height: 300px; */
}
.modal-content {
width: 100%;
max-width: 520px;
background: #151515;
border-radius: 24px;
border: 1px solid rgba(255, 179, 71, 0.35);
box-shadow: 0 20px 45px rgba(0,0,0,0.55);
padding: 24px;
/* max-height: 400px; */
}
.small-modal {
max-width: 420px;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}
.modal-header h2 {
color: #ffb347;
font-size: 26px;
}
.close-btn {
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background: #2a2a2a;
color: white;
font-size: 18px;
cursor: pointer;
}
.cart-items,
.order-summary {
display: flex;
flex-direction: column;
gap: 12px;
max-height: 170px;
overflow-y: auto;
padding-right: 6px;
margin-bottom: 20px;
}
.cart-line,
.summary-line {
display: flex;
justify-content: space-between;
align-items: center;
background: #202020;
border-radius: 16px;
padding: 12px 14px;
}
.cart-total {
text-align: center;
font-size: 22px;
font-weight: bold;
color: #ffb347;
margin-bottom: 22px;
}
.order-form {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 22px;
}
.order-form label {
font-weight: bold;
color: #f2f2f2;
}
.order-form input {
width: 100%;
padding: 14px 16px;
border-radius: 14px;
border: 1px solid #2f2f2f;
background: #202020;
color: white;
font-size: 16px;
}
.order-form input:focus {
outline: none;
border-color: #ffb347;
box-shadow: 0 0 0 3px rgba(255, 179, 71, 0.2);
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
}
.cancel-btn,
.confirm-btn,
.delete-history-btn {
border: none;
border-radius: 30px;
padding: 13px 22px;
font-weight: bold;
cursor: pointer;
transition: 0.3s ease;
}
.cancel-btn {
background: #2f2f2f;
color: white;
}
.confirm-btn {
background: #ffb347;
color: black;
}
.danger-btn {
background: #ff5c5c;
color: white;
}
.cancel-btn:hover,
.confirm-btn:hover,
.delete-history-btn:hover {
transform: translateY(-2px);
}
.confirm-message {
color: #ddd;
line-height: 1.7;
margin-bottom: 22px;
text-align: center;
}
/* HISTORY */
.history-container {
padding: 30px;
max-width: 900px;
margin: 0 auto;
}
.history-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.history-card {
background: #1b1b1b;
border-radius: 22px;
padding: 22px;
border: 1px solid rgba(255,255,255,0.05);
}
.history-card h3 {
color: #ffb347;
margin-bottom: 12px;
}
.history-card p {
margin-bottom: 8px;
color: #ddd;
}
.history-products {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.08);
display: flex;
flex-direction: column;
gap: 8px;
}
.history-total {
margin-top: 14px;
color: #ffb347;
font-weight: bold;
font-size: 18px;
}
.history-actions {
text-align: center;
margin-top: 32px;
}
.delete-history-btn {
background: #ff5c5c;
color: white;
}
.empty-history {
background: #1b1b1b;
border-radius: 24px;
padding: 50px 30px;
text-align: center;
border: 1px dashed rgba(255, 179, 71, 0.25);
}
.empty-icon {
font-size: 54px;
margin-bottom: 16px;
}
.empty-history h3 {
margin-bottom: 10px;
color: #ffb347;
}
.empty-history p {
color: #bbb;
}
/* NOTIFICATION */
.notification {
position: fixed;
right: 20px;
bottom: 20px;
background: #ffb347;
color: black;
padding: 14px 18px;
border-radius: 30px;
font-weight: bold;
opacity: 0;
transform: translateY(20px);
transition: 0.3s ease;
z-index: 3000;
}
.notification.show {
opacity: 1;
transform: translateY(0);
}
/* RESPONSIVE */
@media (max-width: 768px) {
.header {
flex-direction: column;
gap: 15px;
padding: 15px 20px;
}
.navbar {
justify-content: center;
}
.hero-content h1 {
font-size: 30px;
}
.products {
grid-template-columns: 1fr;
padding: 20px;
}
.floating-buttons {
right: 12px;
left: 300px;
bottom: 15px;
}
.cart-btn,
.order-btn {
width: 50px;
height: 50px;
border-radius: 50%;
display:flex;
justify-content: center;
align-items: center;

}
.cart-btn span,.order-btn span  {
    display: none;
}


}
.modal-content {
padding: 20px;
}
.modal-actions {
flex-direction: column;
}
.history-container {
padding: 20px;
}
}