/* AppStore announcment banner */

.wwb-app-banner {
  max-width: 960px;
  margin: 24px auto 36px auto;
  padding: 24px 28px;
  text-align: center;
  background: linear-gradient(180deg, #FFFFF0 0%, #F5F0E7 100%);
  border: 1px solid #D0C5B4;
  border-radius: 24px;
  box-shadow: 0 10px 28px rgba(103, 88, 102, 0.10);
  color: #675866;
}

.wwb-app-banner p {
  margin: 0 auto 14px auto;
  max-width: 820px;
  font-size: 1.08rem;
  line-height: 1.55;
}

.wwb-app-banner strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.15rem;
  color: #675866;
}

.wwb-app-banner .wp-block-button__link {
  background: #675866;
  color: #FABE51;
  border: 1px solid #FABE51;
  border-radius: 999px;
  padding: 12px 24px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(103, 88, 102, 0.18);
}

.wwb-app-banner .wp-block-button__link:hover {
  background: #584a57;
  color: #FABE51;
}

/* Membership section of front-facing webpage
   Current structure:
   .wwb-membership-section
     .wwb-membership-scroll
       .wwb-membership-card as a Columns block
*/

.wwb-membership-section {
  max-width: 1120px;
  margin: 56px auto;
  padding: 0 22px;
  color: #675866;
  text-align: center;
}

.wwb-membership-section > h2,
.wwb-membership-section > h3 {
  color: #675866;
  margin-bottom: 14px;
}

.wwb-membership-section > p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}

/* Container that holds the three membership cards */
.wwb-membership-scroll {
  max-width: 920px;
  margin: 34px auto 0 auto;
}

/* Each membership card — applied to the Columns block */
.wwb-membership-card.wp-block-columns,
.wwb-membership-card {
  display: block !important;
  width: 100%;
  max-width: 760px;
  min-height: auto !important;
  height: auto !important;
  margin: 0 auto 38px auto !important;
  padding: 34px 26px 36px 26px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #FFFFF0 0%, #F5F0E7 100%);
  border: 1px solid #FABE51;
  border-radius: 34px;
  box-shadow: 0 12px 30px rgba(103, 88, 102, 0.09);
  color: #675866;
  text-align: center;
  overflow: visible;
}

/* Neutralize the inner column so it behaves like normal vertical content */
.wwb-membership-card > .wp-block-column,
.wwb-membership-card .wp-block-column {
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: 100% !important;
  flex-grow: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center;
}

/* Images */
.wwb-membership-card figure,
.wwb-membership-card .wp-block-image {
  margin: 0 auto 22px auto !important;
  text-align: center;
}

.wwb-membership-card img {
  width: 168px;
  max-width: 168px;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* Text */
.wwb-membership-card h3,
.wwb-membership-card h4 {
  color: #675866;
  margin: 0 0 10px 0;
  line-height: 1.25;
}

.wwb-membership-card .wwb-tier-subtitle {
  color: #FABE51;
  font-style: italic;
  font-weight: 600;
  margin: 0 0 22px 0;
  line-height: 1.35;
}

.wwb-membership-card p {
  max-width: 560px;
  margin: 0 auto 24px auto;
  font-size: 1rem;
  line-height: 1.55;
}

/* Buttons */
.wwb-membership-card .wp-block-buttons {
  justify-content: center;
  margin-top: 28px !important;
  margin-bottom: 0 !important;
}

.wwb-membership-card .wp-block-button__link {
  background: #675866;
  color: #FABE51;
  border: 1px solid #FABE51;
  border-radius: 999px;
  padding: 12px 28px;
  font-weight: 700;
  text-transform: none !important;
  box-shadow: 0 6px 16px rgba(103, 88, 102, 0.18);
}

.wwb-membership-card .wp-block-button__link:hover {
  background: #584a57;
  color: #FABE51;
}

/* Mobile cleanup */
@media (max-width: 781px) {
  .wwb-membership-section {
    margin: 42px auto;
    padding: 0 18px;
  }

  .wwb-membership-scroll {
    max-width: 100%;
    margin-top: 28px;
  }

  .wwb-membership-card.wp-block-columns,
  .wwb-membership-card {
    max-width: 100%;
    margin: 0 auto 32px auto !important;
    padding: 30px 22px 34px 22px;
    border-radius: 30px;
  }

  .wwb-membership-card img {
    width: 150px;
    max-width: 150px;
  }

  .wwb-membership-card p {
    font-size: 1rem;
    line-height: 1.55;
  }

  .wwb-membership-card .wp-block-buttons {
    margin-top: 26px !important;
  }
}



/* ========================================================================
   ✨ WHISPERING WINGS WELLBEING — HOME HERO LIGHT ANIMATION SYSTEM ✨
   ------------------------------------------------------------------------
   PURPOSE:
   Creates subtle “light codes” (cross beams), an angelic bloom (soft aura),
   and angelic twinkle glints layered over the homepage hero image.

   DESIGN INTENT:
   • Ethereal, luminous, sacred aesthetic
   • Angelic + feathered glints (NOT harsh circles)
   • Visible even on bright ivory/gold backgrounds
   • Brand-aligned lavender + gold accents
   • Fully non-interactive (pointer-events disabled)

   MAINTAINABILITY NOTES:
   • All effects are scoped under `.light-container`
   • One "BURST POINT" controls where the cross + bloom sit:
       - Adjust --burst-x and --burst-y ONLY
   • Z-index layering:
       - 1 = hero image (your actual hero)
       - 2 = angelic bloom (soft aura)
       - 3 = cross beams + stars (sparkle layer)
   • Motion respects prefers-reduced-motion
   • Safe to adjust star positions + timing
   ======================================================================== */


/* ========================================================================
   ✅ HERO LIGHT CONTAINER + BURST POINT ANCHOR
   ------------------------------------------------------------------------
   The single most important maintainability feature:
   Move the cross/bloom by changing ONLY these two variables.
   ======================================================================== */

.light-container {
  /* 🔧 TUNE THESE ONLY (until cross sits perfectly on the wing burst) */
  --burst-x: 50%;
  --burst-y: 50%;

  /* ✅ RELIABLE (matches your debug success): use px, not % */
--beam-v-size: 500px;  /* vertical length */
--beam-h-size: 350px;  /* horizontal length */
  --beam-thickness: 4px;       /* thickness of the cross */
  --beam-opacity-min: 0.22;    /* baseline visibility */
  --beam-opacity-max: 0.90;    /* max pulse visibility */

  /* Bloom tuning */
  --bloom-size: 180px;
  --bloom-opacity: 0.55;

  position: relative;
  isolation: isolate;   /* prevents stacking-context issues */
  overflow: hidden;     /* prevents glow overflow scrollbars */
  min-height: 400px;    /* adjust if hero height changes */
  min-width: 400px;
}


/* ========================================================================
   ✨ WWB — LIGHT CODE CROSS (APP HERO VERSION, RELIABLE VISIBILITY)
   ------------------------------------------------------------------------
   This is designed to look good in bright hero images AND WKWebView.
   No blend-modes. No percent sizing. No width/height expansion animation.
   ======================================================================== */

/* Shared base */
.light-codes-vertical,
.light-codes-horizontal {
  position: absolute;
  left: var(--burst-x);
  top: var(--burst-y);
  pointer-events: none;
  z-index: 3;

  opacity: var(--beam-opacity-min);
  filter: blur(2px);               /* readable + angelic */
  transform-origin: center;
  will-change: transform, opacity;

  box-shadow:
    0 0 14px rgba(255,255,255,0.20),
    0 0 18px rgba(178,124,245,0.22),
    0 0 10px rgba(250,190,81,0.12);
}

/* Vertical beam */
.light-codes-vertical {
  width: var(--beam-thickness);
  height: var(--beam-v-size);
  transform: translate(-50%, -50%) scaleY(0.90);

  /* Brightest at center, feathered ends */
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.00) 0%,
    rgba(250,190,81,0.14) 18%,
    rgba(255,255,255,0.90) 82%,
    rgba(178,124,245,0.14) 90%,		
    rgba(255,255,255,0.00) 100%
  );

  animation: wwbBeamV 4.8s infinite ease-in-out;
}

