/* ==================================================================
   Today's Sweet — Pastel cream theme (cake & cookies branding)
   Palette dari mockup: cream / peach / blue / lavender / coral accent
   ================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sacramento&family=Quicksand:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

:root{
  /* Backgrounds */
  --bg:        #FFF8EE;          /* cream pekat (body) */
  --bg-2:      #FFFCF5;           /* cream paling terang */
  --bg-3:      #FBEED8;           /* cream sedikit lebih hangat */
  --card:      #FFFFFF;           /* putih murni untuk cards */
  --border:    #F0E1CC;           /* beige hangat */
  --border-2:  #E8D5B7;

  /* Text — warm brown */
  --text:      #6B4A2E;
  --text-2:    #8B6F47;
  --muted:     #B89A78;

  /* Accents (coral/peach utama, plus pastel pendukung) */
  --accent:    #F5A78D;           /* coral/peach utama */
  --accent-2:  #E8896B;           /* coral lebih dalam */
  --accent-3:  #FFC9B5;           /* coral muda */
  --accent-soft: rgba(245,167,141,.18);

  --pastel-peach:  #FFD9BC;
  --pastel-blue:   #DDEBFA;
  --pastel-purple: #E7E0F6;
  --pastel-cream:  #F6E8D3;
  --pastel-pink:   #FCE0E0;

  --danger:  #E07B7B;
  --warning: #E8B96B;
  --info:    #8FB8E0;
  --success: #9DCDA7;

  --radius: 16px;
  --shadow: 0 6px 20px rgba(180,140,100,.10);
  --shadow-lg: 0 18px 40px rgba(180,140,100,.18);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: var(--bg);
  color: var(--text);
  font-family:'Quicksand','Poppins',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:15px;
  font-weight:500;
  line-height:1.6;
  min-height:100vh;
}
a{color:var(--accent-2); text-decoration:none; transition:color .15s}
a:hover{color:var(--accent)}
img{max-width:100%; display:block}
h1,h2,h3,h4{font-family:'Poppins',sans-serif; color:var(--text); font-weight:700}

/* Stripes pattern reusable */
.stripes-bg{
  background:
    repeating-linear-gradient(
      90deg,
      var(--pastel-cream)  0px, var(--pastel-cream)  46px,
      var(--pastel-peach)  46px, var(--pastel-peach)  92px,
      var(--bg-2)          92px, var(--bg-2)         138px,
      var(--pastel-blue)  138px, var(--pastel-blue)  184px,
      var(--pastel-purple)184px, var(--pastel-purple)230px,
      var(--bg-2)         230px, var(--bg-2)         276px
    );
}

/* Layout containers */
.container{max-width:1200px; margin:0 auto; padding:0 18px}
.shell{min-height:calc(100vh - 80px)}

/* ============ NAVBAR ============ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,248,238,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex; align-items:center; gap:24px; padding:14px 18px; max-width:1200px; margin:0 auto; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none}
.brand .logo-img{
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg, var(--pastel-peach), var(--accent-3));
  display:grid; place-items:center; color:var(--text);
  box-shadow:0 4px 12px rgba(245,167,141,.3);
  border:2px solid #fff;
  font-size:22px;
}
.brand .logo-text{display:flex; flex-direction:column; line-height:1}
.brand .logo-text .script{
  font-family:'Sacramento', cursive; font-size:28px; color:var(--text);
  font-weight:400;
}
.brand .logo-text .tag{
  font-size:10px; letter-spacing:3px; color:var(--accent-2); font-weight:600;
  text-transform:uppercase;
}
.nav-links{display:flex; gap:4px; flex-wrap:wrap}
.nav-links a{
  color:var(--text-2); padding:9px 14px; border-radius:999px; font-size:14px; font-weight:600;
  transition:.2s;
}
.nav-links a:hover{color:var(--text); background:var(--bg-3)}
.nav-spacer{flex:1}
.nav-search{display:flex; flex:1; max-width:380px; min-width:160px}
.nav-search input{
  flex:1; padding:10px 14px; border-radius:999px 0 0 999px;
  background:#fff; color:var(--text); border:1px solid var(--border);
  border-right:0; font-family:inherit;
}
.nav-search button{
  border:1px solid var(--accent); background:var(--accent);
  color:#fff; padding:0 18px; border-radius:0 999px 999px 0; font-weight:700;
  cursor:pointer; font-size:13px; letter-spacing:.5px;
}
.nav-cart{
  position:relative; padding:9px 16px; border-radius:999px;
  color:var(--text); background:#fff;
  border:1px solid var(--border); font-weight:600; font-size:14px;
}
.nav-cart:hover{background:var(--accent-soft); color:var(--text); border-color:var(--accent-3)}
.nav-cart .badge{
  position:absolute; top:-6px; right:-6px;
  background:var(--accent); color:#fff; font-size:11px; font-weight:800;
  padding:2px 7px; border-radius:999px; min-width:20px; text-align:center;
  border:2px solid #fff;
}
.nav-user{display:flex; gap:8px; align-items:center}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 20px; border-radius:999px; font-weight:600; cursor:pointer;
  border:1px solid var(--border); background:#fff; color:var(--text);
  transition:.2s ease; font-family:inherit;
  font-size:14px;
}
.btn:hover{background:var(--bg-3); border-color:var(--accent-3); color:var(--text)}
.btn-primary{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; border-color:transparent;
  box-shadow:0 4px 12px rgba(245,167,141,.35);
}
.btn-primary:hover{filter:brightness(1.05); color:#fff; transform:translateY(-1px)}
.btn-outline{background:transparent}
.btn-danger{background:var(--danger); color:#fff; border-color:transparent}
.btn-danger:hover{filter:brightness(1.08); color:#fff}
.btn-sm{padding:7px 14px; font-size:13px}
.btn-block{width:100%}

/* ============ TYPOGRAPHY & UTILITIES ============ */
.section-title{font-size:24px; font-weight:700; margin:28px 0 16px; color:var(--text)}
.section-title .script{font-family:'Sacramento',cursive; color:var(--accent-2); font-weight:400; font-size:32px}
.muted{color:var(--muted)}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow);
}

