:root {
  --navy: #061b45;
  --navy2: #0a2a61;
  --navy3: #123a78;
  --coral: #ff6238;
  --coral2: #ff7b58;
  --bg: #f4f7fb;
  --card: #fff;
  --ink: #172238;
  --muted: #6b778c;
  --line: #e6ebf3;
  --green: #1aa767;
  --shadow: 0 14px 36px rgba(6, 27, 69, .12);
  --radius: 22px;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea {
  font: inherit
}

button {
  cursor: pointer
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(255, 98, 56, .28);
  outline-offset: 2px
}

.container {
  width: min(1180px, 100%);
  margin: auto;
  padding: 0 16px
}

/* Splash */
.splash {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 38%, rgba(255, 98, 56, .18), transparent 22%), linear-gradient(145deg, #061b45, #03132f 68%, #0b2b62);
  color: #fff;
  transition: .55s ease
}

.splash.hide {
  opacity: 0;
  visibility: hidden
}

.splash-inner {
  text-align: center;
  padding: 24px
}

.splash-logo {
  font-size: clamp(70px, 18vw, 118px);
  font-weight: 950;
  letter-spacing: -6px;
  line-height: .8
}

.splash-logo .bang {
  color: var(--coral)
}

.splash-sub {
  margin-top: 18px;
  color: #d8e2f2;
  font-size: 17px
}

.loader {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .18);
  border-top-color: var(--coral);
  margin: 28px auto 0;
  animation: spin .9s linear infinite
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

/* GPS first-run */
.permission {
  position: fixed;
  inset: 0;
  z-index: 450;
  background: rgba(3, 12, 30, .72);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px
}

.permission.open {
  display: flex
}

.permission-card {
  width: min(500px, 100%);
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28)
}

.permission-head {
  background: linear-gradient(145deg, var(--navy), var(--navy3));
  color: #fff;
  text-align: center;
  padding: 28px 24px 22px
}

.permission-icon {
  width: 92px;
  height: 92px;
  border-radius: 28px;
  margin: auto;
  background: rgba(255, 255, 255, .08);
  display: grid;
  place-items: center;
  font-size: 44px;
  border: 1px solid rgba(255, 255, 255, .08)
}

.permission-head h2 {
  margin: 16px 0 8px;
  font-size: 30px;
  letter-spacing: -1px
}

.permission-head p {
  margin: 0;
  color: #d8e2f2;
  line-height: 1.45
}

.permission-body {
  padding: 22px
}

.permission-list {
  display: grid;
  gap: 12px;
  margin-bottom: 20px
}

.permission-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--muted);
  font-size: 14px
}

.permission-row strong {
  color: var(--ink)
}

.permission-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px
}

.btn-coral,
.btn-navy,
.btn-soft,
.btn-green {
  border: 0;
  border-radius: 15px;
  padding: 13px 16px;
  font-weight: 850
}

.btn-coral {
  background: linear-gradient(145deg, var(--coral), var(--coral2));
  color: #fff;
  box-shadow: 0 12px 26px rgba(255, 98, 56, .24)
}

.btn-navy {
  background: var(--navy);
  color: #fff
}

.btn-soft {
  background: #f6f8fc;
  color: var(--ink);
  border: 1px solid var(--line)
}

.btn-green {
  background: var(--green);
  color: #fff
}

/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 120;
  background: rgba(6, 27, 69, .94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.header-row {
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 12px
}

.logo {
  color: #fff;
  font-size: 29px;
  font-weight: 950;
  letter-spacing: -2px;
  line-height: 1;
  position: relative;
  white-space: nowrap
}

.logo .bang {
  color: var(--coral)
}

.logo-rays {
  position: absolute;
  right: -9px;
  top: -11px;
  width: 34px;
  height: 22px
}

.logo-rays i {
  position: absolute;
  width: 5px;
  height: 15px;
  border-radius: 99px;
  background: var(--coral);
  transform-origin: bottom
}

.logo-rays i:nth-child(1) {
  right: 1px;
  top: 5px;
  transform: rotate(36deg)
}

.logo-rays i:nth-child(2) {
  right: 14px;
  top: 0;
  transform: rotate(8deg)
}

.logo-rays i:nth-child(3) {
  right: 27px;
  top: 5px;
  transform: rotate(-28deg)
}

.desktop-nav {
  display: none;
  margin-left: auto;
  gap: 8px
}

.desktop-nav button {
  border: 0;
  background: transparent;
  color: #e5edf8;
  padding: 9px 11px;
  border-radius: 11px;
  font-weight: 700
}

.desktop-nav button:hover {
  background: rgba(255, 255, 255, .08)
}

.gps-status {
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .05);
  color: #e9f1fb;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
  white-space: nowrap;
  max-width: 145px;
  overflow: hidden;
  text-overflow: ellipsis
}

.business-top {
  display: none;
  border: 0;
  background: var(--coral);
  color: #fff;
  font-weight: 850;
  border-radius: 12px;
  padding: 10px 13px
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(circle at 68% 55%, rgba(255, 98, 56, .2), transparent 22%), radial-gradient(circle at 90% 8%, rgba(255, 255, 255, .05), transparent 18%), linear-gradient(150deg, var(--navy), var(--navy2) 58%, var(--navy3));
  padding: 34px 0 28px
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto -120px -210px auto;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  border: 66px solid rgba(255, 98, 56, .92);
  opacity: .92
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px
}

.hero-copy {
  text-align: center
}

.hero-brand {
  display: inline-block;
  position: relative;
  font-size: clamp(66px, 20vw, 112px);
  font-weight: 950;
  letter-spacing: -5px;
  line-height: .86
}

.hero-brand .bang {
  color: var(--coral)
}

.hero-rays {
  position: absolute;
  right: 1px;
  top: -17px;
  width: 74px;
  height: 42px
}

.hero-rays i {
  position: absolute;
  width: 10px;
  height: 31px;
  border-radius: 99px;
  background: var(--coral);
  transform-origin: bottom
}

.hero-rays i:nth-child(1) {
  right: 0;
  top: 8px;
  transform: rotate(35deg)
}

.hero-rays i:nth-child(2) {
  right: 29px;
  top: 0;
  transform: rotate(8deg)
}

.hero-rays i:nth-child(3) {
  right: 57px;
  top: 8px;
  transform: rotate(-28deg)
}

.hero h1 {
  font-size: clamp(26px, 7vw, 44px);
  line-height: 1.06;
  letter-spacing: -1.4px;
  margin: 14px auto 10px;
  max-width: 620px
}