/* Horizontal beam */
.light-codes-horizontal {
  width: var(--beam-h-size);
  height: var(--beam-thickness);
  transform: translate(-50%, -50%) scaleX(0.90);

  background: linear-gradient(
    to right,
    rgba(255,255,255,0.00) 0%,
    rgba(178,124,245,0.14) 22%,
    rgba(255,255,255,0.90) 50%,
    rgba(250,190,81,0.14) 78%,
    rgba(255,255,255,0.00) 100%
  );

  animation: wwbBeamH 4.8s infinite ease-in-out;
}

/* Beam pulse animations (no size expansion; just breathe) */
@keyframes wwbBeamV {
  0%, 100% {
    opacity: var(--beam-opacity-min);
    transform: translate(-50%, -50%) scaleY(0.90);
  }
  45% {
    opacity: var(--beam-opacity-max);
    transform: translate(-50%, -50%) scaleY(1.02);
  }
}

@keyframes wwbBeamH {
  0%, 100% {
    opacity: var(--beam-opacity-min);
    transform: translate(-50%, -50%) scaleX(0.90);
  }
  45% {
    opacity: var(--beam-opacity-max);
    transform: translate(-50%, -50%) scaleX(1.02);
  }
}


/* ========================================================================
   🕊️ ANGELIC BLOOM (Soft Aura) — Replaces Ring-Like Pulse
   ------------------------------------------------------------------------
   Centered on the burst point (translate included).
   Visible but subtle. If too faint, increase --bloom-opacity.
   ======================================================================== */

.radial-pulse {
  position: absolute;
  left: var(--burst-x);
  top: var(--burst-y);
  width: var(--bloom-size);
  height: var(--bloom-size);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;

  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0.45) 0%,
      rgba(255,255,255,0.18) 18%,
      rgba(178,124,245,0.12) 38%,
      rgba(250,190,81,0.08) 52%,
      rgba(255,255,255,0.00) 78%
    ),
    radial-gradient(circle at 40% 35%,
      rgba(255,255,255,0.18) 0%,
      rgba(255,255,255,0.00) 60%
    ),
    radial-gradient(circle at 60% 65%,
      rgba(250,190,81,0.10) 0%,
      rgba(255,255,255,0.00) 65%
    );

  filter: blur(9px);
  opacity: var(--bloom-opacity);

  transform: translate(-50%, -50%);
  animation: angelicBloom 5.5s infinite ease-in-out;
  will-change: transform, opacity;
}

@keyframes angelicBloom {
  0%   { opacity: calc(var(--bloom-opacity) * 0.55); transform: translate(-50%, -50%) scale(0.92); }
  45%  { opacity: var(--bloom-opacity);             transform: translate(-50%, -50%) scale(1.06); }
  100% { opacity: calc(var(--bloom-opacity) * 0.55); transform: translate(-50%, -50%) scale(0.92); }
}


/* ========================================================================
   ✨ TEXT FADE + GLOW EFFECTS
   ======================================================================== */

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

.fade-in {
  opacity: 0;
  animation: fadeUp 1s ease forwards;
}

/* Safe to adjust timing */
.fade-delay-1 { animation-delay: 0.3s; }
.fade-delay-2 { animation-delay: 0.6s; }
.fade-delay-3 { animation-delay: 0.9s; }
.fade-delay-4 { animation-delay: 1.2s; }

.glow-text {
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.7),
    0 0 12px rgba(250, 190, 81, 0.4),
    0 0 18px rgba(178, 124, 245, 0.3);
}


/* ========================================================================
   🕊️ ANGELIC TWINKLING STARS — Glints (Less Circular)
   ======================================================================== */

.angelic-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.star {
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  opacity: 0.75;

  background:
    radial-gradient(circle,
      rgba(255,255,255,0.70) 0%,
      rgba(255,255,255,0.20) 22%,
      rgba(178,124,245,0.10) 42%,
      rgba(255,255,255,0.00) 72%
    ),
    linear-gradient(to right,
      rgba(255,255,255,0.00),
      rgba(255,255,255,0.35),
      rgba(255,255,255,0.00)
    ),
    linear-gradient(to bottom,
      rgba(255,255,255,0.00),
      rgba(250,190,81,0.18),
      rgba(255,255,255,0.00)
    );

  filter: blur(0.2px);

  box-shadow:
    0 0 16px rgba(255,255,255,0.22),
    0 0 26px rgba(178,124,245,0.18);

  animation: angelicTwinkle 6s infinite ease-in-out;
  will-change: transform, opacity;
}

/* Star positioning — safe to edit */
.aura1 { top: 28%; left: 38%; width: 20px; height: 20px; animation-delay: 0s; }
.aura2 { top: 20%; left: 42%; width: 14px; height: 14px; animation-delay: 1s; }
.aura3 { top: 22%; left: 56%; width: 14px; height: 14px; animation-delay: 2s; }

.aura4 {
  top: 35%;
  left: 55%;
  width: 28px;
  height: 28px;
  animation-delay: 3s;

  background:
    radial-gradient(circle,
      rgba(250,190,81,0.72) 0%,
      rgba(255,255,255,0.18) 28%,
      rgba(255,255,255,0.00) 75%
    ),
    linear-gradient(to right,
      rgba(255,255,255,0.00),
      rgba(250,190,81,0.22),
      rgba(255,255,255,0.00)
    ),
    linear-gradient(to bottom,
      rgba(255,255,255,0.00),
      rgba(255,255,255,0.22),
      rgba(255,255,255,0.00)
    );

  box-shadow:
    0 0 22px rgba(250, 190, 81, 0.24),
    0 0 14px rgba(178, 124, 245, 0.14);
}
/* New star — soft lavender glint */
.aura5 {
  top: 30%;
  left: 48%;
  width: 16px;
  height: 16px;
  animation-delay: 1.7s;
}

/* New star — smaller subtle shimmer */
.aura6 {
  top: 38%;
  left: 62%;
  width: 12px;
  height: 12px;
  animation-delay: 3.9s;
}


@keyframes angelicTwinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.92); }
  45%      { opacity: 0.80; transform: scale(1.10); }
  60%      { opacity: 0.55; transform: scale(1.02); }
}


/* ========================================================================
   ♿ ACCESSIBILITY — REDUCED MOTION SUPPORT
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  .star,
  .light-codes-vertical,
  .light-codes-horizontal,
  .radial-pulse {
    animation: none !important;
  }
}


/* =======================================================================
   🕊️ WHISPERING WINGS WELLBEING — PROFILE PAGE CUSTOM CSS
   Scope: Profile / Account-related UI (PMPro + Avatar plugin + custom cards)
   Palette:
     Plum: #675866
     Gold: #FABE51
     Ivory: #FFFFF0
   ======================================================================= */


/* =======================================================================
   1) Avatar image styling (custom vs default)
   ======================================================================= */



