/* The counter is a single responsive scene; its stand stays anchored to the artwork. */
.cafe-experience {
  background: var(--mist);
}

.cafe-heading {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: 2.5rem;
}

.cafe-heading>p {
  max-width: 34ch;
  color: var(--muted);
  font-size: 1.05rem;
  margin: 0 0 .5rem auto;
}

.cafe-scene {
  position: relative;
  border-radius: 2rem;
  background: #dbe7ef;
  isolation: isolate;
}

.cafe-scene-art {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

.cafe-scene-brand {
  position: absolute;
  top: 6%;
  left: 6%;
  font: 800 clamp(1.5rem, 4vw, 3.5rem)/1 var(--display-font), sans-serif;
  letter-spacing: -.04em;
  color: #17395a;
}

.cafe-scene-brand>span {
  display: block;
  margin-top: .75rem;
  font: 500 .875rem/1.4 "DM Sans", sans-serif;
  letter-spacing: 0;
}

.cafe-stand {
  position: absolute;
  left: 63%;
  bottom: 43%;
  width: 11%;
  min-width: 44px;
  display: block;
  border-radius: .5rem;
  filter: drop-shadow(3px 7px 4px rgb(20 45 70 / 15%));
}

.cafe-stand>img {
  display: block;
  width: 100%;
  height: auto;
}

.cafe-stand-qr {
  position: absolute;
  left: 53.1%;
  top: 54%;
  width: 30.8%;
  aspect-ratio: 1;
  background: white;
  color: #111827;
  display: grid;
  place-items: center;
  container-type: inline-size;
}

.cafe-stand-qr i {
  font-size: 90cqw;
  line-height: 1;
}

.cafe-stand-label {
  position: absolute;
  bottom: calc(100% + .75rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .75rem;
  white-space: nowrap;
  background: var(--lime);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 2rem;
  padding: .65rem 1rem;
  font-size: .875rem;
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--ink);
}

.cafe-stand:hover .cafe-stand-label,
.cafe-stand:focus-visible .cafe-stand-label {
  background: #fff;
}

.cafe-stand:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}

.cafe-scene-note {
  position: absolute;
  bottom: 4%;
  left: 6%;
  font-size: .75rem;
  color: #17395a;
}

.cafe-scene-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.cafe-scene-footer p {
  max-width: 52ch;
  margin: 0;
  color: var(--muted);
}

.cafe-scene-footer .btn {
  flex-shrink: 0;
}

.template-example-name {
  color: var(--muted);
  font-size: .8rem;
}

/* Bootstrap owns focus and Escape; every demonstration shares one phone shell. */
.cafe-modal [hidden] {
  display: none !important;
}

.cafe-modal .modal-content {
  border: 0;
  border-radius: 1.75rem;
  overflow: hidden;
  background: #fff;
}

.cafe-modal .modal-header {
  padding: 1rem 1.5rem;
  border-bottom-color: var(--line);
}

.cafe-modal .modal-title {
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  line-height: 1.2;
}

.cafe-modal .btn-close {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  flex-shrink: 0;
}

.cafe-modal .modal-body {
  padding: 0;
  max-height: 76dvh;
  overflow-y: auto;
}

.cafe-workbench {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
}

.cafe-guide {
  align-self: center;
  padding: 1.5rem 2rem;
}

.cafe-guide-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 13rem;
  margin-bottom: 1.5rem;
}

.cafe-guide-stand {
  position: relative;
  width: 9rem;
  transform: rotate(-8deg);
  filter: drop-shadow(4px 8px 8px rgb(25 55 105 / 12%));
}

.cafe-guide-stand>img:first-child {
  display: block;
  width: 100%;
  height: auto;
}

.cafe-guide-note {
  position: absolute;
  bottom: .5rem;
  right: 0;
  padding: .5rem .75rem;
  border-radius: .65rem;
  background: var(--lime);
  transform: rotate(5deg);
  font-weight: 700;
  font-size: .8rem;
}