.hero h1 .accent {
  color: var(--coral)
}

.hero-copy>p {
  margin: 0 auto;
  color: #d7e2f1;
  line-height: 1.55;
  max-width: 610px;
  font-size: 15px
}

.hero-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 18px
}

.hero-chip {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 700;
  color: #eef4fc
}

/* Bag */
.visual {
  height: 360px;
  position: relative;
  display: grid;
  place-items: center;
  margin-top: 2px
}

.glow {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 121, 80, .46), rgba(255, 98, 56, .13) 38%, transparent 68%);
  animation: pulse 4s ease-in-out infinite
}

@keyframes pulse {
  50% {
    transform: scale(1.08);
    opacity: .84
  }
}

.bag-shadow {
  position: absolute;
  bottom: 58px;
  width: 250px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, .35), transparent 70%);
  filter: blur(7px);
  animation: shadow 4.2s ease-in-out infinite
}

@keyframes shadow {
  50% {
    transform: scale(.88);
    opacity: .5
  }
}

.bag-wrap {
  position: relative;
  width: 250px;
  height: 270px;
  animation: float 4.2s ease-in-out infinite;
  filter: drop-shadow(0 24px 32px rgba(0, 0, 0, .26))
}

@keyframes float {
  50% {
    transform: translateY(-12px)
  }
}

.bag-body {
  position: absolute;
  left: 31px;
  right: 31px;
  bottom: 24px;
  height: 175px;
  border-radius: 13px 13px 19px 19px;
  background: linear-gradient(145deg, #0c2c66, #071c48 67%, #06163a);
  box-shadow: inset -18px 0 28px rgba(0, 0, 0, .14), inset 0 1px rgba(255, 255, 255, .12)
}

.handle {
  position: absolute;
  top: 24px;
  width: 72px;
  height: 88px;
  border: 7px solid #102b62;
  border-bottom: 0;
  border-radius: 55px 55px 0 0
}

.handle.h1 {
  left: 55px
}

.handle.h2 {
  right: 55px
}

.price-tag {
  position: absolute;
  left: 91px;
  top: 118px;
  width: 70px;
  height: 104px;
  border-radius: 15px;
  background: linear-gradient(145deg, var(--coral2), var(--coral));
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 950;
  font-size: 50px;
  transform: rotate(4deg);
  box-shadow: 0 15px 26px rgba(255, 98, 56, .27)
}

.price-tag::before {
  content: "";
  position: absolute;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffd8cc;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .13)
}

.ticket {
  position: absolute;
  left: 4%;
  top: 27%;
  width: 110px;
  height: 82px;
  background: linear-gradient(145deg, var(--coral), #f54c30);
  clip-path: polygon(0 16%, 8% 16%, 8% 0, 92% 0, 92% 16%, 100% 16%, 100% 84%, 92% 84%, 92% 100%, 8% 100%, 8% 84%, 0 84%);
  display: grid;
  place-items: center;
  font-size: 42px;
  font-weight: 950;
  transform: rotate(-17deg);
  animation: floatTicket 4.6s ease-in-out infinite;
  box-shadow: 0 15px 28px rgba(255, 98, 56, .18)
}

@keyframes floatTicket {
  50% {
    transform: rotate(-13deg) translateY(-10px)
  }
}

.float-icon {
  position: absolute;
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(17, 43, 91, .95), rgba(5, 19, 48, .97));
  border: 1px solid rgba(255, 255, 255, .09);
  display: grid;
  place-items: center;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .22);
  font-size: 34px;
  animation: floatIcon 4.8s ease-in-out infinite
}

.float-icon.cart {
  right: 5%;
  top: 34%;
  color: var(--coral)
}

.float-icon.heart {
  right: 14%;
  bottom: 15%;
  font-size: 29px;
  animation-delay: .8s
}

@keyframes floatIcon {
  50% {
    transform: translateY(-13px)
  }
}

/* Search */
.search-wrap {
  position: relative;
  z-index: 4;
  margin-top: -7px
}

.search-card {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 20px;
  padding: 9px;
  box-shadow: 0 18px 44px rgba(6, 27, 69, .15);
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px
}

.search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f7f9fc;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 12px;
  min-height: 50px
}

.search-field input,
.search-field select {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  outline: 0;
  font-size: 14px
}

.search-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}

.search-actions button {
  min-height: 48px
}

/* Sections */
main {
  padding: 26px 0 90px
}

.section {
  padding: 18px 0
}

.section-head {
  display: flex;
  gap: 10px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 14px
}

.section-head h2 {
  margin: 0;
  font-size: 23px;
  letter-spacing: -.7px
}

.section-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px
}

.section-link {
  border: 0;
  background: none;
  color: var(--coral);
  font-weight: 850;
  font-size: 13px;
  padding: 7px
}

.category-scroll {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding: 1px 0 4px;
  scrollbar-width: none
}

.category-scroll::-webkit-scrollbar {
  display: none
}

.category {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 9px 12px;
  font-weight: 750;
  font-size: 13px
}

.category.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff
}

/* Auto carousel */
.carousel-shell {
  position: relative
}

.carousel-viewport {
  overflow: hidden;
  border-radius: 24px;
  padding: 2px 1px 8px
}

.carousel-track {
  display: flex;
  gap: 14px;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
  will-change: transform
}

.offer-card {
  flex: 0 0 100%;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 21px;
  overflow: hidden;
  box-shadow: var(--shadow);
  position: relative
}

.offer-image {
  width: 100%;
  aspect-ratio: 16/10;
  height: auto;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: #eef3fa
}

.offer-image::after {
  content: "";
  position: absolute;
  inset: auto -10% -42px -10%;
  height: 84px;
  background: radial-gradient(circle at center, rgba(255, 255, 255, .55), transparent 67%)
}

.offer-emoji {
  font-size: 84px;
  filter: drop-shadow(0 13px 20px rgba(0, 0, 0, .13));
  position: relative;
  z-index: 1
}

.badge {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  background: var(--coral);
  color: #fff;
  border-radius: 11px;
  padding: 7px 9px;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 9px 20px rgba(255, 98, 56, .25)
}

.fav {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  width: 39px;
  height: 39px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .92);
  color: #92a0b4;
  font-size: 18px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .08)
}

.fav.active {
  color: var(--coral);
  background: #fff0eb
}

.offer-body {
  padding: 15px
}

.offer-body h3 {
  font-size: 17px;
  line-height: 1.25;
  margin: 0 0 5px
}