/* Custom uploaded avatar: gold ring + soft shadow */
.profile-logo.custom-avatar {
  border: 2px solid #FABE51;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

/* Default avatar: no ring */
.profile-logo.default-avatar {
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

/* =======================================================================
   HEADER PROFILE AVATAR (Logged-In Only)
   -----------------------------------------------------------------------
   Purpose:
   - Force circular crop of header avatar image
   - Preserve gold ring + subtle shadow
   - Prevent empty circle from rendering when logged out
   - Avoid dependency on custom-avatar/default-avatar classes
   -----------------------------------------------------------------------
   Strategy:
   - Only style avatar when body has .logged-in
   - Use the link as a circular mask (overflow hidden)
   - Force image to fully fill the mask
   ======================================================================= */


/* -----------------------------------------------------------------------
   1) Hide entire avatar container when NOT logged in
   ----------------------------------------------------------------------- */

body:not(.logged-in) .header-profile-logo {
  display: none !important;
}


/* -----------------------------------------------------------------------
   2) Logged-in avatar container becomes circular mask
   ----------------------------------------------------------------------- */

body.logged-in .header-profile-logo .profile-logo-link {
  display: inline-block;
  width: 50px;                 /* Adjust if you want larger */
  height: 50px;
  border-radius: 999px;
  overflow: hidden;            /* Crops image into circle */
  border: 2px solid #FABE51;   /* Brand gold ring */
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}


/* -----------------------------------------------------------------------
   3) Force avatar image to fully fill circular mask
   ----------------------------------------------------------------------- */

body.logged-in .header-profile-logo img.profile-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 999px;        /* Extra safety against theme overrides */
}


/* =======================================================================
   2) Unified button styling (PMPro + WP login)
   Matches Neve/.is-style-primary look across forms
   ======================================================================= */

.pmpro_btn-submit-update-profile,
.pmpro_btn-submit-change-password,
.pmpro_btn-submit,                 /* "Get New Password" + some PMPro forms */
.pmpro_btn-cancel,
.pmpro_btn-submit-checkout,
a.pmpro_btn,
#wp-submit,
input[name="manage_avatar_submit"] /* Avatar plugin submit */
{
  background-color: #675866 !important;
  color: #FABE51 !important;
  padding: 10px 26px;
  border-radius: 999px !important;
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  text-align: center;
  border: 2px solid #FABE51 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  margin: 8px;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

/* Hover: ivory background + plum text + inset gold ring */
.pmpro_btn-submit-update-profile:hover,
.pmpro_btn-submit-change-password:hover,
.pmpro_btn-submit:hover,
.pmpro_btn-cancel:hover,
.pmpro_btn-submit-checkout:hover,
a.pmpro_btn:hover,
#wp-submit:hover,
input[name="manage_avatar_submit"]:hover {
  background-color: #FFFFF0 !important;
  color: #675866 !important;
  box-shadow: 0 0 0 2px #FABE51 inset;
  text-shadow: 0 0 2px #FABE51;
  font-weight: 700;
  outline: none;

  /* Keep border consistent (avoid 2px -> 1px “jump” on hover) */
  border: 2px solid #FABE51 !important;
}


/* =======================================================================
   3) Form layout consistency (PMPro)
   ======================================================================= */

/* Center groups of form submit buttons */
.pmpro_form_submit {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* Consistent bottom spacing on PMPro forms */
.pmpro_form {
  padding-bottom: 2rem;
}


/* =======================================================================
   4) PMPro success message styling
   ======================================================================= */

.pmpro_message.pmpro_success {
  background-color: #fef9eb !important;
  color: #675866 !important;
  border: 2px solid #FABE51 !important;
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  box-shadow: 0 0 5px rgba(250, 190, 81, 0.3);
}

/* Hide any link inside success messages (keeps it clean) */
.pmpro_message.pmpro_success a {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}


/* =======================================================================
   5) WP password strength indicator (on password reset/change flows)
   ======================================================================= */

#pass-strength-result {
  background-color: #FFFFF0 !important;
  color: #FABE51 !important;
  border: 2px solid #FABE51 !important;
  border-radius: 20px;
  font-weight: 600;
  padding: 8px 16px;
  font-size: 14px;
  text-align: center;
  margin-top: 10px;
  box-shadow: 0 0 5px #FABE51;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* Strength-level tweaks */
#pass-strength-result.bad {
  color: #e57373 !important;
  border-color: #e57373 !important;
}

#pass-strength-result.good {
  color: #fbc02d !important;
  border-color: #fbc02d !important;
}

#pass-strength-result.strong {
  color: #FABE51 !important;
  border-color: #FABE51 !important;
}


/* =======================================================================
   6) Profile Page — Edit Profile "Unified Card" layout
   ======================================================================= */

/* Outer card wrapper you created */
.wwb-profile-info-card {
  padding: 24px;
}

/* Flatten the inner PMPro card generated by shortcode */
.wwb-profile-info-card .pmpro_card {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
  margin: 0;
}

/* Remove extra form spacing inside flattened card */
.wwb-profile-info-card .pmpro_card form.pmpro_form {
  margin: 0;
}

/* Reduce extra vertical space PMPro adds around the profile form */
.wwb-profile-info-card #pmpro_member_profile_edit,
.wwb-profile-info-card #pmpro_member_profile_edit .pmpro_section_content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* =======================================================================
   7) Password sub-section inside the Profile card
   - Keeps text left aligned
   - Centers only the button/CTA
   ======================================================================= */

.wwb-profile-security-row {
  margin-top: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(103, 88, 102, 0.07);
}

.wwb-profile-security-title {
  margin-bottom: 6px;
}

.wwb-profile-security-subtitle {
  margin-bottom: 14px;
  opacity: 0.8;
}

/* Center only the "Change Password" link/button */
.wwb-profile-security-row .wwb-change-password-link {
  display: inline-flex !important;
  width: fit-content !important;
  padding: 10px 22px;
  border-radius: 999px;
  text-decoration: none;
  margin: 0 auto;
}

.wwb-profile-security-cta {
  text-align: center;
}

/* Hide cancel everywhere by default */
.wwb-profile-info-card .pmpro_btn-cancel {
  display: none;
}

/* Show cancel only in change-password view */
.wwb-view-change-password .wwb-profile-info-card .pmpro_btn-cancel {
  display: inline-flex;
}

/* Hide the "password row" CTA area when actually on change-password view */
.wwb-view-change-password .wwb-profile-security-row {
  display: none;
}

/* Hide the floating Sections chip + sheet while changing password */
.wwb-view-change-password .wwb-sections-chip,
.wwb-view-change-password #wwb-sections-sheet {
  display: none !important;
}


/* =======================================================================
   8) Hide "Account Information" legend label on profile edit form
   ======================================================================= */

#member-profile-edit .pmpro_form_legend {
  display: none !important;
}


/* =======================================================================
   9) Profile Summary "2-column grid" (responsive)
   ======================================================================= */

.wwb-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 32px;
  margin-top: 20px;
}

.wwb-summary-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* prevents stretching / centering */
}

.wwb-summary-label {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  opacity: 0.7;
  margin-bottom: 4px;
}

.wwb-summary-value {
  font-size: 1rem;
}

/* Membership pill value (single definition — consolidated) */
.wwb-membership-value {
  display: inline-block;
  background: rgba(250, 190, 81, 0.18);
  color: #675866;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Mobile: single column */
@media (max-width: 768px) {
  .wwb-summary-grid {
    grid-template-columns: 1fr;
  }
}


/* =======================================================================
   10) Avatar Card layout (left column + right column UI)
   ======================================================================= */

.wwb-avatar-card {
  padding: 24px;
}

.wwb-avatar-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px 32px;
  align-items: start;
}

@media (max-width: 768px) {
  .wwb-avatar-grid {
    grid-template-columns: 1fr;
  }
}

.wwb-avatar-title {
  margin: 0 0 8px 0;
}

.wwb-avatar-subtitle {
  margin: 0;
  opacity: 0.8;
}

/* Prevent unwanted centering from plugin markup */
.wwb-avatar-right,
.wwb-avatar-right * {
  text-align: left;
}

/* If plugin outputs an img, make it nicely rounded */
.wwb-avatar-right img {
  border-radius: 999px;
}

/* File input spacing */
.wwb-avatar-right input[type="file"] {
  margin: 10px 0 14px;
}

/* Controls inside avatar area feel consistent */
.wwb-avatar-right input[type="submit"],
.wwb-avatar-right button,
.wwb-avatar-right .button {
  border-radius: 999px;
  padding: 10px 22px;
}

/* END PROFILE PAGE CUSTOMIZATION* 
 * 

/* Customize PM Pro No Access Display*/

/* =========================================
   WWB PMPro No Access Card (Full Card Skin)
   ========================================= */
.wwb-no-access-card {
  max-width: 980px;
  margin: 28px auto;

  /* Card look */
  background: #fffff0;
  border: 1px solid #FABE51;
  border-radius: 18px;
  overflow: hidden;
}

/* Header separation + spacing */
.wwb-no-access-card .pmpro_card_header {
  padding: 22px 24px 16px;
  border-bottom: 1px solid rgba(103, 88, 102, 0.18);
}

.wwb-no-access-card .pmpro_card_title {
  margin: 0;
}

/* Content padding */
.wwb-no-access-card .pmpro_card_content {
  padding: 18px 24px 22px;
}

/* Body text */
.wwb-no-access-card .pmpro_card_body p {
  margin: 0.25rem 0 0;
}

