@import url("");

:root {
  --bg: #f4f3ef;
  --panel: #ffffff;
  --text: #101010;
  --muted: #747474;
  --line: rgba(16,16,16,.10);
  --radius-xl: 34px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --safe-top: max(26px, env(safe-area-inset-top));
  --safe-bottom: max(24px, env(safe-area-inset-bottom));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #090909;
  font-family: Inter, "SF Pro Display", "Segoe UI", Arial, sans-serif;
  color: var(--text);
  touch-action: manipulation;
}
button { font: inherit; color: inherit; }
button, .drink-card, .category-tab { user-select: none; -webkit-user-select: none; }
#app { width: 100%; height: 100%; position: relative; }

.screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(.985);
  transition: opacity .28s ease, transform .35s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
}
.screen--active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* IDLE */
#idleScreen { background: #050505; color: #fff; }
.ad-stage, .idle-shade { position: absolute; inset: 0; }
.ad-stage {
  background: radial-gradient(circle at 50% 38%, #b35f31 0%, #5c2d18 26%, #17100e 62%, #060606 100%);
}
.ad-visual {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  overflow: hidden;
  transition: opacity .5s ease;
}
.ad-visual::before {
  content: "";
  width: 74vw; height: 74vw;
  max-width: 650px; max-height: 650px;
  border-radius: 50%;
  filter: blur(0px);
  background: var(--ad-gradient, radial-gradient(circle at 35% 30%, #fff 0 4%, #bf6d3b 11%, #643119 48%, #18100d 74%));
  box-shadow: 0 40px 140px rgba(0,0,0,.55);
  transform: translateY(-5vh);
}
.ad-visual::after {
  content: attr(data-word);
  position: absolute;
  font-size: clamp(86px, 14vw, 165px);
  font-weight: 800;
  letter-spacing: -.075em;
  opacity: .10;
  transform: rotate(-12deg) translateY(-7vh);
  white-space: nowrap;
}
.ad-stage video, .ad-stage img {
  width: 100%; height: 100%; object-fit: cover;
}
.idle-shade {
  background:
    linear-gradient(to bottom, rgba(0,0,0,.26), transparent 28%),
    linear-gradient(to top, rgba(0,0,0,.82), transparent 55%);
}
.topbar {
  position: absolute;
  left: 0; right: 0; top: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--safe-top) 30px 0;
  z-index: 3;
}
.brand {
  border: 0;
  background: none;
  padding: 8px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}
.brand--dark {
  background: #101010;
  padding: 14px;
  border-radius: 50%;
}
.brand--dark .brand-logo {
  filter: brightness(0) invert(1);
}
.idle-copy {
  position: absolute; z-index: 3;
  left: 32px; right: 32px;
  bottom: 154px;
}
.eyebrow {
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
  font-weight: 750;
  opacity: .72;
}
.idle-copy h1 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(45px, 7.5vw, 78px);
  line-height: .95;
  letter-spacing: -.055em;
}
.idle-copy p:last-child {
  margin: 18px 0 0;
  color: rgba(255,255,255,.72);
  font-size: 18px;
}
.menu-cta {
  position: absolute;
  z-index: 4;
  right: 28px;
  bottom: var(--safe-bottom);
  border: 0;
  border-radius: 999px;
  padding: 0 22px 0 28px;
  height: 80px;
  min-width: 190px;
  background: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  font-weight: 800;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 16px 50px rgba(0,0,0,.28);
}
.menu-cta__arrow {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: #111; color: #fff; font-size: 24px;
}
.ad-dots {
  position: absolute; z-index: 4;
  left: 31px; bottom: 52px;
  display: flex; gap: 6px;
}
.ad-dot {
  width: 24px; height: 4px; border-radius: 99px;
  background: rgba(255,255,255,.28);
  transition: width .25s ease, background .25s ease;
}
.ad-dot.active { width: 46px; background: #fff; }

/* MENU */
#menuScreen, #adminScreen { background: var(--bg); }
.menu-header {
  display: grid;
  grid-template-columns: 80px 1fr 64px;
  gap: 18px;
  align-items: center;
  padding: var(--safe-top) 28px 12px;
}
.menu-header h2 {
  margin: 0;
  font-size: 44px;
  line-height: .98;
  letter-spacing: -.05em;
}
.eyebrow--dark { color: var(--muted); opacity: 1; margin-bottom: 7px; }
.icon-button {
  width: 60px; height: 60px;
  border-radius: 50%; border: 1px solid var(--line);
  background: rgba(255,255,255,.7);
  font-size: 34px; line-height: 1;
  cursor: pointer;
}
.category-tabs {
  display: flex; gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 14px 28px 20px;
}
.category-tabs::-webkit-scrollbar { display: none; }
.category-tab {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: 14px 20px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: .2s ease;
}
.category-tab.active {
  background: #101010;
  color: #fff;
  border-color: #101010;
}









/* ===== MENU CARDS V6.5 ===== */
.drink-grid {
  height: calc(100% - 205px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 24px 120px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 16px;
}
.drink-grid::-webkit-scrollbar { width: 0; }

.drink-card {
  position: relative;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 30px;
  text-align: left;
  cursor: pointer;
  overflow: visible;
  transform: translateZ(0);
  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    filter .18s ease;
}
.drink-card:active {
  transform: scale(.975);
  filter: brightness(.97);
}

.drink-thumb {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: .88;
  border-radius: 30px;
  background: var(--drink-gradient);
  box-shadow:
    0 1px 0 rgba(0,0,0,.03),
    0 14px 35px rgba(18,18,18,.06);
}
.drink-thumb::before {
  content: "";
  position: absolute;
  width: 54%;
  aspect-ratio: .68;
  border-radius: 28px 28px 48px 48px;
  left: 23%;
  bottom: -5%;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.84) 0 4%, transparent 4%),
    linear-gradient(to bottom, var(--liquid-a), var(--liquid-b));
  box-shadow:
    inset 0 0 0 7px rgba(255,255,255,.30),
    0 26px 60px rgba(0,0,0,.14);
}
.drink-thumb.has-image::before { display: none; }

.drink-thumb img,
.drink-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);
}