.offer-store {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px
}

.meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px
}

.price {
  font-size: 22px;
  font-weight: 950;
  color: var(--navy);
  margin-top: 10px
}

.old {
  font-size: 12px;
  color: #98a5b8;
  text-decoration: line-through;
  margin-left: 5px;
  font-weight: 600
}

.card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px
}

.card-actions button {
  flex: 1;
  padding: 10px 9px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 850
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px
}

.carousel-arrow {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  font-size: 19px;
  box-shadow: 0 6px 18px rgba(6, 27, 69, .08)
}

.dots {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  max-width: 220px;
  flex-wrap: wrap
}

.dot {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background: #c9d1df;
  padding: 0;
  transition: .25s
}

.dot.active {
  width: 23px;
  border-radius: 99px;
  background: var(--coral)
}

.autoplay-label {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px
}


/* Promotions ending soon */
.ending-soon-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(145deg, #fff8f5, #fff);
  border: 1px solid #ffd9ce;
  padding: 15px;
  box-shadow: 0 12px 30px rgba(255, 98, 56, .08)
}

.ending-soon-wrap::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 98, 56, .14), transparent 68%);
  pointer-events: none
}

.ending-soon-viewport {
  overflow: hidden;
  border-radius: 20px;
  position: relative;
  z-index: 1;
  padding: 3px 1px 7px;
  touch-action: pan-y
}

.ending-soon-track {
  display: flex;
  gap: 12px;
  position: relative;
  z-index: 1;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
  will-change: transform
}

.urgent-card {
  flex: 0 0 100%;
  min-width: 0;
  background: #fff;
  border: 1px solid #ffe1d8;
  border-radius: 19px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(6, 27, 69, .08);
  position: relative
}

.ending-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
  position: relative;
  z-index: 2
}

.ending-arrow {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  border: 1px solid #ffd8cc;
  background: #fff;
  color: var(--coral);
  font-size: 19px;
  box-shadow: 0 6px 18px rgba(255, 98, 56, .10)
}

.ending-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  max-width: 220px;
  flex-wrap: wrap
}

.ending-dot {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background: #efc4b8;
  padding: 0;
  transition: .25s
}

.ending-dot.active {
  width: 23px;
  border-radius: 99px;
  background: var(--coral)
}

.ending-autoplay-label {
  text-align: center;
  font-size: 11px;
  color: #a85d49;
  margin-top: 4px;
  position: relative;
  z-index: 2
}

.urgent-top {
  min-height: 118px;
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 10px;
  padding: 13px;
  background: linear-gradient(145deg, #fff5f1, #fff)
}

.urgent-emoji {
  width: 82px;
  height: 82px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 47px;
  background: linear-gradient(145deg, #fff, #f5f7fb);
  box-shadow: 0 8px 18px rgba(6, 27, 69, .08)
}

.urgent-copy h3 {
  margin: 0 0 5px;
  font-size: 15px;
  line-height: 1.25
}

.urgent-copy small {
  display: block;
  color: var(--muted);
  font-size: 11px
}

.countdown {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  background: #fff0eb;
  color: #d94b25;
  border: 1px solid #ffd0c4;
  border-radius: 999px;
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 900;
  animation: urgentPulse 2.4s ease-in-out infinite
}

@keyframes urgentPulse {
  50% {
    box-shadow: 0 0 0 5px rgba(255, 98, 56, .08)
  }
}

.urgent-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 11px 13px;
  border-top: 1px solid var(--line)
}

.urgent-price {
  font-size: 17px;
  font-weight: 950;
  color: var(--navy)
}

.urgent-price .old {
  font-size: 10px
}

.urgent-bottom button {
  border: 0;
  background: var(--navy);
  color: #fff;
  border-radius: 11px;
  padding: 9px 11px;
  font-size: 11px;
  font-weight: 850
}

.ending-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--coral);
  font-size: 12px;
  font-weight: 850
}

.ending-summary .live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 5px rgba(255, 98, 56, .10);
  animation: livePulse 1.7s ease-in-out infinite
}

@keyframes livePulse {
  50% {
    box-shadow: 0 0 0 9px rgba(255, 98, 56, 0)
  }
}

.time-urgent {
  color: #d94b25 !important;
  font-weight: 850
}

@media(min-width:600px) {
  .urgent-card {
    flex-basis: calc((100% - 12px)/2)
  }
}

@media(min-width:950px) {
  .urgent-card {
    flex-basis: calc((100% - 24px)/3)
  }
}


/* Smart alerts */
.smart-alert {
  background: linear-gradient(145deg, #fff, #fbfcff);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 18px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden
}

.smart-alert::after {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 98, 56, .14), transparent 68%);
  pointer-events: none
}

.alert-heading {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  position: relative;
  z-index: 1
}

.alert-bell {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--coral), var(--coral2));
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 25px;
  flex: 0 0 auto;
  box-shadow: 0 12px 24px rgba(255, 98, 56, .22);
  animation: bellPulse 3s ease-in-out infinite
}

@keyframes bellPulse {

  0%,
  100% {
    transform: rotate(0) scale(1)
  }

  15% {
    transform: rotate(8deg) scale(1.04)
  }

  30% {
    transform: rotate(-7deg) scale(1.04)
  }

  45% {
    transform: rotate(0) scale(1)
  }
}

.alert-heading h2 {
  margin: 0;
  font-size: 21px;
  letter-spacing: -.6px
}

.alert-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45
}

.alert-question {
  font-size: 16px;
  font-weight: 900;
  color: var(--navy);
  margin: 17px 0 9px
}

.alert-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  position: relative;
  z-index: 1
}

.alert-input {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: #f7f9fc;
  border-radius: 14px;
  padding: 0 12px;
  min-height: 50px
}

.alert-input input,
.alert-input select {
  border: 0;
  background: transparent;
  outline: 0;
  width: 100%;
  min-width: 0;
  color: var(--ink);
  font-size: 14px
}

.alert-examples {
  display: flex;
  gap: 7px;
  overflow: auto;
  margin-top: 11px;
  padding-bottom: 2px;
  scrollbar-width: none
}

.alert-examples::-webkit-scrollbar {
  display: none
}

.alert-example {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 11px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750
}

.alert-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 1
}

.alert-footer small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35
}

.alert-count-btn {
  border: 0;
  background: #fff0eb;
  color: var(--coral);
  font-weight: 900;
  border-radius: 999px;
  padding: 9px 12px;
  white-space: nowrap
}