/* Actions */
.wwb-no-access-card .pmpro_card_actions {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* Your required-access helper line */
.wwb-no-access-card .wwb-required-access {
  display: inline-block;
  margin-top: 10px;
  opacity: 0.85;
}

/* =========================
   📱 iOS/App variant styling
   ========================= */

/* Slightly narrower in app */
.wwb-no-access--app {
  max-width: 720px;
}

/* Choose ONE style for app:
   Option A (Profile-card style): left aligned text + left actions
*/
.wwb-no-access--app .pmpro_card_header,
.wwb-no-access--app .pmpro_card_body {
  text-align: left;
}
.wwb-no-access--app .pmpro_card_actions {
  justify-content: flex-start;
}

/* --- OR --- Option B (Gate style): centered text + centered actions
.wwb-no-access--app .pmpro_card_header,
.wwb-no-access--app .pmpro_card_body {
  text-align: center;
}
.wwb-no-access--app .pmpro_card_actions {
  justify-content: center;
}
*/

/* Mobile polish */
@media (max-width: 480px) {
  .wwb-no-access-card {
    margin: 18px 12px;
    border-radius: 16px;
  }

  .wwb-no-access-card .pmpro_card_header,
  .wwb-no-access-card .pmpro_card_content {
    padding-left: 16px;
    padding-right: 16px;
  }
	  /* Keep buttons natural width */
  .wwb-no-access-card .pmpro_card_actions {
    justify-content: center; /* or flex-start if left aligned */
  }
}










/* Start Feature page customizations */

/* Feature container - Ensures consistent height and alignment */
.feature-container {
    position: relative;
    min-height: 250px; /* Adjust based on the tallest container */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
		margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  	overflow: visible !important; /* Ensures child positioning doesn’t affect spacing */
}

.lock-icon {
    height: 40px !important;  /* Ensure the grey circle is 40px */
    width: 40px !important;
    background: rgba(0, 0, 0, 0.5) !important; /* Semi-transparent grey background */
    border-radius: 50% !important; /* Ensures it stays circular */
    display: flex !important; /* Centers content */
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    bottom: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    cursor: pointer !important;
    overflow: hidden !important; /* Ensures images do not exceed the circle */
}

.lock-icon img {
    max-width: 60% !important;  /* Shrinks the icon inside the circle */
    max-height: 60% !important; /* Keeps proportions */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important; /* Prevents distortion */
    display: block !important;
}

/* Desktop (large screens, 1025px and up) */
@media screen and (min-width: 1025px) {
  body.page-id-315 .sacred-divider {
    margin-top: 60px !important;     /* more breathing room */
    margin-bottom: -40px !important; /* keeps next row close */
    padding: 0 !important;
  }
}

/* Tablet (between 769px and 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  body.page-id-315 .sacred-divider {
    margin-top: 50px !important;     /* slightly less than desktop */
    margin-bottom: -60px !important; /* balanced pull-up */
    padding: 0 !important;
  }
}

/* Mobile (up to 768px) */
@media screen and (max-width: 768px) {
  body.page-id-315 .sacred-divider {
    margin-top: 20px !important;      /* tight above */
    margin-bottom: -120px !important; /* strong pull into stacked columns */
    padding: 0 !important;
  }
}

/* Remove space between text above first column */

body.page-id-315 .wp-block-spacer {
  display: none !important; /* removes spacer completely */
}

/*
body.page-id-315 .wp-block-spacer {
  height: -50px !important; /* or 5px if you want it very tight */
} */

/* Add margin reset to .wp-block-columns (controls row spacing) */ 

.wp-block-columns {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Reduce space between stacked row blocks */
body.page-id-315 .wp-block-columns + .wp-block-columns {
  margin-top: -50px !important; /* You can tweak this */
}

/* General column alignment for WP block columns */
.wp-block-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
	  min-height:250px;
	  margin-bottom: 0 !important;
}

/* Set a fixed height for text container to ensure text alignment */

.wp-block-column p {
	  min-height: 40px; /* Adjust based on the longest text */
    line-height: 1.4; /* Keeps text spacing consistent */
	  margin: 5px 0 !important; /* Remove unnecessary margins */
    padding: 0 !important;
}

/* Shrink margin between sybmols and first column on desktop */ 

@media (min-width: 782px) {
  body.page-id-315 .wp-block-columns.is-layout-flex {
    margin-top: -50px !important; /* You can reduce even further if needed */
  }

  body.page-id-315 .wp-block-columns + .wp-block-columns {
    margin-top: 5px !important;
  }

  body.page-id-315 p.has-text-align-center.sacred-divider {
    margin-bottom: 5px !important;
  }
}

/* End Feature Page Customizations */


/* Test to reduce space around lock icon */
/* Adjust lock icon vertical positioning */
.feature-container {
    padding-bottom: -85px !important; /* keeps icon inside, reduce if needed */
}

.lock-icon {
    bottom: 0px !important; /* move up from below the box */
}


/* Tighten spacing above labels under the icons */
.feature-container p {
    margin-top: -100px !important;   /* reduce space above text */
    margin-bottom: 10 !important;  /* prevent extra gap below */
    line-height: 1.2 !important;  /* keep text compact */
    padding: 0 !important;
}

/* Target only captions directly after a feature container */
.feature-container + p {
    margin-top: -30px !important;  /* tighten space above caption */
    margin-bottom: 0 !important;
    line-height: 1.2;
    font-size: 14px;
    text-align: center;
}

/* End Test */

/* Display butterfly membership levels in Membership account page */

.pmpro-membership-levels {
    width: 100%;
    margin: 0 auto;
    max-width: 800px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;
}

.pmpro-table-header, .pmpro-table-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.pmpro-table-header {
    background-color: #f9f9f9;
    font-weight: bold;
    text-transform: uppercase;
    color: #555;
}

.pmpro-column {
    flex: 1;
    text-align: left;
    padding: 5px;
}

.pmpro-column-level {
    flex: 2;
    display: flex;
    align-items: center;
}

.butterfly-icon {
    width: 150px;
    height: 150px;
    margin-right: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.pmpro-column-price {
    flex: 1;
    text-align: center;
}

.pmpro-column-action {
    flex: 1;
    text-align: right;
}

.pmpro-btn {
    background-color: #ffc107;
    color: #fff;
    padding: 8px 12px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease-in-out;
}

.pmpro-btn:hover {
    background-color: #e0a800;
}

.pmpro-current-level {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    padding: 8px 12px;
    color: #666;
    font-weight: bold;
    border-radius: 5px;
}

@media (max-width: 768px) {
    .pmpro-table-header, .pmpro-table-row {
        flex-direction: column;
        text-align: left;
    }

    .pmpro-column {
        flex: 1 0 100%;
        padding: 10px 5px;
    }

    .pmpro-column-action {
        text-align: center;
    }
}

.disable-click {
    pointer-events: none;
    filter: grayscale(80%);
}
.pmpro-has-membership .disable-click {
    pointer-events: auto;
    filter: none;
}

/* .hfg_footer .footer-bottom-inner p {
    display: none !important;
} */


/* Hide wpForo topic footer section */
#wpforo #wpforo-wrap .wpf-foot {
    display: none !important;
}


/* Hide wpForo Topic Footer in Post-Level Pages */
#wpforo #wpforo-wrap .wpf-topic-footer,
#wpforo #wpforo-wrap .wpf-topic-navi {
    display: none !important;
}

/* Hide the "Forum Home" and "Recent Posts" buttons in wpForo profile pages */
.wpforo-profile .wpforo-profile-back {
    display: none !important;
}

.no-border-table td {
    border-bottom: none !important;
}

/* Fade in the symbol bar on all the pages */

@keyframes glowIn {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

.sacred-divider {
  animation: glowIn 1s ease-out forwards;
  opacity: 0;
}


/* Remove logout message on Vote page from Feature Requests plugin */

.sfr-sidebar-widget--login {
    display: none !important;
}


/* Membership Cancel Customization */

/* 🌙 Hide only the default cancellation text, keep the buttons */

#pmpro_cancel .pmpro_card_content p {
  display: none !important;
}


/* Membership Checkout */ 


/* Hide the default price text below each level as it is displayed on the buttons */
.pmpro_level-price {
  display: none !important;
}

/* Hide PMPro membership level text on checkout page */
.pmpro_level_name_text {
  display: none !important;
}

