body{
font-family: 'Stylish', "Roboto Slab", serif;

/* Background image */
background-image: url("img/dumble.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;

padding:40px;
padding-top: 150px;
}

/* Title styling */
.title{
margin-bottom:40px;
text-align:center;
color:orange;
font-size:40px;
font-weight:bold;
}

.product-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}

.product-card{
background:white;
padding:20px;
border-radius:5px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
position:relative;
text-align:center;
}

.product-card img{
width:200px;
height:auto;
object-fit:contain;
}

.product-card img:hover{
transform:scale(1.05);
transition:.3s;
}

.badge{
position:absolute;
top:10px;
left:10px;
background:black;
color:white;
padding:5px 10px;
font-size:12px;
}

.category{
color:#888;
font-size:13px;
}

.product-card h3{
font-size:16px;
}

.product-card h3 a{
text-decoration:none;
color:black;
}

.price{
margin:10px 0;
}

.new{
font-size:20px;
font-weight:bold;
}

.old{
text-decoration:line-through;
color:gray;
margin-left:10px;
}

.buttons{
margin-top:15px;
}

.buy,.cart{
background:#f4b400;
border:none;
padding:10px 18px;
margin:5px;
cursor:pointer;
font-weight:bold;
}

.buy:hover,.cart:hover{
background:#e0a000;
}


/* LOCATION DROPDOWN */

.location-dropdown{
position:relative;
}

.location-menu{
position:absolute;
top:120%;
right:0;
width:600px;
padding:30px;
display:flex;
gap:30px;

background:rgba(255,255,255,0.9);
border-radius:15px;

opacity:0;
visibility:hidden;
transform:translateY(20px);
transition:0.4s;

z-index:9999;
}

.location-dropdown:hover .location-menu{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.location-column{
flex:1;
}

.location-map iframe{
width:100%;
height:150px;
border:none;
border-radius:10px;
}

@media (max-width:576px){

.product-grid{
    grid-template-columns: 1fr;
    gap:20px;
    padding:20px;
}

.product-card{
    padding:15px;
}

.product-card h3{
    font-size:18px;
}

.price{
    font-size:16px;
}

.buttons{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.buy,
.cart{
    width:100%;
}

.navbar-brand{
    font-size:18px !important;
}

}

/* TERMS POPUP */

.terms-popup-box{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
display:none;
justify-content:center;
align-items:center;
z-index:9999;
}

.terms-content{
background:white;
color:black;
padding:30px;
border-radius:10px;
text-align:center;
width:320px;
position:relative;
}

.terms-content button{
margin-top:15px;
padding:10px 20px;
background:#f4b400;
border:none;
cursor:pointer;
font-weight:bold;
}

.terms-link{
color:#f4b400;
font-weight:bold;
cursor:pointer;
text-decoration:underline;
}

.close-popup{
position:absolute;
top:10px;
right:15px;
font-size:18px;
cursor:pointer;
font-weight:bold;
}

.close-popup:hover{
color:red;
}

/* BACK BUTTON */

.back-container{
text-align:center;
margin-top:60px;
}

.back-btn{
background:#fdba02;
color:black;
border:none;
padding:12px 30px;
font-size:18px;
font-weight:bold;
border-radius:6px;
cursor:pointer;
}

.back-btn:hover{
background:#e0a800;
}

/* ADD TO CART SUCCESS POPUP */

.cart-success-popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
display:none;
justify-content:center;
align-items:center;
z-index:9999;
}

.cart-success-box{
background:white;
width:280px;
text-align:center;
padding:30px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.3);
}

.success-icon{
width:60px;
height:60px;
border-radius:50%;
border:3px solid #4CAF50;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
color:#4CAF50;
margin:auto;
margin-bottom:15px;
}

.cart-success-box button{
background:#4A90E2;
border:none;
color:white;
padding:6px 18px;
border-radius:5px;
cursor:pointer;
}

/* TERMS CHECKBOX */

.terms-check{
margin-top:15px;
margin-bottom:15px;
font-size:14px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}

.terms-check input{
transform: scale(1.6);
cursor:pointer;
}

#continueBtn:disabled{
background:#ccc;
cursor:not-allowed;
opacity:0.7;
}