*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
scroll-behavior:smooth;
}

body{
background: linear-gradient(135deg, #f5f7fa 0%, #f0e6ff 100%);
min-height: 100vh;
}

/* LOGIN PAGE STYLES */
.login-page{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(135deg, #0083b0 0%, #005f7a 100%);
animation: gradientShift 8s ease infinite;
background-size: 200% 200%;
}

@keyframes gradientShift{
0%{
background-position: 0% 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0% 50%;
}
}

.login-container{
width: 100%;
max-width: 500px;
padding: 20px;
}

.login-box{
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
overflow: hidden;
animation: slideUp 0.6s ease;
}

.login-header{
background: linear-gradient(135deg, #0083b0 0%, #005f7a 100%);
color: white;
padding: 50px 40px 35px;
text-align: center;
border-radius: 20px 20px 0 0;
}

.header-top{
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}

.logo-large{
font-size: 4em;
display: inline-block;
animation: float 3s ease-in-out infinite;
}

.login-header h1{
font-size: 2.2em;
margin: 15px 0 8px;
font-weight: 700;
letter-spacing: 0.5px;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.header-subtitle{
font-size: 1.05em;
opacity: 0.95;
margin-bottom: 12px;
font-weight: 500;
}

.owner-name-login{
font-size: 0.95em;
opacity: 0.85;
font-style: italic;
font-weight: 600;
border-top: 1px solid rgba(255,255,255,0.2);
padding-top: 12px;
margin-top: 12px;
}

.login-form{
padding: 40px;
background: white;
border-radius: 0 0 20px 20px;
}

.login-form h2{
color: #0083b0;
margin-bottom: 25px;
text-align: center;
font-size: 1.5em;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}

.login-form h2 i{
font-size: 1.2em;
}

.form-group{
margin-bottom: 22px;
}

.form-group label{
display: flex;
align-items: center;
gap: 8px;
color: #333;
font-weight: 600;
margin-bottom: 8px;
font-size: 0.95em;
}

.form-group label i{
color: #0083b0;
font-size: 1.05em;
}

.form-group input{
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 1em;
transition: all 0.3s ease;
background: #f9f9f9;
font-family: 'Poppins', sans-serif;
}

.form-group input:focus{
outline: none;
border-color: #0083b0;
box-shadow: 0 0 12px rgba(0,131,176,0.15);
background: white;
}

.form-group input::placeholder{
color: #bbb;
}

.btn-login{
width: 100%;
padding: 13px 20px;
font-size: 1em;
font-weight: 700;
margin-top: 10px;
letter-spacing: 0.5px;
}

.btn-login:hover{
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,131,176,0.25);
}

.demo-text{
text-align: center;
color: #999;
font-size: 0.8em;
margin-top: 18px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}

.demo-text i{
font-size: 0.9em;
color: #0083b0;
}

.trust-badges{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid #f0f0f0;
}

.badge-item{
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 12px;
background: #f0f8fc;
border-radius: 10px;
color: #0083b0;
font-size: 0.8em;
font-weight: 600;
text-align: center;
transition: all 0.3s ease;
}

.badge-item i{
font-size: 1.4em;
}

.badge-item:hover{
background: #e8f4f8;
transform: translateY(-3px);
}

.main-content{
animation: fadeIn 0.6s ease;
}

/* NAVBAR UPDATES */
.nav-right{
display: flex;
align-items: center;
gap: 20px;
}

.user-info{
display: flex;
align-items: center;
gap: 8px;
color: #0083b0;
font-weight: 600;
cursor: pointer;
padding: 8px 15px;
background: #f0f0f0;
border-radius: 25px;
transition: all 0.3s ease;
}

.user-info:hover{
background: #e8f4f8;
transform: scale(1.05);
}

.user-info i{
font-size: 1.3em;
}

.wishlist-icon{
position: relative;
font-size: 1.5em;
cursor: pointer;
color: #ff4b5c;
transition: transform 0.3s ease;
}

.wishlist-icon:hover{
transform: scale(1.2);
}

.wishlist-count{
position: absolute;
top: -8px;
right: -8px;
background: #ff4b5c;
color: white;
border-radius: 50%;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75em;
font-weight: 700;
}

.btn-logout{
background: #ff4b5c !important;
padding: 8px 15px !important;
font-size: 0.9em !important;
display: flex;
align-items: center;
gap: 8px;
}

.btn-logout:hover{
background: #e63946 !important;
}

/* RESPONSIVE LOGIN */
@media(max-width: 768px){
.login-container{
max-width: 100%;
margin: 20px;
}

.login-box{
border-radius: 15px;
}

.login-header{
padding: 30px;
}

.login-header h1{
font-size: 2em;
}

.login-form{
padding: 30px 20px;
}

.form-group input{
padding: 10px 12px;
font-size: 16px;
}

.nav-right{
gap: 10px;
flex-wrap: wrap;
}

.btn-logout{
padding: 6px 12px !important;
font-size: 0.8em !important;
}
}

header{
height:90vh;
background:url('https://images.unsplash.com/photo-1587854692152-cbe660dbde88?w=1200&h=900&fit=crop') no-repeat center/cover;
display:flex;
align-items:center;
justify-content:center;
color:white;
text-align:center;
position:relative;
animation: fadeInDown 0.8s ease-in;
}

header::before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0,131,176,0.6) 0%, rgba(0,95,122,0.6) 100%);
}