.drink-thumb__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(0,0,0,.36) 0%, rgba(0,0,0,.05) 32%, transparent 58%),
    linear-gradient(to bottom, rgba(255,255,255,.10), transparent 25%);
  opacity: .72;
}

.drink-card__arrow {
  position: absolute;
  z-index: 2;
  right: 13px;
  top: 13px;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(12px);
  color: #111;
  font-size: 19px;
  font-weight: 800;
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
}

.drink-card__price {
  position: absolute;
  z-index: 2;
  left: 14px;
  bottom: 14px;
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  border-radius: 999px;
  background: rgba(15,15,15,.88);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -.035em;
  box-shadow: 0 5px 20px rgba(0,0,0,.15);
}

.drink-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 5px 7px;
}

.drink-copy {
  min-width: 0;
}

.drink-name {
  margin: 0;
  font-size: clamp(21px, 3vw, 28px);
  line-height: .98;
  font-weight: 790;
  letter-spacing: -.045em;
  color: #111;
}

.drink-volume {
  margin-top: 7px;
  color: #858585;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.drink-card__dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #111;
  opacity: .10;
}

/* more premium menu header spacing */
.menu-header {
  padding-bottom: 8px;
}
.category-tabs {
  padding-top: 10px;
  padding-bottom: 18px;
}
.category-tab {
  min-height: 48px;
  padding-left: 21px;
  padding-right: 21px;
  font-size: 15px;
}

/* portrait tablet tuning */
@media (min-width: 720px) and (orientation: portrait) {
  .drink-grid {
    padding-left: 30px;
    padding-right: 30px;
    gap: 20px;
  }

  .drink-thumb {
    border-radius: 34px;
  }

  .drink-card__arrow {
    width: 48px;
    height: 48px;
    right: 15px;
    top: 15px;
  }

  .drink-card__price {
    left: 16px;
    bottom: 16px;
    min-height: 47px;
    padding: 0 17px;
    font-size: 20px;
  }

  .drink-info {
    padding-top: 17px;
  }

  .drink-name {
    font-size: 27px;
  }

  .drink-volume {
    font-size: 14px;
  }
}