.cafe-guide h3 {
  font-size: 1.7rem;
}

.cafe-guide-intro {
  max-width: 32ch;
  color: var(--muted);
  font-size: .9rem;
}

.cafe-method {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  margin-block: .75rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #fff;
  text-align: left;
  color: var(--ink);
}

.cafe-method>i {
  color: var(--accent);
  font-size: 1.7rem;
}

.cafe-method:hover {
  border-color: var(--accent);
  background: var(--mist);
}

.cafe-method strong,
.cafe-method small {
  display: block;
}

.cafe-method small {
  margin-top: .25rem;
  font-size: .75rem;
  color: var(--muted);
}

.cafe-modal .cafe-fine-print {
  font-size: .75rem;
  color: var(--muted);
  margin: .75rem 0 0;
}

.cafe-modal .modal-footer {
  padding: .85rem 1.5rem;
  gap: .5rem;
  border-top-color: var(--line);
}

.cafe-modal .modal-footer .cafe-fine-print {
  margin: 0 auto 0 0;
}

.cafe-device-stage {
  display: grid;
  justify-items: center;
  align-content: center;
  padding: 1.5rem;
  background: #e8effa;
}

.cafe-device {
  display: grid;
  grid-template-rows: 1.75rem minmax(0, 1fr) .9rem;
  width: min(100%, 360px);
  height: clamp(28rem, 59dvh, 37rem);
  border: 7px solid #17202c;
  border-radius: 2.4rem;
  padding: .3rem;
  background: #fff;
  box-shadow: 0 0 0 2px #71819a, 12px 20px 0 #d1dff4;
  overflow: hidden;
}

.cafe-device-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 .8rem .2rem;
  font: 700 .65rem/1 Arial, sans-serif;
  color: #202124;
}

.cafe-device-camera {
  width: 28%;
  height: .8rem;
  margin-top: -.6rem;
  border-radius: 1rem;
  background: #17202c;
}

.cafe-device-screen {
  min-height: 0;
  position: relative;
  overflow: auto;
  border-radius: .75rem;
  scrollbar-width: thin;
  background: #fff;
}

.cafe-device-home {
  width: 32%;
  height: .25rem;
  margin: auto;
  border-radius: 1rem;
  background: #17202c;
}

.cafe-device-caption {
  margin: 1.5rem 0 0;
  font-size: .7rem;
  color: #43536c;
}

.cafe-phone-welcome {
  text-align: center;
  padding-bottom: 1.5rem;
}

.cafe-phone-welcome>img {
  display: block;
  width: 100%;
  height: 10rem;
  object-fit: cover;
}

.cafe-phone-monogram {
  position: relative;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin: -2rem auto 1rem;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font: 800 2rem/1 var(--display-font), sans-serif;
}

.cafe-phone-welcome h3 {
  font-size: 1.4rem;
}

.cafe-phone-welcome p {
  margin-block: 1rem;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
}

.cafe-phone-prompt {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border-radius: 1rem;
  background: var(--mist);
  color: var(--accent);
  font-size: .75rem;
}

.cafe-phone-welcome small {
  display: block;
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: .65rem;
}

.cafe-loading,
.cafe-error,
.cafe-simulation {
  height: 100%;
  min-height: 22rem;
  padding: 2rem 1rem;
  text-align: center;
  align-content: center;
}

.cafe-error h3 {
  font-size: 1.4rem;
}

.cafe-error p,
.cafe-error a {
  font-size: .8rem;
}

.cafe-error a {
  display: block;
  margin-top: 1rem;
}

.cafe-visitor,
.cafe-visitor iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

/* Scan and tap feedback happen inside the same screen as the destination. */
.cafe-simulation {
  background: #111e32;
  color: #fff;
}

.cafe-scan-caption {
  margin-bottom: 2.5rem;
  font-size: .85rem;
}

.cafe-access-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 180px;
  height: 180px;
  margin-inline: auto;
}

.cafe-scan-qr {
  width: 100%;
  height: auto;
  padding: .5rem;
  border-radius: .75rem;
  background: #fff;
}