.price-watch-note {
  margin-top: 12px;
  border-radius: 14px;
  background: #f7f9fc;
  border: 1px solid var(--line);
  padding: 11px 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45
}

.price-watch-note strong {
  color: var(--navy)
}

/* Alert center */
.alert-backdrop {
  position: fixed;
  inset: 0;
  z-index: 330;
  background: rgba(3, 12, 30, .68);
  display: none;
  align-items: flex-end;
  justify-content: center
}

.alert-backdrop.open {
  display: flex
}

.alert-sheet {
  width: 100%;
  background: #fff;
  border-radius: 25px 25px 0 0;
  padding: 18px 16px calc(22px + env(safe-area-inset-bottom));
  max-height: 90vh;
  overflow: auto
}

.alert-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px
}

.alert-sheet-title {
  display: flex;
  align-items: center;
  gap: 11px
}

.alert-sheet-icon {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: #fff0eb;
  color: var(--coral);
  display: grid;
  place-items: center;
  font-size: 24px
}

.alert-sheet h3 {
  margin: 0;
  font-size: 20px
}

.alert-sheet-head small {
  display: block;
  color: var(--muted);
  margin-top: 3px
}

.alert-list {
  display: grid;
  gap: 9px;
  margin-top: 15px
}

.alert-empty {
  border: 1px dashed #ccd6e6;
  background: #fafcff;
  border-radius: 16px;
  padding: 22px;
  text-align: center;
  color: var(--muted);
  font-size: 13px
}

.alert-item {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: #fff;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center
}

.alert-type {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #f3f6fb;
  display: grid;
  place-items: center;
  font-size: 21px
}

.alert-item b {
  display: block;
  font-size: 13px
}

.alert-item small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 3px;
  line-height: 1.35
}

.alert-delete {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: #9a5660;
  font-weight: 900
}

.alert-center-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 14px
}

.alert-help {
  margin-top: 12px;
  background: #f7f9fc;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45
}

.alert-history {
  margin-top: 17px
}

.alert-history h4 {
  margin: 0 0 9px;
  font-size: 14px
}

.history-list {
  display: grid;
  gap: 7px
}

.history-item {
  background: #f8fafd;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 10px 11px
}

.history-item b {
  font-size: 12px
}

.history-item small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 3px
}

.price-watch-active {
  background: #fff0eb !important;
  color: var(--coral) !important;
  border-color: #ffd0c4 !important
}

@media(min-width:600px) {
  .alert-form {
    grid-template-columns: 1.4fr .7fr auto;
    align-items: stretch
  }

  .alert-form .btn-coral {
    min-width: 130px
  }

  .alert-backdrop {
    align-items: center;
    padding: 20px
  }

  .alert-sheet {
    max-width: 620px;
    border-radius: 25px;
    padding: 20px
  }

  .alert-center-actions {
    grid-template-columns: 1fr 1fr
  }

  .modal-actions {
    grid-template-columns: repeat(2, 1fr) !important
  }

  .profile-metrics {
    grid-template-columns: repeat(4, 1fr) !important
  }
}

/* Nearby */
.nearby-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px
}

.biz-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 9px 26px rgba(6, 27, 69, .07)
}

.biz-head {
  display: flex;
  gap: 11px;
  align-items: center
}

.biz-logo {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--navy), var(--navy3));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  flex: 0 0 auto
}

.biz-name {
  font-weight: 850;
  font-size: 15px
}

.biz-loc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px
}

.biz-offer {
  color: var(--coral);
  font-weight: 800;
  font-size: 13px;
  margin-top: 11px
}

.biz-actions {
  display: flex;
  gap: 7px;
  margin-top: 11px
}

.biz-actions button {
  flex: 1;
  padding: 9px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 850
}

/* Feature band */
.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px
}

.feature {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 13px
}

.feature-icon {
  width: 39px;
  height: 39px;
  border-radius: 12px;
  background: #fff0eb;
  color: var(--coral);
  display: grid;
  place-items: center;
  font-size: 20px
}

.feature b {
  display: block;
  font-size: 13px;
  margin-top: 9px
}

.feature span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  margin-top: 3px
}

/* CTA */
.cta {
  background: linear-gradient(145deg, var(--navy), var(--navy3));
  color: #fff;
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 18px 38px rgba(6, 27, 69, .16)
}

.cta h3 {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: -.6px
}

.cta p {
  margin: 0;
  color: #dce6f4;
  font-size: 13px;
  line-height: 1.45
}

.cta button {
  margin-top: 14px;
  width: 100%
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(3, 12, 30, .67);
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0
}

.modal-backdrop.open {
  display: flex
}

.modal {
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 25px 25px 0 0;
  box-shadow: 0 -15px 50px rgba(0, 0, 0, .22)
}

.modal-cover {
  height: 220px;
  display: grid;
  place-items: center;
  position: relative
}

.modal-cover .offer-emoji {
  font-size: 102px
}

.modal-content {
  padding: 18px 17px 24px
}

.modal-top {
  display: flex;
  justify-content: space-between;
  gap: 15px
}

.modal h2 {
  font-size: 24px;
  margin: 6px 0 5px;
  letter-spacing: -.7px
}

.modal-store {
  color: var(--muted);
  font-size: 13px
}

.close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 21px;
  flex: 0 0 auto
}

.modal-price {
  font-size: 29px;
  color: var(--navy);
  font-weight: 950;
  margin: 12px 0 7px
}

.modal-desc {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55
}

.modal-info {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  margin-top: 12px
}

.modal-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 16px
}

/* Drawer business */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 270;
  background: rgba(3, 12, 30, .6);
  display: none
}

.drawer-backdrop.open {
  display: block
}

.drawer {
  position: fixed;
  z-index: 280;
  inset: 0 0 0 auto;
  width: 100%;
  background: #f6f8fc;
  transform: translateX(100%);
  transition: .32s ease;
  overflow: auto
}

.drawer.open {
  transform: none
}

.drawer-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.drawer-head small {
  color: var(--muted)
}

.drawer-head h2 {
  margin: 2px 0 0;
  font-size: 21px
}

.drawer-body {
  padding: 15px
}

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}

.stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px
}

.stat b {
  font-size: 21px;
  display: block;
  color: var(--navy)
}

.stat span {
  font-size: 11px;
  color: var(--muted)
}

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 19px;
  padding: 15px;
  margin-top: 13px
}

.panel h3 {
  margin: 0 0 12px;
  font-size: 17px
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px
}

.form-field {
  display: grid;
  gap: 5px
}

