/* demo_stores.css — final stable */

.demo_store_section *,
.demo_store_hero * {
  box-sizing: border-box;
}

/* ------------------------------------------------------
   HERO
------------------------------------------------------ */

section.demo_store_hero {
  padding: 150px 0 70px !important;

  background:
    radial-gradient(circle at top left,
      rgba(18,185,129,.12),
      transparent 34%),

    radial-gradient(circle at top right,
      rgba(36,207,132,.10),
      transparent 30%),

    #ffffff !important;
}

.demo_store_hero .demo_store_hero_content {
  max-width: 860px;
  margin: 0 auto;
}

.demo_store_hero .demo_store_label {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 18px;
  padding: 9px 18px;

  border-radius: 999px;

  background: rgba(18,185,129,.10) !important;
  color: #10985f !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px;
}

.demo_store_hero h1 {
  margin-bottom: 20px !important;

  color: #101828 !important;

  font-size: 54px !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
}

.demo_store_hero p {
  max-width: 760px;

  margin: 0 auto !important;

  color: #667085 !important;

  font-size: 18px !important;
  line-height: 1.75 !important;
}

/* ------------------------------------------------------
   SECTION BASE
------------------------------------------------------ */

section.demo_store_section {
  position: relative !important;
  overflow: hidden !important;

  padding: 80px 0 !important;

  background: transparent !important;
}

section.demo_store_section::before {
  content: "";

  position: absolute !important;
  inset: 0 !important;

  z-index: 0 !important;
}

section.demo_store_section > .container {
  position: relative !important;
  z-index: 1 !important;
}

/* ------------------------------------------------------
   THEMES
------------------------------------------------------ */