/* ============ HERO BANNER ============ */
.hero{
  border-radius:var(--radius);
  padding:42px 32px;
  position:relative;
  overflow:hidden;
  margin-top:8px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  background:
    repeating-linear-gradient(
      90deg,
      var(--pastel-cream)  0px, var(--pastel-cream)  46px,
      var(--pastel-peach)  46px, var(--pastel-peach)  92px,
      #fff                 92px, #fff                138px,
      var(--pastel-blue)  138px, var(--pastel-blue)  184px,
      var(--pastel-purple)184px, var(--pastel-purple)230px
    );
}
.hero::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.78) 100%);
}
.hero-inner{position:relative; z-index:2; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center}
.hero h1{margin:0 0 8px}
.hero .script{font-family:'Sacramento', cursive; font-size:54px; color:var(--text); line-height:1; font-weight:400}
.hero .tag-line{
  display:inline-block; padding:6px 16px; border-radius:999px;
  background:var(--accent); color:#fff; font-size:11px; letter-spacing:3px;
  font-weight:700; text-transform:uppercase; margin-bottom:6px;
}
.hero .lead{color:var(--text-2); max-width:520px; font-size:15px}
.hero-emoji{font-size:96px; filter:drop-shadow(0 6px 12px rgba(0,0,0,.08))}
.hero-features{display:flex; gap:18px; flex-wrap:wrap; margin-top:14px}
.hero-features .item{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--text-2)}
.hero-features .dot{width:6px; height:6px; border-radius:50%; background:var(--accent)}

/* ============ PRODUCT GRID ============ */
.grid{display:grid; gap:18px}
.grid-products{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.product{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; transition:.25s; display:flex; flex-direction:column;
}
.product:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:var(--accent-3);
}
.product .thumb{
  aspect-ratio: 1/1;
  background:linear-gradient(135deg, var(--pastel-cream), var(--pastel-peach));
  position:relative; overflow:hidden;
}
.product .thumb img{width:100%; height:100%; object-fit:cover}
.product .body{padding:16px; flex:1; display:flex; flex-direction:column; gap:6px}
.product .cat{font-size:10px; text-transform:uppercase; letter-spacing:2px; color:var(--accent-2); font-weight:700}
.product .name{font-weight:600; line-height:1.35; min-height:42px; color:var(--text)}
.product .price{font-size:18px; font-weight:700; color:var(--accent-2); margin-top:auto}
.product .row-actions{display:flex; gap:6px; margin-top:12px}

/* ============ CATEGORY CHIPS ============ */
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.chip{
  padding:8px 18px; border-radius:999px; background:#fff;
  border:1px solid var(--border); color:var(--text-2); font-size:13px; font-weight:600;
  transition:.18s;
}
.chip:hover, .chip.active{
  background:var(--accent); border-color:var(--accent); color:#fff;
  box-shadow:0 4px 10px rgba(245,167,141,.3);
}