.form-field label {
  font-size: 12px;
  font-weight: 800
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fafcff;
  padding: 11px 12px;
  outline: 0;
  font-size: 14px
}

.form-field textarea {
  min-height: 80px;
  resize: vertical
}

.business-form-note {
  background: linear-gradient(145deg, #f7f9fd, #fff);
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 12px 13px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 12px
}

.business-form-note strong {
  color: var(--navy)
}

.business-gps-box {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: linear-gradient(145deg, #f7f9fd, #fff);
  padding: 12px;
  display: grid;
  gap: 9px
}

.business-gps-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.business-gps-actions button {
  flex: 1;
  min-width: 150px;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 850
}

.business-gps-status {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 7px
}

.business-gps-status.active {
  color: var(--green);
  font-weight: 750
}

.business-gps-coords {
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: #8290a5;
  word-break: break-all
}

.media-upload {
  border: 1.5px dashed #cbd6e7;
  border-radius: 16px;
  background: #f8faff;
  padding: 13px;
  display: grid;
  gap: 10px
}

.media-upload input[type=file] {
  background: #fff;
  padding: 9px;
  border-radius: 11px
}

.media-help {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4
}

.media-preview {
  width: 100%;
  aspect-ratio: 16/10;
  min-height: 0;
  border-radius: 15px;
  overflow: hidden;
  background: linear-gradient(145deg, #eef3fa, #fff);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  position: relative
}

.media-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block
}

.media-preview-icon {
  font-size: 64px;
  filter: drop-shadow(0 10px 14px rgba(6, 27, 69, .12))
}

.media-preview-empty {
  text-align: center;
  padding: 18px;
  color: var(--muted);
  font-size: 12px
}

.media-preview-empty b {
  display: block;
  color: var(--ink);
  font-size: 13px;
  margin-bottom: 4px
}

.image-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.image-tools button {
  font-size: 11px;
  padding: 9px 11px
}

.image-adjust-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fff8f5;
  border: 1px solid #ffd8cb;
  border-radius: 12px;
  padding: 9px 10px;
  color: #875242;
  font-size: 10.5px;
  line-height: 1.4
}

.image-adjust-hint b {
  color: #6f3526
}

.crop-backdrop {
  position: fixed;
  inset: 0;
  z-index: 560;
  background: rgba(2, 10, 26, .78);
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  backdrop-filter: blur(5px)
}

.crop-backdrop.open {
  display: flex
}

.crop-sheet {
  width: 100%;
  max-height: 96vh;
  overflow: auto;
  background: #fff;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -24px 70px rgba(0, 0, 0, .34);
  padding: 16px 14px calc(18px + env(safe-area-inset-bottom))
}

.crop-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px
}

.crop-head h3 {
  margin: 0;
  color: var(--navy);
  font-size: 19px;
  letter-spacing: -.3px
}

.crop-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45
}

.crop-stage-shell {
  background: #08142d;
  border-radius: 18px;
  padding: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06)
}

.crop-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 13px;
  background: #071127;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none
}

.crop-stage.dragging {
  cursor: grabbing
}

.crop-stage img {
  position: absolute;
  max-width: none !important;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none
}

.crop-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, transparent 33.15%, rgba(255, 255, 255, .48) 33.15% 33.45%, transparent 33.45% 66.55%, rgba(255, 255, 255, .48) 66.55% 66.85%, transparent 66.85%), linear-gradient(to bottom, transparent 33.15%, rgba(255, 255, 255, .48) 33.15% 33.45%, transparent 33.45% 66.55%, rgba(255, 255, 255, .48) 66.55% 66.85%, transparent 66.85%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .82)
}

.crop-safe {
  position: absolute;
  inset: 10%;
  border: 1px dashed rgba(255, 255, 255, .66);
  border-radius: 8px;
  pointer-events: none
}

.crop-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #dce7f8;
  font-size: 10px;
  padding: 9px 4px 2px;
  text-align: center
}

.crop-controls {
  display: grid;
  gap: 12px;
  margin-top: 14px
}

.zoom-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center
}

.zoom-row label {
  font-size: 12px;
  font-weight: 850;
  color: var(--navy)
}

.zoom-row output {
  font-size: 11px;
  color: var(--muted);
  min-width: 36px;
  text-align: right
}

.zoom-row input[type=range] {
  width: 100%;
  accent-color: var(--coral)
}

.crop-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}

.crop-actions .apply {
  grid-column: 1/-1
}

.crop-quality {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.45;
  background: #f6f8fc;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 9px 10px
}

@media(min-width:600px) {
  .crop-backdrop {
    align-items: center;
    padding: 20px
  }

  .crop-sheet {
    max-width: 620px;
    border-radius: 26px;
    padding: 18px
  }

  .crop-actions {
    grid-template-columns: 1fr 1fr 1.3fr
  }

  .crop-actions .apply {
    grid-column: auto
  }
}

.icon-picker {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px
}

.icon-choice {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  min-height: 47px;
  font-size: 23px;
  display: grid;
  place-items: center;
  transition: .18s ease;
  cursor: pointer
}

.icon-choice:hover {
  transform: translateY(-1px);
  border-color: #b9c7dc
}

.icon-choice.active {
  border: 2px solid var(--coral);
  background: #fff2ee;
  box-shadow: 0 8px 18px rgba(255, 98, 56, .14)
}

.ad-preview {
  border: 1px solid var(--line);
  border-radius: 17px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 9px 25px rgba(6, 27, 69, .08)
}

.ad-preview-label {
  font-size: 11px;
  font-weight: 850;
  color: var(--muted);
  margin-bottom: 7px
}

.ad-preview-media {
  width: 100%;
  aspect-ratio: 16/10;
  height: auto;
  background: linear-gradient(145deg, #ffe1d7, #ff8a68);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative
}

.ad-preview-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block
}

.ad-preview-media .preview-icon {
  font-size: 66px;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, .12))
}

.ad-preview-body {
  padding: 12px
}

.ad-preview-body b {
  display: block;
  font-size: 14px;
  line-height: 1.3
}

.ad-preview-body small {
  display: block;
  color: var(--muted);
  margin-top: 4px
}

.ad-preview-price {
  font-size: 18px;
  font-weight: 950;
  color: var(--navy);
  margin-top: 8px
}

.required-star {
  color: var(--coral);
  font-weight: 900
}

.offer-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block
}

.modal-cover .offer-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  inset: 0
}

.whatsapp-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--green);
  font-weight: 800
}

@media(min-width:600px) {
  .icon-picker {
    grid-template-columns: repeat(8, 1fr)
  }
}

.promo-list {
  display: grid;
  gap: 8px
}

.promo-list-item {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 10px 11px;
  display: flex;
  justify-content: space-between;
  gap: 9px;
  align-items: center
}

.promo-list-item b {
  font-size: 12px
}

.promo-list-item small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
  font-size: 10px
}

.active-dot {
  color: var(--green);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap
}


/* Consumer profile */
.profile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 310;
  background: rgba(3, 12, 30, .66);
  display: none;
  align-items: flex-end;
  justify-content: center
}

.profile-backdrop.open {
  display: flex
}

.profile-sheet {
  width: 100%;
  background: #fff;
  border-radius: 25px 25px 0 0;
  padding: 18px 16px calc(22px + env(safe-area-inset-bottom));
  max-height: 88vh;
  overflow: auto
}

.profile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px
}

.profile-person {
  display: flex;
  align-items: center;
  gap: 12px
}

.profile-avatar {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--navy), var(--navy3));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 900
}

.profile-person h3 {
  margin: 0;
  font-size: 19px
}

.profile-person small {
  color: var(--muted)
}

.profile-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 16px
}

.profile-metric {
  background: #f7f9fc;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 12px
}

.profile-metric b {
  display: block;
  font-size: 19px;
  color: var(--navy)
}

.profile-metric span {
  font-size: 11px;
  color: var(--muted)
}

.profile-options {
  display: grid;
  gap: 9px;
  margin-top: 14px
}

.profile-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 12px;
  background: #fff
}

.profile-option div:first-child {
  min-width: 0
}

.profile-option b {
  display: block;
  font-size: 13px
}

.profile-option small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 3px
}

.demo-switch {
  width: 46px;
  height: 26px;
  border-radius: 99px;
  background: #d8deea;
  border: 0;
  position: relative;
  flex: 0 0 auto
}

.demo-switch::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  transition: .2s
}

.demo-switch.on {
  background: var(--coral)
}

.demo-switch.on::after {
  left: 23px
}

@media(min-width:600px) {
  .profile-backdrop {
    align-items: center;
    padding: 20px
  }

  .profile-sheet {
    max-width: 520px;
    border-radius: 25px;
    padding: 20px
  }

  .profile-metrics {
    grid-template-columns: repeat(3, 1fr)
  }
}

/* Bottom nav */
.bottom-nav {
  position: fixed;
  z-index: 180;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  display: flex;
  padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(6, 27, 69, .08)
}

.bottom-nav button {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  padding: 4px 1px
}

.bottom-nav button span:first-child {
  font-size: 20px
}

.bottom-nav button.active {
  color: var(--coral);
  font-weight: 850
}

.empty {
  background: #fff;
  border: 1px dashed #cfd8e7;
  border-radius: 18px;
  padding: 28px 18px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  width: 100%
}

.toast {
  position: fixed;
  z-index: 600;
  left: 50%;
  bottom: 88px;
  transform: translate(-50%, 18px);
  background: #172238;
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: .25s;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
  white-space: nowrap;
  max-width: 88vw;
  overflow: hidden;
  text-overflow: ellipsis
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0)
}

.reveal {
  opacity: 0;
  transform: translateY(15px);
  transition: .55s ease
}

.reveal.show {
  opacity: 1;
  transform: none
}

@media(min-width:600px) {
  .container {
    padding: 0 20px
  }

  .permission-actions {
    grid-template-columns: 1fr 1fr
  }

  .hero {
    padding-top: 44px
  }

  .hero-grid {
    grid-template-columns: 1.05fr .95fr;
    align-items: center
  }

  .hero-copy {
    text-align: left
  }

  .hero h1,
  .hero-copy>p {
    margin-left: 0
  }

  .hero-chips {
    justify-content: flex-start
  }

  .visual {
    height: 420px
  }

  .search-card {
    grid-template-columns: 1.3fr .7fr .7fr auto auto;
    align-items: stretch
  }

  .search-actions {
    display: contents
  }

  .search-actions button {
    min-width: 94px
  }

  .offer-card {
    flex-basis: calc((100% - 14px)/2)
  }

  .nearby-grid {
    grid-template-columns: 1fr 1fr
  }

  .features {
    grid-template-columns: repeat(4, 1fr)
  }

  .cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px
  }

  .cta button {
    width: auto;
    margin: 0;
    flex: 0 0 auto
  }

  .modal-backdrop {
    align-items: center;
    padding: 20px
  }

  .modal {
    max-width: 690px;
    border-radius: 25px;
    max-height: 90vh
  }

  .modal-actions {
    grid-template-columns: repeat(3, 1fr)
  }

  .drawer {
    width: min(720px, 92vw)
  }

  .form-grid {
    grid-template-columns: 1fr 1fr
  }

  .form-field.full {
    grid-column: 1/-1
  }
}

@media(min-width:900px) {
  .header-row {
    min-height: 72px
  }

  .logo {
    font-size: 33px
  }

  .desktop-nav {
    display: flex
  }

  .gps-status {
    margin-left: 0;
    max-width: 190px
  }

  .business-top {
    display: block
  }

  .hero {
    padding: 58px 0 38px
  }

  .hero-grid {
    gap: 42px
  }

  .visual {
    height: 500px
  }

  .bag-wrap {
    transform: scale(1.16)
  }

  .ticket {
    left: 0;
    width: 130px;
    height: 94px
  }

  .float-icon {
    width: 92px;
    height: 92px;
    font-size: 40px
  }

  .offer-card {
    flex-basis: calc((100% - 28px)/3)
  }

  .nearby-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  main {
    padding-bottom: 55px
  }

  .bottom-nav {
    display: none
  }

  .toast {
    bottom: 28px
  }
}

@media(min-width:1180px) {
  .offer-card {
    flex-basis: calc((100% - 42px)/4)
  }
}

@media(prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important
  }
}

/* Flow optimization */
.quick-sort {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding: 2px 0 12px;
  scrollbar-width: none
}

.quick-sort::-webkit-scrollbar {
  display: none
}

.quick-sort-btn {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  border-radius: 999px;
  padding: 9px 11px;
  font-size: 11px;
  font-weight: 800;
  transition: .2s
}

.quick-sort-btn.active {
  background: #eef3ff;
  color: var(--navy);
  border-color: #cbd9f0;
  box-shadow: 0 6px 16px rgba(6, 27, 69, .07)
}

.offer-store {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap
}

