body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background: #FBF6F6; }
.navbar-brand { font-weight: 700; }
/* App theme from Flutter AppTheme (softPeach): primary: #E05252, accent: #9A372C, background: #FBF6F6 */
.dashboard-header{ background: linear-gradient(90deg,#ffffff 0%, #FFF6F6 50%, #FBF6F6 100%); color:#222; border-bottom: 1px solid rgba(0,0,0,0.04); padding: 14px 0; box-shadow: 0 6px 20px rgba(224,82,82,0.05); }

/* sticky header tweaks */
.sticky-top.dashboard-header{ position: sticky; top: 0; z-index: 1040; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sticky-top.dashboard-header.stuck{ box-shadow: 0 10px 30px rgba(18,38,63,0.08); }

/* ensure page content isn't hidden under the header */
main.container{ padding-top: 0.75rem; }
.dashboard-header .greeting{ font-size:1.125rem; font-weight:700; margin-bottom:2px; color: #7b1e1e; }
.dashboard-header .address{ font-size:0.92rem; color: #8b6767; }
.dashboard-header .btn{ box-shadow: none; }
.dashboard-header .dropdown-toggle::after{ margin-left: .375rem; }
.navbar .nav-link[ v-text], .navbar .nav-link[ v-if]{ padding-left:0.5rem; }
.carousel .d-block{ max-height:480px; }
.card { border-radius:10px; box-shadow: 0 6px 18px rgba(18,38,63,0.04); }
.card .card-body{ padding:1rem; }
.card h5.card-title{ margin-bottom:0.75rem; }
.stat-tile{ border-radius:10px; }
.stat-tile .h5{ font-size:1.125rem; font-weight:700; }
.text-muted.small{ font-size:0.85rem; }
.offcanvas-body .text-white{ color:#fff !important; }
.cart-empty{ background: linear-gradient(90deg,#6c757d, #495057); padding:10px; border-radius:6px; }
.product-card img{ height:160px; object-fit:cover; border-radius:8px; }
.baker-avatar{ width:56px;height:56px; object-fit:cover; }
/* primary buttons use the app primary color */
.btn-primary{ background: linear-gradient(90deg,#E05252,#9A372C); border:0; }
.btn-outline-primary{ border-color: rgba(224,82,82,0.15); color:#E05252; }
.small-muted{ color: #6c757d; font-size:0.9rem; }

/* themed Add button used on product cards */
.btn-add{ background: linear-gradient(90deg,#E05252,#9A372C); color:#fff; border:0; padding:6px 10px; border-radius:8px; display:inline-flex; align-items:center; gap:6px; }
.btn-add:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(224,82,82,0.15); }
.btn-add:active{ transform: translateY(0); box-shadow: none; }
.btn-add .bi{ font-size:0.95rem; }

/* distance badge */
.distance-badge{ display:inline-flex; align-items:center; gap:6px; background: rgba(224,82,82,0.06); color:#7b1e1e; padding:4px 8px; border-radius:999px; font-size:0.82rem; }
.distance-badge .bi{ font-size:0.9rem; color:#7b1e1e; }

/* categories */
.category-list{ padding-top:6px; }
.category-pill{ border-radius:999px; padding:8px 12px; background: linear-gradient(180deg,#fff,#FFF6F6); border:1px solid rgba(224,82,82,0.08); box-shadow: 0 2px 6px rgba(18,38,63,0.03); display:inline-flex; align-items:center; }
.category-pill{ color: #4a1a1a; transition: all 0.18s ease; font-weight:600; }
.category-pill:hover, .category-pill:focus{ transform: translateY(-2px); color: #fff !important; background: linear-gradient(90deg,#E05252,#9A372C); text-decoration: none; box-shadow: 0 6px 18px rgba(224,82,82,0.12); }
.category-pill i{ color: #E05252; }
/* small responsive tweaks */
@media (max-width: 767px){
	.dashboard-header{ padding:1rem 0.5rem; }
	.product-card img{ height:130px; }
			.carousel .d-block{ max-height:260px; }
}

/* centered search in header */
.header-search-wrapper{ max-width:520px; }
.header-search .form-control{ border-radius: 8px 0 0 8px; }
.header-search .btn{ border-radius: 0 8px 8px 0; }
@media (max-width: 767px){
	.header-search-wrapper{ max-width:100%; }
	.header-search{ width:100%; }
}

/* suggestions dropdown */
.header-search{ position: relative; }
#headerSearchSuggestions{ display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index:1050; }
#headerSearchSuggestions.show{ display:block; }
#headerSearchSuggestions .list-group-item{ cursor:pointer; padding:8px 10px; }
#headerSearchSuggestions img{ width:42px; height:42px; object-fit:cover; border-radius:6px; }
#headerSearchSuggestions .fw-semibold{ font-size:0.95rem; }

/* suggestion icon fallback when no image provided */
#headerSearchSuggestions .suggest-icon{ width:42px; height:42px; border-radius:6px; font-size:18px; color:#7b1e1e; }
#headerSearchSuggestions .suggest-icon .bi{ font-size:20px; color:#7b1e1e; }

/* Nearby bakers polish */
.nearby-baker { padding: 8px; border-radius: 8px; transition: background .15s, box-shadow .15s; }
.nearby-baker:hover { background: #fff; box-shadow: 0 6px 14px rgba(21,32,43,0.06); cursor: pointer; }
.nearby-baker .baker-name { font-weight: 600; color: #4a1a1a; }
.nearby-baker .baker-meta { font-size: 0.86rem; color: #8b6767; }
.nearby-baker .baker-actions { min-width: 64px; }
/* small ranking badge style for popular products */
.card .badge.bg-primary { font-size: 0.85rem; padding: 0.25rem 0.45rem; border-radius: 0.4rem; }

/* align distance badge to bottom-right in nearby-baker rows */
.nearby-baker{ display:flex; align-items:center; }
.nearby-baker .baker-distance{ display:flex; align-items:center; justify-content:flex-end; }

/* header address: show single line and full address in native tooltip on hover */
.dashboard-header .address{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:420px; display:block; }
.dashboard-header .brand-tag{ margin-top:6px; }

/* header logo */
.header-logo{ width:48px; height:48px; object-fit:cover; }
.brand-name{ font-size:1.05rem; color: #E05252; }
.brand-tag{ font-size:0.75rem; color: #9A372C; }

/* Polished stat tiles */
.stat-grid .stat-tile{ border-radius:12px; box-shadow: 0 8px 22px rgba(18,38,63,0.04); transition: transform .14s ease, box-shadow .14s ease; }

/* ──────────────────────────────────────────────────────────── */
/* Mobile View Improvements (Match User App Design) */
/* ──────────────────────────────────────────────────────────── */

/* Mobile Header Enhancements */
@media (max-width: 576px) {
  .dashboard-header {
    padding: 12px 8px;
  }
  
  /* Mobile menu styling to match app */
  #mobileNavMenu {
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.06);
  }
  
  .mobile-nav-link {
    padding: 12px 0;
    border-radius: 8px;
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    transition: all 0.2s ease;
  }
  
  .mobile-nav-link:hover {
    background: rgba(224,82,82,0.06);
    color: #E05252;
  }
  
  .mobile-nav-link .bi {
    color: #E05252;
    font-size: 1.1rem;
  }
  
  /* Mobile Search Input Styling */
  #mobileHeaderSearchInput {
    border: none;
    background: transparent;
    font-size: 1rem;
  }
  
  #mobileHeaderSearchInput::placeholder {
    color: #9a9a9a;
  }
  
  /* Mobile Suggestions Dropdown */
  #mobileHeaderSearchSuggestions {
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
    background: #fff;
  }
  
  #mobileHeaderSearchSuggestions .list-group-item:last-child {
    border-bottom: none;
  }
  
  /* Mobile Product Grid */
  .row > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
  }
  
  /* Mobile Card Improvements */
  .card {
    border-radius: 12px;
    border: none;
  }
  
  /* Better spacing on mobile */
  main.container {
    padding-left: 12px;
    padding-right: 12px;
  }
  
  /* Filter buttons mobile */
  .btn-sm {
    padding: 8px 12px;
    font-size: 0.9rem;
  }
  
  /* Mobile badge layout */
  .badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
  }
}

/* Tablet & Larger Screens */
@media (min-width: 768px) {
  #mobileHeaderSearchSuggestions {
    display: none !important;
  }
}

/* Desktop-specific refinements */
@media (min-width: 992px) {
  .dashboard-header {
    padding: 14px 0;
  }
  
  #headerSearchInput {
    font-size: 0.95rem;
  }
}

/* ──────────────────────────────────────────────────────────── */
/* Enhanced Suggestions Dropdown Styling */
/* ──────────────────────────────────────────────────────────── */

#headerSearchSuggestions,
#mobileHeaderSearchSuggestions {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

#headerSearchSuggestions .list-group-item,
#mobileHeaderSearchSuggestions .list-group-item {
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

#headerSearchSuggestions .list-group-item:hover,
#mobileHeaderSearchSuggestions .list-group-item:hover {
  background-color: #f8f8f8;
}

#headerSearchSuggestions .list-group-item:last-child,
#mobileHeaderSearchSuggestions .list-group-item:last-child {
  border-bottom: none;
}

.suggest-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  border-radius: 8px;
  flex-shrink: 0;
}

.suggest-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.suggest-icon .bi {
  color: #E05252;
  font-size: 1.2rem;
}
.stat-grid .stat-tile .stat-icon{ font-size:36px; color:#6b1e1e; width:48px; height:48px; display:flex; align-items:center; justify-content:center; }
.stat-grid .stat-orders{ background: linear-gradient(90deg,#F7FFF6,#F2FFFA); }
.stat-grid .stat-designs{ background: linear-gradient(90deg,#FBF6FF,#F6F0FF); }
.stat-grid .stat-title{ font-weight:700; font-size:1.05rem; color:#2d2d2d; }
.stat-grid .stat-subtitle{ color:#6c757d; font-size:0.92rem; }
.stat-grid .stat-count{ font-weight:700; font-size:1.1rem; color:#2d2d2d; }
.stat-grid .stat-tile:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(18,38,63,0.08); }
.trust-box {
      background:#fff;
      border-radius:12px;
      padding:20px;
      text-align:center;
      box-shadow:0 5px 15px rgba(0, 0, 0, 0.104);
    }
.nav-scroll {
  white-space: nowrap;
  scrollbar-width: none; /* Firefox */
}

.nav-scroll::-webkit-scrollbar {
  display: none; /* Chrome */
}

.nav-link-item {
  white-space: nowrap;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  padding: 4px 6px;
  transition: 0.2s;
}

.nav-link-item:hover {
  color: #F59E0B;
}

/* ── Mobile nav menu (hamburger collapse) ──────────────────────── */
.mobile-nav-link {
  display: flex;
  align-items: center;
  padding: 10px 8px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s;
}
.mobile-nav-link:hover,
.mobile-nav-link:active {
  background: #f5f5f5;
  color: #E05252;
}
.mobile-nav-link.text-danger { color: #dc3545 !important; }
.mobile-nav-link.text-danger:hover { background: #fff5f5; }

#mobileNavMenu { background: #fff; padding: 0 4px 8px; }

/* Pro UI polish for home sections */
.pro-section{ padding:22px; background: linear-gradient(180deg,#fff,#fff); border-radius:12px; margin-bottom:18px; }
.pro-section .card{ border-radius:12px; box-shadow: 0 12px 32px rgba(14,30,45,0.06); }
.pro-section h4, .pro-section h3{ color:#2b2b2b; }

/* Unified section heading */
.section-heading{
  font-size: 1.35rem;
  font-weight: 700;
  color: #7b1e1e;
  margin-bottom: 0;
  letter-spacing: -0.01em;
  position: relative;
  padding-bottom: 6px;
}
.section-heading::after{
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 36px; height: 3px;
  background: linear-gradient(90deg, #E05252, #9A372C);
  border-radius: 2px;
}

/* Featured category card polish */
.feature-card{ transition: transform .18s ease, box-shadow .18s ease; border: 1px solid rgba(0,0,0,0.03); }
.feature-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(18,38,63,0.08); }
.feature-card .fw-semibold{ font-size:1rem; margin-top:8px; }

/* Trust box refined */
.trust-box{ padding:18px; border-radius:12px; background: linear-gradient(90deg,#fff,#fff); box-shadow: 0 8px 20px rgba(18,38,63,0.04); }

/* How it works refined */
.how-card{ border-radius:12px; transition: transform .14s ease, box-shadow .14s ease; }
.how-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(18,38,63,0.08); }
.how-card .icon-circle{ width:72px; height:72px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:linear-gradient(135deg,#fff0ea,#fff); font-size:28px; }

/* Designs carousel tiles */
#designsInner .carousel-item{ min-height:180px; }
#designsInner img.rounded{ border-radius:10px; box-shadow: 0 8px 26px rgba(18,38,63,0.06); }

/* Testimonials */
.testimonials .card{ border-radius:12px; padding:18px; background: linear-gradient(180deg,#fff,#fff); }

/* CTA polish */
.pro-cta{ padding:22px; border-radius:12px; background: linear-gradient(180deg,#fff,#fff); box-shadow: 0 12px 32px rgba(18,38,63,0.06); }

@media (max-width:767px){
  .feature-card:hover, .how-card:hover{ transform: none; box-shadow: none; }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE-FIRST IMPROVEMENTS — iPhone/iOS users
   ══════════════════════════════════════════════════════════════════ */

/* ── Round icon button (used in mobile header) ──────────────────── */
.btn-icon-round{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  color: #333;
  font-size: 1.1rem;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.btn-icon-round:active{ background: #f0f0f0; }

/* ── Touch target minimums ──────────────────────────────────────── */
@media (max-width: 767px){
  .btn, button, a.nav-link, .dropdown-item{
    min-height: 40px;
  }
  .btn-sm{ min-height: 36px; font-size: 0.9rem; }
  .dropdown-item{ display: flex; align-items: center; min-height: 44px; font-size: 0.95rem; }
  input.form-control, select.form-select{
    min-height: 44px;
    font-size: 1rem;
  }
}

/* ── Bottom navigation bar ──────────────────────────────────────── */
.bako-bottom-nav{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.07);
  height: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  justify-content: space-around;
  align-items: center;
}
.bako-bn-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-decoration: none;
  color: #888;
  font-size: 0.65rem;
  font-weight: 500;
  gap: 2px;
  padding: 6px 0;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}
.bako-bn-item i{ font-size: 1.35rem; line-height: 1; }
.bako-bn-item.active, .bako-bn-item:active{ color: #E05252; }
.bako-bn-item.active i{ color: #E05252; }

/* ── Body padding so content isn't hidden behind bottom nav ─────── */
@media (max-width: 767px){
  body{
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
  /* Offset sticky header on mobile — it's shorter */
  main.container{ padding-top: 0.5rem; }

  /* Tighter section spacing */
  .pro-section{ padding: 14px; margin-bottom: 12px; }
  .section-heading{ font-size: 1.15rem; }
}

/* ── iPhone safe-area top/left/right ────────────────────────────── */
.dashboard-header{
  padding-top: max(0px, env(safe-area-inset-top));
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ── Mobile product card: 2-column grid ─────────────────────────── */
@media (max-width: 767px){
  .product-card-img, .card-img-top{ height: 140px !important; object-fit: cover; }
  .card .card-body{ padding: 0.65rem; }
  .card .card-title, .card h6{ font-size: 0.9rem; margin-bottom: 4px; }
  .card .btn{ font-size: 0.82rem; padding: 5px 10px; }
  /* 2-col grids: keep col-6 items compact */
  .col-6 .card{ border-radius: 10px; }
}

/* ── Carousel height on mobile ──────────────────────────────────── */
@media (max-width: 575px){
  .carousel .d-block{ max-height: 200px !important; border-radius: 10px; }
}

/* ── Trust boxes on mobile: 1 row scrollable ────────────────────── */
@media (max-width: 767px){
  .trust-box{ padding: 14px 10px; border-radius: 10px; }
  .trust-box h5{ font-size: 0.95rem; margin-bottom: 2px; }
}

/* ── Search page filter row ─────────────────────────────────────── */
@media (max-width: 767px){
  #exploreApp .btn-group{ display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; -webkit-overflow-scrolling: touch; }
  #exploreApp .btn-group .btn{ white-space: nowrap; min-height: 36px; border-radius: 8px !important; border: 1px solid #ddd !important; flex-shrink: 0; }
}

/* ── Cart offcanvas: full height on mobile ──────────────────────── */
@media (max-width: 767px){
  .offcanvas.offcanvas-end{
    width: 100% !important;
  }
  .offcanvas-header{ padding: 1rem; }
  #sharedCartBody{ padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* ── Footer: hide on mobile (bottom nav replaces it) ───────────── */
@media (max-width: 767px){
  footer{ display: none; }
}

/* ── Scrollable horizontal category pills on mobile ────────────── */
@media (max-width: 767px){
  .category-list{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .category-list::-webkit-scrollbar{ display: none; }
  .category-pill{ flex-shrink: 0; }
}

/* ── Baker profile card on mobile ──────────────────────────────── */
@media (max-width: 767px){
  .baker-avatar, .card-body img[style*="96px"]{ width: 72px !important; height: 72px !important; }
}

/* ── Mobile Menu offcanvas: bottom sheet ──────────────────────── */
@media (max-width: 767px){
  .offcanvas.offcanvas-bottom{
    height: auto !important;
    max-height: 80vh !important;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }
}

/* ── Prevent text size adjustment on iOS ───────────────────────── */
body{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ── Remove tap highlight ───────────────────────────────────────── */
a, button{ -webkit-tap-highlight-color: transparent; }

/* ── Smooth scrolling ───────────────────────────────────────────── */
html{ scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }