/* --------------------------------------------------
   RESETS & FONTS
----------------------------------------------------- */
html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden; /* no extra horizontal scroll on desktop */
}
*, *::before, *::after {
  box-sizing: inherit;
}
body {
  font-family: 'Urbanist', sans-serif;
  color: #212121;
  background-color: #ffffff;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}

/* --------------------------------------------------
   CUSTOM PROPERTIES
   - 'hero-title-margin-top' for vertical shift
   - 'profile-bubble-font-size' for bubble text
   - 'profile-cta-font-size' for CTA text
   - 'profile-bubble-min-height' => bubble height
   - 'shopper-bubble-bg-opacity' => shopper pop-up transparency
   - 'influencer-bubble-bg-opacity' => influencer pop-up transparency
   - 'retailer-bubble-bg-opacity' => new retailer pop-up transparency
----------------------------------------------------- */
:root {
  --primary-color: #246bfd;
  --hero-height: 100vh;

  /* Move hero title up/down (can be negative) */
  --hero-title-margin-top: 1rem;

  /* Font sizes for bubble & CTA */
  --profile-bubble-font-size: 1.2rem;
  --profile-cta-font-size: 1.2rem;

  /* Manage bubble min-height */
  --profile-bubble-min-height: auto;

  /* brand alpha => bubble backgrounds */
  --bubble-opacity: 0.6;
  --bubble-r: 36;
  --bubble-g: 107;
  --bubble-b: 253;

  /* shopper bubble => default 0.95 */
  --shopper-bubble-bg-opacity: 1;

  /* influencer bubble => default 0.95 */
  --influencer-bubble-bg-opacity: 1;

  /* retailer bubble => default 0.95 */
  --retailer-bubble-bg-opacity: 1;
}

/* --------------------------------------------------
   BUTTONS
----------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 0.7rem 1.2rem;
  border-radius: 100px;
  font-weight: 700;
  font-size: 1rem;
  background-color: #246bfd;
  color: #fff;
  text-align: center;
  transition: background-color 0.25s ease;
  white-space: nowrap; /* single-line label for normal buttons */
}
.btn:hover {
  background-color: #1b54c7;
}
.hero-cta-primary {
  background-color: var(--primary-color);
}
.hero-cta-primary:hover {
  background-color: #1b54c7;
}

/* INLINE CTAS */
.inline-ctas {
  display: flex;           /* Place buttons side-by-side */
  flex-wrap: wrap;         /* Wrap if there's not enough horizontal space */
  gap: 0.5rem;             /* Spacing between buttons */
  margin-top: 0.5rem;      /* A little breathing room above the buttons */
}

.inline-cta-button {
  display: inline-block;   
  background-color: #E9F0FF;
  color: #246bfd;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 16px;
  padding: 0.6rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.inline-cta-button:hover {
  background-color: #246bfd; 
  color: #fff;
}


/* --------------------------------------------------
   HERO SECTION
----------------------------------------------------- */
.hero-section {
  position: relative;
  width: 100%;
  min-height: var(--hero-height);
  height: auto; 
  overflow: hidden;
  margin-bottom: 0;
}
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-width: 100%;
  min-height: 100%;
}
.hero-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: var(--hero-height);
  background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.2));
}
.hero-content-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  position: relative;
  z-index: 2;
}
.hero-brand-container {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 1rem;
}
.hero-brand-logo {
  height: 66px;
  width: auto;
  max-width: 80%;
}
.hero-brand-title {
  font-family: 'Urbanist', sans-serif;
  font-weight: 800;
  font-size: 1.8rem;
  color: #fff;
}
.hero-text-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 700px;
  color: #fff;
  margin-bottom: 1rem;
}
.hero-title {
  margin-top: var(--hero-title-margin-top);
  font-size: 2.4rem;
  font-weight: 850;
  margin-bottom: 0.5rem;
}

.hero-subtitle {
  font-size: 1.4rem;    /* adjust as needed */
  margin-top: 1em;     /* add vertical space above the subtitle */
  margin-bottom: 0;  /* add vertical space below the subtitle */
  line-height: 1.4;    /* optional: improve readability */
  /* add any other properties you need, e.g. color, font-weight, etc. */
}


/* HERO MESSAGES => stacked chat bubbles */
.hero-messages {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/*
   Chat bubble => shopper/influencer/retailer
*/
/*.profile-bubble {
  background-color: rgba(var(--bubble-r), var(--bubble-g), var(--bubble-b), var(--bubble-opacity));
  border-radius: 16px;
  border-bottom-left-radius: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  margin: 0 auto;
  padding: 0.6rem 0.8rem;
  position: relative;
  font-size: var(--profile-bubble-font-size);
  line-height: 1.3;
  color: #fff;
  white-space: normal;
  min-height: var(--profile-bubble-min-height);
  margin-bottom: 1.2rem */
  

.bubble-shopper {
  max-width: 75%;
  max-width: 300px;
}
.bubble-influencer {
  max-width: 75%;
  min-width: 380px;
}
.bubble-retailer {
  max-width: 75%;
  min-width: 380px;
}
.roleTitle {
  font-weight: 700;
  margin: 0;
}

/* CTA row => single line for normal CTA;
   Retailer includes <br> => 2-line label
*/
.bubble-cta-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
  margin-bottom: 0.7rem;
}
.bubble-cta-btn {
  display: inline-block;
  font-weight: 700;
  font-size: var(--profile-cta-font-size);
  border-radius: 16px;
  padding: 0.6rem 1rem;
  background-color: #FF66A1; 
  color: #fff;
  transition: background-color 0.2s ease;
  white-space: nowrap; 
}
.bubble-cta-retailer {
  white-space: normal !important;
  text-align: center;
}
.bubble-cta-btn:hover {
  background-color: #246bfd;
  color: #fff
}

/* Tinted BG => for feature sections */
.feature-section.tinted-feature-bg {
  background-color: #fff;
  margin: 0;
  padding-top: 0;
  padding-bottom: 3rem;
}
.feature-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 700px;
  margin: 0 auto 2.5rem;

}

/* Onboarding carousel => unchanged */
.onboarding-carousel {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}
.onboarding-card {
  flex: 0 0 auto;
  background-color: transparent;
  text-align: center;
}
.iphone16-frame {
  position: relative;
  margin: 0 auto;
  border: 2px solid var(--primary-color);
  border-radius: 30px;
  padding: 24px 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  width: 100%;
  overflow: hidden;
}


.onboarding-card {
  flex: 0 0 auto;
  width: 220px;  /* or pick whatever width you prefer */
  background-color: transparent;
  text-align: center;
}



.today-pill {
  display: inline-block;
  background-color: #f9f9f9;
  color: #666;
  font-weight: 500;
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 14px;
  margin: 0 auto 12px;
}
.system-bubble {
  background-color: #f5f5f5;
  border-radius: 12px;
  border-bottom-left-radius:0;
  padding: 0.6rem 0.75rem;
  margin-bottom: 10px;
  font-size: 0.8rem;
  color: #333;
}
.cta-bubble {
  background-color: #eaf2ff;
  border-radius: 16px;
  padding: 0.7rem 1rem;
  margin-bottom: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #246bfd;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.cta-bubble:hover {
  background-color: #246bfd;
  color: #fff;
}

/* fadeUp => hero messages appear on load */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeUpDelay {
  opacity: 0;
  animation: fadeUp 0.5s forwards ease-in-out;
  animation-delay: 0.3s;
}

@keyframes fadeInUp {
  0% { 
    opacity: 0;
    transform: translateY(30px); 
  }
  100% { 
    opacity: 1;
    transform: translateY(0);
  }
}

.iphone16-frame {
  width: 100%;     /* fill its parent (220px) */
  height: 420px;   /* consistent height for all frames */
  /* existing properties: keep your border, radius, etc. */
  border: 2px solid var(--primary-color);
  border-radius: 30px;
  padding: 24px 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  overflow: hidden;
  position: relative; 
  margin: 0 auto;  
}


/* HIDE SCROLLBARS ON MOBILE => new helper class .hide-scrollbar */
.hide-scrollbar {
  -ms-overflow-style: none;  /* IE 10+ */
  scrollbar-width: none;     /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;            /* Chrome/Safari */
}