.verified-mini {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #eef8f3;
  color: #138354;
  border-radius: 999px;
  padding: 3px 6px;
  font-size: 9px;
  font-weight: 900
}

.business-wizard-panel {
  padding-bottom: 14px
}

.wizard-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px
}

.wizard-title-row h3 {
  margin: 2px 0 0
}

.wizard-eyebrow {
  color: var(--coral);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 9px
}

.wizard-saved {
  background: #eef8f3;
  color: #138354;
  border: 1px solid #d7efe2;
  border-radius: 999px;
  padding: 6px 8px;
  font-size: 9px;
  font-weight: 850;
  text-align: center
}

.business-stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin: 14px 0 16px
}

.business-step-dot {
  border: 0;
  background: transparent;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: #9aa7ba;
  font-size: 9px;
  font-weight: 800;
  padding: 0
}

.business-step-dot span {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eef2f8;
  color: #8190a5;
  border: 2px solid #e0e7f1;
  font-size: 11px
}

.business-step-dot.active {
  color: var(--navy)
}

.business-step-dot.active span {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: 0 7px 17px rgba(6, 27, 69, .16)
}

.business-step-dot.done span {
  background: #eaf8f1;
  border-color: #cfeadb;
  color: #138354
}

.business-step {
  display: none
}

.business-step.active {
  display: block;
  animation: stepIn .25s ease
}

@keyframes stepIn {
  from {
    opacity: .35;
    transform: translateX(8px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.step-intro {
  background: #f7f9fc;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px 12px;
  margin-bottom: 12px
}

.step-intro b {
  display: block;
  color: var(--navy);
  font-size: 13px
}

.step-intro span {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
  margin-top: 3px
}

.wizard-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  margin-top: 14px;
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, #fff 74%, rgba(255, 255, 255, .75));
  padding: 12px 0 2px;
  z-index: 3
}

.wizard-actions button {
  min-height: 46px
}

.wizard-actions #publishPromo {
  display: none;
  grid-column: 2
}

.wizard-actions.final #businessNextStep {
  display: none
}

.wizard-actions.final #publishPromo {
  display: block
}

.wizard-actions.first #businessPrevStep {
  visibility: hidden
}

.publish-checklist {
  display: grid;
  gap: 7px;
  margin-bottom: 13px
}

.publish-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 10px;
  background: #fafcff
}

.publish-check .check-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #eef8f3;
  color: #138354;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-weight: 900
}

.publish-check.warn .check-icon {
  background: #fff4ea;
  color: #cf7216
}

.publish-check b {
  font-size: 11px;
  display: block
}

.publish-check small {
  font-size: 9.5px;
  color: var(--muted);
  display: block;
  margin-top: 2px;
  line-height: 1.35
}

@media(min-width:600px) {
  .quick-sort-btn {
    font-size: 12px
  }

  .business-step-dot {
    font-size: 10px
  }

  .business-step-dot span {
    width: 34px;
    height: 34px
  }

  .wizard-actions {
    grid-template-columns: 120px 1fr
  }

  .publish-checklist {
    grid-template-columns: 1fr 1fr
  }
}


/* Business authentication */
.auth-backdrop {
  position: fixed;
  inset: 0;
  z-index: 470;
  background: rgba(3, 12, 30, .74);
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  backdrop-filter: blur(6px)
}

.auth-backdrop.open {
  display: flex
}

.auth-sheet {
  width: 100%;
  max-height: 96vh;
  overflow: auto;
  background: #fff;
  border-radius: 28px 28px 0 0;
  padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
  box-shadow: 0 -28px 80px rgba(0, 0, 0, .32)
}

.auth-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 11px
}

.auth-brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--navy), var(--navy3));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(6, 27, 69, .18)
}

.auth-kicker {
  color: var(--coral);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .6px
}

.auth-head h2 {
  margin: 2px 0 4px;
  color: var(--navy);
  font-size: 23px;
  letter-spacing: -.7px
}

.auth-head p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  background: #f2f5fa;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 4px;
  margin: 18px 0 14px
}

.auth-tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 11px;
  padding: 10px;
  font-weight: 850;
  font-size: 12px
}

.auth-tab.active {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 5px 14px rgba(6, 27, 69, .08)
}

.auth-panel {
  display: none
}

.auth-panel.active {
  display: block;
  animation: authIn .22s ease
}

@keyframes authIn {
  from {
    opacity: .4;
    transform: translateY(5px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.auth-fields {
  display: grid;
  gap: 10px
}

.auth-field {
  display: grid;
  gap: 5px
}

.auth-field label {
  font-size: 11px;
  font-weight: 850;
  color: var(--ink)
}

.auth-field input {
  width: 100%;
  border: 1px solid var(--line);
  background: #fafcff;
  border-radius: 13px;
  padding: 12px 13px;
  outline: 0;
  font-size: 14px
}

.auth-field input:focus {
  border-color: #b9cbea;
  box-shadow: 0 0 0 3px rgba(18, 58, 120, .08)
}

.auth-primary {
  width: 100%;
  margin-top: 13px;
  min-height: 48px
}

.auth-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 10px
}

.auth-link {
  border: 0;
  background: none;
  color: var(--coral);
  font-weight: 850;
  padding: 3px
}

.auth-note {
  margin-top: 14px;
  background: #f7f9fc;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px 12px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45
}

.auth-note b {
  color: var(--navy)
}

.business-account-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(145deg, #071d49, #123a78);
  color: #fff;
  border-radius: 18px;
  padding: 12px 13px;
  margin-bottom: 12px;
  box-shadow: 0 12px 25px rgba(6, 27, 69, .14)
}

.business-account-avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .12);
  display: grid;
  place-items: center;
  font-weight: 950;
  font-size: 16px;
  flex: 0 0 auto
}

.business-account-copy {
  min-width: 0;
  flex: 1
}

