/* ═══════════════════════════════════════════════════════════════
   Mangalam – Taste by Sumi  |  Main Stylesheet
   ═══════════════════════════════════════════════════════════════ */

:root {
  --red:       #C0392B;
  --dark-red:  #962d22;
  --green:     #2d6a2d;
  --cream:     #FDF6EC;
  --gold:      #C9A84C;
  --text-dark: #2b1a10;
  --text-mid:  #5c3d2e;
  --card-bg:   #fff8f0;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Lato', sans-serif; background: var(--cream); color: var(--text-dark); }
a { text-decoration: none; }

/* ── Navbar ── */
.navbar { background: var(--red) !important; box-shadow: 0 2px 12px rgba(0,0,0,.25); padding: 10px 0; }
.navbar-brand img   { height: 56px; border-radius: 50%; border: 2px solid var(--gold); }
.navbar-brand span  { font-family: 'Dancing Script', cursive; font-size: 1.6rem; color: #fff; margin-left: 10px; vertical-align: middle; }
.nav-link           { color: rgba(255,255,255,.9) !important; font-weight: 700; letter-spacing: .5px; }
.nav-link:hover     { color: var(--gold) !important; }
.cart-btn           { background: var(--gold); color: var(--text-dark) !important; border-radius: 20px; padding: 6px 16px !important; font-weight: 700; border: none; }
.cart-btn:hover     { background: #e0bd6a; }
.badge-cart         { background: var(--green); font-size: .65rem; border-radius: 50%; padding: 3px 6px; color: #fff; }

/* ── Hero ── */
.hero { background: linear-gradient(135deg, #C0392B 0%, #7b1d14 60%, #2d6a2d 100%); color: #fff; padding: 80px 0 60px; overflow: hidden; position: relative; }
.hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.hero h1            { font-family: 'Playfair Display', serif; font-size: 3.2rem; font-weight: 900; line-height: 1.15; }
.hero h1 span       { font-family: 'Dancing Script', cursive; font-size: 2rem; color: var(--gold); display: block; }
.hero p             { font-size: 1.1rem; opacity: .88; margin: 16px 0 28px; font-weight: 300; }
.hero-logo          { max-width: 260px; border-radius: 50%; border: 6px solid var(--gold); box-shadow: 0 12px 40px rgba(0,0,0,.3); animation: float 4s ease-in-out infinite; }
@keyframes float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

/* ── Trust Strip ── */
.trust-strip        { background: var(--green); color: #fff; padding: 14px 0; }
.trust-item         { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: .9rem; }
.trust-item i       { font-size: 1.3rem; color: var(--gold); }

/* ── Section Titles ── */
.section-title      { font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--text-dark); display: inline-block; position: relative; }
.section-title::after { content: ''; display: block; height: 3px; background: var(--gold); width: 60%; margin-top: 5px; }

/* ── Category Cards ── */
.cat-card           { border-radius: 14px; cursor: pointer; transition: transform .25s, box-shadow .25s; border: 2px solid transparent; text-align: center; padding: 24px 12px; }
.cat-card:hover     { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.12); border-color: var(--gold); }
.cat-emoji          { font-size: 3rem; display: block; margin-bottom: 8px; }
.cat-name           { font-weight: 700; font-size: .95rem; color: var(--text-dark); }
.cat-desc           { font-size: .78rem; color: var(--text-mid); margin-top: 4px; }

/* ── Product Cards ── */
.product-card       { background: var(--card-bg); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.08); border: 1px solid #f0d9c0; transition: transform .25s, box-shadow .25s; height: 100%; display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,.15); }
.product-img-wrap   { background: linear-gradient(135deg, #faf0e4 0%, #fde8d0 100%); text-align: center; padding: 24px 16px; position: relative; }
.product-emoji      { font-size: 5rem; line-height: 1; display: block; transition: transform .3s; }
.product-card:hover .product-emoji { transform: scale(1.08); }
.product-img        { height: 160px; object-fit: contain; transition: transform .3s; }
.product-card:hover .product-img   { transform: scale(1.06); }
.product-body       { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.product-name       { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 700; color: var(--text-dark); margin-bottom: 3px; }
.product-sub        { font-size: .8rem; color: var(--text-mid); margin-bottom: 8px; }
.product-price      { font-size: 1.2rem; font-weight: 700; color: var(--red); }
.original-price     { font-size: .85rem; text-decoration: line-through; color: #aaa; font-weight: 400; margin-left: 6px; }
.star-row           { color: var(--gold); font-size: .8rem; margin-bottom: 8px; }
.star-empty         { color: #ddd; }

/* ── Badges ── */
.badge-tag          { position: absolute; top: 12px; left: 12px; background: var(--red); color: #fff; font-size: .72rem; font-weight: 700; border-radius: 10px; padding: 3px 10px; }
.badge-tag.new      { background: var(--green); }
.badge-tag.hot      { background: #e67e22; }

/* ── Buttons ── */
.btn-primary-mg     { background: var(--red); color: #fff; border: none; border-radius: 8px; padding: 9px 20px; font-weight: 700; font-size: .9rem; transition: background .2s, transform .1s; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.btn-primary-mg:hover   { background: var(--dark-red); color: #fff; transform: scale(1.02); }
.btn-outline-mg     { background: transparent; color: var(--red); border: 1.5px solid var(--red); border-radius: 8px; padding: 8px 18px; font-weight: 700; font-size: .85rem; transition: .2s; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.btn-outline-mg:hover   { background: var(--red); color: #fff; }
.btn-hero           { background: var(--gold); color: var(--text-dark); border: none; border-radius: 30px; padding: 13px 36px; font-size: 1.05rem; font-weight: 700; transition: .2s; }
.btn-hero:hover     { background: #e0bd6a; transform: scale(1.04); }

/* ── Forms ── */
.form-control-custom { border: 1.5px solid #ddc9b0; border-radius: 9px; padding: 9px 14px; font-size: .95rem; width: 100%; outline: none; transition: border-color .2s, box-shadow .2s; font-family: 'Lato', sans-serif; background: #fff; }
.form-control-custom:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(192,57,43,.12); }
.form-label-custom  { font-weight: 700; font-size: .88rem; color: var(--text-mid); margin-bottom: 4px; display: block; }
select.form-control-custom { cursor: pointer; }

/* ── Variant Select on card ── */
.variant-select     { border: 1.5px solid #ddc9b0; border-radius: 8px; font-size: .82rem; padding: 5px 8px; color: var(--text-dark); background: #fff; cursor: pointer; outline: none; width: 100%; margin-bottom: 10px; }
.variant-select:focus { border-color: var(--red); }

/* ── Cart Offcanvas ── */
.offcanvas-header-custom { background: var(--red); color: #fff; }
.cart-item          { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #f0d9c0; align-items: flex-start; }
.cart-item-emoji    { font-size: 2.5rem; flex-shrink: 0; }
.qty-btn            { background: #f0d9c0; border: none; border-radius: 6px; width: 28px; height: 28px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: .15s; }
.qty-btn:hover      { background: var(--red); color: #fff; }
.remove-btn         { background: none; border: none; color: #c0392b; font-size: 1.2rem; cursor: pointer; }
.cart-total-bar     { background: #fdf6ec; border-radius: 12px; padding: 16px; margin-top: 14px; border: 1px solid #e0c8a0; }
.btn-checkout       { background: var(--red); color: #fff; width: 100%; padding: 13px; border: none; border-radius: 10px; font-size: 1.1rem; font-weight: 700; transition: .2s; }
.btn-checkout:hover { background: var(--dark-red); }

/* ── Filter Pills ── */
.filter-pill        { border: 2px solid var(--red); color: var(--red); border-radius: 20px; padding: 5px 18px; font-size: .85rem; font-weight: 700; background: transparent; cursor: pointer; transition: .2s; white-space: nowrap; }
.filter-pill:hover, .filter-pill.active { background: var(--red); color: #fff; }
.search-box         { border: 2px solid #e0c8b0; border-radius: 25px; padding: 7px 18px; font-size: .9rem; outline: none; width: 240px; transition: border-color .2s; }
.search-box:focus   { border-color: var(--red); }

/* ── Checkout Steps ── */
.step-bar           { display: flex; margin-bottom: 28px; }
.step               { flex: 1; text-align: center; position: relative; }
.step::after        { content: ''; position: absolute; top: 14px; left: 50%; right: -50%; height: 2px; background: #ddd; z-index: 0; }
.step:last-child::after { display: none; }
.step-circle        { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #ddd; background: #fff; line-height: 26px; font-size: .8rem; font-weight: 700; margin: 0 auto 5px; position: relative; z-index: 1; transition: .3s; }
.step.active .step-circle, .step.done .step-circle { background: var(--red); color: #fff; border-color: var(--red); }
.step-label         { font-size: .72rem; color: #888; font-weight: 700; }
.step.active .step-label { color: var(--red); }
.step.done .step-label   { color: var(--green); }

/* ── QR Box ── */
.qr-box             { background: #fff; border: 2px dashed var(--gold); border-radius: 14px; padding: 28px; text-align: center; }

/* ── Order Success ── */
.success-icon       { font-size: 4.5rem; color: var(--green); }
.order-card         { border: 2px solid #e0c8a0; border-radius: 16px; padding: 24px; background: var(--card-bg); }

/* ── Footer ── */
footer              { background: var(--text-dark); color: rgba(255,255,255,.75); padding: 48px 0 20px; }
footer h5           { color: var(--gold); font-family: 'Playfair Display', serif; margin-bottom: 14px; }
footer a            { color: rgba(255,255,255,.65); display: block; margin-bottom: 6px; font-size: .9rem; transition: color .2s; }
footer a:hover      { color: var(--gold); }
.footer-brand       { font-family: 'Dancing Script', cursive; font-size: 2rem; color: var(--gold); }
.social-icon        { font-size: 1.4rem; color: rgba(255,255,255,.65); margin-right: 12px; transition: color .2s; }
.social-icon:hover  { color: var(--gold); }

/* ── Floating Buttons ── */
#topBtn             { display: none; position: fixed; bottom: 28px; left: 20px; background: var(--red); color: #fff; border: none; border-radius: 50%; width: 44px; height: 44px; font-size: 1.3rem; cursor: pointer; z-index: 9000; box-shadow: 0 4px 12px rgba(0,0,0,.2); transition: .2s; }
#topBtn:hover       { background: var(--dark-red); }
.whatsapp-float     { position: fixed; bottom: 80px; left: 20px; background: #25D366; color: #fff; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; box-shadow: 0 4px 14px rgba(0,0,0,.2); z-index: 9000; transition: transform .2s; }
.whatsapp-float:hover { transform: scale(1.1); color: #fff; }

/* ── Misc ── */
.section-pad        { padding: 60px 0; }
.summary-box        { background: #fdf6ec; border-radius: 12px; padding: 18px; border: 1px solid #e8d0a8; }
.alert-info-mg      { background: #fff8e1; border: 1px solid #f0d060; border-radius: 10px; padding: 14px; font-size: .88rem; }
.empty-state        { text-align: center; padding: 60px 20px; }
.empty-state i      { font-size: 4rem; opacity: .25; display: block; margin-bottom: 16px; }

/* ── Responsive ── */
@media (max-width: 576px) {
  .hero h1          { font-size: 2rem; }
  .hero-logo        { max-width: 180px; margin-top: 28px; }
  .search-box       { width: 160px; }
  .section-title    { font-size: 1.5rem; }
}

/* ── Mobile Cart Button (always visible in navbar) ── */
.mobile-cart-btn {
  position: relative;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 10px;
  color: #fff;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}
.mobile-cart-btn:hover  { background: rgba(255,255,255,.28); }
.mobile-cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--gold);
  color: var(--text-dark);
  font-size: .65rem;
  font-weight: 900;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid var(--red);
}

/* Tighten navbar on small screens so everything fits */
@media (max-width: 991.98px) {
  .navbar-brand span { font-size: 1.3rem; }
  .navbar-brand img  { height: 44px; }
  /* Collapsed menu: style cart text link nicely */
  #navMenu .nav-link.d-lg-none {
    border-top: 1px solid rgba(255,255,255,.15);
    margin-top: 8px;
    padding-top: 12px;
  }
}