.overlay{
background:transparent;
padding:60px 40px;
border-radius:20px;
backdrop-filter: blur(10px);
animation: slideUp 0.8s ease;
position: relative;
z-index: 1;
}

.owner-badge{
background: rgba(76,175,80,0.25);
border: 1px solid rgba(76,175,80,0.5);
color: white;
padding: 10px 20px;
border-radius: 25px;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.9em;
font-weight: 600;
margin-bottom: 20px;
backdrop-filter: blur(10px);
animation: slideDown 0.8s ease;
}

.owner-badge i{
color: #4CAF50;
font-size: 1.1em;
}

header h1{
font-size: 3.5em;
margin-bottom: 15px;
text-shadow: 3px 3px 6px rgba(0,0,0,0.4);
font-weight: 700;
animation: slideDown 0.8s ease;
}

.tagline{
font-size: 1.5em;
margin-bottom: 25px;
opacity: 0.95;
animation: fadeIn 1s ease 0.2s both;
}

.owner-section{
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 12px;
padding: 20px 30px;
margin: 25px 0;
backdrop-filter: blur(10px);
animation: fadeIn 1s ease 0.3s both;
}

.owner-info{
text-align: center;
}

.owner-label{
font-size: 0.95em;
opacity: 0.9;
margin-bottom: 8px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

.owner-name{
font-size: 1.6em;
font-weight: 700;
margin-bottom: 8px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
letter-spacing: 0.5px;
}

.owner-experience{
font-size: 0.95em;
opacity: 0.85;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
font-style: italic;
}

@keyframes slideDown{
from{
opacity: 0;
transform: translateY(-30px);
}
to{
opacity: 1;
transform: translateY(0);
}
}

nav, .navbar{
display:flex;
justify-content:space-between;
padding:15px 40px;
background: linear-gradient(135deg, white 0%, #f8f9fa 100%);
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
position:sticky;
top:0;
z-index: 100;
align-items: center;
border-bottom: 2px solid #e8f4f8;
}

.nav-container{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}

.nav-logo{
font-size: 1.5em;
font-weight: 700;
color: #0083b0;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 12px;
}

.logo-icon{
font-size: 1.8em;
}

.logo-text{
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.2;
}

.stl-name{
font-size: 1em;
font-weight: 700;
color: #0083b0;
}

.stl-owner{
font-size: 0.7em;
color: #666;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
}

.nav-logo:hover{
transform: scale(1.1);
text-shadow: 0 0 10px rgba(0,131,176,0.3);
}

.nav-menu{
display:flex;
list-style:none;
gap: 30px;
}

.nav-menu li a{
text-decoration:none;
color:#333;
font-weight:600;
transition: all 0.3s ease;
position: relative;
}

.nav-menu li a:hover{
color: #0083b0;
}

.nav-menu li a::after{
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #0083b0, #25D366);
transition: width 0.3s ease;
}

.nav-menu li a:hover::after{
width: 100%;
}

.cart-icon{
position: relative;
font-size: 1.5em;
cursor: pointer;
color: #0083b0;
transition: transform 0.3s ease;
}

.cart-icon:hover{
transform: scale(1.1);
}

.cart-count{
position: absolute;
top: -8px;
right: -8px;
background: #ff4b5c;
color: white;
border-radius: 50%;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75em;
font-weight: 700;
}

section{
padding:80px 40px;
text-align:center;
animation: fadeIn 0.6s ease;
}

section h2{
font-size: 2.5em;
margin-bottom: 40px;
color: #002b36;
position: relative;
display: inline-block;
}

section h2::after{
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #0083b0, #25D366);
border-radius: 2px;
}

.about-container{
display:flex;
align-items:center;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

.about-container img{
width:400px;
border-radius:15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
transition: transform 0.3s ease;
}

.about-container img:hover{
transform: scale(1.05);
}

.about-text{
flex: 1;
font-size: 1.05em;
line-height: 2;
color: #555;
}

.about-text h3{
color: #0083b0;
font-size: 1.8em;
margin-bottom: 20px;
}

.about-text p{
color: #666;
}

.filter-section{
display: flex;
gap: 15px;
justify-content: center;
margin-bottom: 40px;
flex-wrap: wrap;
padding: 20px;
background: linear-gradient(135deg, rgba(0,131,176,0.1) 0%, rgba(37,211,102,0.1) 100%);
border-radius: 15px;
}

#search, #categoryFilter{
padding: 12px 15px;
border: 2px solid #0083b0;
border-radius: 10px;
font-size: 1em;
transition: all 0.3s ease;
background: white;
flex-shrink: 0;
}

#search{
flex-grow: 1;
min-width: 200px;
}

#categoryFilter{
min-width: 200px;
}

#search:focus, #categoryFilter:focus{
outline: none;
border-color: #005f7a;
box-shadow: 0 0 10px rgba(0,131,176,0.3);
background: #f9f9f9;
}