/* Hide PMPro membership level text on checkout page */
.pmpro_level_cost_text {
  display: none !important;
}

/* Fix all the button labels in all the layouts */

/* Hide default "Select" text without affecting layout */
.pmpro_btn-select {
  font-size: 0 !important;
  position: relative;
  display: inline-block;
  line-height: 1.2;
  text-align: center;
  font-weight: bold;
}

.pmpro_btn-select::before {
  white-space: pre-line !important; /* Enables line break (\A) */
  font-size: 1rem;
  color: #FABE51;
  font-weight: bold;
  display: block;
  text-align: center;
  line-height: 1.4;
}


/* Mobile + Desktop: Wings of Discovery */
#pmpro_level-1 a.pmpro_btn-select::before,
table#pmpro_levels thead th.pmpro_level:nth-child(2) a.pmpro_btn-select::before,
table#pmpro_levels tfoot td.pmpro_level:nth-child(2) a.pmpro_btn-select::before {
  content: "Choose This Path\A \A $11.00/month";
}

/* Mobile + Desktop: Wings of Transformation */
#pmpro_level-2 a.pmpro_btn-select::before,
table#pmpro_levels thead th.pmpro_level:nth-child(3) a.pmpro_btn-select::before,
table#pmpro_levels tfoot td.pmpro_level:nth-child(3) a.pmpro_btn-select::before {
  content: "Choose This Path\A \A $22.00/month";
}

/* Mobile + Desktop: Wings of Light */
#pmpro_level-3 a.pmpro_btn-select::before,
table#pmpro_levels thead th.pmpro_level:nth-child(4) a.pmpro_btn-select::before,
table#pmpro_levels tfoot td.pmpro_level:nth-child(4) a.pmpro_btn-select::before {
  content: "Choose This Path\A \A$33.00/month";
}


/* Fix the table display on the different views */

/* MOBILE VIEW: Golden box styling for each level */
@media (max-width: 768px) {
  .pmpro_level {
    border: 2px solid #FABE51;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 30px;
    background-color: #fffef8; /* optional soft background */
    box-shadow: 0 4px 10px rgba(250, 190, 81, 0.3); /* subtle gold glow */
  }
}

/* Wings of Insight */ 

.mwai-chatbot-container,
.mwai-chatbot-container * {
  font-family: 'Libre Baskerville', serif !important;
}
/* 🟡 Styled Send Button */
.mwai-input-submit {
  background-color: #FABE51 !important;
  color: #675866 !important;
  font-family: 'Libre Baskerville', serif;
  font-size: 1rem;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 0.6rem 1.4rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(250, 190, 81, 0.3);
}

.mwai-input-submit:hover {
  background-color: #675866 !important;
  color: #FFFBEF !important;
  box-shadow: 0 0 8px #FABE51;
  cursor: pointer;
}

/* Events page */

/* === Subscribe to Calendar Button === */
.tribe-events-c-subscribe-dropdown__button {
  background-color: #675866 !important;
  color: #FABE51 !important;
  padding: 10px 26px;
  border-radius: 2rem !important;
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid #FABE51 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Hover effect */
.tribe-events-c-subscribe-dropdown__button:hover {
  background-color: #FABE51 !important;
  color: #675866 !important;
  border-color: #675866 !important;
}

/* === Find Events Button === */
.tribe-events-c-search__button {
  background-color: #675866 !important;
  color: #FABE51 !important;
  padding: 10px 26px;
  border-radius: 2rem !important;
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid #FABE51 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Hover effect */
.tribe-events-c-search__button:hover {
  background-color: #FABE51 !important;
  color: #675866 !important;
  border-color: #675866 !important;
}
/* ✨ Whispering Wings Header for Events Page */

.events-page-header {
  text-align: center;
  padding: 3rem 1.5rem 2rem;
  background-color: #FFFFF0;
  margin-bottom: 2rem;
	font-weight: 700;
}

.events-page-header .section-title {
  font-size: 2.75rem;
  color: #575866;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.events-page-header .mantra h3 {
  font-weight: bold;
  color: #FABE51;
  margin: 1rem 0; /* Controls space above and below each line */
  line-height: 1.5;
  text-align: center;
}


.events-separator {
  color: #D0C5B4;
  font-size: 1.3rem;
  margin: 2.6rem auto;
  letter-spacing: 0.1em;
}

.events-page-header .intro {
  font-size: 1.05rem;
  color: #575866;
  max-width: 700px;
  margin: 1.5rem auto 0;
  line-height: 1.7;
	text-align: center;
	font-weight: bold;
}

/* Change Search videos... text in vimeography galleries */ 

/* Hide the real placeholder */
input.input::placeholder {
    color: transparent;
}

/* Setup the label for fake placeholder */
label.container {
    position: relative;
    display: block;
}

/* Fake placeholder inside the label */
label.container::before {
    content: "Search Meditations...";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999; /* Placeholder color */
    font-size: 14px;
    pointer-events: none;
    transition: opacity 0.3s;
    opacity: 1;
}

/* When typing or focused, hide the fake placeholder */
label.container.typing::before {
    opacity: 0;
}


/* Hide Get Tickets section for Wings of Light members on Events page */
/*
body.pmpro-level-3.post-type-archive-tribe_events .tribe-events-c-small-cta {
    display: none !important;
}*/

/* Shrink the Wings of Transformation text on the Features and Weekly Challenge page */
.wings-transformation-text {
  text-align: center;
  font-size: 14px;
  white-space: break-word;
  font-family: 'Libre Baskerville', serif; /* ✅ Add this line */
}

@media (max-width: 480px) {
  .wings-transformation-text {
    font-size: 12px;
  }
}

/* Remove unliked videos from favorites */

.vimeo-showcase-item.removing {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Handle empty showcase displays */

.vimeo-showcase-empty {
  text-align: center;
  padding: 60px 20px;
  max-width: 600px;
  margin: 0 auto;
  color: #675866;
  background: #FFF8EF;
  border: 2px dashed #FAB851;
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(250, 184, 81, 0.15);
  animation: fadeIn 0.5s ease;
}

.vimeo-empty-title {
  font-size: 1.6rem;
  margin-bottom: 12px;
  font-weight: 600;
}

.vimeo-empty-description {
  font-size: 1rem;
  line-height: 1.6;
}

/* Optional fade-in */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === Custom Vimeo Showcase (Scoped Grid Fix) === */

.vimeo-showcase-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  width: 100%;
}

.vimeo-showcase-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.vimeo-showcase-wrapper .vimeo-showcase-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 20px;
}

.vimeo-showcase-wrapper .vimeo-showcase-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 📺 Video container inside grid */
.vimeo-showcase-wrapper .hover-vimeo-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.3s ease;
  background: #000;
}

/* Iframe inside thumbnail card (hidden by default) */
.vimeo-showcase-wrapper .hover-vimeo-container iframe {
  pointer-events: none;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  transition: opacity 0.3s ease;
}

/* Reveal iframe on play */
.vimeo-showcase-wrapper .hover-vimeo-container iframe.visible {
  pointer-events: auto !important;
  opacity: 1 !important;
  z-index: 3 !important;
  display: block !important;
  height: 100% !important;
}

/* 🖼️ Player container (shown on iframe visible) */
.vimeo-player-container {
  width: 100%;
  max-width: 100%;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}


/* Redundant safety (iframe inside hidden container) - Hide player iframe by default  */

.vimeo-player-container iframe {
  opacity: 0;
  height: 0;
  pointer-events: none;
  transition: all 0.4s ease;
  width: 100%;
  aspect-ratio: 16 / 9;
  transition: opacity 0.4s ease, height 0.4s ease;	
  display: block;
}

/* 👁️ Show player iframe when activated */
.vimeo-player-container iframe.visible {
  opacity: 1 !important;
  height: auto !important;   /* Let aspect-ratio define height */
  pointer-events: auto !important;
  display: block !important;
}

/* Optional: fallback height in case aspect-ratio fails */
.vimeo-player-container {
  width: 100%;
  max-width: 100%;
}

/* 🎞️ Thumbnail */
.vimeo-showcase-wrapper .vimeo-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
}