@media (max-width: 768px) {
  .onboarding-card {
    width: 220px;
  }
}
@media (min-width: 769px) {
  .onboarding-carousel {
    justify-content: center;
    align-items: flex-start;
    overflow-x: hidden;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* Second feature block => unchanged */
.transfer-section {
  padding: 4rem 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  background-color: rgba(36,107,253,0.05);
}
.transfer-content {
  flex: 1 1 400px;
}
.transfer-title {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 1rem;
}
.transfer-text {
  font-size: 1.1rem;
  line-height: 1.5;
  margin-bottom: 2rem;
  color: #555;
}
.transfer-cta {
  background-color: #FF66A1;
  color: #fff;
  border-radius: 24px;
  padding: 0.8rem 1.5rem;
  font-weight: 600;
  font-size: 1rem;
}
.transfer-cta:hover {
  background-color: var(--primary-color);
}
.transfer-image {
  flex: 1 1 1px;
  display: flex;
  justify-content: center;
}

/* NEW transfer-brand-container + brand logo + title */
.transfer-brand-container {
  display: flex;
  align-items: center;
  gap: 0rem;
}
.transfer-brand-logo {
  height: 66px;
  width: auto;
  max-width: 100%;
}
.transfer-brand-title {
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  color: #7376c5;
}

/* =========================================
   1) OLD MODAL => previously for retailer
========================================= */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: flex;
  z-index: 9999; 
}
.modal-overlay.show {
  visibility: visible;
  opacity: 1;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
.modal-container {
  background-color: #fff;
  width: 90%;
  max-width: 400px;
  padding: 1.5rem;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  animation: fadeInUp 0.4s ease forwards;
  margin: 0 auto;
}
.modal-close-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.8rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
}
.modal-close-btn:hover {
  color: #000;
}
.modal-title {
  font-size: 1.4rem;
  margin-bottom: 0.25rem;
}
.modal-subtitle {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #444;
}
.modal-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.modal-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.modal-input-group label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;
}
.modal-input-group input {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.6rem;
  font-size: 0.9rem;
}
.modal-input-group input:focus {
  outline: none;
  border-color: var(--primary-color);
}
.modal-submit-btn {
  font-size: 1rem;
  font-weight: 700;
  border-radius: 8px;
  padding: 0.7rem 1rem;
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.modal-submit-btn:hover {
  background-color: #1b54c7;
}

/* =========================================
   2) SHOPPER POP-UP => bubble style
========================================= */
.shopper-modal-bubble-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: flex;
  z-index: 9999;
}
.shopper-modal-bubble-overlay.show {
  visibility: visible;
  opacity: 1;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
.shopper-modal-bubble {
  position: relative;
  background-color: rgba(var(--bubble-r), var(--bubble-g), var(--bubble-b), var(--shopper-bubble-bg-opacity));
  border-radius: 24px;
  border-bottom-left-radius: 0;
  width: 90%;
  max-width: 420px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  animation: fadeInUp 0.4s ease forwards;
  color: #fff;
  text-align: center;
  margin: 0 auto;
}
.shopper-modal-close-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.8rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #eee;
  z-index: 2;
}
.shopper-modal-close-btn:hover {
  color: #fff;
}
.shopper-bubble-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0rem;
  margin-bottom: 0.5rem;
}
.shopper-bubble-logo {
  width: 84px;
  height: auto;
}
.shopper-bubble-appname {
  font-weight: 700;
  font-size: 1.6rem;
  color: #fff;
}
.shopper-bubble-title {
  font-size: 1.3rem;
  font-weight: 800;
  margin-top: 0.4rem;
  margin-bottom: 0.5rem;
}
.shopper-bubble-subtitle {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 1rem;
  color: #f0f0f0;
}
.shopper-bubble-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.shopper-bubble-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: left;
}
.shopper-bubble-input-group label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
}
.shopper-bubble-input-group input {
  border: 1px solid #fff;
  border-radius: 8px;
  padding: 0.6rem;
  font-size: 0.9rem;
  color: #333;
}
.shopper-bubble-input-group input:focus {
  outline: none;
  border-color: var(--primary-color);
}
.shopper-bubble-submit-btn {
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 16px; 
  padding: 0.7rem 1.2rem;
  background-color: #E9F0FF;          
  color: var(--primary-color);     
  border: 2px solid var(--primary-color);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.shopper-bubble-submit-btn:hover {
  background-color: #1b54c7; 
  color: #fff;
}

/* =========================================
   3) INFLUENCER POP-UP => bubble style 
========================================= */
.influencer-modal-bubble-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: flex;
  z-index: 9999;
}
.influencer-modal-bubble-overlay.show {
  visibility: visible;
  opacity: 1;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
.influencer-modal-bubble {
  position: relative;
  background-color: rgba(var(--bubble-r), var(--bubble-g), var(--bubble-b), var(--influencer-bubble-bg-opacity));
  border-radius: 24px;
  border-bottom-left-radius: 0;
  width: 90%;
  max-width: 420px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  animation: fadeInUp 0.4s ease forwards;
  color: #fff;
  text-align: center;
  margin: 0 auto;
}
.influencer-modal-close-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.8rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #eee;
  z-index: 2;
}
.influencer-modal-close-btn:hover {
  color: #fff;
}
.influencer-bubble-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0rem;
  margin-bottom: 0.5rem;
}
.influencer-bubble-logo {
  width: 84px;
  height: auto;
}
.influencer-bubble-appname {
  font-weight: 700;
  font-size: 1.6rem;
  color: #fff;
}
.influencer-bubble-title {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
  margin-top: 0.5rem;
}
.influencer-bubble-subtitle {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 1rem;
  color: #f0f0f0;
}
.influencer-bubble-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.influencer-bubble-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: left;
}
.influencer-bubble-input-group label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
}
.influencer-bubble-input-group input {
  border: 1px solid #fff;
  border-radius: 8px;
  padding: 0.6rem;
  font-size: 0.9rem;
  color: #333;
}
.influencer-bubble-input-group input:focus {
  outline: none;
  border-color: var(--primary-color);
}
.influencer-bubble-submit-btn {
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 16px;
  padding: 0.7rem 1.2rem;
  background-color: #fff;          
  color: var(--primary-color);     
  border: 2px solid var(--primary-color);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.influencer-bubble-submit-btn:hover {
  background-color: #1b54c7;
  color: #fff;
}

/* =========================================
   4) RETAILER POP-UP => bubble style (NEW)
========================================= */
.retailer-modal-bubble-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: flex;
  z-index: 9999;
}
.retailer-modal-bubble-overlay.show {
  visibility: visible;
  opacity: 1;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
.retailer-modal-bubble {
  position: relative;
  background-color: rgba(var(--bubble-r), var(--bubble-g), var(--bubble-b), var(--retailer-bubble-bg-opacity));
  border-radius: 24px;
  border-bottom-left-radius: 0;
  width: 90%;
  max-width: 660px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  animation: fadeInUp 0.4s ease forwards;
  color: #fff;
  text-align: center;
  margin: 0 auto;
}
.retailer-modal-close-btn {
  position: absolute;
  top: 0.7rem;
  right: 0.8rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #eee;
  z-index: 2;
}
.retailer-modal-close-btn:hover {
  color: #fff;
}
.retailer-bubble-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0rem;
  margin-bottom: 0.5rem;
}
.retailer-bubble-logo {
  width: 84px;
  height: auto;
}
.retailer-bubble-appname {
  font-weight: 700;
  font-size: 1.6rem;
  color: #fff;
}
.retailer-bubble-title {
  font-size: 1.3rem;
  font-weight: 800;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}
