/* =========================
   Happy Vibe Guitar — Clean White & Pacific Blue
   ========================= */

:root {
  /* Background & Canvas */
  --bg: #F8FAFC; 
  --panel: #ffffff;
  --card-bg: #ffffff;

  /* Typography - Deep navy from your logo text */
  --text: #0B2532; 
  --muted: #64748b;

  /* --- BRAND COLORS (Matched to newlogonoback.png) --- */
  --brand-blue: #00D2FF;   /* Electric Blue (Guitar/Water) */
  --brand-orange: #1C72C0; /* Sunset Orange (Sun/Text) */
  --brand-navy: #0B1E2D;   /* Deep Navy (Contrast) */

  /* Primary Accent Logic */
  --accent: var(--brand-orange);
  --accent-light: #FFB347; 
  --accent-dark: #FF6A1F;

  /* Borders & surfaces */
  --accent-2: #00D2FF;

  /* UI */
  --glass: rgba(47, 127, 163, 0.04);
  --radius: 12px;
  --transition: 200ms ease;
  --container-max: 1100px;
  --nav-height: 80px;

  /* --- THE LOGO GRADIENT --- */
  /* Blue at full bottom + Orange in top-right corner */
  --logo-gradient: linear-gradient(
    150deg, 
    var(--brand-orange) 0%, 
    var(--brand-blue) 40%, 
    var(--brand-navy) 100%
  );
}

/* Apply this to your active page link */
.nav-link.active {
  color: var(--brand-orange); /* Keep text readable */
  position: relative;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  /* This creates the "Blue bottom / Orange top-right" look on a small scale */
  background: var(--logo-gradient);
}

/* ---- Reset / base ---- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,var(--bg), #eef6f8 120%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}
/* prevent horizontal scrolling */
html, body { overflow-x: hidden; }

/* ---- Header ---- */
header{
  position: relative !important;
  top: auto !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,252,253,0.98));
  border-bottom:1px solid rgba(2,6,8,0.06);
  box-shadow: 0 6px 18px rgba(2,6,8,0.04);
  backdrop-filter: blur(4px);
  z-index: 2000 !important;          /* sit above main content */
  overflow: visible !important;      /* don’t clip dropdown */
}

/* header container */
.header-inner{
  max-width:var(--container-max);
  margin:0 auto;
  padding:.5rem 1rem;
  display:grid;
  grid-template-columns: auto 1fr auto; /* brand | nav | cta */
  align-items:center;
  gap:1rem;
  min-height:var(--nav-height);
  position: relative;                /* positioning context for menu */
}

/* Make brand link interactive */
.brand{
  color: var(--accent);
  transition: color var(--transition), transform var(--transition), filter var(--transition);
  cursor: pointer;
}
.brand:hover,
.brand:focus-visible{
  color: var(--accent-2);
  transform: translateY(-2px);
  filter: drop-shadow(0 8px 20px rgba(0, 255, 213, 0.18));
  text-decoration: none;
}
.brand svg{ display:block } /* avoid baseline gaps */

/* Brand (left) */
.brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  color:var(--accent);
  text-decoration:none;
  font-weight:700;
  font-family:Poppins, Inter, sans-serif;
  letter-spacing:.3px;
  font-size:1.05rem;
}
.brand-dot{
  width:14px; height:14px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent-light),var(--accent-dark));
  box-shadow:0 8px 24px rgba(11,15,17,0.06);
  flex-shrink:0;
}

/* Center nav wrapper */
.nav-wrap{ justify-self:center; display:flex; align-items:center; gap:1rem; min-width:0; }

.nav-list{
  display:flex;
  gap:.5rem;
  align-items:center;
  justify-content:center;
  list-style:none;
  margin:0;
  padding:0;
  white-space:nowrap;
}

.nav-list li{ margin:0; }
.nav-list a{
  display:inline-flex;
  align-items:center;
  padding:.6rem .9rem;
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  border-radius:10px;
  background: transparent;
  border:1px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  font-size:1rem;
}