/* ▶️ Play button */
.vimeo-showcase-wrapper .vimeo-play-button {
  position: absolute;
  bottom: 22px;
  left: 12px;
  z-index: 2;
  width: 38px;
  aspect-ratio: 1 / 1;
  font-size: 1.2rem;
  color: #FAFAFA;
  background: rgba(103, 88, 102, 0.85);
  border: 2px solid #FAB851;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(250, 184, 81, 0.3);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
  line-height: 1;
}

.vimeo-showcase-wrapper .hover-vimeo-container:hover .vimeo-play-button {
  background: #FAB851;
  color: #675866;
  transform: scale(1.07);
  border-color: #675866;
  box-shadow: 0 0 6px rgba(250, 184, 81, 0.6), 0 0 2px rgba(103, 88, 102, 0.4);
}

/* ✨ Fade out thumbnail & play button */
.hover-vimeo-container .vimeo-thumbnail.faded,
.hover-vimeo-container .vimeo-play-button.faded {
  opacity: 0;
  pointer-events: none;
}

/* 📝 Title */
.vimeo-showcase-wrapper .vimeo-showcase-title {
  margin-top: 12px;
  margin-bottom: 8px;
  text-align: center;
  font-size: 1rem;
  color: #675866;
  min-height: 3.5em;
  line-height: 1.4;
  font-weight: 400;
}

/* 💛 Like Button */
.vimeo-showcase-wrapper .vimeo-showcase-like-button {
  margin-top: 8px;
  background: #675866;
  color: #FAB851;
  border: 2px solid #FAB851;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.vimeo-showcase-wrapper .vimeo-showcase-like-button:hover {
  transform: scale(1.1);
}

/* Fix like emoji (ensure only innerHTML is shown) */
.vimeo-showcase-wrapper .vimeo-showcase-like-button::after {
  content: none !important;
}

.vimeo-showcase-wrapper.vimeo-lazy .vimeo-gallery-skeleton{
  min-height: 520px; /* adjust to roughly 2–3 rows of thumbnails */
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.85;
}

/* Now Playing state */

.vimeo-showcase-item.is-now-playing {
  border: 2px solid #FAB851;
  border-radius: 14px;
  box-shadow: 0 0 12px rgba(250, 184, 81, 0.35);
  padding: 8px;
  transition: box-shadow 0.3s ease, border 0.3s ease;
}

.vimeo-now-playing-badge {
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #675866;
  color: #FAB851;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
}

/* =========================
   Favorites drag-and-drop ordering
   ========================= */

.vimeo-showcase-wrapper[data-gallery-type="liked"] .vimeo-showcase-gallery {
  align-items: start;
}

.vimeo-drag-handle {
  align-self: flex-end;
  margin-bottom: 8px;
  padding: 6px 10px;
  border: 1px solid #FAB851;
  border-radius: 999px;
  background: #FFF8EF;
  color: #675866;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: grab;

  /* 👇 NEW behavior */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.vimeo-drag-handle:active {
  cursor: grabbing;
}

.vimeo-showcase-item.is-dragging {
  opacity: 0.55;
  transform: scale(0.98);
}

.vimeo-favorites-save-status {
  margin: 0 auto 16px auto;
  text-align: center;
  color: #675866;
  font-size: 0.95rem;
  min-height: 1.4em;
}

/* =========================
   Sorting Mode UI (NEW)
   ========================= */

.vimeo-sort-controls {
  text-align: center;
  margin-bottom: 12px;
}

.vimeo-sort-toggle {
  padding: 10px 16px;
  border-radius: 999px;
  border: 2px solid #FAB851;
  background: #FFF8EF;
  color: #675866;
  font-weight: 600;
  cursor: pointer;
}

/* Show handles ONLY when sorting */
.vimeo-showcase-wrapper.sorting-active .vimeo-drag-handle {
  opacity: 1;
  pointer-events: auto;
}

/* Visual state when sorting is active */
.vimeo-showcase-wrapper.sorting-active .vimeo-showcase-item {
  transform: scale(0.98);
  box-shadow: 0 0 0 2px rgba(250, 184, 81, 0.25);
}

.vimeo-journey-status {
  text-align: center;
  margin: 8px auto 16px auto;
  color: #675866;
  font-size: 0.95rem;
  font-weight: 500;
  min-height: 1.4em;
}


/* Style Conact Form */

/* 🎯 WPForms Submit Button – Whispering Wings Style */
#wpforms-form-6634 .wpforms-submit {
  background-color: #675866 !important;
  color: #FABE51 !important;
  padding: 10px 26px !important;
  border-radius: 2rem !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  font-family: inherit !important;
  text-align: center !important;
  border: 2px solid #FABE51 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease !important;
  margin: 8px auto !important;
  display: inline-block !important;
  text-decoration: none !important;
  cursor: pointer !important;
  background-image: none !important; /* 🔥 override weird gradients */
}

/* ✨ Correct Hover Styling with Strong Override */
#wpforms-form-6634 .wpforms-submit:hover {
  background-color: #FFFFF0 !important;
  background-image: none !important; /* ❗ Critical fix for grey look */
  color: #675866 !important;
  box-shadow: 0 0 0 2px #FABE51 inset !important;
  text-shadow: 0 0 2px #FABE51 !important;
  font-weight: 700 !important;
  border: 1px solid #FABE51 !important;
}

/* 🧘 Optional: Center the submit button */
#wpforms-form-6634 .wpforms-submit-container {
  text-align: center !important;
}

/* Input & Textarea Styling */
#wpforms-form-6634 input[type="text"],
#wpforms-form-6634 input[type="email"],
#wpforms-form-6634 textarea {
  border: 1px solid #D0C5B4 !important;
  border-radius: 8px !important;
  padding: 10px !important;
  background-color: #FFFFF0 !important;
  color: #675866 !important;
  font-size: 16px !important;
  font-family: inherit !important;
  box-shadow: 0 2px 6px rgba(103, 88, 102, 0.15);
}

.wpforms-confirmation-container-full {
  background-color: #D0C5B4 !important; /* soft sand */
  color: #675866;
  border-radius: 16px;
  padding: 2em;
}

/* Hide the default confirmation text */

#pmpro_confirmation-1 > p:first-of-type {
  display: none !important;
}
#pmpro_confirmation-2 > p:first-of-type {
  display: none !important;
}
#pmpro_confirmation-3 > p:first-of-type {
  display: none !important;
}

/* Header page container */
.ww-container {
  max-width: 576px;   /* matches your narrow sections */
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Hide Neve's built in accessibility feature; Skip to Content */ 

.neve-skip-link {
  position: absolute;
  left: -9999px;  /* hide off screen */
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.neve-skip-link:focus {
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  overflow: visible;
  padding: 8px 16px;
  background: #fff; /* make visible only when focused */
  z-index: 1000;
}


/* WP EVENTS CUSTOMIZATIONS */

/* === WP Event Manager — unify buttons to your brand === */
/* Base buttons (Find Events, Registration chip, etc.) */
.wpem-theme-button,
.wpem-theme-button:visited,
button.wpem-theme-button,
a.wpem-theme-button,
#wpem-event-filter-version-2-search-btn.wpem-theme-button {
  background-color: #675866 !important;   /* plum */
  color: #FABE51 !important;               /* gold text */
  border: 2px solid #FABE51 !important;    /* gold border */
  border-radius: 2rem !important;          /* match your PMPro style */
  font-weight: 600;
}

/* Hover/focus: invert to gold background + plum text */
.wpem-theme-button:hover,
.wpem-theme-button:focus,
button.wpem-theme-button:hover,
a.wpem-theme-button:hover,
#wpem-event-filter-version-2-search-btn.wpem-theme-button:hover,
#wpem-event-filter-version-2-search-btn.wpem-theme-button:focus {
  background-color: #FABE51 !important;    /* gold */
  color: #675866 !important;               /* plum text */
  border-color: #675866 !important;        /* plum border */
}

/* Optional: a touch more padding like your PMPro buttons */
.wpem-theme-button { padding: 10px 26px !important; }