.retailer-bubble-subtitle {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.3rem;
  color: #f0f0f0;
}
.retailer-bubble-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.retailer-bubble-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: left;
}
.retailer-bubble-input-group label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
}
.retailer-bubble-input-group input {
  border: 1px solid #fff;
  border-radius: 8px;
  padding: 0.6rem;
  font-size: 0.9rem;
  color: #333;
}
.retailer-bubble-input-group input:focus {
  outline: none;
  border-color: var(--primary-color);
}
.retailer-bubble-submit-btn {
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 16px;
  padding: 0.7rem 1.2rem;
  /*background-color: #fff; */         
  color: var(--primary-color);     
  border: 2px solid var(--primary-color);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.retailer-bubble-submit-btn:hover {
  background-color: #1b54c7;
  color: #fff;
}

/* =========================
   SUCCESS BUBBLE (Refined, Responsive)
========================= */
/* Ensure the container doesn't force full-width */ 
#successBubbleContainer {
  text-align: center;    /* center the bubble horizontally */
  margin-top: 1rem;      /* optional spacing above the success message */
}

/* Make .success-bubble the same size & style as your chat bubbles */
.success-bubble {
  display: inline-block; 
  background-color: rgba(var(--bubble-r), var(--bubble-g), var(--bubble-b), 1);
  color: #fff;
  
  /* match the same shape, box-shadow, etc. */
  border-radius: 16px;
  border-bottom-left-radius: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);

  /* mimic your shopper bubble’s padding & font */
  padding: 0.6rem 0.8rem;
  font-size: var(--profile-bubble-font-size);
  line-height: 1.3;
  text-align: left;      /* or center, if you prefer */

  /* same width constraints as your .bubble-shopper */
  max-width: 72%;        /* bubble’s typical max width */
  min-width: 320px;      /* optional, so it’s not too narrow on desktop */
  margin: 0 auto;        /* center it horizontally */
}