.cafe-scan-line {
  position: absolute;
  left: -.5rem;
  right: -.5rem;
  top: 0;
  height: 3px;
  background: var(--lime);
  box-shadow: 0 0 20px var(--lime);
}

.cafe-tap-icon {
  font-size: 5rem;
  color: var(--lime);
}

.cafe-access-ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--lime);
  border-radius: 50%;
}

.cafe-sim-signal {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 2.5rem;
  padding: .65rem .9rem;
  border-radius: 1rem;
  background: var(--lime);
  color: var(--ink);
  font-size: .8rem;
  font-weight: 700;
}

/* Provider forms are explicitly local illustrations; only this form is interactive. */
.cafe-external {
  padding: 1.25rem 1rem;
  color: #202124;
  font-family: Arial, sans-serif;
  line-height: 1.5;
}

.review-mock-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: 1.5rem;
}

.review-google-word {
  font: 600 1.5rem/1 Arial, sans-serif;
  letter-spacing: -.075em;
}

.review-google-word span:nth-child(1),
.review-google-word span:nth-child(4) {
  color: #4285f4;
}

.review-google-word span:nth-child(2),
.review-google-word span:nth-child(6) {
  color: #ea4335;
}

.review-google-word span:nth-child(3) {
  color: #fbbc05;
}

.review-google-word span:nth-child(5) {
  color: #34a853;
}

.review-tripadvisor-word {
  display: none;
  font-weight: 700;
  color: #086449;
}

.review-mock-label {
  font-size: .6rem;
  color: #5f6368;
}

.cafe-external h3 {
  font: 500 1.35rem/1.3 Arial, sans-serif;
  letter-spacing: 0;
}

.review-mock-context {
  color: #5f6368;
  font-size: .75rem;
}

.review-mock-person {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-block: 1.25rem;
}

.review-mock-avatar {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: #75539a;
  color: #fff;
}

.review-mock-person strong,
.review-mock-person small {
  display: block;
  font-size: .75rem;
}

.review-mock-person small {
  color: #5f6368;
  font-size: .65rem;
}

.cafe-external legend {
  font-size: .875rem;
}

.review-mock-rating {
  display: flex;
  justify-content: space-between;
  margin: .5rem 0 1.25rem;
}

.review-mock-star {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 1.75rem;
  color: #747775;
  cursor: pointer;
  border-radius: .5rem;
}

.review-mock-star.is-filled {
  color: #b06000;
}