/* DETAIL */
.detail-screen {
  background: #0a0a0a;
  color: #fff;
  display: grid;
  grid-template-rows: 56% 44%;
}
.detail-back {
  position: absolute; z-index: 5;
  top: var(--safe-top); left: 28px;
  width: 62px; height: 62px;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.92);
  font-size: 30px;
  cursor: pointer;
}
.detail-media {
  position: relative;
  overflow: hidden;
  background: #f1f0ec;
}
.detail-media::before {
  content: "";
  position: absolute;
  width: 54%; aspect-ratio: .68;
  border-radius: 38px 38px 66px 66px;
  left: 23%; bottom: -5%;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.82) 0 3%, transparent 3%),
    linear-gradient(to bottom, var(--liquid-a, #e3c7a2), var(--liquid-b, #62402d));
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.3), 0 35px 90px rgba(0,0,0,.35);
}
.detail-media img, .detail-media video {
  width:100%; height:100%; object-fit:cover; display:block;
}
.detail-panel {
  background: var(--bg); color: var(--text);
  border-radius: 38px 38px 0 0;
  margin-top: -28px;
  z-index: 2;
  padding: 28px 30px calc(var(--safe-bottom) + 10px);
  display: flex; flex-direction: column;
}
.detail-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.pill {
  background: #101010; color:#fff;
  padding: 9px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 750;
}
.detail-volume { color: var(--muted); font-size: 15px; }
.detail-panel h2 {
  margin: 19px 0 10px;
  font-size: 48px;
  letter-spacing: -.055em;
  line-height: .95;
}
.detail-description {
  margin: 0; color: #656565; font-size: 18px; line-height: 1.42;
  max-width: 90%;
}
.detail-bottom {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
}
.detail-label {
  margin: 0 0 7px; color: #8a8a8a; text-transform: uppercase;
  letter-spacing: .12em; font-size: 11px; font-weight: 800;
}
.ingredients { margin: 0; max-width: 460px; font-size: 15px; line-height: 1.35; }
.detail-price { font-size: 42px; font-weight: 850; letter-spacing: -.055em; }

/* ADMIN */
.admin-screen { overflow-y: auto; }
.admin-card {
  margin: 26px 28px;
  border-radius: 30px;
  background: #fff;
  padding: 30px;
}
.admin-badge {
  display:inline-block; background:#101010; color:#fff; border-radius:999px;
  padding:8px 12px; font-size:12px; font-weight:800;
}
.admin-card h3 {
  font-size: 34px; letter-spacing:-.04em; margin:18px 0 10px;
}
.admin-card > p {
  color:var(--muted); line-height:1.5; max-width:620px; font-size:17px;
}
.admin-row {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
  display:flex; justify-content:space-between; gap:20px;
}
.toast {
  position:fixed; left:50%; bottom:28px; z-index:20;
  transform:translate(-50%, 20px);
  background:#111; color:#fff; padding:12px 18px;
  border-radius:999px; opacity:0; pointer-events:none; transition:.2s ease;
}
.toast.show { opacity:1; transform:translate(-50%, 0); }

