/* ipoo-topbar-redesign — Unified peach top bars */
/* ================================================================
   IPOO — UNIFIED TOP BAR REDESIGN
   Applies to every in-app top bar EXCEPT:
     • #screen-home .topbar    (keeps its logo + icon row)
     • #screen-detail top bar  (keeps its own centered layout)
   ================================================================ */

/* 1) BACKGROUND — match the reference popular-products screen */
.tbar.dark,
#ord3-topbar,
#ord3-tabs,
#screen-cart .top-app-bar,
#sc-catpage .top-app-bar {
  background: linear-gradient(115deg, #1c1410 0%, #47200f 66%, #a83c10 145%) !important;
  box-shadow: 0 12px 28px rgba(28, 20, 16, 0.18) !important;
  border-bottom: 0 !important;
}

html body #screen-top-sellers > .top-app-bar,
html body #screen-popular > .top-app-bar,
#screen-top-sellers .top-app-bar,
#screen-popular .top-app-bar {
  background: linear-gradient(115deg, #1c1410 0%, #47200f 66%, #a83c10 145%) !important;
  box-shadow: 0 12px 28px rgba(28, 20, 16, 0.18) !important;
  border-bottom: 0 !important;
  border-top: 0 !important;
}

html body #screen-top-sellers > .top-app-bar .section-title,
html body #screen-popular > .top-app-bar .section-title,
html body #screen-top-sellers > .top-app-bar .icon-btn:not(:last-child),
html body #screen-popular > .top-app-bar .icon-btn:not(:last-child),
html body #screen-top-sellers > .top-app-bar .icon-btn svg,
html body #screen-popular > .top-app-bar .icon-btn svg,
#screen-top-sellers .top-app-bar .section-title,
#screen-popular .top-app-bar .section-title,
#screen-top-sellers .top-app-bar .icon-btn:not(:last-child),
#screen-popular .top-app-bar .icon-btn:not(:last-child),
#screen-top-sellers .top-app-bar .icon-btn svg,
#screen-popular .top-app-bar .icon-btn svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

html body #screen-top-sellers > .top-app-bar > .icon-btn:not(:last-child),
html body #screen-popular > .top-app-bar > .icon-btn:not(:last-child),
#screen-top-sellers .top-app-bar > .icon-btn:not(:last-child),
#screen-popular .top-app-bar > .icon-btn:not(:last-child) {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Canonical WhatsApp support-button contract: circular, transparent, green. */
html body #screen-detail > .top-app-bar > .icon-btn:last-child,
html body #screen-top-sellers > .top-app-bar > .icon-btn:last-child,
html body #screen-popular > .top-app-bar > .icon-btn:last-child,
html body #screen-detail .top-app-bar > .icon-btn:last-child,
html body #screen-top-sellers .top-app-bar > .icon-btn:last-child,
html body #screen-popular .top-app-bar > .icon-btn:last-child {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: #168c4a !important;
  fill: #168c4a !important;
  stroke: #168c4a !important;
}

html body #screen-detail .top-app-bar > .icon-btn:last-child svg,
html body #screen-top-sellers .top-app-bar > .icon-btn:last-child svg,
html body #screen-popular .top-app-bar > .icon-btn:last-child svg,
html body #screen-detail .top-app-bar > .icon-btn:last-child path,
html body #screen-top-sellers .top-app-bar > .icon-btn:last-child path,
html body #screen-popular .top-app-bar > .icon-btn:last-child path {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

#screen-products,
#screen-products.screen.active,
#screen-products .scroll,
#screen-products .scroll-body,
#screen-products .prod-grid-m3,
#screen-top-sellers,
#screen-top-sellers.screen.active,
#screen-top-sellers .scroll,
#screen-top-sellers .scroll-body,
#screen-top-sellers .prod-grid-m3,
#screen-popular,
#screen-popular.screen.active,
#screen-popular .scroll,
#screen-popular .scroll-body,
#screen-popular .prod-grid-m3 {
  background: #FFF8F6 !important;
}

#screen-checkout .top-app-bar {
  background: linear-gradient(115deg, #1c1410 0%, #47200f 66%, #a83c10 145%) !important;
  box-shadow: 0 12px 28px rgba(28, 20, 16, 0.18) !important;
  border-bottom: 0 !important;
}

/* These bars were built assuming a dark background — re-ink them */
.tbar.dark .tbar-title.w,
.tbar.dark .ibtn.w,
.tbar.dark .ibtn.w svg,
.tbar.dark .back-btn,
#screen-top-sellers .top-app-bar .section-title,
#screen-popular .top-app-bar .section-title,
#screen-top-sellers .top-app-bar .icon-btn,
#screen-popular .top-app-bar .icon-btn {
  color: #FFFFFF !important;
}