#search::placeholder{
color: #999;
}

.offers-banner{
background: linear-gradient(135deg, #ff4b5c 0%, #ff6b7a 100%);
color: white;
padding: 20px;
border-radius: 12px;
margin-bottom: 30px;
display: flex;
align-items: center;
gap: 15px;
font-size: 1.1em;
font-weight: 600;
box-shadow: 0 5px 20px rgba(255, 75, 92, 0.3);
animation: pulse 2s infinite;
}

.offers-banner i{
font-size: 1.5em;
}

.offers-banner strong{
background: rgba(255,255,255,0.2);
padding: 2px 8px;
border-radius: 5px;
}

/* HEALTH TIPS SECTION */
.tips-section{
background: linear-gradient(135deg, #e8f4f8 0%, #f9f9f9 100%);
border-radius: 20px;
margin: 40px auto;
max-width: 1200px;
}

.tips-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 30px;
}

.tip-card{
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
text-align: center;
transition: all 0.3s ease;
}

.tip-card:hover{
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.tip-card i{
font-size: 2.5em;
margin-bottom: 15px;
color: #0083b0;
}

.tip-card h3{
color: #002b36;
margin-bottom: 10px;
font-size: 1.2em;
}


/* Consult / Owner styles */
.consult-section{margin-top:34px;padding:22px;background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:14px}
.consult-grid{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}
.owner-card{display:flex;gap:16px;align-items:flex-start;background:rgba(255,255,255,0.02);padding:14px;border-radius:12px}
.owner-photo{width:88px;height:88px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#4a8af4);display:flex;align-items:center;justify-content:center;font-size:36px}
.owner-info h3{margin:0}
.role{color:var(--muted);margin:4px 0}
.owner-bio{margin:8px 0;color:var(--muted)}
.owner-stats{color:var(--muted);font-size:14px;margin-bottom:10px}
.owner-actions .btn{margin-right:8px}
.consult-info{padding:8px}
.consult-info ol{margin-left:16px;color:var(--muted)}
.consult-hours{margin-top:10px}
.consult-note{color:var(--muted)}

/* Appointment modal sized form */
.modal-small{max-width:520px;padding:18px}
.form-group{margin-bottom:12px}
.form-group label{display:block;font-weight:600;margin-bottom:6px}
.form-group input,.form-group textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(0,0,0,0.3);color:var(--text)}

/* Responsive adjustments */
@media (max-width:900px){
	.tips-grid{grid-template-columns:repeat(2,1fr)}
	.consult-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
	.tips-grid{grid-template-columns:1fr}
	.owner-photo{width:72px;height:72px;font-size:28px}
}
.tip-card p{
color: #666;
line-height: 1.6;
font-size: 0.9em;
}

/* Product image styles */
.product-image-container{overflow:hidden;border-radius:12px;background:#f0f0f0}
.product-image-container img.product-thumb{width:100%;height:160px;object-fit:cover;display:block;border-radius:10px}
.product-image{overflow:hidden;border-radius:12px;background:#f0f0f0}
.product-modal-img{width:100%;height:220px;object-fit:cover;border-radius:12px;display:block}

/* Cart thumbnails */
.cart-item-image img.cart-thumb{width:72px;height:72px;object-fit:cover;border-radius:8px}
.cart-item-image{min-width:72px}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:16px;
margin-bottom: 30px;
}

/* BEAUTIFUL PRODUCT CARD STYLING */
.product-card{
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0,131,176,0.08);
transition: all 0.35s ease;
position: relative;
display: flex;
flex-direction: column;
min-height: auto;
color: #333;
cursor: pointer;
border: 1px solid rgba(0,131,176,0.06);
}

.product-card:hover{
transform: translateY(-6px);
box-shadow: 0 12px 32px rgba(0,131,176,0.12);
border-color: rgba(0,131,176,0.12);
}

.card-header-simple{
position: relative;
padding: 14px 14px 10px 14px;
background: white;
border-bottom: 1px solid #f0f0f0;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
}

.medicine-name-simple{
font-size: 1em;
font-weight: 700;
color: #0083b0;
margin: 0;
line-height: 1.3;
flex: 1;
}

.wishlist-btn{
position: relative;
top: 0;
right: 0;
background: white;
border: none;
color: #999;
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.95em;
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
flex-shrink: 0;
}

.wishlist-btn:hover{
color: #ff4b5c;
background: #fff5f7;
transform: scale(1.1);
}

.card-body{
padding: 12px 14px 14px 14px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
background: white;
}

.card-badges{
display: flex;
gap: 6px;
margin-bottom: 10px;
flex-wrap: wrap;
align-items: center;
}

.badge{
font-size: 0.65em;
font-weight: 700;
padding: 4px 9px;
border-radius: 5px;
background: #e8f4f8;
color: #0083b0;
border: none;
display: inline-flex;
gap: 4px;
align-items: center;
white-space: nowrap;
}

.badge i{
font-size: 0.85em;
}

.badge-stock{
font-size: 0.62em;
background: #e8f5e9;
color: #2e7d32;
}

.medicine-desc{
font-size: 0.8em;
color: #666;
margin-bottom: 10px;
line-height: 1.3;
flex: 1;
}

.card-pricing{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 10px;
border-top: 1px solid #f0f0f0;
}

.price-section{
display: flex;
flex-direction: column;
gap: 2px;
}

.price-label{
font-size: 0.62em;
color: #999;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.4px;
}

.price-value{
font-size: 1.3em;
font-weight: 700;
color: #0083b0;
}

.add-to-cart-btn{
background: #0083b0;
border: none;
color: white;
padding: 7px 11px;
border-radius: 6px;
font-weight: 600;
font-size: 0.8em;
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}

.add-to-cart-btn:hover{
background: #005f7a;
transform: scale(1.06);
}

.add-to-cart-btn:active{
transform: scale(0.95);
}

.card{
background:white;
padding:25px;
border-radius:15px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
transition: all 0.3s ease;
border: 1px solid #f0f0f0;
position: relative;
}

.card:hover{
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
border-color: #0083b0;
}

.card h3{
color: #002b36;
margin-bottom: 10px;
font-size: 1.2em;
}

.card p{
color: #666;
font-size: 0.95em;
margin-bottom: 15px;
}

.card .price{
font-size: 1.5em;
font-weight: 700;
color: #0083b0;
margin-bottom: 15px;
}

.card .category{
display: inline-block;
background: #e8f4f8;
color: #0083b0;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8em;
margin-bottom: 15px;
}

.card .quantity-control{
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 15px 0;
}

.card .quantity-control button{
width: 30px;
height: 30px;
border: 1px solid #ddd;
background: white;
border-radius: 5px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s ease;
}

.card .quantity-control button:hover{
background: #f5f5f5;
border-color: #0083b0;
color: #0083b0;
}

.card .quantity-control input{
width: 50px;
text-align: center;
border: 1px solid #ddd;
border-radius: 5px;
padding: 5px;
}

.btn{
display:inline-block;
padding:12px 25px;
background:#0083b0;
color:white;
border-radius:8px;
text-decoration:none;
margin-top:10px;
cursor:pointer;
border:none;
font-weight: 600;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
}

.btn::before{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.2);
transition: left 0.4s ease;
}

.btn:hover::before{
left: 100%;
}

.btn-primary{
background: linear-gradient(135deg, #0083b0 0%, #005f7a 100%);
}

.btn-primary:hover{
background: linear-gradient(135deg, #005f7a 0%, #003d4d 100%);
}

.btn:hover{
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,131,176,0.4);
}

.btn-whatsapp{
background: linear-gradient(135deg, #25D366 0%, #1fb354 100%);
}

.btn-whatsapp:hover{
background: linear-gradient(135deg, #1fb354 0%, #158f45 100%);
box-shadow: 0 8px 20px rgba(37,211,102,0.4);
}

.btn-call{
background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
}

.btn-call:hover{
background: linear-gradient(135deg, #357abd 0%, #2a5a99 100%);
box-shadow: 0 8px 20px rgba(74,144,226,0.4);
}

.btn-video{
background: linear-gradient(135deg, #ff4b5c 0%, #e63946 100%);
}

.btn-video:hover{
background: linear-gradient(135deg, #e63946 0%, #d62e38 100%);
box-shadow: 0 8px 20px rgba(255,75,92,0.4);
}

.whatsapp{
background:#25D366;
}

.video{
background:#ff4b5c;
}

.cart-section, .consult-section, .contact-section{
background: white;
border-radius: 20px;
margin: 40px auto;
max-width: 1200px;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
padding: 40px;
}

.cart-container{
display: flex;
gap: 30px;
justify-content: space-between;
flex-wrap: wrap;
}

.cart-items{
flex: 1.5;
text-align: left;
min-width: 300px;
}

.cart-items-header{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid #0083b0;
}

.cart-items-header h3{
color: #002b36;
font-size: 1.5em;
margin: 0;
}

.items-count{
background: #0083b0;
color: white;
padding: 5px 15px;
border-radius: 20px;
font-weight: 600;
font-size: 0.9em;
}

.cart-item-card{
display: flex;
gap: 15px;
align-items: flex-start;
padding: 18px;
background: linear-gradient(135deg, #f9f9f9 0%, #f0f6fb 100%);
border-radius: 15px;
margin-bottom: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.06);
transition: all 0.3s ease;
border: 1px solid #e8e8e8;
}

.cart-item-card:hover{
box-shadow: 0 8px 25px rgba(0,131,176,0.15);
transform: translateX(5px);
border-color: #0083b0;
}

.cart-item-image{
font-size: 2.5em;
min-width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
}

.cart-item-info{
flex: 1;
min-width: 150px;
}

.cart-item-info h4{
margin: 0 0 8px 0;
color: #002b36;
font-size: 1.05em;
font-weight: 700;
}

.item-category{
color: #666;
font-size: 0.85em;
margin: 5px 0;
}

.item-stock{
color: #25D366;
font-size: 0.85em;
font-weight: 600;
margin: 5px 0 0 0;
}

.cart-item-actions{
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}

.quantity-controls{
display: flex;
align-items: center;
gap: 8px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
padding: 4px;
}

.qty-btn{
width: 32px;
height: 32px;
border: none;
background: #0083b0;
color: white;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}

.qty-btn:hover{
background: #005f7a;
transform: scale(1.1);
}

.qty-input{
width: 45px;
text-align: center;
border: none;
background: transparent;
font-weight: 700;
color: #002b36;
font-size: 0.95em;
}

.cart-item-total{
font-size: 1.3em;
font-weight: 700;
color: #0083b0;
min-width: 80px;
text-align: right;
}

.remove-btn{
width: 40px;
height: 40px;
border: 2px solid #ff4b5c;
background: transparent;
color: #ff4b5c;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}

.remove-btn:hover{
background: #ff4b5c;
color: white;
transform: scale(1.1);
}

.empty-cart-state{
text-align: center;
padding: 60px 20px;
background: linear-gradient(135deg, #f9f9f9 0%, #f0f6fb 100%);
border-radius: 15px;
border: 2px dashed #e0e0e0;
}

.empty-icon{
font-size: 4em;
margin-bottom: 15px;
opacity: 0.7;
}

.empty-cart-state h3{
color: #002b36;
font-size: 1.5em;
margin-bottom: 10px;
}

.empty-cart-state p{
color: #999;
font-size: 1em;
}

.cart-summary{
flex: 0 1 350px;
background: linear-gradient(135deg, #0083b0 0%, #005f7a 100%);
padding: 30px;
border-radius: 15px;
text-align: left;
color: white;
box-shadow: 0 10px 40px rgba(0,131,176,0.2);
position: sticky;
top: 120px;
}

.cart-summary h3{
color: white;
margin-bottom: 25px;
font-size: 1.4em;
border-bottom: 2px solid rgba(255,255,255,0.3);
padding-bottom: 15px;
}

.cart-summary p{
display: flex;
justify-content: space-between;
margin-bottom: 15px;
color: rgba(255,255,255,0.9);
font-weight: 500;
font-size: 0.95em;
}

.cart-summary h4{
font-size: 1.8em;
color: #fff;
margin-top: 25px;
padding-top: 20px;
border-top: 2px solid rgba(255,255,255,0.3);
font-weight: 700;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.cart-summary .btn{
width: 100%;
margin-top: 25px;
padding: 15px;
font-size: 1.05em;
}

.empty-cart{
text-align: center;
color: #999;
font-style: italic;
display: none;
}

.address-section{
background: rgba(255,255,255,0.1);
border-radius: 10px;
padding: 20px;
margin: 20px 0;
border: 1px solid rgba(255,255,255,0.2);
}

.address-section h4{
margin: 0 0 15px 0;
font-size: 1.1em;
color: white;
display: flex;
align-items: center;
gap: 10px;
border-top: none;
padding-top: 0;
margin-top: 0;
}

.address-section h4 i{
font-size: 1.2em;
}

.address-input{
width: 100%;
padding: 12px;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 8px;
font-family: 'Poppins', sans-serif;
font-size: 0.95em;
color: #333;
background: white;
resize: vertical;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.address-input:focus{
outline: none;
border-color: white;
box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
}

.address-hint{
font-size: 0.85em;
color: rgba(255,255,255,0.7);
margin-top: 8px;
font-style: italic;
}

.consult-buttons{
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}

.contact-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-top: 40px;
}

.contact-item{
padding: 30px;
background: linear-gradient(135deg, #f5f7fa 0%, #e8f4f8 100%);
border-radius: 12px;
transition: all 0.3s ease;
}

.contact-item:hover{
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,131,176,0.15);
}

.contact-item i{
font-size: 2em;
color: #0083b0;
margin-bottom: 15px;
}

.contact-item p{
color: #555;
font-weight: 500;
}

/* LOCATION SECTION STYLES */
.location-container{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-top: 40px;
align-items: start;
}

.address-card{
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
border: 1px solid #e8e8e8;
}

.shop-image{
width: 100%;
height: 280px;
overflow: hidden;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.shop-image img{
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}

.shop-image:hover img{
transform: scale(1.05);
}

.shop-badge{
position: absolute;
bottom: 15px;
left: 15px;
background: rgba(0,131,176,0.95);
color: white;
padding: 12px 20px;
border-radius: 25px;
font-weight: 600;
font-size: 0.95em;
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
z-index: 10;
}

.address-details{
padding: 30px;
}

.address-details h3{
color: #002b36;
font-size: 1.5em;
margin-bottom: 25px;
border-bottom: 2px solid #0083b0;
padding-bottom: 15px;
}

.address-item{
display: flex;
gap: 15px;
margin-bottom: 25px;
align-items: flex-start;
}

.address-item i{
font-size: 1.5em;
color: #0083b0;
min-width: 30px;
margin-top: 5px;
}

.address-item > div{
flex: 1;
}

.address-item .label{
color: #999;
font-size: 0.85em;
font-weight: 600;
margin: 0 0 5px 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.address-item .value{
color: #002b36;
font-size: 1em;
font-weight: 600;
margin: 0;
}

.address-item .value a{
color: #0083b0;
text-decoration: none;
transition: all 0.3s ease;
}

.address-item .value a:hover{
color: #005f7a;
text-decoration: underline;
}

.address-item .coords{
color: #666;
font-size: 0.85em;
margin: 5px 0 0 0;
}

.map-container{
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.map-container iframe{
border: none;
}

@media(max-width: 1024px){
.location-container{
grid-template-columns: 1fr;
gap: 30px;
}

.map-container iframe{
height: 400px !important;
}
}

@media(max-width: 768px){
.location-container{
grid-template-columns: 1fr;
gap: 20px;
}

.shop-image{
height: 220px;
}

.shop-badge{
bottom: 10px;
left: 10px;
padding: 10px 15px;
font-size: 0.85em;
}

.address-card{
border-radius: 12px;
}

.address-details{
padding: 20px;
}

.address-details h3{
font-size: 1.3em;
margin-bottom: 20px;
}

.address-item{
margin-bottom: 20px;
}

.address-item i{
font-size: 1.3em;
}

.map-container iframe{
height: 300px !important;
}
}

footer{
background: linear-gradient(135deg, #002b36 0%, #003d4d 100%);
color:white;
padding:40px 20px;
text-align: center;
margin-top: 60px;
}

footer p{
margin: 10px 0;
}

.credit{
font-size: 0.9em;
opacity: 0.8;
}

/* MODAL STYLES */
.modal{
display: none;
position: fixed;
z-index: 2000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
animation: fadeIn 0.3s ease;
overflow-y: auto;
}

.modal.show{
display: flex;
align-items: center;
justify-content: center;
}

.modal-content{
background-color: white;
margin: 20px;
padding: 30px;
border-radius: 15px;
width: 90%;
max-width: 600px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: slideUp 0.3s ease;
}

.modal-large{
max-width: 900px;
}

.close{
color: #999;
float: right;
font-size: 2em;
font-weight: bold;
cursor: pointer;
transition: color 0.3s ease;
}

.close:hover{
color: #ff4b5c;
}

.modal-body{
display: grid;
grid-template-columns: 1fr 2fr;
gap: 30px;
margin-top: 20px;
}

.modal-left{
text-align: center;
}

.product-image{
font-size: 5em;
margin-bottom: 20px;
}

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

.modal-details{
text-align: left;
margin-top: 20px;
}

.detail-item{
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid #eee;
}

.detail-item span:first-child{
font-weight: 600;
color: #333;
}

.detail-item span:last-child{
color: #0083b0;
font-weight: 500;
}

.price{
color: #ff4b5c !important;
font-size: 1.2em !important;
}

.modal-info{
background: #f9f9f9;
padding: 20px;
border-radius: 10px;
margin-top: 20px;
}

.modal-info h3{
color: #002b36;
margin-bottom: 10px;
}

.modal-info p{
color: #666;
line-height: 1.8;
font-size: 0.9em;
}

/* DASHBOARD STYLES */
.dashboard-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
margin-bottom: 40px;
}

.dashboard-card{
background: linear-gradient(135deg, #e8f4f8 0%, #f0f6fa 100%);
padding: 25px;
border-radius: 12px;
text-align: center;
border-left: 4px solid #0083b0;
}

.dashboard-card i{
font-size: 2em;
color: #0083b0;
margin-bottom: 10px;
}

.dashboard-card h3{
color: #002b36;
margin-bottom: 10px;
font-size: 1em;
}

.dashboard-card p{
color: #666;
margin: 5px 0;
}

.stat-number{
font-size: 2em;
font-weight: 700;
color: #0083b0;
}

.dashboard-section{
background: white;
padding: 25px;
border-radius: 12px;
margin-top: 20px;
border: 1px solid #e8e8e8;
}

.dashboard-section h3{
color: #002b36;
margin-bottom: 20px;
}

.order-list{
display: flex;
flex-direction: column;
gap: 15px;
}

.order-item{
background: #f9f9f9;
padding: 15px;
border-radius: 10px;
border-left: 4px solid #25D366;
display: flex;
justify-content: space-between;
align-items: center;
}

.order-item-info{
flex: 1;
}

.order-item-status{
background: #e8f4f8;
color: #0083b0;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.85em;
font-weight: 600;
}

/* WISHLIST STYLES */
.wishlist-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}

.wishlist-item{
background: white;
border: 2px solid #ff4b5c;
border-radius: 12px;
padding: 20px;
transition: all 0.3s ease;
position: relative;
}

.wishlist-item:hover{
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(255, 75, 92, 0.2);
}

.wishlist-item-header{
display: flex;
justify-content: space-between;
align-items: start;
margin-bottom: 15px;
}

.wishlist-remove{
background: #ff4b5c;
color: white;
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
font-size: 0.8em;
transition: background 0.3s ease;
}

.wishlist-remove:hover{
background: #e63946;
}

@keyframes pulse{
0%, 100%{
opacity: 1;
transform: scale(1);
}
50%{
opacity: 0.8;
transform: scale(1.05);
}
}

@keyframes fadeIn{
from{
opacity: 0;
}
to{
opacity: 1;
}
}

@keyframes fadeInDown{
from{
opacity: 0;
transform: translateY(-20px);
}
to{
opacity: 1;
transform: translateY(0);
}
}

@keyframes slideUp{
from{
opacity: 0;
transform: translateY(30px);
}
to{
opacity: 1;
transform: translateY(0);
}
}

@keyframes slideIn{
from{
transform: translateX(100px);
opacity: 0;
}
to{
transform: translateX(0);
opacity: 1;
}
}

@keyframes shimmer{
0%{
background-position: -1000px 0;
}
100%{
background-position: 1000px 0;
}
}

@keyframes glow{
0%, 100%{
box-shadow: 0 0 10px rgba(0,131,176,0.5);
}
50%{
box-shadow: 0 0 20px rgba(0,131,176,0.8);
}
}

@media(max-width:1024px){
.cart-summary{
position: static;
flex: 1;
min-width: 250px;
}

.cart-container{
flex-direction: column;
gap: 20px;
}
}

@media(max-width:768px){
section{
padding: 40px 15px;
}

header{
height: 70vh;
}

.overlay{
padding: 40px 20px;
}

header h1{
font-size: 2em;
}

.nav-menu{
gap: 10px;
font-size: 0.9em;
}

.grid{
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
}

.product-card{
min-height: 350px;
}

.card-header{
min-height: 100px;
padding: 15px 10px;
}

.product-image-container{
font-size: 3em;
}

.about-container{
flex-direction: column;
}

.about-container img{
width: 100%;
max-width: 300px;
}

.cart-container{
flex-direction: column;
gap: 15px;
}

.cart-items{
min-width: auto;
}

.cart-item-card{
flex-wrap: wrap;
gap: 10px;
}

.cart-item-image{
font-size: 2em;
min-width: 50px;
height: 50px;
}

.cart-item-info{
flex: 1;
min-width: 150px;
}

.cart-item-actions{
width: 100%;
justify-content: space-between;
gap: 10px;
}

.quantity-controls{
order: 1;
}

.cart-item-total{
order: 2;
}

.remove-btn{
order: 3;
}

.cart-summary{
padding: 20px;
position: static;
flex: 1;
}

.cart-section, .consult-section, .contact-section{
padding: 20px;
}

.contact-grid{
grid-template-columns: 1fr;
}

.filter-section{
flex-direction: column;
}

#search, #categoryFilter{
width: 100%;
}

.modal-body{
grid-template-columns: 1fr;
}

.dashboard-grid{
grid-template-columns: repeat(2, 1fr);
}

.nav-right{
flex-wrap: wrap;
gap: 8px;
}

.btn-logout{
padding: 6px 10px !important;
font-size: 0.75em !important;
}
}
/* ============================================================
   ENHANCED RESPONSIVE SIZING FOR ALL DEVICES
   ============================================================ */

/* EXTRA SMALL DEVICES - Mobile Phones (320px - 480px) */
@media (max-width: 480px) {
  html {
    font-size: 14px;
  }

  body {
    font-size: 14px;
  }

  /* LOGIN PAGE - Mobile */
  .login-container {
    max-width: 100%;
    padding: 10px;
  }

  .login-box {
    border-radius: 12px;
  }

  .login-header {
    padding: 25px 20px 20px;
  }

  .login-header h1 {
    font-size: 1.6em;
    margin: 10px 0 5px;
  }

  .header-subtitle {
    font-size: 0.9em;
    margin-bottom: 8px;
  }

  .owner-name-login {
    font-size: 0.85em;
    padding-top: 8px;
    margin-top: 8px;
  }

  .logo-large {
    font-size: 3em;
  }

  .login-form {
    padding: 20px 15px;
  }

  .form-group {
    margin-bottom: 12px;
  }

  .form-group label {
    font-size: 0.9em;
    margin-bottom: 5px;
  }

  .form-group input {
    padding: 8px 10px;
    font-size: 14px;
  }

  .btn-login {
    padding: 10px 20px;
    font-size: 0.95em;
  }

  /* Header - Mobile */
  header {
    min-height: 300px;
  }

  header h1 {
    font-size: 1.8em;
    margin: 10px 0;
  }

  header .tagline {
    font-size: 1em;
  }

  .owner-badge {
    padding: 6px 12px;
    font-size: 0.85em;
  }

  /* Navigation - Mobile */
  .nav-logo .logo-text {
    display: none;
  }

  .nav-menu {
    display: none;
  }

  .navbar {
    padding: 10px;
  }

  .nav-logo {
    padding: 5px;
  }

  .nav-right {
    gap: 8px;
  }

  /* Grid - Mobile */
  .grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 20px;
  }

  /* Product Card - Mobile */
  .product-card {
    border-radius: 8px;
  }

  .medicine-name-simple {
    font-size: 0.9em;
  }

  .card-type, .card-price {
    font-size: 0.85em;
  }

  /* Modal - Mobile */
  .modal-content {
    width: 95%;
    margin: 20px auto;
    padding: 15px;
  }

  .modal-header h2 {
    font-size: 1.2em;
  }

  .product-modal-img {
    height: 180px;
  }

  /* Section padding - Mobile */
  .section-container {
    padding: 20px 15px;
  }

  /* Button sizing - Mobile */
  .btn {
    padding: 10px 16px;
    font-size: 0.95em;
  }

  .btn-small {
    padding: 6px 12px;
    font-size: 0.85em;
  }

  /* Text sizing - Mobile */
  h2 {
    font-size: 1.4em;
  }

  h3 {
    font-size: 1.1em;
  }

  p {
    font-size: 0.95em;
    line-height: 1.5;
  }

  /* Cart items - Mobile */
  .cart-item {
    flex-direction: column;
    gap: 8px;
  }

  .cart-summary {
    padding: 15px;
  }

  /* Dashboard grid - Mobile */
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* SMALL DEVICES - Larger Mobile & Small Tablet (481px - 640px) */
@media (min-width: 481px) and (max-width: 640px) {
  html {
    font-size: 15px;
  }

  body {
    font-size: 15px;
  }

  .login-container {
    max-width: 100%;
    padding: 15px;
  }

  .login-header {
    padding: 30px 25px;
  }

  .login-header h1 {
    font-size: 1.8em;
  }

  header h1 {
    font-size: 2em;
  }

  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .product-card {
    border-radius: 10px;
  }

  h2 {
    font-size: 1.5em;
  }

  .section-container {
    padding: 25px 15px;
  }

  .btn {
    padding: 10px 18px;
    font-size: 0.95em;
  }
}

/* MEDIUM DEVICES - Tablet (641px - 768px) */
@media (min-width: 641px) and (max-width: 768px) {
  html {
    font-size: 16px;
  }

  body {
    font-size: 16px;
  }

  .login-container {
    max-width: 90%;
    padding: 15px;
  }

  .login-header {
    padding: 35px 30px;
  }

  .login-header h1 {
    font-size: 2em;
  }

  header h1 {
    font-size: 2.2em;
  }

  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .nav-menu {
    display: flex;
    gap: 15px;
  }

  h2 {
    font-size: 1.6em;
  }

  .section-container {
    padding: 30px 20px;
  }

  .product-card {
    border-radius: 12px;
  }

  .btn {
    padding: 12px 20px;
    font-size: 1em;
  }

  /* Tips grid */
  .tips-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Dashboard */
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* TABLET TO SMALL LAPTOP (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  html {
    font-size: 16px;
  }

  body {
    font-size: 16px;
  }

  .login-container {
    max-width: 600px;
  }

  header h1 {
    font-size: 2.5em;
  }

  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  h2 {
    font-size: 1.8em;
  }

  .section-container {
    padding: 35px 25px;
  }

  /* Tips grid */
  .tips-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Consult grid */
  .consult-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Dashboard */
  .dashboard-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .nav-menu {
    gap: 20px;
  }

  .product-card {
    border-radius: 12px;
  }

  .btn {
    padding: 12px 24px;
    font-size: 1em;
  }
}

/* LARGE LAPTOP & DESKTOP (1025px and above) */
@media (min-width: 1025px) {
  html {
    font-size: 16px;
  }

  body {
    font-size: 16px;
  }

  .login-container {
    max-width: 500px;
  }

  header h1 {
    font-size: 2.8em;
    margin: 20px 0;
  }

  header .tagline {
    font-size: 1.1em;
  }

  .grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
  }

  h2 {
    font-size: 2em;
  }

  h3 {
    font-size: 1.3em;
  }

  .section-container {
    padding: 50px 40px;
  }

  /* Tips grid */
  .tips-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Consult grid */
  .consult-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Dashboard */
  .dashboard-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .nav-menu {
    gap: 25px;
    font-size: 1.05em;
  }

  .product-card {
    border-radius: 12px;
    min-height: 320px;
  }

  .btn {
    padding: 14px 28px;
    font-size: 1.05em;
  }

  .btn-small {
    padding: 8px 16px;
    font-size: 0.95em;
  }

  /* Modal content width */
  .modal-content {
    width: 70%;
  }

  .owner-section {
    gap: 20px;
  }

  .owner-info {
    text-align: left;
  }
}

/* VERY LARGE SCREENS (1440px and above) */
@media (min-width: 1440px) {
  .section-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 40px;
  }

  .grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
  }

  header h1 {
    font-size: 3em;
  }

  h2 {
    font-size: 2.2em;
  }

  .tips-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .product-card {
    min-height: 340px;
  }

  .btn {
    padding: 16px 32px;
    font-size: 1.1em;
  }

  .modal-content {
    width: 65%;
  }
}

/* FONT SIZE SCALING HELPER CLASSES */
.text-mobile {
  font-size: 0.9em;
}

.text-tablet {
  font-size: 1em;
}

.text-desktop {
  font-size: 1.05em;
}

@media (max-width: 768px) {
  .text-mobile { font-size: 0.9em; }
  .text-tablet { font-size: 0.9em; }
  .text-desktop { font-size: 0.9em; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .text-mobile { font-size: 0.95em; }
  .text-tablet { font-size: 1em; }
  .text-desktop { font-size: 1em; }
}

@media (min-width: 1025px) {
  .text-mobile { font-size: 0.95em; }
  .text-tablet { font-size: 1em; }
  .text-desktop { font-size: 1.05em; }
}