/* If you already have a .successMsgText inside the bubble, keep it tidy */
.successMsgText {
  margin: 0;
  line-height: 1.4;
  font-weight: 600;  /* optional bold for emphasis */
}

/* On smaller phones, reduce the bubble if needed */
@media (max-width: 420px) {
  .success-bubble {
    min-width: auto;
    max-width: 90%;
  }
}

/* =========================
   CONTACT US POP-UP
========================= */
.contact-modal-bubble-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: flex;
  z-index: 9999;
}
.contact-modal-bubble-overlay.show {
  visibility: visible;
  opacity: 1;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

.contact-modal-bubble {
  position: relative;
  background-color: rgba(var(--bubble-r), var(--bubble-g), var(--bubble-b), 1);
  border-radius: 24px;
  border-bottom-left-radius: 0;
  width: 90%;
  max-width: 420px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  animation: fadeInUp 0.4s ease forwards;
  color: #fff;
  text-align: center;
  margin: 0 auto;
}

/* Header area (logo + brand name) */
.contact-bubble-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0rem;
  margin-bottom: 0.5rem;
}
.contact-bubble-logo {
  width: 84px;
  height: auto;
}
.contact-bubble-appname {
  font-weight: 700;
  font-size: 1.6rem;
  color: #fff;
}
.contact-bubble-title {
  font-size: 1.3rem;
  font-weight: 800;
  margin-top: 0.4rem;
  margin-bottom: 0.5rem;
}
.contact-bubble-subtitle {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 1rem;
  color: #f0f0f0;
}

/* contact form */
.contact-bubble-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-bubble-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: left;
}
.contact-bubble-input-group label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
}
.contact-bubble-input-group input,
.contact-bubble-input-group textarea {
  border: 1px solid #fff;
  border-radius: 8px;
  padding: 0.6rem;
  font-size: 0.9rem;
  color: #333;
}
.contact-bubble-input-group input:focus,
.contact-bubble-input-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* close button */
.contact-modal-close-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.8rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #eee;
  z-index: 2;
}
.contact-modal-close-btn:hover {
  color: #fff;
}

/* fadeInUp reused from your existing animations */
@keyframes fadeInUp {
  0% {
    opacity: 0; transform: translateY(30px);
  }
  100% {
    opacity: 1; transform: translateY(0);
  }
}

