/* Shared responsive styles for Rasper project */
:root{
  --primary:#0077cc;
  --accent:#0558b8;
  --muted:#666;
  --bg:#f5f7fa;
  --card:#fff;
}
* { box-sizing: border-box; }
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html,body{height:100%;margin:0;padding:0;font-family: 'Poppins', Arial, sans-serif;background:var(--bg);color:#222;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
/* Make container fluid but keep comfortable max for very wide screens */
.container{max-width:1200px;margin:0 auto;padding:0 14px}
/* Global cards */
.card{background:var(--card);border-radius:12px;box-shadow:0 6px 18px rgba(14,30,37,0.06);padding:16px}
/* Header */
header .page-container{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
header .logo-area img{height:40px}
.user-nav a{color:inherit}
/* Product grid */
.produk-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;padding:20px 0}
.produk-card{display:flex;flex-direction:column}
.img-wrap{height:200px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:10px 10px 0 0;padding:10px;overflow:hidden}
.img-wrap img{max-width:100%;max-height:100%;object-fit:contain}
.produk-info{padding:14px}
/* Forms */
input,textarea,select{border:1px solid #ddd;padding:10px;border-radius:8px;width:100%;font-family:inherit}
/* Prevent iOS from auto-zooming small form controls by ensuring base font-size >= 16px */
input,textarea,select,button{font-size:16px}
button, .btn-keranjang, .btn{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:10px 14px;cursor:pointer}
/* Make media scale-friendly */
img,video,iframe{max-width:100%;height:auto}
/* Admin layout */
.admin-wrap{display:flex;min-height:100vh}
.sidebar{width:220px;background:linear-gradient(180deg,#0b63d1,#0558b8);color:#fff;padding:20px}
.sidebar img{height:40px;background:#fff;padding:6px;border-radius:8px;margin-bottom:12px}
.side-nav a{display:block;color:#e9f5ff;padding:10px;border-radius:8px;text-decoration:none}
.main-panel{flex:1;padding:20px}
.main-panel .container{max-width:1000px;margin:20px auto}
/* Tables */
table{width:100%;border-collapse:collapse}
th,td{padding:8px;text-align:left}
th{background:#111;color:#fff}
/* Responsive adjustments */
@media (max-width: 1200px){
  .container{padding:0 12px}
  .produk-container{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
  .img-wrap{height:180px}
}
@media (max-width: 768px){
  .admin-wrap{flex-direction:column}
  .sidebar{width:100%;display:flex;flex-direction:row;align-items:center;gap:12px;padding:12px}
  .side-nav{display:flex;flex-direction:row;gap:8px;flex-wrap:wrap}
  .side-nav a{padding:8px}
  .main-panel{padding:12px}
  header .page-container{flex-direction:column;gap:8px;padding:12px}
  .img-wrap{height:160px}
}
@media (max-width:420px){
  .produk-container{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
  .img-wrap{height:140px}
  .sidebar img{height:34px}
  .side-nav a{font-size:14px;padding:6px}
  .main-panel .container{padding:12px}
}
@media (max-width: 900px){
  .produk-container{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
  .img-wrap{height:160px}
}
/* Utility */
.text-center{text-align:center}
.mt-2{margin-top:8px}
.mb-2{margin-bottom:8px}
.hidden-mobile{display:inline}
@media (max-width:420px){.hidden-mobile{display:none}}