/* ==========================================================================
   Popup Components — "Leave a Message", WhatsApp & Navbar Phone Number
   Generated from popup-components-template.md + popup-config.yaml
   for CellRenew Regenerative Medicine.

   THEME — change --main-color to match the site's brand color.
   Everything else derives from it.
   ========================================================================== */
:root {
  --main-color: #7a1f2b;        /* CellRenew crimson */
  --main-contrast: #ffffff;      /* text/icon color drawn ON TOP of --main-color */

  /* Fallback shades (used only if the browser lacks color-mix()) */
  --main-color-dark: #5c171f;
  --main-color-light: #f3e6e7;
}

@supports (color: color-mix(in srgb, red, red)) {
  :root {
    --main-color-dark: color-mix(in srgb, var(--main-color) 82%, black);
    --main-color-light: color-mix(in srgb, var(--main-color) 12%, white);
  }
}

:root {
  /* Neutrals — adjust to match the site's palette if needed */
  --black: #1a1a1a;
  --white: #ffffff;
  --grey-100: #f2f2f2;
  --grey-300: #dcdcdc;
  --grey-600: #6b6b6b;

  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;

  /* Shape */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.14);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.28);
}

/* ==========================================================================
   Shared buttons
   NOTE: prefixed .popup-btn / .popup-btn-primary / .popup-btn-outline instead
   of the template's plain .btn / .btn-primary / .btn-outline — this site
   already defines those class names in styles.css (nav CTA, hero buttons,
   the real contact form's submit button) and reusing them here would have
   silently changed those buttons sitewide.
   ========================================================================== */
.popup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.popup-btn:active { transform: translateY(1px); }

.popup-btn-primary {
  background: var(--main-color);
  color: var(--main-contrast);
}
.popup-btn-primary:hover { background: var(--main-color-dark); }

.popup-btn-outline {
  background: transparent;
  border-color: var(--grey-300);
  color: var(--black);
}
.popup-btn-outline:hover { border-color: var(--main-color); color: var(--main-color); }

/* ==========================================================================
   Leave a Message — floating action button
   ========================================================================== */
.contact-fab {
  position: fixed;
  right: 24px;
  /* Stacked directly above CellRenew's existing WhatsApp float button
     (.whatsapp-float in styles.css: right:1.4rem, bottom:1.4rem, 56px) so
     the two never overlap. Kept in sync with its breakpoint below. */
  bottom: calc(1.4rem + 56px + 12px);
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--main-color);
  color: var(--main-contrast);
  border: none;
  border-radius: 25px;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.contact-fab:hover { background: var(--main-color-dark);}
.contact-fab svg { flex: 0 0 auto; }

@media (max-width: 620px) {
  /* Matches .whatsapp-float's own max-width:620px breakpoint (right:1rem,
     bottom:1rem, 50px) in styles.css. */
  .contact-fab {
    right: 1rem;
    bottom: calc(1rem + 50px + 10px);
    padding: 10px 16px;
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   Leave a Message — modal panel
   ========================================================================== */
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 1300; /* stays above the WhatsApp fab */
}

.contact-modal-backdrop {
  position: fixed;
  inset: 0;
  background: transparent; /* click-outside-to-close catcher, no dimming */
}

.contact-modal-dialog {
  position: fixed;
  right: 24px;
  bottom: 60px; /* sits just above the fab */
  width: min(380px, calc(100vw - 48px));
  max-height: min(560px, calc(100vh - 140px));
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 28px 26px;
  overflow-y: auto;
  transform-origin: bottom right;
  transform: translateY(12px) scale(0.96);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.contact-modal.is-open .contact-modal-dialog {
  /* transform: translateY(0) scale(1); */
  opacity: 1;
}

@media (max-width: 560px) {
  .contact-modal-dialog {
    right: 12px;
    left: 12px;
    bottom: 76px;
    width: auto;
    padding: 22px 20px;
  }
}

.contact-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--grey-100);
  color: var(--black);
  border-radius: 50%;
  cursor: pointer;
}
.contact-modal-close:hover { background: var(--grey-300); }

.contact-modal-dialog h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin: 0 0 8px;
  padding-right: 30px;
  color: var(--black);
}

.contact-modal-intro {
  color: var(--grey-600);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 24px;
}

.form-group { margin-bottom: 14px; }

.form-group input,
.form-group textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--black);
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--main-color);
  box-shadow: 0 0 0 3px var(--main-color-light);
}
.form-group textarea { min-height: 110px; resize: vertical; }

.contact-modal-submit { width: 100%; margin-top: 6px; }

/* ==========================================================================
   WhatsApp — floating action button
   ========================================================================== */
.whatsapp-fab {
  position: fixed;
  right: 24px;
  bottom: 64px; /* stacked directly above the "Leave a Message" fab */
  z-index: 1200;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #25d366;
  color: #ffffff;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.whatsapp-fab:hover { background: #1ebe5b; }
.whatsapp-fab svg { width: 30px; height: 30px; flex: 0 0 auto; }

@media (max-width: 560px) {
  .whatsapp-fab {
    right: 16px;
    bottom: 45px;
    width: 45px;
    height: 45px;
  }
  .whatsapp-fab svg { width: 26px; height: 26px; }
}

/* ==========================================================================
   Site navbar
   ========================================================================== */
.site-navbar {
  background: var(--white);
  border-bottom: 1px solid var(--grey-300);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.site-navbar-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-navbar-brand {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--black);
}

.site-navbar-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--main-color);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}
.site-navbar-phone:hover { color: var(--main-color-dark); }
.site-navbar-phone svg { flex: 0 0 auto; }

.site-navbar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--black);
  cursor: pointer;
}
.site-navbar-toggle svg { width: 22px; height: 22px; flex: 0 0 auto; }

.site-navbar-mobile-menu { border-top: 1px solid var(--grey-300); }

.site-navbar-mobile-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  color: var(--main-color);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}
.site-navbar-mobile-phone:hover { color: var(--main-color-dark); }
.site-navbar-mobile-phone svg { flex: 0 0 auto; }

@media (max-width: 560px) {
  .site-navbar-phone { display: none; }
  .site-navbar-toggle { display: inline-flex; }
}