/* button => similar to shopper bubble's submit */
.contact-bubble-submit-btn {
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 16px; 
  padding: 0.7rem 1.2rem;
  background-color: #E9F0FF;          
  color: var(--primary-color);     
  border: 2px solid var(--primary-color);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.contact-bubble-submit-btn:hover {
  background-color: #1b54c7; 
  color: #fff;
}

/* =========================================
   SCALE DOWN FOR SHORT VIEWPORTS
   => anchored at the TOP so entire form remains visible
========================================= */
.modal-container,
.shopper-modal-bubble,
.influencer-modal-bubble,
.retailer-modal-bubble,
.contact-modal-bubble {
  transform: scale(1);
  transform-origin: top center; /* anchor at the top */
  transition: transform 0.25s ease;
}

/* We do bigger scale steps to ensure the entire pop-up
   remains fully visible, top to bottom, with zero scroll. */
@media (max-height: 850px) {
  .modal-container,
  .shopper-modal-bubble,
  .influencer-modal-bubble,
  .retailer-modal-bubble,
  .contact-modal-bubble {
    transform: scale(0.95);
  }
}
@media (max-height: 750px) {
  .modal-container,
  .shopper-modal-bubble,
  .influencer-modal-bubble,
  .retailer-modal-bubble,
  .contact-modal-bubble {
    transform: scale(0.9);
  }
}
@media (max-height: 650px) {
  .modal-container,
  .shopper-modal-bubble,
  .influencer-modal-bubble,
  .retailer-modal-bubble,
  .contact-modal-bubble {
    transform: scale(0.85);
  }
}
@media (max-height: 550px) {
  .modal-container,
  .shopper-modal-bubble,
  .influencer-modal-bubble,
  .retailer-modal-bubble,
  .contact-modal-bubble {
    transform: scale(0.8);
  }
}
@media (max-height: 480px) {
  .modal-container,
  .shopper-modal-bubble,
  .influencer-modal-bubble,
  .retailer-modal-bubble,
  .contact-modal-bubble {
    transform: scale(0.7);
  }
}
@media (max-height: 420px) {
  .modal-container,
  .shopper-modal-bubble,
  .influencer-modal-bubble,
  .retailer-modal-bubble,
  .contact-modal-bubble {
    transform: scale(0.6);
  }
}
@media (max-height: 360px) {
  .modal-container,
  .shopper-modal-bubble,
  .influencer-modal-bubble,
  .retailer-modal-bubble,
  .contact-modal-bubble {
    transform: scale(0.5);
  }
}

/* Finally, reduce headings/padding on narrower screens 
   to limit overall height for extremely narrow phones. */
@media (max-width: 420px) {
  .shopper-modal-bubble,
  .influencer-modal-bubble,
  .retailer-modal-bubble,
  .contact-modal-bubble {
    padding: 1rem;
  }
  .shopper-bubble-title,
  .influencer-bubble-title,
  .retailer-bubble-title,
  .contact-bubble-title {
    font-size: 1.15rem;
  }
  .shopper-bubble-subtitle,
  .influencer-bubble-subtitle,
  .retailer-bubble-subtitle,
  .contact-bubble-subtitle {
    font-size: 0.95rem;
  }
  .shopper-bubble-input-group label,
  .influencer-bubble-input-group label,
  .retailer-bubble-input-group label,
  .contact-bubble-input-group label {
    font-size: 0.85rem;
  }
  .shopper-bubble-form input,
  .influencer-bubble-form input,
  .retailer-bubble-form input,
  .contact-bubble-form input,
  .contact-bubble-form textarea {
    font-size: 0.85rem;
  }
  .shopper-bubble-submit-btn,
  .influencer-bubble-submit-btn,
  .retailer-bubble-submit-btn,
  .contact-bubble-submit-btn {
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
  }
}

/* -----------------------------------------------
   MOBILE: Onboarding Carousel => Normal Scrolling
   No scaling for the "active" screen
   Gaps around each screen
----------------------------------------------- */
@media (max-width: 768px) {
  /* Let the carousel be a normal horizontal scroll
     with smooth scrolling & consistent gaps. */
  .onboarding-carousel {
    display: flex;
    overflow-x: auto; 
    scroll-behavior: smooth;  
    gap: 1rem;               /* space between screens */
    padding: 0 1rem;         /* left & right space on entire carousel */
    /* Remove snap & scaling if previously set */
    scroll-snap-type: none;
  }

  /* Each screen remains the same size, no transform */
  .onboarding-card {
    flex: 0 0 auto;           /* horizontal scrolling items */
    width: 220px;             /* or whatever fixed width you prefer */
    margin: 0;                /* rely on "gap" for spacing */
    transform: none !important;
    opacity: 1 !important;    /* if you previously had reduced opacity */
  }
}

@media (max-width: 768px) {
  /* Second feature block => stack vertically and center */
  .transfer-section {
    flex-direction: column;     /* Stack the .transfer-content & .transfer-image */
    align-items: center;        /* Center them horizontally */
    text-align: center;         /* Center any inline text */
  }

  /* Make each section fill available width (but not stretch unnecessarily) */
  .transfer-content,
  .transfer-image {
    width: 100%;
    max-width: 400px;           /* optional limit so it doesn't get too wide */
    margin: 0 auto;             /* center horizontally */
  }

  /* Center "Contact us" button, keep normal button width */
  .transfer-cta {
    display: inline-block;
    margin: 1rem auto 0 auto;   /* top margin + center horizontally */
    text-align: center;
    white-space: nowrap;        /* keep the text on one line */
  }
}


.asterisk-note {
  font-size: 0.95rem;
  font-style: bold;
  font-weight: 600;
  color: #FF66A1; /* or any accent color */
  margin-top: 1rem;
  text-align: center;
}

/* Shop header container (logo + text) */
.shop-header {
  display: flex;
  align-items: center;
  justify-content: center; /* center horizontally */
  padding: 0.5rem 0;
  border-bottom: 1px solid #ddd; /* optional dividing line */
  margin-bottom: 0.5rem;
}

/* Logo container */
.shop-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.5rem;
}