.business-account-copy b {
  display: block;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.business-account-copy small {
  display: block;
  color: #dce6f5;
  font-size: 9.5px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.business-logout {
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border-radius: 11px;
  padding: 8px 9px;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap
}

@media(min-width:600px) {
  .auth-backdrop {
    align-items: center;
    padding: 20px
  }

  .auth-sheet {
    max-width: 480px;
    border-radius: 28px;
    padding: 22px
  }

  .auth-fields.two {
    grid-template-columns: 1fr 1fr
  }

  .auth-fields.two .full {
    grid-column: 1/-1
  }
}

/* Business plans */
.plan-backdrop {
  position: fixed;
  inset: 0;
  z-index: 440;
  background: rgba(3, 12, 30, .72);
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  backdrop-filter: blur(5px)
}

.plan-backdrop.open {
  display: flex
}

.plan-sheet {
  width: 100%;
  max-height: 94vh;
  overflow: auto;
  background: #f7f9fc;
  border-radius: 28px 28px 0 0;
  padding: 18px 16px calc(22px + env(safe-area-inset-bottom));
  box-shadow: 0 -24px 70px rgba(0, 0, 0, .28)
}

.plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 15px
}

.plan-head h2 {
  margin: 2px 0 5px;
  color: var(--navy);
  font-size: 24px;
  letter-spacing: -.8px
}

.plan-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45
}

.plan-kicker {
  color: var(--coral);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .6px
}

.plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px
}

.plan-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 21px;
  padding: 17px;
  box-shadow: 0 10px 28px rgba(6, 27, 69, .07);
  transition: .2s ease
}

.plan-card.selected {
  border: 2px solid var(--coral);
  box-shadow: 0 15px 32px rgba(255, 98, 56, .13)
}

.plan-card.recommended {
  border-color: #cad9ef
}

.plan-ribbon {
  position: absolute;
  right: 13px;
  top: 13px;
  background: #eef3ff;
  color: var(--navy);
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 900
}

.plan-name {
  font-size: 20px;
  font-weight: 950;
  color: var(--navy)
}

.plan-price {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  margin: 7px 0 3px
}

.plan-price b {
  font-size: 28px;
  color: var(--ink);
  letter-spacing: -1px
}

.plan-price span {
  color: var(--muted);
  font-size: 11px;
  padding-bottom: 4px
}

.plan-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
  min-height: 31px
}

.plan-features {
  display: grid;
  gap: 8px;
  margin: 15px 0
}

.plan-feature {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 11px;
  color: var(--ink)
}

.plan-feature .yes {
  color: var(--green);
  font-weight: 950
}

.plan-feature .no {
  color: #cf4056;
  font-weight: 950
}

.plan-feature small {
  color: var(--muted);
  font-size: 9.5px
}

.plan-select {
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 12px;
  font-weight: 900
}

.plan-card:not(.selected) .plan-select {
  background: var(--navy);
  color: #fff
}

.plan-card.selected .plan-select {
  background: var(--coral);
  color: #fff
}

.plan-footnote {
  margin-top: 13px;
  text-align: center;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4
}

.business-plan-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(145deg, #eef3ff, #fff);
  border: 1px solid #dce6f5;
  border-radius: 16px;
  padding: 11px 12px;
  margin-top: 12px
}

.business-plan-strip b {
  display: block;
  font-size: 12px;
  color: var(--navy)
}

.business-plan-strip small {
  display: block;
  color: var(--muted);
  font-size: 9.5px;
  margin-top: 2px
}

.business-plan-strip button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 11px;
  padding: 8px 10px;
  color: var(--navy);
  font-weight: 850;
  font-size: 10px;
  white-space: nowrap
}

.plan-limit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  color: var(--coral);
  font-size: 9px;
  font-weight: 850
}

.plan-lock-note {
  margin-top: 5px;
  color: #b76a1e;
  font-size: 10px;
  line-height: 1.35
}

@media(min-width:760px) {
  .plan-backdrop {
    align-items: center;
    padding: 22px
  }

  .plan-sheet {
    max-width: 980px;
    border-radius: 28px;
    padding: 22px
  }

  .plan-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .plan-card {
    padding: 20px
  }

  .plan-card.recommended {
    transform: translateY(-5px)
  }
}

/* Application views */
:root {
  --header-height: 66px
}

body {
  height: 100dvh;
  overflow: hidden
}

.app-main {
  height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 0 calc(76px + env(safe-area-inset-bottom));
  scroll-behavior: smooth
}

.app-view {
  display: none
}

.app-view.is-active {
  display: block;
  animation: view-in .24s ease-out both
}

.app-view.is-active.reveal,
.offers-layout.is-active .reveal {
  opacity: 1;
  transform: none
}

@keyframes view-in {
  from {
    opacity: 0;
    transform: translateY(7px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.app-main>.hero {
  min-height: calc(100dvh - 66px);
  padding-bottom: 30px
}

.app-main>.hero.is-active {
  display: block
}

.desktop-nav .active {
  background: rgba(255, 255, 255, .12);
  color: #fff
}

.nav-search {
  display: none;
  align-items: center;
  gap: 6px;
  min-width: 155px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 11px;
  background: rgba(255, 255, 255, .07);
  color: #dbe7f7
}

.nav-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-size: 12px
}

.nav-search input::placeholder {
  color: #c3d0e2
}

.offers-layout {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0 16px
}

.offers-layout.is-active {
  display: grid;
  gap: 0
}

.offers-layout .container {
  width: 100%;
  padding-left: 0;
  padding-right: 0
}

#categories {
  align-self: start
}

@media(min-width:900px) {
  :root {
    --header-height: 72px
  }

  .desktop-nav {
    display: flex;
    align-items: center
  }

  .nav-search {
    display: flex
  }

  .gps-status {
    margin-left: 0
  }

  .offers-layout.is-active {
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: 28px
  }

  #categories {
    position: sticky;
    top: 14px;
    grid-row: 1 / span 2;
    padding-top: 18px
  }

  #categories .section-head {
    display: block
  }

  #categories .section-head .section-link {
    margin-top: 6px;
    padding-left: 0
  }

  #categories .category-scroll {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
    padding: 0
  }

  #categories .category {
    width: 100%;
    text-align: left;
    border-radius: 12px
  }

  #offers,
  #endingSoon {
    grid-column: 2
  }
}

@media(max-width:899px) {
  :root {
    --header-height: 111px
  }

  .header-row {
    min-height: 66px;
    flex-wrap: wrap;
    padding-top: 7px
  }

  .desktop-nav {
    display: flex;
    order: 3;
    width: 100%;
    margin: 0 -16px;
    overflow-x: auto;
    padding: 0 12px 7px;
    gap: 4px;
    scrollbar-width: none
  }

  .desktop-nav::-webkit-scrollbar {
    display: none
  }

  .desktop-nav button {
    flex: 0 0 auto;
    padding: 7px 9px;
    font-size: 12px
  }

  .desktop-nav .nav-search {
    display: none
  }

  .app-main {
    height: calc(100dvh - var(--header-height))
  }

  .offers-layout {
    padding: 0 16px
  }
}