/* RedCommerce Popup — Frontend styles
   All selectors are prefixed .rc- to avoid conflicts with Salient / WPBakery */

/* ── OVERLAY ── */
.rc-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999998;
}

.rc-popup-overlay--no-blur {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.rc-popup-overlay--hidden {
  display: none !important;
}

/* ── POPUP CONTAINER ── */
.rc-popup {
  --rc-tx: 0px; /* used by animations to preserve translateX for centered variant */
  display: none;
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
  overflow: hidden;
  z-index: 999999;
  font-family: inherit;
}

/* Show state — triggers slide-up animation */
.rc-popup--visible {
  animation: rc-slideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Hide state — quick fade + slide down */
.rc-popup--hiding {
  animation: rc-slideDown 0.25s ease forwards;
}

@keyframes rc-slideUp {
  from {
    opacity: 0;
    transform: translateX(var(--rc-tx)) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(var(--rc-tx)) translateY(0);
  }
}

@keyframes rc-slideDown {
  from {
    opacity: 1;
    transform: translateX(var(--rc-tx)) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(var(--rc-tx)) translateY(10px);
  }
}

/* ── MOBILE: full width, override any theme width injection ── */
@media (max-width: 767px) {
  .rc-popup {
    width: auto !important;
    max-width: none !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
  }
}

/* ── DESKTOP POSITION VARIANTS ── */
@media (min-width: 768px) {
  /* shared desktop base */
  .rc-popup--bottom-right,
  .rc-popup--bottom-left,
  .rc-popup--bottom-center {
    bottom: 20px;
    /* --rc-w is set inline from the popup-width setting; 380 is the width this had
       before the setting existed, so an unset site does not move. */
    width: var(--rc-w, 380px) !important;
    max-width: var(--rc-w, 380px) !important;
    left: auto !important;
    right: auto !important;
  }

  .rc-popup--bottom-right {
    right: 20px !important;
  }

  .rc-popup--bottom-left {
    left: 20px !important;
  }

  .rc-popup--bottom-center {
    left: 50% !important;
    --rc-tx: -50%;
  }
}

/* ── CLOSE BUTTON ── */
.rc-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: #f1f3f5;
  color: #adb5bd;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
  z-index: 2;
  padding: 0;
}
.rc-popup-close:hover {
  background: #e9ecef;
  color: #343a40;
}

/* ── INNER PADDING ── */
.rc-popup-inner {
  padding: 18px 18px 16px;
  width: 100%;
  box-sizing: border-box;
}

/* ── INSTRUCTOR ROW ── */
.rc-instructor {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.rc-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  flex-shrink: 0;
  position: relative;
}

/* Online dot via pseudo-element */
.rc-avatar::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: #25D366;
  border-radius: 50%;
  border: 2px solid #ffffff;
}

.rc-instructor-info {
  flex: 1;
  min-width: 0;
}

.rc-instructor-name {
  font-size: 14px;
  font-weight: 600;
  color: #212529;
  line-height: 1.2;
}

.rc-instructor-status {
  font-size: 12px;
  color: #25D366;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

/* Pulse animation on status dot SVG */
.rc-instructor-status svg {
  animation: rc-pulse 2s ease-in-out infinite;
}

@keyframes rc-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* ── STAT BADGE ── */
.rc-stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

/* Standalone stat badge (outside bubble) */
.rc-stat-row--standalone {
  margin-top: 0;
  margin-bottom: 12px;
}

.rc-stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(37, 211, 102, 0.08);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #1eba58;
}

.rc-stat-badge svg {
  flex-shrink: 0;
}

/* ── GOOGLE PLACES AUTOCOMPLETE ── */
/* Ensure the dropdown renders above the popup overlay */
.pac-container {
  z-index: 9999999 !important;
}

/* ── CTA BUTTONS ── */
.rc-ctas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* WhatsApp button directly inside popup inner (no wrapper div) */
.rc-popup-inner > .rc-cta-whatsapp {
  margin-bottom: 4px;
}

.rc-cta-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 16px;
  background: #25D366;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  line-height: 1;
}