/* Adjust the SVG dimensions if needed */
.shop-logo-svg {
  width: 28px;
  height: 28px;
}

/* Shop Name: S- + "mart" in different colors */
.shop-name {
  font-weight: 700;
  font-size: 1rem; /* adjust as needed */
  color: #D61C29; /* strong red */
}

/* "mart" in blue for a Kmart-inspired look */
.blue-part {
  color: #1b54c7; /* strong blue */
} 


/* How it works */
.feature-title {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  text-align: center; /* optional: center the title */
}

.how-it-works-container {
  margin-bottom: 1rem;
  /* If you'd like spacing around the container:
   padding: 1rem; 
   background-color: #fefefe; 
   border-radius: 0.5rem;
  */
}

.how-it-works-step {
  margin-bottom: 0.5rem;
}

.step-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.step-text {
  margin: 0;
  line-height: 1.4;
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

.emoji {
  margin-left: 0.3rem; /* small gap before the emoji */
}

.onboarding-card.side-card {
  /* Currently you have:
     width: 220px;
     background-color: transparent;
     text-align: center;
     ...
  */
  width: 220px;
  min-height: 420px;  /* Ensure the card is tall enough to display the BG image */
  background-color: transparent;  
  text-align: center;
}

.iphone16-frame {
  position: relative;
  margin: 0 auto;
  border: 2px solid var(--primary-color);
  border-radius: 30px;
  /* CHANGED this: Make it transparent so parent BG is visible */
  background-color: transparent !important;
  padding: 24px 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  width: 100%;
  overflow: hidden;
}




/***********************************************
 * CARD #1 BACKGROUND IMAGE
 ***********************************************/
.card-one-bg {
  background-image: url("assets/you-also-may-like.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.card-one-frame {
  position: relative;
}

/***********************************************
 * CSS VARIABLES
 ***********************************************/
:root {
  --notif-opacity: 1;
  --icon-name-gap: 0.1rem;

  /* Manage internal padding for standard notifications */
  --notif-inner-padding: 0.75rem;

  /* Pink #FF66A1 => R,G,B = 255, 102, 161 */
  --notif-top-rgb: 255, 102, 161;
  --notif-bottom-rgb: 255, 102, 161;

  /* Gap between 'Deal Alert' title & the message in the first notification */
  --notif1-title-gap: 0.5rem;
}

/***********************************************
 * CENTERED iOS NOTIFICATION
 ***********************************************/
.ios-notification-two-section {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 280px;
  border-radius: 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  overflow: hidden;
  z-index: 2;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-align: center;
}

/* Single container => first notification */
.single-notification {
  background-color: rgba(var(--notif-top-rgb), var(--notif-opacity));
  padding: var(--notif-inner-padding);
}

/* The second => top/bottom approach */
.ios-notification-bottom {
  background-color: rgba(var(--notif-bottom-rgb), var(--notif-opacity));
  padding: var(--notif-inner-padding);
}

/***********************************************
 * HEADER => icon + name
 ***********************************************/
.ios-notification-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--icon-name-gap);
  margin-bottom: 0.4rem;
}
.ios-notification-app-icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: url("assets/Product_Message.png") no-repeat center/cover;
}
.ios-notification-appname {
  font-size: 0.9rem;
  font-weight: 600;
  color: #000;
}