/* ============ DETAIL ============ */
.product-detail{display:grid; grid-template-columns:1fr 1fr; gap:34px}
.product-detail .img-wrap{
  background:linear-gradient(135deg, var(--pastel-cream), var(--pastel-peach));
  border-radius:var(--radius); overflow:hidden; aspect-ratio:1/1;
  border:1px solid var(--border);
}
.product-detail .img-wrap img{width:100%; height:100%; object-fit:cover}
.product-detail h1{margin:6px 0 8px; font-size:30px}
.product-detail .price{font-size:32px; color:var(--accent-2); font-weight:800; margin:10px 0 16px}
.product-detail .desc{color:var(--text-2); line-height:1.75; margin-bottom:18px; white-space:pre-line; font-weight:500}

/* ============ FORMS ============ */
label{display:block; margin:14px 0 7px; color:var(--text); font-weight:600; font-size:14px}
input[type=text],input[type=password],input[type=email],input[type=number],
input[type=tel],input[type=file],select,textarea{
  width:100%; background:#fff; color:var(--text); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px; font-size:14px; outline:none;
  font-family:inherit; font-weight:500;
  transition:.18s;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);
}
.error{color:var(--danger); font-size:12px; margin-top:5px; font-weight:600}
.form-row{margin-bottom:14px}
.help{color:var(--muted); font-size:12px; margin-top:5px; font-weight:500}

/* ============ AUTH ============ */
.auth-wrap{
  min-height:100vh; display:grid; place-items:center; padding:30px 16px;
  position:relative; overflow:hidden;
  background:var(--bg);
}
.auth-wrap::before{
  content:""; position:absolute; inset:0; opacity:.6;
  background:
    repeating-linear-gradient(
      90deg,
      var(--pastel-cream)  0px, var(--pastel-cream)  60px,
      var(--pastel-peach)  60px, var(--pastel-peach) 120px,
      var(--bg-2)         120px, var(--bg-2)        180px,
      var(--pastel-blue)  180px, var(--pastel-blue) 240px,
      var(--pastel-purple)240px, var(--pastel-purple)300px
    );
}
.auth-card{
  position:relative; z-index:2;
  width:100%; max-width:440px; background:#fff; border:1px solid var(--border);
  border-radius:24px; padding:36px 32px; box-shadow:var(--shadow-lg);
}
.auth-card h1{margin:0 0 4px; font-size:24px; font-family:'Poppins',sans-serif}
.auth-card .lead{color:var(--text-2); margin-bottom:18px; font-size:14px}

/* ============ TABLES ============ */
.table-wrap{overflow-x:auto}
table.t{width:100%; border-collapse:collapse}
table.t th, table.t td{padding:12px 14px; border-bottom:1px solid var(--border); text-align:left; vertical-align:middle}
table.t th{
  color:var(--text-2); font-weight:700; font-size:11px; text-transform:uppercase;
  letter-spacing:1px; background:var(--bg-3);
}
table.t tr:hover td{background:rgba(245,167,141,.04)}
table.t .qty-input{width:64px; text-align:center}

