html,body{
margin:0;
padding:0;
width:100%;
overflow-x:hidden;
-webkit-text-size-adjust:100%
}
body{
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background-color:#0f172a;
color:#e5e7eb;
min-height:100vh;
display:flex;
flex-direction:column
}
*,::before,::after{
box-sizing:border-box
}
a{
color:#3b82f6;
text-decoration:none
}
a:hover{
text-decoration:underline
}
.nav{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 16px;
background:#020617;
border-bottom:1px solid #1f2937;
width:100%;
z-index:1000;
transition:box-shadow .3s ease,background .3s ease
}
.nav-sticky .nav{
position:fixed;
top:0;
left:0
}
.nav-scrolled{
box-shadow:0 4px 12px rgba(0,0,0,.5);
background:rgba(2,6,23,.95);
backdrop-filter:blur(8px)
}
.whatsapp-float{
position:fixed;
width:60px;
height:60px;
bottom:20px;
right:20px;
background-color:#25d366;
color:#FFF;
border-radius:50px;
text-align:center;
font-size:30px;
box-shadow:2px 2px 10px rgba(0,0,0,.3);
z-index:1000;
display:flex;
align-items:center;
justify-content:center;
transition:transform .3s ease,box-shadow .3s ease
}
.whatsapp-float:hover{
transform:scale(1.1);
box-shadow:2px 4px 15px rgba(0,0,0,.4);
color:#FFF;
text-decoration:none
}
.nav-title{
font-weight:700;
font-size:18px
}
.nav-links{
display:flex;
gap:12px;
font-size:14px
}
.container{
width:100%;
max-width:960px;
margin:0 auto;
padding:16px
}
.nav-sticky .container{
margin-top:60px
}
.card{
background:#1e293b;
border-radius:12px;
padding:16px;
box-shadow:0 12px 25px rgba(15,23,42,.7);
margin-bottom:16px
}
.card-title{
font-size:18px;
margin-bottom:8px
}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 16px;
border-radius:999px;
border:none;
background:linear-gradient(135deg,#3b82f6,#1d4ed8);
color:#f9fafb;
font-weight:600;
font-size:14px;
cursor:pointer
}
.btn-secondary{
background:#111827
}
.product-grid { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 16px; 
} 

@media (max-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) { 
  .product-grid { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 12px;
  } 
} 

@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* Ensure cards don't have fixed widths and handle long text */
.product-grid .card {
  min-width: 0; /* Prevents grid items from expanding beyond their allocated space */
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.product-grid .card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.product-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.grid{
display:grid;
grid-template-columns:1fr;
gap:12px
}
@media(min-width:768px){
.grid-2{
grid-template-columns:repeat(2,minmax(0,1fr))
}
.grid-3{
grid-template-columns:repeat(3,minmax(0,1fr))
}
.grid-4{
grid-template-columns:repeat(4,minmax(0,1fr))
}
}

/* Mobile-first enhancements */
@media(max-width:767px){
.nav{
flex-direction:column;
padding:16px 12px;
gap:12px;
text-align:center;
border-radius:0;
margin:0
}
.nav-title{
font-size:18px;
margin-bottom:4px;
display:flex;
flex-direction:column;
align-items:center
}
.nav-title img{
margin-right:0 !important;
margin-bottom:8px;
height:40px !important
}
.nav-links{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:8px;
width:100%;
margin-top:8px
}
.nav-links a{
background:#1e293b;
padding:12px 8px;
border-radius:8px;
font-size:13px;
font-weight:600;
border:1px solid #334155
}
.container{
padding:16px 12px;
width:100%;
margin-top: 0
}
.nav-sticky .container{
margin-top: 220px
}
.card{
padding:16px 12px;
border-radius:12px;
margin-left:0;
margin-right:0
}
.footer{
border-radius:0;
margin:0;
padding:24px 16px
}
.table-responsive{
display:block;
width:100%;
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
margin-bottom:1rem;
border:0;
position:relative;
clear:both
}
.table-responsive .table{
margin-bottom:0;
width:100%;
min-width:max-content;
white-space:nowrap
}
.btn{
width:100%;
box-sizing:border-box;
padding:14px;
font-size:16px
}
.grid-4, .grid-3{
grid-template-columns:repeat(2, 1fr) !important;
gap:12px
}
.grid-2{
grid-template-columns:1fr !important;
gap:16px
}
}
label{
display:block;
font-size:13px;
margin-bottom:4px;
color:#9ca3af
}
input,select,textarea{
width:100%;
padding:10px 12px;
border-radius:8px;
border:1px solid #334155;
background-color:#020617;
color:#e5e7eb;
font-size:14px;
box-sizing:border-box
}
input:focus,select:focus,textarea:focus{
outline:none;
border-color:#3b82f6;
box-shadow:0 0 0 1px #3b82f6
}
.alert{
padding:10px 12px;
border-radius:8px;
font-size:13px;
margin-bottom:12px
}
.alert-error{
background-color:rgba(248,113,113,.12);
border:1px solid rgba(248,113,113,.5);
color:#fecaca
}
.alert-success{
background-color:rgba(34,197,94,.12);
border:1px solid rgba(34,197,94,.5);
color:#bbf7d0
}
.muted{
color:#9ca3af
}
.table{
width:100%;
border-collapse:collapse;
font-size:13px
}
.table th,.table td{
padding:8px 10px;
border-bottom:1px solid #1f2937;
text-align:left
}
.badge{
display:inline-block;
padding:3px 8px;
border-radius:999px;
font-size:11px;
background:#111827;
color:#9ca3af
}
.status-pill{
padding:3px 8px;
border-radius:999px;
font-size:11px
}
.status-active{
background:rgba(34,197,94,.15);
color:#bbf7d0
}
.status-pending{
background:rgba(234,179,8,.15);
color:#facc15
}
.status-cancelled{
background:rgba(248,113,113,.15);
color:#fecaca
}
.footer{
margin-top:auto;
padding:16px;
font-size:12px;
color:#6b7280;
text-align:center;
border-top:1px solid #1f2937;
background:#020617
}