/***********************************************
 * TITLE => black text
 ***********************************************/
.ios-notification-title {
  font-weight: 600;
  font-size: 1rem;
  color: #000;
}

/***********************************************
 * MESSAGE => black text
 ***********************************************/
.ios-notification-message {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #000;
  margin-bottom: 0.6rem;
}

/* Gap below "Deal Alert" in the first notification */
#notifOne .ios-notification-message {
  margin-top: var(--notif1-title-gap);
}

/***********************************************
 * CTA => center the button
 ***********************************************/
.ios-notification-buttons {
  display: flex;
  justify-content: center;
}
.ios-btn-primary {
  background-color: #eaf2ff;
  color: #246bfd;
  border: none;
  border-radius: 12px;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ios-btn-primary:hover,
.ios-btn-primary.force-active {
  /* Force hover style when we call forceHover(btn) */
  background-color: #246bfd;
  color: #fff;
}

/***********************************************
 * CARD #1 => 220×420 BACKGROUND FULLY COVERING
 ***********************************************/
.card-one-bg {
  width: 220px; 
  height: 420px;
  background-image: url("assets/you-also-may-like.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* The "frame" => fill parent's 220×420 for notifications */
.card-one-frame {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0 auto;
  
  border: 2px solid var(--primary-color);
  border-radius: 30px;
  background-color: transparent !important;
  padding: 24px 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  overflow: hidden;
}

/***********************************************
 * The iOS notification styles => unchanged
 ***********************************************/
.ios-notification-two-section {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 280px;
  border-radius: 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  overflow: hidden;
  z-index: 2;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-align: center;
}
.single-notification {
  background-color: rgba(255,102,161,1);
  padding: 0.75rem;
}
.ios-notification-bottom {
  background-color: rgba(255,102,161,1);
  padding: 0.75rem;
}
/* etc. (rest of your notifications remain the same) */


/***********************************************
 * CARD #2 => Nua Wear => 220×420 (UNCHANGED)
 ***********************************************/
.card-two-nua {
  width: 220px;
  min-height: 420px;
  background-color: transparent;
  text-align: center;
}
.nua-chat-frame {
  position: relative;
  width: 220px;  
  height: 420px;
  margin: 0 auto;
  border: 2px solid var(--primary-color);
  border-radius: 30px;
  background-color: transparent !important;
  padding: 24px 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  overflow: hidden;
}

/* Nua Wear chat container & bubbles => same as your snippet */
.nua-header-top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.3rem;
}
.nua-retailer-logo {
  width: 28px;
  height: 28px;
}
.nua-retailer-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
}
.nua-chat-date {
  font-size: 0.8rem;
  color: #666;
  text-align: center;
  margin-bottom: 0.6rem;
}
.nua-chat-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  height: calc(100% - 60px);
  overflow-y: auto;
  -ms-overflow-style: none;  /* IE 10+ */
  scrollbar-width: none;     /* Firefox */
}
.nua-chat-container::-webkit-scrollbar {
  display: none;             /* Chrome/Safari */
}
.nua-chat-bubble {
  background-color: #f5f5f5;
  color: #000;
  font-size: 0.9rem;
  padding: 0.6rem 0.8rem;
  border-radius: 16px;
  margin-bottom: 0.3rem;
  max-width: 80%;
  animation: riseUp 0.4s ease forwards;
}
.nua-shop-bubble {
  background-color: rgba(255, 102, 161, 0.15);
  align-self: flex-start;
}
.nua-shopper-bubble {
  background-color: rgba(36,107,253,0.15);
  align-self: flex-end;
}
.nua-cta-bubble,
.nua-cta-bubble2 {
  background-color: #eaf2ff;
  font-weight: 700;
  color: #246bfd;
  align-self: center;
}
@keyframes riseUp {
  0% {
    transform: translateY(12px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


/***********************************************
 * MOBILE => horizontal scroll => same approach
 ***********************************************/
@media (max-width: 768px) {
  /* Ensure each card is 220×420 side by side */
  .onboarding-card.side-card {
    width: 220px;
    min-height: 420px;
  }

  .iphone16-frame {
    width: 220px;
    height: 420px;
  }

  .nua-chat-bubble {
    font-size: 0.85rem;
  }
}