/* ============ BADGES ============ */
.badge{display:inline-block; padding:4px 11px; border-radius:999px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px}
.badge-pending{background:rgba(232,185,107,.18); color:#a07734; border:1px solid rgba(232,185,107,.5)}
.badge-processing{background:rgba(143,184,224,.18); color:#3a6b94; border:1px solid rgba(143,184,224,.5)}
.badge-shipping{background:rgba(231,224,246,.7); color:#7361a8; border:1px solid #c8b8e8}
.badge-done{background:rgba(157,205,167,.2); color:#3f7a4e; border:1px solid rgba(157,205,167,.5)}
.badge-cancel{background:rgba(224,123,123,.15); color:#a04444; border:1px solid rgba(224,123,123,.5)}

/* ============ ALERTS ============ */
.alert{padding:13px 16px; border-radius:12px; margin:14px 0; border:1px solid; font-size:14px; font-weight:500}
.alert-success{background:rgba(157,205,167,.15); border-color:var(--success); color:#2f6041}
.alert-error{background:rgba(224,123,123,.12); border-color:var(--danger); color:#9a3838}
.alert-warning{background:rgba(232,185,107,.15); border-color:var(--warning); color:#7d572a}
.alert-info{background:rgba(143,184,224,.15); border-color:var(--info); color:#365e85}

/* ============ TOAST ============ */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(120px);
  background:#fff; border:1px solid var(--accent); padding:14px 20px; border-radius:999px;
  box-shadow:var(--shadow-lg); transition:.3s ease; opacity:0; z-index:200;
  font-weight:600; color:var(--text);
}
.toast.show{transform:translateX(-50%) translateY(0); opacity:1}
.toast.error{border-color:var(--danger); color:#9a3838}

/* ============ FOOTER ============ */
.footer{
  padding:32px 16px; color:var(--text-2); text-align:center; font-size:13px;
  border-top:1px solid var(--border); margin-top:60px; background:var(--bg-2);
  font-weight:500;
}
.footer .script{font-family:'Sacramento',cursive; color:var(--accent-2); font-size:22px}

/* Cart layout */
.summary{position:sticky; top:90px}

.order-summary-row{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--border)}
.order-summary-row.total{font-size:20px; font-weight:700; color:var(--accent-2); border-bottom:0; margin-top:6px}

/* ============ STATS GRID ============ */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:18px 0 26px}
.stat{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; display:flex; flex-direction:column; gap:6px;
  position:relative; overflow:hidden;
  box-shadow:var(--shadow);
}
.stat::before{
  content:""; position:absolute; right:-30px; top:-30px; width:130px; height:130px;
  background:radial-gradient(circle, var(--accent-3) 0%, transparent 65%); border-radius:50%;
  opacity:.5;
}
.stat .lbl{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:1.5px; font-weight:700}
.stat .val{font-size:28px; font-weight:800; color:var(--text); font-family:'Poppins',sans-serif}
.stat .accent{color:var(--accent-2)}

/* ============ ADMIN LAYOUT ============ */
.admin-shell{display:grid; grid-template-columns:240px 1fr; min-height:100vh; background:var(--bg)}
.admin-sidebar{
  background:#fff; border-right:1px solid var(--border); padding:20px 14px;
  position:sticky; top:0; height:100vh; overflow:auto;
}
.admin-sidebar .brand{padding:6px 8px 16px; margin-bottom:8px; border-bottom:1px solid var(--border)}
.admin-nav{display:flex; flex-direction:column; gap:4px; margin-top:14px}
.admin-nav a{
  padding:11px 16px; color:var(--text-2); border-radius:12px; font-size:14px; font-weight:600;
  display:flex; align-items:center; gap:10px;
  transition:.18s;
}
.admin-nav a:hover{background:var(--bg-3); color:var(--text)}
.admin-nav a.active{
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#fff;
  box-shadow:0 4px 10px rgba(245,167,141,.35);
}
.admin-main{padding:26px 30px}
.admin-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:12px}
.admin-topbar h1{margin:0; font-size:24px}

/* Two-column form */
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}

/* ============ OPTION CARDS (radio) ============ */
.opt-group{display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:10px}
.opt-card{
  border:2px solid var(--border); padding:13px; border-radius:14px; cursor:pointer;
  background:#fff; text-align:center; font-size:14px; font-weight:600; color:var(--text-2);
  transition:.18s;
}
.opt-card:hover{border-color:var(--accent-3)}
.opt-card input{display:none}
.opt-card.active{
  border-color:var(--accent); background:var(--accent-soft); color:var(--accent-2);
}

/* Mobile */
@media (max-width: 900px){
  .product-detail{grid-template-columns:1fr}
  .admin-shell{grid-template-columns:1fr}
  .admin-sidebar{position:static; height:auto}
  .row2{grid-template-columns:1fr}
  .hero-inner{grid-template-columns:1fr}
  .hero-emoji{display:none}
  .hero .script{font-size:42px}
}
@media (max-width: 600px){
  .nav-search{order:10; flex:1 0 100%}
  .nav-links{display:none}
  .summary{position:static}
}

/* ============ PAGINATION ============ */
.pages{display:flex; gap:6px; flex-wrap:wrap; padding:16px 0; justify-content:center}
.pages a, .pages span{
  padding:8px 13px; border-radius:10px; background:#fff;
  border:1px solid var(--border); color:var(--text-2); font-size:13px; font-weight:600;
}
.pages .selected, .pages a:hover{
  background:var(--accent); color:#fff; border-color:var(--accent);
}

/* Cart sticky summary */
.cart-grid{display:grid; grid-template-columns:1fr 320px; gap:24px}
@media(max-width:900px){.cart-grid{grid-template-columns:1fr}}

/* Empty state */
.empty{text-align:center; padding:64px 20px; color:var(--text-2)}
.empty .ico{font-size:48px; margin-bottom:14px}
.empty h3{color:var(--text); margin:6px 0}

/* Heart bullet for hero features */
.heart-bullet::before{
  content:"♥"; color:var(--accent); margin-right:6px;
}