.nav-list a:hover,
.nav-list a:focus{
  transform: translateY(-3px);

  background: linear-gradient(
    90deg,
    rgba(28,114,192,0.12),
    rgba(255,179,71,0.18)
  );

  color: var(--accent);

  border: 1px solid rgba(28,114,192,0.18);

  box-shadow:
    0 10px 24px rgba(28,114,192,0.10),
    0 4px 10px rgba(0,0,0,0.04);

  outline: none;
}

.nav-list a.active{
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#ffffff;
  box-shadow: 0 18px 48px rgba(11,143,120,0.08);
  transform:none;
}

/* CTA (right) */
.header-cta{ display:flex; gap:.6rem; align-items:center; justify-content:center; }

.btn span {
  display: inline-flex;
  margin-right: 8px;
  font-size: 1.2rem;
  /* This creates a clean white glow around the emoji's edges */
  filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 1px #ffffff);
  /* Optional: adds a slight "pop" to the icon */
  transform: rotate(-10deg); 
}

.btn{
  padding: .7rem .95rem;
  border-radius: 10px;
  font-weight: 700;
  color: #ffffff !important;
  border: none;
  text-decoration: none;
  cursor: pointer;

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

  
  /* darker premium ocean gradient */
/* Brighter Electric Blue from your logo */
  background: linear-gradient(
    135deg,
    #1C72C0 15%,
    #00D2FF 90%
  );

  box-shadow: 0 10px 20px rgba(0, 33, 71, 0.18);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

/* hover */
.btn:hover{
  transform: translateY(-2px);

background: linear-gradient(
  135deg,
  #00D2FF 0%, /* Your Logo Blue */
  #00D2FF 100% /* Your Logo Deep Navy */
);
  box-shadow: 0 14px 28px rgba(0,33,71,.30);
}
/* click */
.btn:active{
  transform: translateY(0);
}



/* Pressed state (desktop + mobile) */
.btn:active{
  transform: translateY(0);          /* cancel hover lift */
  box-shadow: 0 6px 18px rgba(11,15,17,0.22);
  filter: brightness(0.96);          /* slightly darker = pressed */
}







/* ghost button with premium ocean hover */
.btn-ghost{
  padding:.6rem .9rem;
  border-radius:10px;

  background:#ffffff;
  border:1px solid rgba(28,114,192,0.22);

  color: var(--text);

  text-decoration:none;
  font-weight:600;

  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

.btn-ghost:hover,
.btn-ghost:focus{
  background: linear-gradient(
    135deg,
    rgba(28,114,192,0.12),
    rgba(255,179,71,0.18)
  );

  color: var(--accent);

  border-color: rgba(28,114,192,0.28);

  box-shadow:
    0 10px 24px rgba(28,114,192,0.12),
    0 4px 10px rgba(0,0,0,0.04);

  transform: translateY(-2px);

  text-decoration:none;
}



/* mobile toggle (hamburger) */
.nav-toggle{
  display:none;
  background:transparent;
  border:none;
  padding:.5rem .6rem;   /* nicer tap target */
  cursor:pointer;
  color:var(--muted);
  border-radius:8px;
}
.nav-toggle svg{ display:block }

/* mobile menu (dropdown) — LEFT aligned by default */
.mobile-menu{
  display:none;
  position:absolute;
  left:.5rem;            /* align to the left */
  right:auto;
  transform:none;        /* no centering transform */
  top: calc(var(--nav-height) + 8px);
  background: var(--panel);
  border-radius:10px;
  padding:.6rem;
  width:420px;
  max-width: calc(100% - 1rem);  /* prevent overflow on small screens */
  max-height: calc(100dvh - var(--nav-height) - 12px); /* scroll-safe on phones */
  overflow:auto;
  box-shadow: 0 18px 70px rgba(2,6,8,0.06);
  border:1px solid rgba(2,6,8,0.06);
  z-index:1000;
}


header.is-open .mobile-menu { display: block; }

.mobile-menu ul{
  display:flex; flex-direction:column; gap:.2rem;
  margin:0; padding:0; list-style:none;
}
.mobile-menu a{
  padding:.9rem 1rem;
  color:var(--text);
  text-decoration:none;
  display:block;
  border-radius:8px;
}
.mobile-menu a:hover{ background: rgba(11,143,120,0.06) }

/* ---------- Main / content ---------- */
.container{
  max-width:var(--container-max);
  margin: 2.25rem auto;
  padding: 1rem;
  display:flex;
  justify-content:center;
}

main.card{
  width:100%;
  max-width:980px;
  background: var(--panel);
  border-radius:var(--radius);
  padding:2rem;
  box-shadow: 0 10px 40px rgba(2,6,8,0.06);
  color:var(--text);
  border: 1px solid rgba(2,6,8,0.04);
}

/* ---------- Hero ---------- */
 
/* Force the hero into a single centered column */
.hero{
  display:block !important;              /* override any flex/grid layout */
  text-align:center;                     /* center headings by default */
}
.hero .hero-left{
  max-width: 720px;                      /* tidy readable width */
  margin: 0 auto !important;             /* center the block itself */
  text-align: center !important;         /* ensure text is centered */
}
.hero .hero-actions{
  display:flex;                          /* ensure button row centers */
  justify-content:center !important;
  gap: .6rem;
  flex-wrap: wrap;
}
/* Make the image block centered and tidy */
.hero .hero-art .card{
  width:100%;
  max-width:560px;
  margin:1.2rem auto 0 auto;             /* centers the image card */
}
.hero .hero-art img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:12px;
}

/* Optional: a bit tighter on phones */
@media (max-width:700px){
  .hero .hero-left{ padding: 0 14px; }
  .hero .hero-art .card{ max-width: 520px; }
}
 

/* Logo size */
.logo {
  height: 64px;   /* try 56 first */
  width: auto;
}

header .header-inner{
  align-items: center;
}

header .logo{
  height: 90px !important;   /* try 90 first */
  width: auto !important;
  display: block;
}


@media (max-width: 700px){
  header .logo{
    height: 52px !important; /* slightly smaller on mobile */
  }
}

.brand{
  display:flex;
  align-items:center;
  transition: transform 200ms ease, filter 200ms ease;
}

.brand:hover{
  transform: translateY(-3px);
  filter: drop-shadow(0 10px 25px rgba(11, 183, 193, 0.25));
}



.hero{
  display:grid;
  grid-template-columns: 1fr minmax(280px,420px);
  gap:2rem;
  align-items:center;
}

.hero-left{ text-align:left }
.hero-left h1{
  margin:0 0 .6rem 0;
  font-family:Poppins, Inter, sans-serif;
  font-size:2rem;
  line-height:1.05;
  color:var(--text);
}
.lead{ margin:0 0 1rem 0; color:var(--muted); font-size:1.05rem; }

.hero-actions{ display:flex; gap:.9rem; align-items:center; flex-wrap:wrap; margin-top:.8rem; }

.hero-art .card{
  background: linear-gradient(180deg, rgba(247,250,252,1), rgba(255,255,255,1));
  padding:1rem;
  border-radius:10px;
  border: 1px solid rgba(2,6,8,0.04);
}
.hero-art img{ width:100%; height:auto; display:block; border-radius:8px; object-fit:cover; }

/* services grid */
.services{
  margin-top:1.6rem;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1rem;
}
.service{
  background: var(--card-bg);
  border-radius:10px;
  padding:1rem;
  min-height:120px;
  color:var(--text);
  box-shadow: 0 8px 30px rgba(2,6,8,0.04);
  border:1px solid rgba(2,6,8,0.06);
}
.service h4{ margin:0 0 .5rem 0; font-size:1.02rem; font-weight:700; font-family:Poppins, Inter, sans-serif; color:var(--text); }
.service p{ margin:0; color:var(--muted); font-size:.96rem; }

/* about / packages block */
.about{ margin-top:1.5rem; display:flex; gap:1.25rem; align-items:center; justify-content:space-between; }
.about p{ color:var(--muted); margin:0; }

footer{ margin-top:2rem; padding:1.25rem; text-align:center; color:var(--muted); font-size:.95rem; }

/* focus for keyboard users */
a:focus, button:focus { outline: 3px solid rgba(11,143,120,0.12); outline-offset: 2px; }

/* ---- Accessibility / tweaks for light theme ---- */
.lead,
.muted,
.service p,
.about p,
.card p,
footer,
.container p {
  color: var(--muted);
  line-height:1.6;
}

h1, h2, h3, h4, .service h4, .brand-text { color: var(--text); }

a { color: var(--accent); text-decoration: underline; }
a:hover, a:focus { color: var(--accent-2); text-decoration: none; }


 

.kicker, .small { color: rgba(81,96,106,0.9); font-size: .95em; }

.mobile-menu a { color: var(--text); }

.service + .service { border-left: none; }

.reader {
  background: #ffffff;
  color: var(--text);
}
.reader p, .reader .lead {
  font-size: 16px;
  line-height: 1.75;
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 1.25rem;
}

/* Mobile menu backdrop */
header.is-open::after{
  content:"";
  position: fixed;
  inset: 0;

  background: rgba(11, 37, 50, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);

  z-index: 999998 !important;
  pointer-events: none;
}

/* Keep menu above blur */
.mobile-menu,
.mobile-menu--portal{
  z-index: 999999 !important;
}

/* Remove header strip */
header.is-open,
header.is-open .header-inner{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* End of Classic Light Theme CSS */

/* ===== Blue Way Digital — Contact form tweaks ===== */
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.form-field.full { grid-column: 1 / -1; }
.form-label {
  display:block;
  margin-bottom:6px;
  color:var(--muted);
  font-weight:600;
  font-size:0.95rem;
}
.form-control {
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(2,6,8,0.06);
  background:var(--card-bg);
  color:var(--text);
  font-size:1rem;
  transition: box-shadow var(--transition), border-color var(--transition);
  box-shadow: none;
  outline:none;
}
.form-control:focus {
  border-color: rgba(11,143,120,0.18);
  box-shadow: 0 8px 20px rgba(11,143,120,0.06);
}
.form-textarea { min-height:140px; resize:vertical; }
.bwd-form .btn { min-width:160px; }
.bwd-form .btn-ghost { padding:10px 12px; }
#formMessage { font-size:0.95rem; }
#formMessage.success { color:#0b7a3a; font-weight:600; }
#formMessage.error { color:#b42727; font-weight:600; }

/* =========================
   ALL MOBILE / RESPONSIVE LOGIC — MOVED TO END
   ========================= */

/* Nav: prevent horizontal overflow before 640px breakpoint */
@media (max-width: 820px){
  .nav-list { white-space: normal; flex-wrap: wrap; gap: .25rem; }
  .nav-list a { font-size: .95rem; padding: .5rem .7rem; }
}

/* Hero: force single column sooner, shrink headline a bit */
@media (max-width: 820px){
  .hero { grid-template-columns: 1fr; gap: 1.25rem; }
  .hero-left h1 { font-size: 1.6rem; }
}

/* Tablets / small laptops */
@media (max-width:980px){
  .hero{ grid-template-columns: 1fr; text-align:left; }
  .services{ grid-template-columns: repeat(2,1fr); }
}

/* --- Mobile: center brand, hamburger on right — works even if nav-toggle is inside .nav-wrap --- */
@media (max-width:700px){
  .header-inner{
    display:grid;
    grid-template-columns: 1fr auto 1fr; /* left spacer | brand | right (hamburger) */
    align-items:center;
  }

  /* Flatten .nav-wrap so its children (like .nav-toggle) join the parent grid */
@media (max-width:700px){
  .nav-wrap{ display:flex !important; }
}


  /* Hide desktop nav & CTA */
  .nav-list, .header-cta { display: none !important; }

  /* Brand centered in the middle column */
  .brand{
    grid-column: 2;
    justify-self: center;
  }
  .brand svg{ max-width:62vw; height:auto; display:block; }

  /* Place hamburger in right column whether nested or direct */
  .header-inner > .nav-toggle,
  .nav-wrap .nav-toggle{
    display: inline-flex !important;
    grid-column: 3;
    justify-self: end;
    margin: 0 !important;
    padding: .5rem .6rem;
  }

  /* Left-align dropdown and keep it fully visible */
  .mobile-menu{
    position: fixed;                 /* escape stacking contexts */
    top: var(--nav-height);          /* sits just below the header */
    left: .5rem;
    right: .5rem;                    /* keep it inside viewport */
    transform: none;
    width: auto;                     /* width now controlled by left/right */
    max-width: none;
    max-height: calc(100dvh - var(--nav-height) - 12px);
    overflow: auto;
    z-index: 3000;                   /* above everything but header (and overlay is under this) */
    background: var(--panel);
    border: 1px solid rgba(2,6,8,0.06);
    border-radius: 10px;
    box-shadow: 0 18px 70px rgba(2,6,8,0.10);
  }

  /* Prevent background scroll when menu open (class toggled by JS) */
  body.menu-open { overflow: hidden; }
}

/* Reduce global paddings for small screens */
@media (max-width: 640px){
  .container { padding: 0.75rem; }
  main.card { padding: 1.25rem; }
  .services { grid-template-columns: 1fr; }
}

/* Extra tightening for small phones (≤600px) */
@media (max-width:600px){
  .header-inner{ padding:.4rem .75rem; }
  .nav-toggle{ padding:.45rem .55rem; }
  .hero-left h1{ font-size:1.4rem; }
  .container { padding: 0.75rem; }
  main.card { padding: 1.25rem; }
}

/* Form grid: extra-tight for very small devices */
@media (max-width: 400px){
  .form-control { font-size: .95rem; padding: 9px 10px; }
  .bwd-form .btn { min-width: 140px; }
}


/* === Mobile menu portalized to <body> when open === */
.mobile-menu--portal{
  position: fixed;
  top: var(--nav-height, 76px);
  left: .5rem;
  right: .5rem;
  max-height: calc(100dvh - var(--nav-height, 76px) - 12px);
  overflow: auto;
  background: var(--panel, #fff);
  border: 1px solid rgba(2,6,8,0.06);
  border-radius: 10px;
  box-shadow: 0 18px 70px rgba(2,6,8,0.12);
   z-index: 1000000 !important;/* sit above everything */
}

#menu-backdrop{
  position: fixed;
  top: var(--nav-height, 76px);
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 999990; /* just under the menu */
}

/* Avoid background scrolling while open */
body.menu-open { overflow: hidden; }


/* To make Pro package more popular */
.badge-popular {
  background: var(--accent-2); /* Use the Gold from logo */
  color: #ffffff;
  /* ... rest of your styles */
}






 /*  customer portal style */
.customer-portal-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;   /* adjust 32–40px */
  height: 34px;
  margin-right: 0.75rem;
  text-decoration: none;
  cursor: pointer;
}

.customer-portal-icon {
  width: 100%;
  height: 100%;
}

.cp-bg {
  fill: #00D2FF; /* your teal brand color */
}

.cp-avatar {
  fill: #ffffff;
}

/* Optional hover */
.customer-portal-link:hover .cp-bg {
  fill: #0b8f78; /* darker teal */
}

/* mobile menu customer portal icon tweaks */
.mobile-menu .customer-portal-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  flex-shrink: 0;
}

