/* =========================================================
   DIPOS THEME — FINAL CLEAN (NO CONFLICTS)
========================================================= */

/* ================= VARIABLES ================= */
:root{
  --bottom-nav-height:64px;
  --safe-bottom:env(safe-area-inset-bottom,0px);

  --accent:#FF3B30;
  --bg:#fafbfd;
  --card:#ffffff;
  --muted:#6b7280;
  --text:#111;
  --success:#16a34a;

  --shadow:0 12px 40px rgba(2,6,23,0.08);
  --radius:14px;
}

/* ================= RESET ================= */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
  height:100%;
}

body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

a{
  text-decoration:none;
  color:inherit;
}

/* =========================================================
   LAYOUT (FIXED SIDEBAR SYSTEM)
========================================================= */

.page-wrap{
  min-height:100vh;
}

/* ===== SIDEBAR ===== */
.sidebar{
  position:fixed;
  top:0;
  left:0;
  width:240px;
  height:100vh;
  background:#fff;
  border-right:1px solid #eee;
  padding:16px;
  z-index:1000;
}

/* ===== CONTENT ===== */
.main-content{
  margin-left:240px;
  padding:20px;
  padding-bottom:calc(20px + var(--bottom-nav-height) + var(--safe-bottom));
}

/* ===== MOBILE ===== */
@media(max-width:768px){
  .sidebar{
    display:none;
  }

  .main-content{
    margin-left:0;
    padding:12px;
    padding-bottom:calc(12px + var(--bottom-nav-height) + var(--safe-bottom));
  }
}

/* =========================================================
   UI
========================================================= */

/* Header */
.header{
  background:var(--accent);
  color:#fff;
  padding:14px 16px;
  border-radius:var(--radius);
  margin-bottom:16px;
  font-weight:800;
}

/* Card */
.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  margin-bottom:16px;
}

/* Button */
.btn{
  padding:10px 14px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-weight:700;
}

.btn-primary{
  background:var(--accent);
  color:#fff;
}

/* Sticky cart */
.sticky-cart{
  position:fixed;
  right:18px;
  bottom:calc(var(--bottom-nav-height) + var(--safe-bottom) + 12px);
  background:var(--accent);
  color:#fff;
  padding:12px 18px;
  border-radius:999px;
  box-shadow:var(--shadow);
  z-index:140;
}

/* Helpers */
.row{display:flex;gap:12px;align-items:center}
.col{flex:1}
.small{font-size:13px;color:var(--muted)}
.badge{background:#f1f5f9;padding:6px 8px;border-radius:8px;font-weight:700}