@media (min-width: 900px) {
  .drink-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (orientation: landscape) {
  .idle-copy h1 { max-width: 60%; }
  .drink-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .detail-screen { grid-template-columns: 55% 45%; grid-template-rows: 100%; }
  .detail-panel { border-radius: 38px 0 0 38px; margin: 0 0 0 -28px; padding-top: 8vh; }
}

.detail-buy{display:grid;justify-items:end;gap:12px}.buy-button{border:0;background:#101010;color:#fff;border-radius:999px;min-width:180px;min-height:58px;padding:0 24px;font-weight:850}.payment-screen{background:var(--bg);color:var(--text);display:grid;place-items:center}.payment-card{width:min(620px,calc(100% - 56px));text-align:center;background:#fff;border-radius:38px;padding:48px 34px 38px}.payment-icon{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;margin:0 auto 28px;background:#101010;color:#fff;font-size:38px}.payment-card h2{margin:0;font-size:46px;line-height:.98;letter-spacing:-.055em}.payment-card>p:not(.eyebrow){color:var(--muted);font-size:18px;line-height:1.45;margin:16px auto 0;max-width:440px}.payment-amount{font-size:38px;font-weight:850;letter-spacing:-.05em;margin-top:24px}.payment-spinner{width:34px;height:34px;border:3px solid #ddd;border-top-color:#111;border-radius:50%;margin:30px auto 0;animation:cmSpin .8s linear infinite}@keyframes cmSpin{to{transform:rotate(360deg)}}.primary-action,.secondary-action{width:100%;min-height:62px;border-radius:999px;font-weight:850;margin-top:26px;border:0}.primary-action{background:#111;color:#fff}.secondary-action{background:#efefec;color:#111}.hidden{display:none!important}.payment-screen.success .payment-icon{font-size:0}.payment-screen.success .payment-icon::after{content:"✓";font-size:42px}.payment-screen.error .payment-icon{background:#eee;color:#111}



/* ===== DETAIL MEDIA FIX V6.5.1 ===== */
.detail-media.has-media {
  background: #fff;
}

.detail-media.has-media::before {
  display: none;
}

.detail-media.has-media img,
.detail-media.has-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: #fff;
  padding: clamp(24px, 5vw, 58px);
}

/* product page polish */
.detail-panel {
  background: #f6f5f2;
}

.detail-meta {
  margin-bottom: 4px;
}

.detail-panel h2 {
  max-width: 92%;
}

.detail-description {
  max-width: 84%;
}

.detail-bottom {
  padding-top: 22px;
}

@media (orientation: portrait) {
  .detail-screen {
    grid-template-rows: 52% 48%;
  }

  .detail-media.has-media img,
  .detail-media.has-media video {
    padding: 32px 38px 20px;
  }

  .detail-panel {
    border-radius: 34px 34px 0 0;
    margin-top: -22px;
    padding-top: 26px;
  }
}

@media (orientation: landscape) {
  .detail-screen {
    background: #fff;
  }

  .detail-media.has-media img,
  .detail-media.has-media video {
    padding: 46px 64px;
  }

  .detail-panel {
    background: #f6f5f2;
  }
}


/* ===== VARIANTS V6.6 ===== */
.variant-block {
  margin-top: 30px;
}
.variant-label {
  margin-bottom: 11px;
  color: #8a8a86;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.variant-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.variant-pill {
  min-width: 96px;
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid rgba(17,17,17,.08);
  border-radius: 999px;
  background: #ecebe7;
  color: #171717;
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, color .16s ease;
}
.variant-pill:active { transform: scale(.96); }
.variant-pill.is-active {
  background: #111;
  color: #fff;
  border-color: #111;
}
.price-pop {
  animation: pricePop .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes pricePop {
  0% { transform: scale(.92); opacity: .55; }
  100% { transform: scale(1); opacity: 1; }
}

/* ===== REAL CM LOGO V6.6.6 ===== */
#idleScreen .brand {
  width: 98px;
  height: 98px;
  padding: 8px;
}
#idleScreen .brand-logo {
  opacity: .96;
}

/* ===== LOGO CIRCLE FIX V6.6.7 ===== */
.brand,
#idleScreen .brand {
  border-radius: 50%;
}

/* ===== IDLE POLISH V6.6.8 ===== */

/* Top-left logo on the advertising/idle screen */
#idleScreen .brand {
  width: 92px;
  height: 92px;
  background: #101010 !important;
  border-radius: 50% !important;
  padding: 15px !important;
  opacity: 1 !important;
}
#idleScreen .brand .brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}

/* Idle menu CTA: force its label back on top and make it readable */
#idleScreen .idle-menu-btn,
#idleScreen .menu-cta,
#idleScreen [data-action="menu"],
#idleScreen button[id*="menu" i] {
  color: #101010 !important;
}

/* Keep any text/span inside the white menu pill visible */
#idleScreen .idle-menu-btn span,
#idleScreen .menu-cta span,
#idleScreen [data-action="menu"] span,
#idleScreen button[id*="menu" i] span {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #101010 !important;
  position: relative !important;
  z-index: 3 !important;
}

/* ===== IDLE CLEANUP V6.6.9 ===== */

/* Idle logo: no circular background, just the supplied white CM mark */
#idleScreen .brand {
  width: 104px !important;
  height: 78px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#idleScreen .brand .brand-logo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}

/* Menu CTA: remove the separate black round disc */
#idleScreen .menu-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
  padding: 0 26px 0 30px !important;
  color: #111 !important;
}

/* The right-hand arrow is now just an arrow, no circle/background */
#idleScreen .menu-cta__arrow {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: inline-block !important;
  color: #111 !important;
  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  transform: translateY(-1px) !important;
}


/* ===== TACAP PAYMENT UI V6.9.0 ===== */
.payment-qr {
  width: 300px;
  height: 300px;
  max-width: 78vw;
  max-height: 78vw;
  margin: 24px auto 4px;
  padding: 12px;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 0 0 1px rgba(17,17,17,.07);
}
.payment-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}
.payment-screen.qr-ready .payment-icon {
  display: none;
}
.payment-screen.qr-ready .payment-card {
  padding-top: 34px;
}
@media (orientation: portrait) {
  .payment-card {
    width: min(680px, calc(100% - 38px));
  }
  .payment-qr {
    width: 340px;
    height: 340px;
  }
}