.mobile-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
}



   /* =========================================
   PRICING TABLE — MOBILE SHRINK (LEFT-ALIGNED, NO SHIFT)
   Put this at the VERY END of style.css
   ========================================= */

@media (max-width: 820px){
  .table-wrap{
    overflow: hidden !important;   /* no sideways scroll */
    width: 100% !important;
  }

  /* keep the table layout stable */
  #compare-table{
    border-collapse: collapse;
    table-layout: fixed !important;
    min-width: 0 !important;

    /* ✅ shrink the table itself */
    transform: scale(0.92);
    transform-origin: top left;

    /* ✅ compensate so it doesn't get clipped on the right */
    width: calc(100% / 0.92) !important;
  }

  #compare-table th,
  #compare-table td{
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    font-size: .88rem !important;
    padding: .6rem !important;
  }

  /* remove any sticky column behavior */
  #compare-table th:first-child,
  #compare-table td:first-child{
    position: static !important;
    left: auto !important;
  }
}

/* Extra-small phones */
@media (max-width: 420px){
  #compare-table{
    transform: scale(0.88);
    width: calc(100% / 0.88) !important;
  }

  #compare-table th,
  #compare-table td{
    font-size: .84rem !important;
  }
}

/* Force booking button color to stay consistent on mobile */
/* Fixed: Now mobile shows the same Alive Gradient as Desktop */
@media (hover: none) and (pointer: coarse){
  .btn {
    /* Uses your specific brand gradient instead of a flat color */
    background: linear-gradient(
      135deg,
      #1C72C0 15%,
      #00D2FF 90%
    ) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(0, 33, 71, 0.18);
  }
}