/* === View-toggle squares (grid/list/calendar) – kill the blue === */
.wpem-event-layout-action .wpem-event-layout-icon {
  background-color: #675866 !important;    /* plum */
  color: #FABE51 !important;               /* icon tint */
  border: 2px solid #FABE51 !important;    /* gold border */
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* Active/hover state: invert like buttons */
.wpem-event-layout-action .wpem-event-layout-icon:hover,
.wpem-event-layout-action .wpem-event-layout-icon.wpem-active-layout {
  background-color: #FABE51 !important;    /* gold */
  color: #675866 !important;               /* plum icon */
  border-color: #675866 !important;        /* plum border */
}

/* If you ALWAYS want to hide the blue "REGISTRATION" chip on listing cards */
.wpem-event-information .registration_button,
.wpem-event-details .registration_button,
.wpem-event-action-url .registration_button {
  display: none !important;
}

/* 4×2 grid for custom share icons */
.wwb-share-icons{
  display: grid !important;
  grid-template-columns: repeat(4, 40px);  /* 4 per row */
  gap: 10px 12px;                           /* row/column spacing */
  justify-content: start;
	align-items: start;
}

/* Consistent size + crisp icons */
.wwb-icon{
  width: 40px;
  height: 40px;
  aspect-ratio: 1 / 1;            /* belt-and-suspenders */
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;          /* <-- removes default button padding */
  line-height: 1;
  box-sizing: content-box;
  border: none;
  flex: none;
  -webkit-appearance: none;       /* normalize buttons on Safari/iOS */
  appearance: none;
}

.wwb-icon svg{ width: 18px; height: 18px }

/* Ensure the Copy Link icon keeps your brand colors even if other rules apply */
.wwb-copy{ background: #FABE51 !important; color: #675866 !important; }

/* Hover polish + accessible focus ring */
.wwb-icon:hover{ transform: translateY(-1px); filter: brightness(1.06); }
.wwb-icon:focus{ outline: 2px solid #FABE51; outline-offset: 2px; }

/* (Optional) slight shadow to lift off the page */
.wwb-icon{ box-shadow: 0 2px 6px rgba(0,0,0,.08); }

/*  Hide Registration Button on Events listing page 

 Hide WPEM "Registration" button on the Events listing page only
body.page-id-6354 .registration_button.wpem-theme-button { 
  display: none !important; 
} */

/* Underlined link style ONLY inside WP Event Manager single event content (won't hit header/menu) */
.single-event_listing .wpem-single-event-body a:not(.wpem-theme-button):not(.wwb-icon),
.single-event_listing .wpem-single-event-left-content a:not(.wpem-theme-button):not(.wwb-icon),
.single-event_listing .wpem-single-event-right-content a:not(.wpem-theme-button):not(.wwb-icon) {
  color: #FABE51 !important;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: #675866 !important;
  text-decoration-skip-ink: auto;
}

.single-event_listing .wpem-single-event-body a:not(.wpem-theme-button):not(.wwb-icon):hover,
.single-event_listing .wpem-single-event-left-content a:not(.wpem-theme-button):not(.wwb-icon):hover,
.single-event_listing .wpem-single-event-right-content a:not(.wpem-theme-button):not(.wwb-icon):hover,
.single-event_listing .wpem-single-event-body a:not(.wpem-theme-button):not(.wwb-icon):focus {
  color: #675866 !important;
  text-decoration-color: #675866 !important;
}


/* Keep share icon glyphs the intended colors */
.wwb-share-icons .wwb-icon { color: #fff !important; }   /* white glyphs */
.wwb-share-icons .wwb-copy { color: #675866 !important; }/* plum glyph on gold */

/* Event view count (eye icon + number) */
.single-event_listing .wpem-viewed-event,
.single-event_listing .wpem-viewed-event i,
.single-event_listing .wpem-viewed-event .wpem-icon-eye {
  color: #675866 !important;      /* plum */
}

/* Hover state */
.single-event_listing .wpem-viewed-event:hover {
  color: #FABE51 !important;       /* gold on hover */
}

/* Tooltip bubble */
.single-event_listing .wpem-viewed-event .wpem-tooltiptext {
  background: #675866 !important;  /* plum bubble */
  color: #FFFFF0 !important;       /* ivory text */
  border: 1px solid #FABE51 !important;
}

/* Tooltip arrow (covers both up/down variants) */
.single-event_listing .wpem-viewed-event.wpem-tooltip .wpem-tooltiptext::after {
  border-top-color: #675866 !important;
  border-bottom-color: #675866 !important;
}

/* --- LEGAL FOOTER (Whispering Wings) — FINAL --- */

/* Style all legal text consistently */
.hfg_footer .footer-bottom-inner .footer-legal,
.hfg_footer .footer-bottom-inner .footer-legal * {
  color: #FABE51 !important;         /* gold text */
  font-family: 'Libre Baskerville', serif;
  text-align: center;
  line-height: 1.6;
}

/* Each line gets its own block for readability */
.hfg_footer .footer-bottom-inner .footer-legal small {
  display: block;
  font-size: 14px;
  text-decoration: none !important;
}

/* Links: gold by default, ivory hover for contrast */
.hfg_footer .footer-bottom-inner .footer-legal a {
  color: #FABE51 !important;
  text-decoration: none;
}
.hfg_footer .footer-bottom-inner .footer-legal a:hover {
  color: #FFFFF0 !important;        /* ivory hover */
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #FFFFF0;
}

/* Hide footer credits (Neve | Powered by WordPress.com) on all breakpoints */
#site-footer .builder-item.cr {
  display: none !important;
}

/* ===== Footer legal: mobile polish & safe spacing ===== */
@media (max-width: 768px) {

  #site-footer .footer-legal {
    padding-top: 12px;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  #site-footer .footer-legal small {
    display: block;
    font-size: 12.5px;
    line-height: 1.5;
    margin-top: 8px;
  }

  #site-footer .footer-legal .legal-links {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.18);
  }
}

/* Hide the WPForm Create Account Button so that I can custimize */

/* body.page-id-7899 #wpforms-submit-7890 {
  display: none !important;
 } */

/* Shown when member clicks on page they are not members of */

/* Center the CTA button row and fix vertical alignment */
.pmpro_card_actions.wwb-levels-cta {
	display: flex;
	justify-content: center;
	margin-top: 18px;
}

.pmpro_card_actions.wwb-levels-cta .pmpro_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
	padding: 12px 22px;
}

/* Login line: single row, centered, with space above */
.pmpro_card_actions.wwb-login-cta {
	display: flex;
	justify-content: center;
	margin-top: 14px;
}

.wwb-login-inline {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}
/* Add breathing room under login line */
.pmpro_card_actions.wwb-login-cta {
	display: flex;
	justify-content: center;
	margin-top: 20px;
	margin-bottom: 40px; /* ← this is the key */
}

/* PMPro confirmation – hide account details ONLY for level 5 */
body.pmpro-confirmation #pmpro_confirmation-5 > p,
body.pmpro-confirmation #pmpro_confirmation-5 .pmpro_spacer,
body.pmpro-confirmation #pmpro_confirmation-5 .pmpro_card,
body.pmpro-confirmation #pmpro_confirmation-5 .pmpro_actions_nav {
  display: none !important;
}

/* =====================================
   WWB Privacy Section — Clean Version
   ===================================== */

/* Pull Privacy closer to Invoices */
#Privacy{
  margin-top: 24px !important;
  padding-top: 0 !important;
}

/* Reduce bottom spacing of Invoices section */
#pmpro_account-orders{
  margin-bottom: 24px !important;
}

/* Make Privacy card match Invoices width */
#Privacy.pmpro_account .pmpro_card{
  width: 100%;
  max-width: 100%;
  margin: 0;
}

/* Match invoice card padding */
#Privacy.pmpro_account .pmpro_card_content{
  padding: 18px 22px !important;
}

/* Remove Gutenberg internal spacing noise */
#Privacy.pmpro_account .pmpro_card_content > *{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Controlled paragraph spacing */
#Privacy.pmpro_account .pmpro_card_content p{
  margin: 10px 0 14px !important;
  max-width: 62ch;
}

/* Tighten heading spacing */
#Privacy .wp-block-heading{
  margin-bottom: 12px !important;
}

/* Mobile tuning */
@media (max-width: 600px){
  #Privacy.pmpro_account .pmpro_card_content{
    padding: 16px 16px !important;
  }
}