.review-mock-star:focus-within {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

.review-mock-comment-label {
  font-size: .75rem;
  margin-bottom: .5rem;
}

.cafe-external textarea {
  width: 100%;
  padding: .75rem;
  border: 1px solid #747775;
  border-radius: .5rem;
  font: 400 .8rem/1.5 Arial, sans-serif;
  resize: vertical;
}

.review-mock-disclaimer {
  font-size: .65rem;
  color: #5f6368;
  margin-block: .75rem 1rem;
}

.review-mock-submit {
  width: 100%;
  min-height: 44px;
  padding: .65rem 1rem;
  border: 0;
  border-radius: 2rem;
  color: #fff;
  background: #1a73e8;
  font-size: .85rem;
  font-weight: 600;
}

.review-mock-alternative {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 1rem;
  padding: .5rem;
  border: 0;
  background: transparent;
  color: #1967d2;
  text-decoration: underline;
  text-underline-offset: .2em;
  font-size: .75rem;
}

.review-mock-success {
  padding-block: 2rem;
  text-align: center;
}

.review-mock-success>i {
  display: block;
  margin-bottom: 1rem;
  font-size: 2.5rem;
  color: #137333;
}

.review-mock-success h4 {
  font-size: 1.1rem;
}

.review-mock-success p {
  font-size: .85rem;
}

[data-review-platform="tripadvisor"] .review-google-word {
  display: none;
}

[data-review-platform="tripadvisor"] .review-tripadvisor-word {
  display: inline;
}

[data-review-platform="tripadvisor"] .review-mock-submit {
  background: #086449;
}

[data-review-platform="tripadvisor"] .review-mock-star.is-filled {
  color: #086449;
}

@media (max-width: 767.98px) {

  .cafe-heading,
  .cafe-workbench {
    grid-template-columns: 1fr;
  }

  .cafe-heading {
    gap: 1rem;
  }

  .cafe-heading>p {
    max-width: 46ch;
    margin: 0;
  }

  .cafe-scene-footer {
    align-items: start;
    flex-direction: column;
  }

  .cafe-scene-brand>span,
  .cafe-guide-art {
    display: none;
  }

  .cafe-stand-label {
    font-size: .7rem;
    padding: .4rem .65rem;
    gap: .4rem;
  }

  .cafe-scene-note {
    font-size: .6rem;
  }

  .cafe-guide {
    padding: .75rem 1.25rem;
  }

  .cafe-guide h3 {
    font-size: 1.25rem;
  }

  .cafe-guide-intro {
    display: none;
  }

  .cafe-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }

  .cafe-method {
    min-height: 60px;
    padding: .75rem .5rem;
    gap: .5rem;
    margin: 0;
  }

  .cafe-method>i {
    font-size: 1.25rem;
  }

  .public-site .cafe-modal .cafe-method strong {
    font-size: .8rem;
  }

  .cafe-method small {
    font-size: .65rem;
  }

  .cafe-device-stage {
    padding: .75rem 1.25rem;
  }

  .cafe-device-caption,
  .cafe-guide>.cafe-fine-print {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .cafe-modal .modal-content {
    border-radius: 0;
  }

  .cafe-modal .modal-body {
    max-height: none;
  }

  .cafe-modal .modal-header,
  .cafe-modal .modal-footer {
    padding: .75rem 1rem;
  }

  .cafe-modal .modal-footer .cafe-fine-print {
    flex-basis: 100%;
  }

  .cafe-device {
    height: clamp(22rem, calc(100dvh - 21rem), 30rem);
  }

  .cafe-external {
    padding: 1rem .75rem;
  }
}

/* One setting demonstrates that the physical piece keeps working after a destination change. */
.destination-control {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 1rem 2rem;
  padding: 1.5rem 2rem;
  margin-bottom: 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
}

.destination-control[hidden] {
  display: none;
}

.destination-control-copy h3 {
  display: block;
  margin-top: .5rem;
  font: 700 1.5rem/1.2 var(--display-font), sans-serif;
}

.destination-control p {
  margin: .5rem 0 0;
  color: var(--muted);
  font-size: .8rem;
}

.destination-control-field select {
  min-height: 48px;
  border-color: var(--accent);
  font-weight: 700;
  color: var(--ink);
}

.destination-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.destination-mode {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 6rem;
  padding: 1.25rem;
  text-align: left;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: 3px 3px 0 var(--line);
}

.destination-mode[aria-pressed="true"] {
  color: #fff;
  border-color: var(--ink);
  background: var(--accent);
  box-shadow: 3px 3px 0 var(--ink);
}

.destination-mode>.bi {
  font-size: 1.5rem;
}

.destination-mode strong,
.destination-mode small {
  display: block;
}

.destination-mode small {
  margin-top: .25rem;
  font-size: .8rem;
}

.destination-selected {
  margin-left: auto;
}

.destination-mode[aria-pressed="false"] .destination-selected {
  visibility: hidden;
}

.destination-control-field {
  display: grid;
  grid-template-columns: auto minmax(12rem, 1fr) 1.5fr;
  align-items: center;
  gap: .75rem 1rem;
  padding-top: .5rem;
}

.destination-control-field label {
  font-size: .8rem;
  font-weight: 700;
}

.destination-control-field p {
  min-height: 2.6em;
}


@media (max-width: 767.98px) {
  .destination-control {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }

  .destination-modes,
  .destination-control-field {
    grid-template-columns: 1fr;
  }
}