/* assets/css/theme.css */
:root{
  --bg1:#f5f7fa;
  --bg2:#c3cfe2;

  --primary1:#1a3c6e;
  --primary2:#2a69ac;

  --text:#0f172a;
  --muted:#475569;
  --line:#e5e7eb;

  --card:#ffffff;
  --soft:#f8fafc;

  --radius:18px;
  --radius2:14px;
  --shadow:0 16px 40px rgba(15, 23, 42, .10);
  --shadow2:0 10px 26px rgba(15, 23, 42, .08);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: 'Rubik', sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 700px at 10% 10%, rgba(42,105,172,.18), transparent 60%),
              radial-gradient(1200px 700px at 90% 0%, rgba(26,60,110,.18), transparent 55%),
              linear-gradient(135deg,var(--bg1) 0%, var(--bg2) 100%);
}

/* Layout */
.page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.wrap{
  width:min(1200px, 100%);
  margin:0 auto;
  padding:28px 16px;
}

.shell{
  background: rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.45);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow:hidden;
}

.shell-pad{ padding:22px; }

/* Navbar */
.navbar{
  background: linear-gradient(90deg, var(--primary1), var(--primary2));
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  padding:.75rem 0;
}
.navbar .container{ max-width:1200px; }
.navbar-brand{
  font-weight:800;
  letter-spacing:.2px;
  color:#fff !important;
}
.nav-link{
  color:#fff !important;
  font-weight:600;
  opacity:.92;
}
.nav-link:hover{ opacity:1; text-decoration:underline; text-underline-offset:6px; }

/* Hero header */
.hero{
  padding:22px;
  border-bottom:1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(248,250,252,.9), rgba(255,255,255,.6));
}
.hero .kicker{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.65);
  color:var(--muted);
  font-weight:700;
  font-size:.92rem;
}
.hero h1{
  margin:10px 0 6px;
  font-size: clamp(1.55rem, 2.6vw, 2.35rem);
  color:var(--primary1);
  font-weight:900;
}
.hero p{
  margin:0;
  color:var(--muted);
  font-weight:500;
}

/* Buttons */
.btn-theme{
  border:0;
  border-radius: 14px;
  font-weight:800;
  padding:.7rem 1rem;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-theme:active{ transform: translateY(1px); }

.btn-primary-theme{
  color:#fff;
  background: linear-gradient(90deg, var(--primary1), var(--primary2));
  box-shadow: 0 12px 24px rgba(26,60,110,.18);
}
.btn-primary-theme:hover{ filter: brightness(1.05); transform: translateY(-2px); }

.btn-success-theme{
  color:#fff;
  background: linear-gradient(90deg,#22c55e,#16a34a);
  box-shadow: 0 12px 24px rgba(34,197,94,.18);
}
.btn-success-theme:hover{ filter: brightness(1.05); transform: translateY(-2px); }

.btn-soft{
  background: rgba(255,255,255,.75);
  border:1px solid rgba(15,23,42,.12);
  color:var(--text);
}
.btn-soft:hover{ transform: translateY(-2px); }

/* Cards */
.cardx{
  background:var(--card);
  border:1px solid rgba(15,23,42,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.cardx-pad{ padding:16px; }

/* Grid */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
}

/* Product card */
.pcard{
  background:var(--card);
  border:1px solid rgba(15,23,42,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .2s ease;
  display:flex;
  flex-direction:column;
}
.pcard:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(15,23,42,.14);
}
.pimg{
  height:240px;
  background: linear-gradient(180deg, rgba(248,250,252,1), rgba(255,255,255,1));
  border-bottom:1px solid rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.pimg img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  transition: transform .2s ease;
  padding:14px;
}
.pcard:hover .pimg img{ transform: scale(1.04); }

.pbadge{
  position:absolute;
  top:12px;
  inset-inline-start:12px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:.78rem;
  background: rgba(255,255,255,.85);
  border:1px solid rgba(15,23,42,.10);
  color: var(--primary1);
}

.pbody{
  padding:14px 14px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.ptitle{
  margin:0;
  font-weight:900;
  color:var(--primary1);
  font-size:1.1rem;
  line-height:1.25;
}
.pdesc{
  margin:0;
  color:var(--muted);
  font-weight:500;
  line-height:1.55;
}
.pmeta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.pprice{
  font-weight:1000;
  color:var(--primary2);
  font-size:1.15rem;
}
.pmuted{
  color:var(--muted);
  font-weight:600;
  font-size:.9rem;
}
.pactions{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
  margin-top:auto;
}

/* Forms */
.form-control,.form-select{
  border-radius:14px !important;
  border:1px solid rgba(15,23,42,.14) !important;
  padding:.75rem .9rem !important;
}
.form-control:focus,.form-select:focus{
  box-shadow: 0 0 0 .2rem rgba(42,105,172,.20) !important;
  border-color: rgba(42,105,172,.55) !important;
}

/* Alerts */
.alertx{
  border-radius:14px;
  padding:12px 14px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.65);
  color:var(--text);
  box-shadow: var(--shadow2);
}
.alertx-danger{ border-color: rgba(220,38,38,.25); background: rgba(254,226,226,.75); }
.alertx-success{ border-color: rgba(22,163,74,.25); background: rgba(220,252,231,.75); }
.alertx-warning{ border-color: rgba(245,158,11,.25); background: rgba(254,243,199,.75); }

/* Responsive */
@media (max-width: 576px){
  .wrap{ padding:18px 12px; }
  .pimg{ height:200px; }
}