/* =====================================================
   WWB iOS-STYLE PAGE SECTIONS PATTERN (COMPLETE)
   ===================================================== */

/* ===============================
   Layout Width — Match PMPro
   =============================== */

.wwb-page-sections{
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* ===============================
   Top TOC Card (Tan Track Style)
   =============================== */

.wwb-page-sections .wwb-sections__card{
  background: rgba(208,197,180,1);
  border: 1px solid rgba(103,88,102,0.14);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.05);
  backdrop-filter: blur(8px);
}

/* Individual Rows */
.wwb-page-sections .wwb-sections__row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  text-decoration: none;
  font-weight: 600;
  color: rgba(103,88,102,0.95);
  background: rgba(208,197,180,0.55);
  border-bottom: 1px solid rgba(103,88,102,0.08);
  transition: background .2s ease, transform .1s ease;
}

/* Selected Row */
.wwb-page-sections .wwb-sections__row.is-active{
  background: rgba(255,255,240,1); /* solid ivory */
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.wwb-page-sections .wwb-sections__row:last-child{
  border-bottom: none;
}

.wwb-page-sections .wwb-sections__row:hover{
  background: rgba(255,255,240,1);
}

.wwb-page-sections .wwb-sections__row:active{
  transform: scale(.995);
}

.wwb-page-sections .wwb-sections__chev{
  opacity: .35;
  font-size: 18px;
}

/* ===============================
   Sticky Chip (Floating Control)
   =============================== */

.wwb-sections-chip{
  position: fixed;
  left: 50%;
  bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 999;
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  background: rgba(103,88,102,0.92);
  color: #FABE51;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  display: none; /* Hidden by default */
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform .15s ease;
}

.wwb-sections-chip:active{
  transform: translateX(-50%) scale(.97);
}

.wwb-sections-chip__current{
  color: #D0C5B4;
  opacity: 1;
}

/* Visible when JS adds class */
.wwb-sections-chip.is-visible{
  display: inline-flex;
}

/* ===============================
   Bottom Sheet
   =============================== */

.wwb-sheet{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none; /* Hidden by default */
}

.wwb-sheet.is-open{
  display: block;
}

/* Backdrop */
.wwb-sheet__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}

/* Panel */
.wwb-sheet__panel{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FFFFF0;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding: 18px 0 28px 0;
  box-shadow: 0 -20px 40px rgba(0,0,0,.18);
  animation: wwbSheetUp .25s ease forwards;
}

/* Slide Animation */
@keyframes wwbSheetUp{
  from{ transform: translateY(100%); }
  to{ transform: translateY(0); }
}

/* Handle */
.wwb-sheet__handle{
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: rgba(103,88,102,.25);
  margin: 0 auto 14px auto;
}

/* Header */
.wwb-sheet__header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px 12px 20px;
  font-weight: 600;
  color: rgba(103,88,102,.9);
}

.wwb-sheet__close{
  appearance: none;
  border: none;
  background: transparent;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: rgba(103,88,102,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, transform .1s ease, color .2s ease;
}

/* Hover / tap feedback */
.wwb-sheet__close:hover{
  background: rgba(103,88,102,0.08);
  color: rgba(103,88,102,0.85);
}

.wwb-sheet__close:active{
  transform: scale(.92);
}

/* Sheet List */
.wwb-sheet__list{
  display: flex;
  flex-direction: column;
}

.wwb-sheet__row{
  padding: 16px 20px;
  text-decoration: none;
  color: rgba(103,88,102,.95);
  font-weight: 500;
  border-top: 1px solid rgba(103,88,102,.08);
}

.wwb-sheet__row:hover{
  background: rgba(208,197,180,.18);
}

/* ===============================
   Safety Lock (Prevents Messups)
   =============================== */

.wwb-sheet[aria-hidden="true"]{
  display: none !important;
}
/* =====================================================
   WWB Bottom Sheet – iOS Tab Bar Safe-Area Fix (FINAL)
   Replace your previous block with this
   ===================================================== */

.wwb-page-sections .wwb-sheet__panel{
  max-height: 85vh;
  /* ✅ reserve space for iOS bottom tab bar + safe area */
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

.wwb-page-sections .wwb-sheet__list{
  max-height: calc(85vh - 90px);  /* header + handle allowance */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* ✅ ensures the last row can scroll above the tab bar */
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
}

.wwb-page-sections .wwb-sheet__row:last-child{
  margin-bottom: 0;
}



/* Membership Account page custom buttons */ 

/* Center PMPro membership action buttons */
.pmpro_card_actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

/* Remove the "|" separator */
.pmpro_card_action_separator {
  display: none !important;
}

/* Button styling */
.pmpro_card_actions .wwb-btn.button {
  border-radius: 999px;
  padding: 10px 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Secondary button styling */
.pmpro_card_actions .wwb-btn--secondary.button {
  opacity: 0.9;
}

/* Customize membershhip Cancel */

/* Hide the bottom actions nav on the PMPro cancel view */
#pmpro_cancel .pmpro_actions_nav {
  display: none !important;
}


/* Whispering Wings: Find Your Practice Search Gateway */

.www-search-gateway {
  width: 100%;
  max-width: 760px;
  margin: 34px auto 42px;
  padding: 0 18px;
  box-sizing: border-box;
}

.www-search-gateway-inner {
  text-align: center;
  background: rgba(255, 255, 240, 0.82);
  border: 1px solid rgba(103, 88, 102, 0.18);
  border-radius: 28px;
  padding: 30px 28px 32px;
  box-shadow: 0 12px 34px rgba(103, 88, 102, 0.08);
  position: relative;
  overflow: hidden;
}

.www-search-gateway-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top center, rgba(250, 190, 81, 0.16), transparent 38%),
    radial-gradient(circle at bottom center, rgba(178, 124, 245, 0.08), transparent 42%);
  pointer-events: none;
}

.www-search-gateway-symbol,
.www-search-gateway-title,
.www-search-gateway-intro,
.www-search-gateway-button,
.www-search-gateway-note {
  position: relative;
  z-index: 1;
}

.www-search-gateway-symbol {
  color: #FABE51;
  font-size: 1.15rem;
  letter-spacing: 12px;
  margin-bottom: 8px;
}

.www-search-gateway-title {
  margin: 0 0 12px;
  color: #675866;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.75rem, 4vw, 2.55rem);
  line-height: 1.15;
  font-weight: 600;
}

.www-search-gateway-intro {
  max-width: 590px;
  margin: 0 auto 22px;
  color: #675866;
  font-size: 1rem;
  line-height: 1.65;
}

.www-search-gateway-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 24px;
  border-radius: 999px;
  background: #675866;
  color: #FFFFF0 !important;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.96rem;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 18px rgba(103, 88, 102, 0.18);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.www-search-gateway-button:hover,
.www-search-gateway-button:focus {
  background: #594b58;
  color: #FFFFF0 !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(103, 88, 102, 0.24);
}

.www-search-gateway-button:focus {
  outline: 2px solid #FABE51;
  outline-offset: 3px;
}

.www-search-gateway-note {
  margin: 18px auto 0;
  color: rgba(103, 88, 102, 0.78);
  font-size: 0.9rem;
  line-height: 1.5;
  font-style: italic;
}

/* Mobile refinement */
@media (max-width: 600px) {
  .www-search-gateway {
    margin: 26px auto 34px;
    padding: 0 20px;
  }

  .www-search-gateway-inner {
    border-radius: 24px;
    padding: 24px 20px 26px;
  }

  .www-search-gateway-intro {
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 18px;
  }

  .www-search-gateway-button {
    width: 100%;
    max-width: 320px;
    padding: 12px 18px;
    font-size: 0.9rem;
  }

  .www-search-gateway-note {
    font-size: 0.82rem;
  }
}

.www-home-flow-note {
  max-width: 560px;
  margin: 0 auto 24px;
  padding: 0 24px;
  text-align: center;
  color: rgba(103, 88, 102, 0.82);
  font-size: 1rem;
  line-height: 1.55;
  font-style: italic;
  font-weight: 500;
}

@media (max-width: 600px) {
  .www-home-flow-note {
    max-width: 340px;
    margin: 0 auto 28px;
    font-size: 0.86rem;
    line-height: 1.5;
  }
}