html body #screen-top-sellers > .top-app-bar > .icon-btn:not(:last-child),
html body #screen-popular > .top-app-bar > .icon-btn:not(:last-child) {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}
.tbar.dark .ibtn.w:hover,
.tbar.dark .back-btn:hover { background: rgba(28, 20, 16, 0.06) !important; }
#ord3-refresh-btn, .ord3-top-btn, #ord3-topbar .ord3-back { color: #1C0E06 !important; }

/* 3) ORDERS SCREEN — full peach background, not surface-2 */
#sc-orders,
#ord3-body,
#ord3-cards {
  background: #FCE7E3 !important;
}
#ord3-topbar {
  background: #FCE7E3 !important;
}

/* 2) CENTER EVERY HEADING (safe truncation for long titles) */
.tbar.dark .tbar-title.w,
#ord3-title,
#sc-catpage .search-full-bar #catpage-title,
#screen-cart .top-app-bar .bar-title,
#screen-checkout .top-app-bar .bar-title {
  text-align: center !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#sc-catpage .search-full-bar {
  justify-content: center !important;
}

/* Premium category page bar */
#sc-catpage {
  background: linear-gradient(180deg, #F7F3F1 0%, #F9F5F3 100%) !important;
}

#sc-catpage .cat-top-shell {
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 0;
  margin-bottom: 14px;
}

#sc-catpage .cat-top-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 24px;
  background: var(--md-surface-4);
  border: 1px solid rgba(232, 117, 34, 0.16);
  box-shadow: 0 16px 32px rgba(24, 13, 5, 0.08);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

#sc-catpage .cat-top-bar .icon-btn,
#sc-catpage .cat-top-bar #cat-search-toggle-btn {
  width: 46px;
  height: 46px;
  min-width: 46px;
  margin: 0;
  flex-shrink: 0;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(232, 117, 34, 0.16);
  box-shadow: 0 10px 18px rgba(24, 13, 5, 0.08);
  align-self: center;
}

#sc-catpage .cat-top-bar .icon-btn svg,
#sc-catpage .cat-top-bar #cat-search-toggle-btn svg {
  width: 20px;
  height: 20px;
}

#sc-catpage .cat-top-title-wrap {
  flex: 1;
  min-width: 0;
  justify-content: center;
  text-align: center;
}

#sc-catpage .cat-top-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b35e12;
  margin-bottom: 4px;
}

#sc-catpage .cat-top-title {
  margin: 0 !important;
  color: #23160d;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
}

#sc-catpage .cat-hero-card {
  display: none !important;
}

html body #sc-catpage > .top-app-bar {
  min-height: 96px !important;
  height: 96px !important;
  flex-basis: 96px !important;
  border-radius: 0 0 24px 24px !important;
  overflow: hidden !important;
}

html body #sc-catpage #catpage-title {
  display: inline-block !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
}

/* Premium ecommerce headline scale */
.section-title,
.topbar-title,
.bar-title,
.tbar-title,
.heading,
.title,
.section-card-title,
.co-section-header h2,
.help-hero h2,
.about-sec h3,
.prof-info h3,
#sc-catpage .cat-top-title,
#screen-products .section-title,
#screen-top-sellers .section-title,
#screen-popular .section-title,
#screen-cart .bar-title {
  font-family: "Google Sans", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  color: #1b1109 !important;
}

.section-title {
  font-size: 18px !important;
  font-style: normal !important;
}

.bar-title,
.topbar-title,
.tbar-title {
  font-size: 20px !important;
}

.heading,
.title,
#sc-catpage .cat-top-title,
.help-hero h2,
.about-sec h3,
.prof-info h3 {
  font-size: 22px !important;
}

/* 4) PRODUCTS SEARCH BAR — surrounding top bar background restored (outside), .search-full-bar inside stays 100% verbatim */
#screen-products > .top-app-bar {
  background: var(--md-surface-1) !important;
  border-bottom: 1px solid rgba(28, 14, 6, 0.06) !important;
  box-shadow: none !important;
}






/* ================================================================
   HANDWRITING — give the cursive logotype a proper "brand stage"
   ================================================================ */
.receipt-header-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px 22px;
  background: radial-gradient(120% 140% at 50% 0%, #FFF3EE 0%, #FEE7DE 60%, #FCE0D4 100%);
  border-radius: 24px;
  border: 1px solid #F3D9CB;
}
.receipt-logo {
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}
.receipt-logo::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%; bottom: 2px; height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'%3E%3Cpath d='M0 6 Q10 0 20 6 T40 6 T60 6 T80 6 T100 6' stroke='%23FF4500' stroke-width='2' fill='none' opacity='0.45'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.receipt-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 100px;
  background: rgba(255, 77, 0, 0.08);
}
.receipt-phone a { font-weight: 800; }

/* Home greeting card, if/when reintroduced to the markup */
.greeting-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 16px 4px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #FFF3EE 0%, #FEE7DE 100%);
  border-radius: 18px;
  border: 1px solid #F3D9CB;
}