/* ===== FORCE mobile menu to open from RIGHT ===== */
@media (max-width: 950px){

  #mobileMenu.mobile-menu{
    position: absolute !important;
    top: calc(var(--nav-height) + 8px) !important;
    right: 12px !important;
    left: auto !important;

    width: min(320px, 92vw) !important;
    max-width: none !important;
  }

}

/* ===== LANDSCAPE phone cleanup ===== */
@media (max-width: 950px) and (orientation: landscape){

  .header-inner{
    min-height: 60px !important;
    padding: .35rem .75rem !important;
  }

  header .logo{
    height: 44px !important;
  }

  .nav-toggle{
    padding: .4rem .5rem !important;
  }

}


footer a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;

  padding: 2px 6px;
  border-radius: 6px;

  transition:
    background var(--transition),
    color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

footer a:hover,
footer a:focus{
  color: var(--accent);

  background: linear-gradient(
    90deg,
    rgba(28,114,192,0.12),
    rgba(255,179,71,0.18)
  );

  box-shadow:
    0 6px 18px rgba(28,114,192,0.10),
    0 2px 6px rgba(0,0,0,0.04);

  transform: translateY(-1px);

  text-decoration: none;
}

/* Force all service cards to look identical everywhere */
.services .service:nth-child(2),
.services .service:nth-child(2):hover,
.services .service:nth-child(2):active,
.services .service:nth-child(2):focus,
.services .service:nth-child(2):focus-within{
  border: 1px solid rgba(2,6,8,0.06) !important;
  box-shadow: 0 8px 30px rgba(2,6,8,0.04) !important;
  background: var(--card-bg) !important;
  transform: none !important;
  outline: none !important;
}