section.demo_restaurant::before {
  background:
    radial-gradient(circle at 80% 10%,
      rgba(250,220,60,.25),
      transparent 45%),

    linear-gradient(135deg,
      #e8f8ee 0%,
      #d4f0de 100%) !important;
}

section.demo_salon::before {
  background:
    radial-gradient(circle at 20% 15%,
      rgba(255,180,180,.28),
      transparent 45%),

    linear-gradient(135deg,
      #fff0f0 0%,
      #fde0e0 100%) !important;
}

section.demo_retail::before {
  background:
    radial-gradient(circle at 80% 10%,
      rgba(180,190,200,.22),
      transparent 45%),

    linear-gradient(135deg,
      #f4f6f8 0%,
      #e8ecf0 100%) !important;
}

section.demo_bakery::before {
  background:
    radial-gradient(circle at 20% 15%,
      rgba(160,100,60,.18),
      transparent 45%),

    linear-gradient(135deg,
      #fdf5ec 0%,
      #f5e6d3 100%) !important;
}

/* ------------------------------------------------------
   CONTENT
------------------------------------------------------ */

.demo_store_section .demo_store_content {
  max-width: 100% !important;
  padding: 20px 0 !important;
}

.demo_store_section .demo_store_content h2 {
  margin-bottom: 18px !important;

  color: #101828 !important;

  font-size: 40px !important;
  font-weight: 800 !important;
  line-height: 1.16 !important;
}

.demo_store_section .demo_store_content p {
  margin-bottom: 32px !important;

  color: #444 !important;

  font-size: 16px !important;
  line-height: 1.75 !important;
}

/* ------------------------------------------------------
   BUTTONS
------------------------------------------------------ */

.demo_store_section .demo_store_actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;

  gap: 14px !important;
}

.demo_store_section a.demo_store_primary_btn,
a.demo_store_primary_btn {

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 52px !important;
  padding: 13px 26px !important;

  border-radius: 999px !important;

  background: #101828 !important;
  color: #ffffff !important;

  font-size: 15px !important;
  font-weight: 700 !important;

  text-decoration: none !important;
  white-space: nowrap !important;

  border: none !important;

  line-height: 1 !important;

  box-shadow:
    0 10px 28px rgba(16,24,40,.22) !important;

  transition: all .25s ease !important;
}

.demo_store_section a.demo_store_primary_btn:hover {
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

.demo_store_section a.demo_store_text_link,
a.demo_store_text_link {

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 52px !important;
  padding: 13px 24px !important;

  border-radius: 999px !important;

  color: #ffffff !important;

  font-size: 15px !important;
  font-weight: 700 !important;

  text-decoration: none !important;
  white-space: nowrap !important;

  border: none !important;

  line-height: 1 !important;

  transition: all .25s ease !important;
}

.demo_store_section a.demo_store_text_link:hover {
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* Theme buttons */

section.demo_restaurant a.demo_store_text_link {
  background: #16a34a !important;

  box-shadow:
    0 10px 28px rgba(22,163,74,.28) !important;
}

section.demo_salon a.demo_store_text_link {
  background: #ff4f93 !important;

  box-shadow:
    0 10px 28px rgba(255,79,147,.28) !important;
}

section.demo_retail a.demo_store_text_link {
  background: #ffffff !important;
  color: #111111 !important;

  box-shadow:
    0 10px 28px rgba(0,0,0,.12) !important;
}

section.demo_retail a.demo_store_text_link:hover {
  color: #111111 !important;
}

section.demo_bakery a.demo_store_text_link {
  background: #6b3b22 !important;

  box-shadow:
    0 10px 28px rgba(107,59,34,.28) !important;
}

/* ------------------------------------------------------
   DESKTOP VISUAL
------------------------------------------------------ */

.demo_store_section .demo_store_visual {

  position: relative !important;

  display: flex !important;
  flex-direction: row !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 18px !important;

  min-height: 520px !important;
}

/* QR */

.demo_store_section .demo_store_qr_card {

  position: relative !important;

  width: 190px !important;

  padding: 18px !important;

  border-radius: 20px !important;

  background: #ffffff !important;

  box-shadow:
    0 20px 50px rgba(16,24,40,.15) !important;

  z-index: 3 !important;

  order: 1 !important;
}

/* Phone */

.demo_store_section .demo_store_mobile {

  position: relative !important;

  width: 270px !important;
  height: 550px !important;

  padding: 12px !important;

  border-radius: 40px !important;

  background: #ffffff !important;

  box-shadow:
    0 28px 70px rgba(16,24,40,.16),
    0 0 0 1px rgba(16,24,40,.06) !important;

  z-index: 2 !important;

  order: 2 !important;
}

/* Reverse desktop */

section.demo_salon .demo_store_mobile,
section.demo_bakery .demo_store_mobile {
  order: 1 !important;
}

section.demo_salon .demo_store_qr_card,
section.demo_bakery .demo_store_qr_card {
  order: 2 !important;
}

/* Phone notch */

.demo_store_section .demo_store_mobile::before {

  content: "";

  position: absolute !important;

  top: 12px !important;
  left: 50% !important;

  width: 80px !important;
  height: 20px !important;

  border-radius: 0 0 12px 12px !important;

  background: #f0f0f0 !important;

  transform: translateX(-50%) !important;

  z-index: 3 !important;
}

.demo_store_section .demo_store_mobile img {

  width: 100% !important;
  height: 100% !important;

  display: block !important;

  border-radius: 30px !important;

  object-fit: cover !important;
}

/* QR internals */

.demo_store_section .demo_store_qr_card h4 {

  margin: 0 0 4px !important;

  color: #101828 !important;

  font-size: 16px !important;
  font-weight: 800 !important;
}

.demo_store_section .demo_store_qr_card p {

  margin: 0 0 10px !important;

  color: #667085 !important;

  font-size: 11px !important;
  line-height: 1.5 !important;
}

.demo_store_section .demo_store_qr_card img {

  width: 100% !important;

  display: block !important;

  border-radius: 10px !important;
}

/* ------------------------------------------------------
   TABLET
------------------------------------------------------ */

@media (max-width:1199px) {

  .demo_store_section .demo_store_mobile {
    width: 240px !important;
    height: 490px !important;
  }

  .demo_store_section .demo_store_qr_card {
    width: 165px !important;
    padding: 14px !important;
  }

}

/* ------------------------------------------------------
   MOBILE
------------------------------------------------------ */

@media (max-width:991px) {

  section.demo_store_hero {
    padding: 125px 0 45px !important;
  }

  .demo_store_hero h1 {
    font-size: 38px !important;
  }

  section.demo_store_section {
    padding: 50px 0 !important;
  }

  .demo_store_section .demo_store_content {
    text-align: center !important;
    padding: 10px 10px 20px !important;
  }

  .demo_store_section .demo_store_content h2 {
    font-size: 30px !important;
  }

  .demo_store_section .demo_store_actions {
    justify-content: center !important;
  }

  /* MOBILE CLUSTER */

  .demo_store_section .demo_store_visual {

    display: block !important;

    position: relative !important;

    width: 360px !important;
    min-height: 500px !important;

    margin: 24px auto 0 !important;
  }

  /* MOBILE PHONE */

  .demo_store_section .demo_store_mobile,
  section.demo_salon .demo_store_mobile,
  section.demo_bakery .demo_store_mobile {

    position: relative !important;

    width: 220px !important;
    height: 450px !important;

    margin: 0 !important;

    left: 0 !important;

    order: unset !important;
  }

  /* MOBILE FLOATING QR */

  .demo_store_section .demo_store_qr_card,
  section.demo_salon .demo_store_qr_card,
  section.demo_bakery .demo_store_qr_card {

    position: absolute !important;

    width: 148px !important;

    padding: 12px !important;

    right: 0 !important;
    bottom: 10px !important;

    left: auto !important;
    top: auto !important;

    order: unset !important;

    z-index: 10 !important;
  }

}

/* ------------------------------------------------------
   SMALL MOBILE
------------------------------------------------------ */

@media (max-width:575px) {

  .demo_store_hero h1 {
    font-size: 28px !important;
  }

  .demo_store_section .demo_store_content h2 {
    font-size: 24px !important;
  }

  .demo_store_section .demo_store_actions {
    flex-direction: column !important;
    align-items: center !important;
  }

  .demo_store_section a.demo_store_primary_btn,
  .demo_store_section a.demo_store_text_link {

    width: 100% !important;

    justify-content: center !important;
  }

  .demo_store_section .demo_store_visual {

    width: 270px !important;
    min-height: 520px !important;
  }

  .demo_store_section .demo_store_mobile,
  section.demo_salon .demo_store_mobile,
  section.demo_bakery .demo_store_mobile {

    width: 230px !important;
    height: 470px !important;

    left: 0 !important;
  }

  .demo_store_section .demo_store_qr_card,
  section.demo_salon .demo_store_qr_card,
  section.demo_bakery .demo_store_qr_card {

    width: 160px !important;

    right: -8px !important;
    bottom: 0 !important;

    padding: 12px !important;
  }

}


/* Demo payment warning pill */

/* Demo payment warning */

.demo_store_warning {

  width: fit-content !important;
  max-width: 420px !important;

  margin: 18px auto 0 !important;

  padding: 12px 18px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 8px !important;

  border-radius: 999px !important;

  background: #ffffff !important;

  border: 1.5px solid #ef4444 !important;

  color: #dc2626 !important;

  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;

  box-shadow:
    0 10px 26px rgba(239,68,68,.10) !important;
}

.demo_store_warning svg {

  width: 18px !important;
  height: 18px !important;

  flex-shrink: 0 !important;

  color: #dc2626 !important;
}

.demo_store_warning span {
  display: inline-block !important;
}

.demo_store_warning svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  color: #b42318 !important;
}

.demo_store_warning span {
  display: inline-block !important;
}

/* Keep warning attached to visual block on desktop */

.demo_store_section .col-lg-6:has(.demo_store_visual) {
  text-align: center !important;
}

/* Mobile warning */

@media (max-width: 575px) {

  .demo_store_warning {

    width: calc(100% - 24px) !important;
    max-width: 360px !important;

    margin: 14px auto 0 !important;

    padding: 14px 18px !important;

    border-radius: 999px !important;

    background: #ffffff !important;

    border: 1.5px solid #ef4444 !important;

    color: #dc2626 !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;

    box-shadow:
      0 10px 26px rgba(239,68,68,.10) !important;
  }

  .demo_store_warning svg {

    width: 18px !important;
    height: 18px !important;

    color: #dc2626 !important;
  }

}

.demo_restaurant .demo_store_qr_card h4,
.demo_restaurant .demo_qr_divider {
  color: #16a34a !important;
}

.demo_restaurant .demo_qr_divider span {
  background: #dcfce7 !important;
}

.demo_salon .demo_store_qr_card h4,
.demo_salon .demo_qr_divider {
  color: #ff4f93 !important;
}

.demo_salon .demo_qr_divider span {
  background: #ffe4ef !important;
}

.demo_retail .demo_store_qr_card h4,
.demo_retail .demo_qr_divider {
  color: #374151 !important;
}

.demo_retail .demo_qr_divider span {
  background: #f3f4f6 !important;
}

.demo_bakery .demo_store_qr_card h4,
.demo_bakery .demo_qr_divider {
  color: #6b3b22 !important;
}

.demo_bakery .demo_qr_divider span {
  background: #f5e6d3 !important;
}


.demo_store_qr_card h4 {
  color: #16a34a !important;
}

.demo_qr_divider {
  position: relative;
  height: 28px;
  margin: 10px 0 12px;
}

.demo_qr_divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.35;
  transform: translateY(-50%);
}

.demo_qr_divider span {
  position: relative;
  z-index: 2;
  width: 28px;
  height: 28px;
  margin: 0 auto;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo_qr_divider svg {
  width: 16px;
  height: 16px;
}


.demo_qr_divider {
  color: inherit !important;
}

.demo_qr_divider span {
  color: inherit !important;
}

.demo_qr_divider svg {
  width: 16px;
  height: 16px;

  stroke: currentColor !important;
}


/* Demo hero should use homepage hero typography */

.demo_store_hero .banner_text h1 {
  font-size: 80px !important;
  line-height: 1.1 !important;
}

.demo_store_hero .banner_text p {
  max-width: 1050px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 12px 0 0 !important;
  font-size: 21px !important;
  line-height: 1.8 !important;
}

@media screen and (max-width: 991px) {
  .demo_store_hero .banner_text h1 {
    font-size: 50px !important;
  }
}

@media screen and (max-width: 767px) {
  .demo_store_hero .banner_text h1 {
    font-size: 42px !important;
  }
}