/* Size of the WhatsApp button. --m is the base rule above, so it needs no branch of
   its own; the others only move padding, type size and the icon, which keeps every
   other WhatsApp-button rule (hover, focus, the with-form variants) applying unchanged. */
.rc-cta-whatsapp--s { padding: 10px 14px; font-size: 13px; border-radius: 10px; }
.rc-cta-whatsapp--s svg { width: 16px; height: 16px; }
.rc-cta-whatsapp--l { padding: 16px 18px; font-size: 16px; border-radius: 13px; }
.rc-cta-whatsapp--l svg { width: 20px; height: 20px; }
.rc-cta-whatsapp--xl { padding: 19px 20px; font-size: 17.5px; border-radius: 14px; }
.rc-cta-whatsapp--xl svg { width: 22px; height: 22px; }

.rc-cta-whatsapp:hover,
.rc-cta-whatsapp:focus-visible {
  background: #1eba58;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.25);
  color: #ffffff;
  text-decoration: none;
}

.rc-cta-whatsapp:active {
  transform: translateY(0);
}

.rc-cta-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 16px;
  background: transparent;
  color: #868e96;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  line-height: 1;
}

.rc-cta-call:hover,
.rc-cta-call:focus-visible {
  border-color: #ced4da;
  color: #343a40;
  background: #f8f9fa;
  text-decoration: none;
}

/* ── PRIVACY LINE ── */
.rc-privacy {
  text-align: center;
  margin-top: 10px;
  font-size: 11px;
  color: #868e96;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1.4;
}

/* ── EMBEDDED FORM ── */

/* Wider popup on desktop when a CF7 form is embedded */
@media (min-width: 768px) {
  .rc-popup--with-form.rc-popup--bottom-right,
  .rc-popup--with-form.rc-popup--bottom-left,
  .rc-popup--with-form.rc-popup--bottom-center {
    width: 460px !important;
    max-width: 460px !important;
  }
}

/* Form title */
.rc-popup-form-title {
  font-size: 15px;
  font-weight: 600;
  color: #212529;
  margin: 0 0 10px;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .rc-popup-form-title {
    font-size: 16px;
  }
}

/* Allow taller popup to accommodate the form */
.rc-popup--with-form {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #dee2e6 transparent;
}

.rc-popup-form {
  margin-bottom: 4px;
}

/* ── "of" DIVIDER ── */

.rc-popup-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  color: #adb5bd;
  font-size: 12px;
  font-weight: 500;
}

.rc-popup-divider::before,
.rc-popup-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e9ecef;
}

/* ── WHATSAPP AS SECONDARY (when form is also shown) ── */

.rc-cta-whatsapp--secondary {
  padding: 10px 16px;
  font-size: 13.5px;
  background: #f6fef9;
  color: #1eba58;
  border: 1.5px solid #b9f0cd;
}

.rc-cta-whatsapp--secondary:hover,
.rc-cta-whatsapp--secondary:focus-visible {
  background: #edfbf3;
  border-color: #86e6b0;
  color: #1eba58;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(37, 211, 102, 0.15);
}

/* ── MULTISTEP FORM INSIDE POPUP — light-background overrides ── */
/* The multistep CSS assumes a dark background (Salient theme).
   These overrides make inactive circles and lines visible on white. */

.rc-popup .rc-multistep {
  --rc-line-bg: #e9ecef;
  --rc-circle-border: #ced4da;
  --rc-circle-text: #868e96;
}

/* Back button: swap dark-border assumption for visible light-theme border */
.rc-popup .rc-multistep .rc-btn-group .rc-btn-back {
  border-color: #dee2e6 !important;
  color: #495057 !important;
  opacity: 1;
}

.rc-popup .rc-multistep .rc-btn-group .rc-btn-back:hover {
  opacity: 0.75;
  border-color: #adb5bd !important;
}

/* Tighten progress bar spacing inside popup */
.rc-popup .rc-multistep .rc-progress {
  margin-bottom: 14px !important;
}

/* ── INPUT FIELD OVERRIDES (fight Salient's large field styles) ──────────── */