/* Join the happy vibe button*/
/* 1. UPDATE YOUR OVERLAY LAYER */
.modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(11, 30, 45, 0.85) !important;
  
  /* 🌟 THE CORRECTION: Remove display: flex !important; */
  /* This lets JS switch between display: none and display: flex smoothly */
  align-items: center !important;
  justify-content: center !important;
  
  /* Keeps it completely above the blurred menu layer */
  z-index: 99999999 !important; 
  
  padding: 20px;
  box-sizing: border-box;
}

/* 2. UPDATE YOUR WHITE POPUP BOX */
.modal-content {
  background: var(--panel, #ffffff);
  padding: 40px 30px;
  border-radius: var(--radius, 12px);
  width: 100%;
  max-width: 420px;
  text-align: center;
  position: relative;
  
  /* ADJUSTED MOBILE SHADOW: Heavy, blurry box-shadows can cause pixelation on mobile screens */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  
  max-height: 90vh;
  overflow-y: auto;

  /* FIXES MOBILE BLUR: Prevents sub-pixel rendering bugs on high-density phone screens (Retina displays) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: scale(1); 
}

/* 3. INPUT FORM SPACING */
.modal-content form {
  margin-top: 20px;
}

.modal-content input {
  width: 100%;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--accent-2, #386080);
  border-radius: 6px;
  font-size: 16px;         /* Prevents iOS Safari from zooming in automatically on inputs */
  box-sizing: border-box;
}

/* 4. BUTTONS */
.modal-content .btn {
  width: 100%;             /* Makes the form submit button nice and click-friendly */
  padding: 14px;
  font-size: 16px;
  cursor: pointer;
}

.close-text {
  background: none;
  border: none;
  color: var(--muted, #64748b);
  margin-top: 20px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: underline;
  display: inline-block;
}


@media (max-width:700px){
  .openVibeModalBtn{
    font-size:1.1rem !important;
    padding:14px 24px !important;
  }
}