.rc-popup .rc-multistep input[type="text"],
.rc-popup .rc-multistep input[type="email"],
.rc-popup .rc-multistep input[type="tel"],
.rc-popup .rc-multistep input[type="number"],
.rc-popup .rc-multistep input[type="url"],
.rc-popup .rc-multistep input[type="search"],
.rc-popup .rc-multistep input[type="date"],
.rc-popup .rc-multistep textarea,
.rc-popup .rc-multistep select {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 11px 14px !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.4 !important;
  font-size: 14px !important;
  font-family: inherit !important;
  color: #212529 !important;
  background: #f8f9fa !important;
  border: 1.5px solid #dee2e6 !important;
  border-radius: 10px !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.rc-popup .rc-multistep input[type="text"]:focus,
.rc-popup .rc-multistep input[type="email"]:focus,
.rc-popup .rc-multistep input[type="tel"]:focus,
.rc-popup .rc-multistep input[type="number"]:focus,
.rc-popup .rc-multistep input[type="url"]:focus,
.rc-popup .rc-multistep textarea:focus,
.rc-popup .rc-multistep select:focus {
  border-color: var(--rc-accent, #00b8d9) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(0, 184, 217, 0.1) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rc-accent, #00b8d9) 10%, transparent) !important;
}

.rc-popup .rc-multistep input::placeholder,
.rc-popup .rc-multistep textarea::placeholder {
  color: #adb5bd !important;
  opacity: 1 !important;
}

/* Kill any Salient wrappers / pseudo-elements on inputs inside popup */
.rc-popup .rc-multistep .wpcf7-form-control-wrap::before,
.rc-popup .rc-multistep .wpcf7-form-control-wrap::after,
.rc-popup .rc-multistep p::before,
.rc-popup .rc-multistep p::after {
  display: none !important;
}

/* Tight paragraph wrappers from CF7 inside popup */
.rc-popup .rc-multistep fieldset.rc-step > p {
  margin: 0 0 8px !important;
  padding: 0 !important;
}

.rc-popup .rc-multistep fieldset.rc-step > p:last-child {
  margin-bottom: 0 !important;
}

/* Kill empty paragraphs (blank lines in CF7 template become <p><br></p>) */
.rc-popup .rc-multistep fieldset.rc-step > p:empty,
.rc-popup .rc-multistep fieldset.rc-step > br {
  display: none !important;
}

/* Kill the <p> wrapping the hidden submit button — it still eats space */
.rc-popup .rc-multistep fieldset.rc-step > p:last-of-type:has(input[type="submit"]),
.rc-popup .rc-multistep fieldset.rc-step > p:last-of-type:has(.wpcf7-submit) {
  display: none !important;
  margin: 0 !important;
}

.rc-popup .rc-multistep fieldset.rc-step .wpcf7-form-control-wrap {
  display: block !important;
  margin-bottom: 0 !important;
}

/* Textarea: limit height inside popup.
 *
 * See the twin of this rule in rc-premium-frontend.css for the measurements. Short
 * version: height:auto above hands the height to the rows attribute, CF7 defaults a
 * bare [textarea] to rows="10", and the message step then towers over the details step
 * beside it. The two files carry the same 166px because their field metrics are the
 * same 14px type on 11px padding — move one and move the other.
 */
.rc-popup .rc-multistep textarea {
  min-height: 80px !important;
  max-height: 166px !important;
  resize: vertical !important;
}

/* ── AVATAR IMAGE ── */
.rc-avatar--image {
  background: #f1f3f5 !important;
  overflow: hidden;
}

.rc-avatar--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ── URGENCY TIMER ── */
.rc-urgency-timer {
  background: linear-gradient(135deg, #ff6b35 0%, #f9a825 100%);
  border-radius: 10px;
  padding: 12px 14px 10px;
  margin-bottom: 10px;
  text-align: center;
}

.rc-timer-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.rc-timer-display {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}

.rc-timer-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
}

.rc-timer-num {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  letter-spacing: -0.02em;
}

.rc-timer-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.rc-timer-sep {
  font-size: 22px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1;
  padding-top: 1px;
}

.rc-timer-expired {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

/* ==========================================================================
   Floating WhatsApp FAB
   ========================================================================== */

.rc-fab {
  display: none;
  position: fixed;
  z-index: 999997;
  border-radius: 50%;
  border: none;
  background: #25d366;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

/* ── Sizes ── */
.rc-fab--s { width: 48px; height: 48px; }
.rc-fab--s svg { width: 22px; height: 22px; }
.rc-fab--m { width: 60px; height: 60px; }
.rc-fab--m svg { width: 28px; height: 28px; }
.rc-fab--l { width: 72px; height: 72px; }
.rc-fab--l svg { width: 34px; height: 34px; }
.rc-fab--xl { width: 88px; height: 88px; }
.rc-fab--xl svg { width: 42px; height: 42px; }

/* ── Desktop positions ── */
.rc-fab--desk-bottom-right { bottom: 24px; right: 24px; }
.rc-fab--desk-bottom-left  { bottom: 24px; left: 24px; }

/* ── Visible state ── */
.rc-fab--visible {
  display: flex;
  animation: rc-fabIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.rc-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.rc-fab:active {
  transform: scale(0.95);
}

@keyframes rc-fabIn {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Shine animation ── */
.rc-fab-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 70%,
    transparent 100%
  );
  animation: rc-shine 3s ease-in-out infinite;
  pointer-events: none;
  border-radius: 50%;
}

@keyframes rc-shine {
  0%   { left: -100%; }
  40%  { left: 100%; }
  100% { left: 100%; }
}

/* ── Mobile positions ── */
@media (max-width: 767px) {
  .rc-fab--desk-bottom-right,
  .rc-fab--desk-bottom-left { bottom: auto; left: auto; right: auto; }
  .rc-fab--mob-bottom-right { bottom: 16px; right: 16px; }
  .rc-fab--mob-bottom-left  { bottom: 16px; left: 16px; }

  .rc-fab--s { width: 44px; height: 44px; }
  .rc-fab--s svg { width: 20px; height: 20px; }
  .rc-fab--m { width: 56px; height: 56px; }
  .rc-fab--m svg { width: 26px; height: 26px; }
  .rc-fab--l { width: 66px; height: 66px; }
  .rc-fab--l svg { width: 32px; height: 32px; }
  .rc-fab--xl { width: 78px; height: 78px; }
  .rc-fab--xl svg { width: 38px; height: 38px; }
}

/* ── WP Armour honeypot ───────────────────────────────────────────────────────
   That plugin injects an "Alternative:" text input into every Contact Form 7 form and
   hides it with its own stylesheet. Inside the popup there is no room for that to go
   wrong quietly: if its CSS is combined away, deferred or simply missing, the honeypot
   appears as a stray labelled box in the middle of the form and visitors fill it in —
   which marks their submission as spam. Hidden here as well, so the trap stays a trap. */
#rc-popup #altEmail_container,
#rc-popup .altEmail_container,
#rc-popup .wpa_hidden_field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* The .rcf-trap rule moved to multistep.css, which is the stylesheet that always ships
   with the markup emitting it. Keeping a copy here hid the trap in WhatsApp mode only,
   and left it visible on every booking-mode site. */

/* ==========================================================================
   Round things stay round on a Salient site
   ==========================================================================

   Salient writes a button rule into its own dynamic stylesheet, keyed off an
   attribute it puts on <body>:

     body[data-button-style*="slightly_rounded"] button { border-radius: 5px }

   Both our FAB and the popup's close button ARE <button> elements, so they match
   it. That selector scores one attribute plus one element; ours scored a single
   class, so the theme won and a circle came out a 5px rounded square. Confirmed
   on a live site: the computed border-radius on the FAB was exactly 5px.

   Repeating the class lifts us to two classes, which outranks the theme without
   !important — so a school that deliberately restyles these can still do it with
   anything more specific. Do NOT collapse this back to a single class, and do not
   "tidy" it into !important.

   This hits every Salient site whose Button style is not "fully rounded", not one
   site, and Salient is the theme under most of these builds.
   ========================================================================== */

.rc-fab.rc-fab,
.rc-popup-close.rc-popup-close {
  border-radius: 50%;
}