/* ═══════════════════════════════════════════════════════════
   RESPONSIVE.CSS — Mobile-first responsive enhancements
   Loaded LAST to ensure override priority
   ═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   GLOBAL MOBILE IMPROVEMENTS
   ══════════════════════════════════════════════════════════ */

/* Smooth momentum scrolling everywhere */
.conv-list,
.thread-msgs,
.community-section,
.card-inner,
.spice-suggestions {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Prevent horizontal overflow — scoped to avoid breaking fixed-body scroll */
body:not(.app-body) {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ══════════════════════════════════════════════════════════
   EXTRA-SMALL PHONES (≤ 375px) — iPhone SE, Galaxy A series
   ══════════════════════════════════════════════════════════ */
@media (max-width: 375px) {

  /* Community section tighter padding */
  .community-section {
    padding: 12px 10px;
  }

  /* Feed cards: tighter */
  .feed-card {
    padding: 12px;
    margin-bottom: 10px;
  }

  .feed-pulse-hero {
    padding: 16px 14px 14px;
    border-radius: 16px;
  }

  .feed-pulse-greeting h3 {
    font-size: 1.1rem;
  }

  .pulse-stat-num {
    font-size: 1.25rem;
  }

  /* Event cards: tighter */
  .event-card-body {
    padding: 10px 12px 14px;
  }

  .event-card-gradient {
    height: 65px;
  }

  .event-card-name {
    font-size: 1rem;
  }

  /* Auth card: smaller padding */
  .auth-card {
    padding: 24px 18px;
  }

  .auth-card h2 {
    font-size: 1.3rem;
  }

  /* Tab bar: compact but still readable */
  .tab-bar-item {
    padding: 6px 8px;
    font-size: .7rem;
    min-width: 48px;
  }

  .tab-bar-item .tab-icon {
    font-size: 1.1rem;
  }

  /* Community header: tighter but preserve safe-area */
  .community-header {
    padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
  }

  /* Spice selector: stack on tiny screens */
  .spice-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .spice-btn {
    min-height: 60px;
    padding: .6rem .3rem;
  }

  /* Thread header: tighter */
  .thread-header {
    gap: .5rem;
    padding: .65rem .75rem .6rem;
    padding-top: calc(.65rem + env(safe-area-inset-top, 0px));
  }

  .thread-avatar {
    width: 38px;
    height: 38px;
    font-size: .82rem;
  }

  .thread-name {
    font-size: .88rem;
  }

  /* Messages: tighter padding */
  .thread-msgs {
    padding: .65rem .75rem;
  }

  .bubble {
    max-width: 85%;
    padding: .5rem .75rem;
    font-size: .82rem;
  }

  /* Thread input: compact */
  .thread-input-area {
    padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* Profile section */
  .profile-header {
    padding: 20px 14px;
  }

  /* Social login buttons */
  .btn-social {
    padding: 10px;
    font-size: .8rem;
  }
}


/* ══════════════════════════════════════════════════════════
   SMALL PHONES (376px – 420px) — iPhone 12 mini, older phones
   ══════════════════════════════════════════════════════════ */
@media (min-width: 376px) and (max-width: 420px) {

  .community-section {
    padding: 14px 12px;
  }

  .event-card-gradient {
    height: 72px;
  }

  .spice-btn {
    padding: .65rem .25rem;
  }
}


/* ══════════════════════════════════════════════════════════
   STANDARD PHONES (421px – 480px) — iPhone 14/15, Galaxy S
   ══════════════════════════════════════════════════════════ */
@media (min-width: 421px) and (max-width: 480px) {

  .community-section {
    max-width: 100%;
    padding: 16px;
  }
}


/* ══════════════════════════════════════════════════════════
   LARGE PHONES / SMALL TABLETS (481px – 640px)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 481px) and (max-width: 640px) {

  /* Community sections can breathe more */
  .community-section {
    max-width: 100%;
    padding: 20px 24px;
  }

  /* Event cards: 2-column grid */
  #events-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  #events-content .event-card {
    margin-bottom: 0;
  }

  /* Feed pulse stats: spread out */
  .feed-pulse-hero {
    padding: 24px 22px 20px;
  }

  /* Auth card: comfortable */
  .auth-card {
    padding: 36px 32px;
  }

  /* Thread: wider messages */
  .bubble {
    max-width: 72%;
  }

  /* Conversation items: more breathing room */
  .conv-item {
    padding: .85rem 1rem;
  }

  .conv-avatar {
    width: 46px;
    height: 46px;
  }
}


/* ══════════════════════════════════════════════════════════
   TABLETS (641px – 1023px) — iPad Mini, iPad Air, etc
   ══════════════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 1023px) {

  /* Community sections: wider for tablets */
  .community-section {
    max-width: 680px;
    padding: 20px 28px;
  }

  /* Event cards: 2-column grid on tablets */
  #events-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  #events-content .event-card {
    margin-bottom: 0;
  }

  /* Feed cards: 2-column grid */
  #feed-content .feed-card {
    margin-bottom: 14px;
  }

  /* Chat: center conversation list for visual appeal */
  .conv-list {
    max-width: 600px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
  }

  /* Thread: constrain message width for readability */
  .thread-msgs {
    max-width: 700px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    width: 100%;
  }

  .bubble {
    max-width: 65%;
  }

  /* Thread input centered */
  .thread-input-area {
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
    padding: .75rem 1.5rem calc(.75rem + env(safe-area-inset-bottom, 0px));
  }

  /* Landing zone: center form, bigger max-width */
  .zone-landing.card-inner {
    max-width: 480px;
    margin: 0 auto;
  }

  /* Auth card: wider */
  .auth-card {
    max-width: 440px;
    padding: 40px 36px;
  }

  /* New message section: centered */
  .s-new-inner {
    max-width: 520px;
    margin: 0 auto;
  }

  /* Safe Place section: centered */
  .s-safe-inner {
    max-width: 520px;
    margin: 0 auto;
  }

  /* Tab bar items: more space */
  .tab-bar-item {
    padding: 10px 20px;
    min-width: 72px;
  }

  /* Feed pulse: larger stats */
  .pulse-stat-num {
    font-size: 1.8rem;
  }

  /* Conversation filter bar: center pills */
  .conv-filter-bar {
    justify-content: center;
    gap: 8px;
  }

  /* Bigger conversation avatars */
  .conv-avatar {
    width: 48px;
    height: 48px;
    font-size: .95rem;
  }

  /* Wider drawer on tablets */
  .menu-drawer {
    width: 75vw;
    max-width: 380px;
  }

  /* Profile header: bigger avatar */
  .profile-avatar {
    width: 80px;
    height: 80px;
    font-size: 2rem;
  }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE FONT SIZES — clamp for fluid scaling
   ══════════════════════════════════════════════════════════ */

/* Community section headings */
.community-section h2 {
  font-size: clamp(1.1rem, 4vw, 1.5rem);
}

/* Feed pulse greeting */
.feed-pulse-greeting h3 {
  font-size: clamp(1.15rem, 3.5vw, 1.5rem);
}

/* Event card name */
.event-card-name {
  font-size: clamp(1rem, 3vw, 1.2rem);
}

/* Auth card heading */
.auth-card h2 {
  font-size: clamp(1.3rem, 4vw, 1.6rem);
}

/* Safe Place title */
.s-safe-title {
  font-size: clamp(1.4rem, 5vw, 2rem);
}

/* Badge celebration number */
.badge-celebration-number {
  font-size: clamp(2.5rem, 12vw, 4rem);
}


/* ══════════════════════════════════════════════════════════
   THREAD INPUT — MOBILE KEYBOARD IMPROVEMENTS
   ══════════════════════════════════════════════════════════ */

/* When keyboard is open, reduce bottom spacing */
@supports (height: 1dvh) {
  .thread-input-area {
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Prevent textarea from being too tall on small screens */
@media (max-height: 600px) {
  .thread-textarea-wrap textarea {
    height: 42px;
  }

  .thread-msgs {
    padding: .5rem .75rem;
    gap: .35rem;
  }
}

/* ══════════════════════════════════════════════════════════
   SPICE SELECTOR — BETTER OVERFLOW HANDLING
   ══════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
  .spice-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
}

/* ══════════════════════════════════════════════════════════
   CONVERSATION LIST — SWIPE-FRIENDLY
   ══════════════════════════════════════════════════════════ */

/* Ensure conv items have proper touch spacing */
.conv-item + .conv-item {
  margin-top: 0;
}

/* Conversation list: minimum gap between items */
.conv-list {
  gap: 6px;
}


/* ══════════════════════════════════════════════════════════
   MODAL / SHEET IMPROVEMENTS
   ══════════════════════════════════════════════════════════ */

/* Event info sheet: full width on phones with safe-area */
@media (max-width: 480px) {
  .event-info-sheet,
  .ios-install-sheet {
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Notification prefs: full width on phones with safe-area */
@media (max-width: 480px) {
  .notif-prefs-panel {
    max-width: 100%;
    width: 100%;
    padding-top: calc(var(--sp-6, 1.5rem) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--sp-6, 1.5rem) + env(safe-area-inset-bottom, 0px));
  }
}


/* ══════════════════════════════════════════════════════════
   LANDING PAGE — RESPONSIVE TAGLINE
   ══════════════════════════════════════════════════════════ */
.ux-home-tagline {
  font-size: clamp(0.92rem, 3.5vw, 1.1rem);
}


/* ══════════════════════════════════════════════════════════
   LANDSCAPE PHONE OPTIMIZATION
   ══════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  /* Reduce padding in landing zone */
  .card-inner {
    padding: 1rem;
    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
  }

  .logo-row {
    margin-bottom: 0.75rem;
  }

  /* Hide non-essential elements */
  .home-trust-badges {
    display: none;
  }

  /* Smaller safe bar */
  .safe-bar {
    min-height: 40px;
    padding: .5rem .75rem;
  }

  /* Compact tab bar */
  .tab-bar {
    padding: 2px 0 env(safe-area-inset-bottom, 4px);
  }

  .tab-bar-item {
    padding: 4px 12px;
    min-height: 40px;
    font-size: .6rem;
  }

  .tab-bar-item .tab-icon {
    font-size: 1rem;
  }
}


/* ══════════════════════════════════════════════════════════
   SAFE AREA ENHANCEMENTS — modern notch/island handling
   ══════════════════════════════════════════════════════════ */

/* Ensure tab bar respects bottom safe area fully */
.tab-bar {
  padding-bottom: max(env(safe-area-inset-bottom, 8px), 8px);
}

/* Ensure the FAB doesn't get hidden behind the bottom bar */
@media (max-width: 1023px) {
  .fab-new-conv {
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Community app: safe area already handled in community.css */


/* ══════════════════════════════════════════════════════════
   TOUCH TARGET CONSISTENCY
   ══════════════════════════════════════════════════════════ */

/* Ensure all interactive elements in community are tappable */
.event-card {
  min-height: 48px;
}

.feed-card {
  min-height: 48px;
}

/* Back button consistent sizing */
.back-btn {
  min-width: 44px;
  min-height: 44px;
}

/* Profile action buttons */
.profile-action-btn {
  min-height: 44px;
  min-width: 44px;
}


/* ══════════════════════════════════════════════════════════
   GIF PICKER — RESPONSIVE HEIGHT
   ══════════════════════════════════════════════════════════ */
@media (max-height: 700px) {
  .gif-picker {
    height: 240px;
  }
}

@media (max-height: 550px) {
  .gif-picker {
    height: 180px;
  }
}


/* ══════════════════════════════════════════════════════════
   COMMUNITY EMPTY STATES — RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 375px) {
  .community-empty {
    padding: 32px 16px;
  }

  .community-empty-icon {
    font-size: 2.5rem;
  }

  .community-empty h3 {
    font-size: 1rem;
  }

  .community-empty p {
    font-size: .78rem;
  }
}


/* ══════════════════════════════════════════════════════════
   PROFILE SECTION — RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
  .community-welcome-stats {
    gap: 16px;
  }

  .community-welcome-stats strong {
    font-size: 1rem;
  }

  .community-welcome-avatar {
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
  }
}


/* ══════════════════════════════════════════════════════════
   MYSTERY TEASER + FLOATING ELEMENTS — RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 375px) {
  .mystery-teaser {
    left: 8px;
    right: 8px;
  }

  .mystery-teaser-inner {
    padding: 10px 12px;
    border-radius: 12px;
  }

  .mystery-teaser-text {
    font-size: .75rem;
  }
}


/* ══════════════════════════════════════════════════════════
   CHECKIN MODAL — RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 375px) {
  .checkin-modal-card {
    padding: 1.5rem 1rem;
  }

  .checkin-modal-title {
    font-size: 1.2rem;
  }

  .checkin-modal-xp {
    font-size: 1.2rem;
    padding: 4px 16px;
  }
}


/* ══════════════════════════════════════════════════════════
   POTE / FRIENDS SECTION — RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (min-width: 481px) and (max-width: 1023px) {
  /* Friends list in 2 columns on larger screens */
  .pote-friend-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}


/* ══════════════════════════════════════════════════════════
   SIGNUP PATHS — RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 375px) {
  .signup-path {
    padding: 12px;
  }

  .signup-path-title {
    font-size: .88rem;
  }

  .signup-path-sub {
    font-size: .72rem;
  }
}


/* ══════════════════════════════════════════════════════════
   BADGE CELEBRATION — RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 375px) {
  .badge-celebration-text {
    font-size: .95rem;
  }

  .badge-celebration-sub {
    font-size: .78rem;
  }

  .badge-celebration-personality {
    font-size: .88rem;
  }

  .badge-celebration-personality-desc {
    font-size: .72rem;
    max-width: 240px;
  }
}


/* ══════════════════════════════════════════════════════════
   DESIGN REVIEW FIXES — Mobile hype & adoption polish
   ══════════════════════════════════════════════════════════ */

/* ── 1. MINIMUM TEXT SIZE — 0.62-0.68rem is illegible on phones ── */
.pulse-stat-label,
.profile-stat-label,
.feed-section-title,
.countdown-badge,
.feed-item-time,
.conv-countdown,
.badge-milestone-text,
.ghost-level-sub,
.signup-social-proof,
.checkin-history-date,
.live-badge-counter {
  font-size: max(0.72rem, var(--fs-xs, 0.694rem)) !important;
}

/* ── 2. SEND BUTTON — celebration energy ── */
@keyframes sendGlow {
  0%, 100% { box-shadow: 0 2px 12px var(--accent-glow); }
  50%      { box-shadow: 0 4px 24px rgba(224,82,122,0.4), 0 0 40px rgba(224,82,122,0.12); }
}
#btn-send:not(:disabled),
#btn-start-conv:not(:disabled) {
  animation: sendGlow 2.5s ease-in-out infinite;
}
#btn-send:not(:disabled):hover,
#btn-start-conv:not(:disabled):hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 32px rgba(224,82,122,0.45);
}

/* ── 3. AUTH TABS — bigger touch targets ── */
.auth-tab {
  min-height: 48px !important;
  padding: 12px 16px !important;
  font-size: .88rem !important;
}

/* ── 4. FAB NEW MESSAGE — pulse to draw attention ── */
@keyframes fabPulse {
  0%, 100% { box-shadow: 0 6px 24px rgba(224,82,122,0.5), 0 3px 12px rgba(0,0,0,0.4); }
  50%      { box-shadow: 0 8px 32px rgba(224,82,122,0.65), 0 0 48px rgba(224,82,122,0.2); }
}
.fab-new-conv {
  animation: fabPulse 3s ease-in-out infinite;
}
.fab-new-conv:hover {
  transform: scale(1.08);
}

/* ── 5. CHARACTER COUNT — always slightly visible ── */
.thread-char-count {
  opacity: 0.3 !important;
  transition: opacity .2s !important;
}
.thread-textarea-wrap:focus-within .thread-char-count {
  opacity: 0.6 !important;
}

/* ── 6. FEED ITEM ICONS — bigger for all ages ── */
.feed-item-icon {
  width: 40px !important;
  height: 40px !important;
  font-size: 1.25rem !important;
}

/* ── 7. SUBTITLE CONTRAST — bump from 35% to 50% ── */
.ux-home-subtitle {
  color: rgba(255, 255, 255, 0.50) !important;
}

/* ── 8. OR DIVIDER — party energy ── */
.ux-or-divider .ux-or-text {
  color: var(--accent-light, #EE7A97) !important;
  font-weight: 700 !important;
}
.ux-or-divider .ux-or-line {
  background: linear-gradient(90deg, transparent, rgba(224,82,122,0.25), transparent) !important;
  height: 1px !important;
}
.landing-divider {
  color: var(--accent-light, #EE7A97) !important;
}
.landing-divider::before, .landing-divider::after {
  background: linear-gradient(90deg, transparent, rgba(224,82,122,0.2), transparent) !important;
}

/* ── 9. CONV LIST — unread items glow ── */
.conv-item.unread {
  box-shadow: 0 0 16px rgba(248,191,69,0.15);
}

/* ── 10. PROFILE NAME — responsive sizing ── */
@media (max-width: 375px) {
  .profile-name {
    font-size: 1.2rem !important;
  }
  .profile-stat-num {
    font-size: 1.1rem !important;
  }
}

/* ── 11. HAMBURGER MENU — visible hover state ── */
.hamburger-btn:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* ── 12. LANDING CTA CARDS — entrance animation on mobile ── */
@media (max-width: 1023px) {
  .desktop-cta-card {
    animation: ux-slide-up 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .desktop-cta-card:nth-child(2) {
    animation-delay: 100ms;
  }
}

/* ── 13. TRUST BADGES — add subtle glow ── */
.home-trust-badge {
  text-shadow: 0 0 12px rgba(224,82,122,0.15);
}

/* ── 14. COMMUNITY HEADER "REJOINDRE" — more visible ── */
.ux-header-join-btn {
  background: rgba(224,82,122,0.12) !important;
  border-color: rgba(224,82,122,0.25) !important;
  color: var(--accent, #E0527A) !important;
  font-weight: 700 !important;
}

/* ── 15. TONIGHT EVENT PULSE — smoother ── */
@keyframes tonightPulseSmooth {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .8; transform: scale(1.03); }
}
.tonight-badge {
  animation: tonightPulseSmooth 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

/* ── 16. EVENT CARD GRADIENT — more saturated on mobile ── */
@media (max-width: 1023px) {
  .event-card-gradient.rose {
    background: linear-gradient(135deg, rgba(224,82,122,0.45) 0%, rgba(191,59,99,0.12) 70%, transparent 100%) !important;
  }
  .event-card-gradient.gold {
    background: linear-gradient(135deg, rgba(248,191,69,0.4) 0%, rgba(184,130,42,0.12) 70%, transparent 100%) !important;
  }
  .event-card-gradient.lavender {
    background: linear-gradient(135deg, rgba(196,181,253,0.35) 0%, rgba(167,139,250,0.12) 70%, transparent 100%) !important;
  }
}

/* ── 17. SPICE BUTTONS — more party energy on selection ── */
.spice-btn--active {
  transform: scale(1.03);
  box-shadow: 0 0 24px rgba(224,82,122,0.3) !important;
}

/* ── 18. MATCH FEED ITEM — extra glow for excitement ── */
.feed-item.match-item,
.feed-card[data-type="match"] {
  border-color: rgba(224,82,122,0.2) !important;
  box-shadow: 0 0 20px rgba(224,82,122,0.08);
}

/* ═══════════════════════════════════════════════════════
   19. PRIDE MODE — responsive overrides
   Mobile needs bolder glow (smaller screen = less visible)
   ═══════════════════════════════════════════════════════ */

/* Mobile: boost pride ambient and borders for visibility */
@media (max-width: 640px) {
  .pride .card.app-card::before {
    background: radial-gradient(ellipse at 20% 20%, rgba(228,3,3,.16) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(0,77,255,.12) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 80%, rgba(117,7,135,.16) 0%, transparent 50%) !important;
  }
  .pride .chat-topbar {
    border-bottom-width: 3px;
  }
  .pride .badge-chip {
    box-shadow: 0 2px 16px rgba(228,3,3,.25), 0 4px 24px rgba(117,7,135,.2);
  }
  /* Pride event cards — stronger gradient on mobile */
  .pride .event-card-gradient.lavender {
    background: linear-gradient(135deg, rgba(228,3,3,0.18) 0%, rgba(255,140,0,0.12) 20%, rgba(255,237,0,0.08) 40%, rgba(0,128,38,0.12) 60%, rgba(0,77,255,0.14) 80%, rgba(117,7,135,0.18) 100%) !important;
  }
}

/* Match feed items — pride glow in Pride mode */
.pride .feed-item.match-item,
.pride .feed-card[data-type="match"] {
  border-color: transparent !important;
  background: linear-gradient(var(--surface, #16162C), var(--surface, #16162C)) padding-box,
              var(--pride-gradient, linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 0 16px rgba(117,7,135,.1), 0 0 8px rgba(228,3,3,.06);
}


/* ══════════════════════════════════════════════════════════
   KEYBOARD OPEN — hide bottom nav, adjust layout
   JS adds .keyboard-open to body when virtual keyboard is visible
   ══════════════════════════════════════════════════════════ */

body.keyboard-open .tab-bar,
body.keyboard-open .community-tab-bar {
  display: none !important;
}

body.keyboard-open .community-app {
  padding-bottom: 0 !important;
}

/* Remove safe-area bottom padding when keyboard is open — input sits at bottom */
body.keyboard-open .thread-input-area {
  padding-bottom: 0.5rem !important;
}

body.keyboard-open #app-footer {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════
   iOS OPTIMIZATIONS — Dynamic Island, safe areas, anti-zoom
   ══════════════════════════════════════════════════════════ */

/* ── Anti-zoom: iOS Safari auto-zooms inputs < 16px ────── */
@supports (-webkit-touch-callout: none) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="datetime-local"],
  input:not([type]),
  textarea,
  select {
    font-size: 16px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   ██  MOBILE UX OVERHAUL — Landing (klarrro.com) + Pro (pro.klarrro.com)
   ██  Touch targets, legibility, spacing, navigation, pricing
   ══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════
   1. TOUCH TARGETS — 44px minimum everywhere
   ═══════════════════════════════════════ */

/* Language buttons — way too small at default */
.lang-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Theme toggle buttons */
.theme-toggle-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mobile menu links — ensure 44px min tap area */
.nav-mm-link {
  min-height: 48px;
  display: flex;
  align-items: center;
}

/* FAQ questions — bigger tap zone */
.faq-q {
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 1rem 2.5rem 1rem 1rem;
}

/* Pricing plan CTA buttons */
.pc {
  min-height: 52px;
}

/* Footer links already have min-height:44px — good */

/* Hamburger button — expand from 38px to 44px */
@media (max-width: 1023px) {
  .nav-burger {
    width: 44px;
    height: 44px;
  }
}

/* Hero proof items — expand tap target */
.hero-proof-item {
  min-height: 44px;
  padding: .6rem .85rem;
}

/* Hero trust items */
.hero-trust-item {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Billing toggle buttons */
.bt-btn {
  min-height: 44px;
  padding: .65rem 1.35rem;
}


/* ═══════════════════════════════════════
   2. FONT SIZE LEGIBILITY — nothing below 0.72rem (10px)
   ═══════════════════════════════════════ */

/* Section labels (.65rem → .72rem) */
.sh .label {
  font-size: max(0.72rem, var(--fs-xs)) !important;
}

/* Pricing badge labels (.62rem → .72rem) */
.pb {
  font-size: max(0.72rem, 0.62rem) !important;
}

/* Feature plan labels (.65rem → .72rem) */
.feat-plan-label {
  font-size: max(0.72rem, 0.65rem) !important;
}

/* Pay type labels (.65rem → .72rem) */
.pay-type {
  font-size: max(0.72rem, 0.65rem) !important;
}

/* Vibe actions label (.62rem → .72rem) */
.vibe-actions-label {
  font-size: max(0.72rem, 0.62rem) !important;
}

/* Vibe tags (.67rem → .72rem) */
.vtag {
  font-size: max(0.72rem, 0.67rem) !important;
}

/* Upcoming card tags (.62rem → .72rem) */
.uc-tag {
  font-size: max(0.72rem, 0.62rem) !important;
}

/* Hero countdown label (.68rem → .72rem) */
.hc-label {
  font-size: max(0.72rem, 0.68rem) !important;
}

/* Hero countdown time tag (.6rem → .68rem) */
.hc-tag {
  font-size: max(0.68rem, 0.6rem) !important;
}

/* Topbar live text (.68rem → .72rem) */
.topbar-live {
  font-size: max(0.72rem, 0.68rem) !important;
}

/* Topbar badge (.6rem → .68rem) */
.topbar-badge {
  font-size: max(0.68rem, 0.6rem) !important;
  padding: .25rem .7rem;
}

/* Admin panel small text */
.admin-row-label {
  font-size: max(0.78rem, 0.74rem) !important;
}
.admin-toggle {
  font-size: max(0.72rem, 0.67rem) !important;
}

/* Billing toggle save badge (.62rem → .68rem) */
.bt-save {
  font-size: max(0.68rem, 0.62rem) !important;
}

/* Checkout legal (.68rem → .72rem) */
.checkout-legal {
  font-size: max(0.72rem, 0.68rem) !important;
}

/* Hero kicker — barely legible at .72rem */
@media (max-width: 1023px) {
  .hero-kicker {
    font-size: max(0.76rem, 0.72rem) !important;
    padding: .5rem 1.15rem;
  }
}


/* ═══════════════════════════════════════
   3. HERO — optimized height for mobile
   ═══════════════════════════════════════ */

@media (max-width: 1023px) {
  .hero {
    min-height: auto !important;
    padding-top: 3.5rem;
    padding-bottom: 3rem;
  }

  /* Hero H1 — impactful on mobile */
  .hero h1 {
    font-size: clamp(3rem, 11vw, 5rem);
    margin-bottom: 1rem;
  }

  /* Hero subtitle */
  .hero-sub {
    font-size: .95rem;
    margin-bottom: 1.75rem;
    line-height: 1.7;
  }

  /* Hero buttons — full width, stacked, comfortable */
  .hero-btns {
    margin-bottom: 2rem;
  }

  /* Hero proof grid — tighter on mobile */
  .hero-proof {
    gap: .5rem;
  }
  .hero-proof-item {
    font-size: .74rem;
  }

  /* Trust strip — wraps better */
  .hero-trust-strip {
    gap: .5rem 1rem;
    font-size: .78rem;
  }
}

@media (max-width: 375px) {
  .hero {
    padding-top: 2.5rem;
    padding-bottom: 2rem;
  }

  .hero h1 {
    font-size: clamp(2.6rem, 10vw, 3.5rem);
    letter-spacing: -1px;
  }

  .hero-sub {
    font-size: .88rem;
  }

  /* Single column proof items on tiny screens */
  .hero-proof {
    grid-template-columns: 1fr;
    gap: .4rem;
  }
}


/* ═══════════════════════════════════════
   4. TOPBAR — prevent overflow on small screens
   ═══════════════════════════════════════ */

@media (max-width: 640px) {
  .topbar {
    padding: .4rem .75rem;
  }
  .topbar-inner {
    flex-wrap: nowrap;
    overflow: hidden;
    gap: .4rem;
  }
  .topbar-msg {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .7rem;
    flex: 1;
    min-width: 0;
  }
  .topbar-sep {
    flex-shrink: 0;
  }
  .topbar-badge {
    flex-shrink: 0;
    white-space: nowrap;
  }
  .topbar-live {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* Extra small: hide topbar seps, simplify */
@media (max-width: 375px) {
  .topbar-sep {
    display: none;
  }
  .topbar-msg {
    font-size: .68rem;
  }
}


/* ═══════════════════════════════════════
   5. PRICING — layout géré par pro.css (grille responsive)
   Ancien carousel scroll-snap + hint « glisser » retirés : ils
   tronquaient Pro/Élite (min-width:280px) sous 1024px.
   ═══════════════════════════════════════ */


/* ═══════════════════════════════════════
   6. PRO PAGE — sticky mobile CTA bar
   ═══════════════════════════════════════ */

@media (max-width: 1023px) {
  .pro-page .mobile-cta-bar {
    display: flex;
  }
  .pro-page .mobile-cta-bar a {
    background: linear-gradient(135deg, var(--gold), #b8822a) !important;
    color: #1a0f00 !important;
    box-shadow: 0 0 32px rgba(248,191,69,0.5), 0 4px 16px rgba(248,191,69,0.3) !important;
  }
}


/* ═══════════════════════════════════════
   7. MOBILE NAV MENU — better UX
   ═══════════════════════════════════════ */

@media (max-width: 1023px) {
  /* More breathing room in mobile menu */
  .nav-mobile-menu {
    padding: .75rem 1rem 1.25rem;
    gap: .15rem;
    max-height: 80vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Better visual hierarchy — active links */
  .nav-mm-link {
    padding: .85rem .75rem;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 500;
    transition: color .15s, background .15s;
  }
  .nav-mm-link:active {
    background: rgba(255,255,255,0.06);
  }

  /* Mobile CTA button — bigger, more prominent */
  .nav-mm-cta {
    padding: .9rem 1.25rem;
    font-size: .95rem;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 99px;
    margin-top: .75rem;
  }

  /* Language + theme row — centered, good spacing */
  .nav-mm-lang {
    gap: .25rem;
    justify-content: center;
    padding: .5rem;
  }

  /* Separator */
  .nav-mm-sep {
    margin: .35rem 0;
  }
}


/* ═══════════════════════════════════════
   8. SECTIONS — better mobile spacing
   ═══════════════════════════════════════ */

@media (max-width: 1023px) {
  /* Reduce section padding on mobile — less wasted space */
  .how,
  .features,
  .vibes,
  .upcoming,
  .faq,
  .pro-partners,
  .pro-roi-stats,
  .pro-cta-final {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* Section header margins tighter */
  .sh {
    margin-bottom: 2rem;
  }

  /* Section header paragraphs */
  .sh p {
    font-size: .9rem;
    line-height: 1.65;
  }
}


/* ═══════════════════════════════════════
   9. FAQ — mobile polish
   ═══════════════════════════════════════ */

@media (max-width: 1023px) {
  .faq-item {
    border-radius: 14px;
  }

  .faq-q {
    font-size: .95rem;
    line-height: 1.45;
  }

  .faq-a {
    font-size: .88rem;
    line-height: 1.7;
    padding: 0 1rem 1.25rem;
  }

  .faq-q::after {
    font-size: 1.1rem;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
  }
}


/* ═══════════════════════════════════════
   10. ROI CALCULATOR — mobile-friendly sliders
   ═══════════════════════════════════════ */

@media (max-width: 640px) {
  .roi-calc {
    padding: 1.5rem 1.25rem;
  }

  .roi-calc-row {
    flex-wrap: wrap;
    gap: .5rem;
  }

  .roi-calc-row label {
    flex: 1 1 100%;
    font-size: .82rem;
  }

  .roi-calc-row input[type="range"] {
    flex: 1;
    max-width: none;
    min-height: 44px;
    /* Bigger thumb for easier grabbing */
  }

  .roi-calc-row .roi-calc-val {
    min-width: 50px;
    font-size: .88rem;
    text-align: center;
  }

  /* Make range thumb bigger on touch */
  .roi-calc-row input[type="range"]::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
  }
  .roi-calc-row input[type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
  }
}


/* ═══════════════════════════════════════
   11. FEATURE CARDS — mobile grid optimization
   ═══════════════════════════════════════ */

@media (min-width: 481px) and (max-width: 1023px) {
  .feat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  /* Plan headers span full width */
  .feat-plan-header {
    grid-column: 1 / -1;
  }
}

/* Feature card icon size consistency */
@media (max-width: 1023px) {
  .feat-ico {
    font-size: 1.75rem;
  }
  .feat-title {
    font-size: 1rem;
  }
  .feat-desc {
    font-size: .84rem;
  }
}


/* ═══════════════════════════════════════
   12. STEPS / HOW IT WORKS — mobile grid
   ═══════════════════════════════════════ */

@media (min-width: 481px) and (max-width: 1023px) {
  .steps-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}


/* ═══════════════════════════════════════
   13. VIBES / AMBIANCES — mobile polish
   ═══════════════════════════════════════ */

@media (min-width: 481px) and (max-width: 1023px) {
  .vibes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .vibe {
    padding: 1.15rem;
  }

  .vibe-name {
    font-size: 1.05rem;
  }

  .vibe-tagline {
    font-size: .84rem;
  }

  .vaction {
    font-size: .76rem;
    padding: .45rem .65rem;
  }
}


/* ═══════════════════════════════════════
   14. TIMELINE / XP STORY — mobile breathing room
   ═══════════════════════════════════════ */

@media (max-width: 640px) {
  .xp-step-card {
    padding: 1rem;
  }

  .xp-step-title {
    font-size: 1rem;
    line-height: 1.35;
  }

  .xp-step-desc {
    font-size: .85rem;
    line-height: 1.65;
  }

  .timeline-reassurance {
    font-size: .8rem;
    padding: .6rem .75rem;
    margin-top: .5rem;
  }

  .xp-step-time {
    font-size: .78rem;
  }
}


/* ═══════════════════════════════════════
   15. ADMIN DEMO — mobile readability
   ═══════════════════════════════════════ */

@media (max-width: 640px) {
  .admin-screen {
    padding: 1rem;
    font-size: .82rem;
  }

  .admin-row {
    padding: .55rem .65rem;
    gap: .5rem;
  }

  .admin-row-val {
    font-size: .82rem;
  }

  .admin-feat-list li {
    font-size: .84rem;
  }
}


/* ═══════════════════════════════════════
   16. SOCIAL PROOF STATS — mobile
   ═══════════════════════════════════════ */

@media (max-width: 640px) {
  .sp-grid {
    gap: .75rem;
  }

  .sp-number {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }

  .sp-label {
    font-size: .78rem;
  }

  .stat-story {
    font-size: .72rem;
  }

  /* Hide separators on mobile — they cause layout issues */
  .sp-sep {
    display: none;
  }
}


/* ═══════════════════════════════════════
   17. UPCOMING EVENTS — mobile card polish
   ═══════════════════════════════════════ */

@media (max-width: 480px) {
  .upcoming-card {
    padding: 1.15rem;
    gap: .75rem;
  }

  .uc-name {
    font-size: 1.05rem;
  }

  .uc-bottom {
    flex-wrap: wrap;
    gap: .6rem;
  }

  .uc-cta {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    padding: .65rem 1.25rem;
    min-height: 44px;
  }
}


/* ═══════════════════════════════════════
   18. MATCH MOMENT — mobile impact
   ═══════════════════════════════════════ */

@media (max-width: 640px) {
  .mm-badges-row {
    gap: 1rem;
  }

  .mm-badge-circle {
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
  }

  .mm-burst {
    font-size: 2rem;
  }

  .mm-text h2 {
    font-size: clamp(1.5rem, 5vw, 2.2rem);
  }

  .mm-text p {
    font-size: .9rem;
    line-height: 1.65;
  }
}


/* ═══════════════════════════════════════
   19. PRO PAGE — ROI stats mobile grid
   ═══════════════════════════════════════ */

@media (max-width: 480px) {
  .pro-roi-stats {
    gap: .75rem;
    padding: 2.5rem 1rem;
  }

  .pro-roi-stat {
    padding: 1.25rem .75rem;
    border-radius: 12px;
  }

  .pro-roi-val {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
  }

  .pro-roi-label {
    font-size: .78rem;
  }
}


/* ═══════════════════════════════════════
   20. CASE STUDY — mobile
   ═══════════════════════════════════════ */

@media (max-width: 640px) {
  .case-study {
    border-radius: 16px;
  }

  .cs-quote {
    font-size: .92rem;
    line-height: 1.65;
  }

  .cs-metrics {
    gap: .75rem;
  }

  .cs-metric-val {
    font-size: 1.3rem;
  }

  .cs-metric-label {
    font-size: .72rem;
  }
}


/* ═══════════════════════════════════════
   21. CHECKOUT MODAL — mobile fullscreen
   ═══════════════════════════════════════ */

@media (max-width: 480px) {
  .checkout-modal {
    border-radius: 20px 20px 0 0;
    max-height: 92vh;
    padding: 2rem 1.25rem;
    margin-top: auto;
  }

  .checkout-overlay {
    align-items: flex-end;
  }

  .checkout-field input,
  .checkout-field textarea {
    padding: .8rem 1rem;
    min-height: 48px;
  }

  .checkout-submit {
    min-height: 52px;
    font-size: 1rem;
  }
}


/* ═══════════════════════════════════════
   22. NEWSLETTER FORM — mobile
   ═══════════════════════════════════════ */

@media (max-width: 480px) {
  .nl-form {
    flex-direction: column;
    gap: .75rem;
  }

  .nl-input {
    min-height: 48px;
    font-size: .9rem;
  }

  .nl-btn {
    min-height: 48px;
    width: 100%;
  }
}


/* ═══════════════════════════════════════
   23. VIRAL SECTION — mobile form
   ═══════════════════════════════════════ */

@media (max-width: 640px) {
  .viral-fields {
    flex-direction: column;
    gap: .65rem;
  }

  .viral-input {
    min-height: 48px;
    font-size: .9rem;
  }

  .viral-btn {
    min-height: 52px;
    width: 100%;
  }

  .viral-trust {
    flex-direction: column;
    gap: .25rem;
    font-size: .78rem;
  }
  .viral-trust span:nth-child(2) {
    display: none;
  }
}


/* ═══════════════════════════════════════
   24. INSTAGRAM SECTION — mobile
   ═══════════════════════════════════════ */

@media (max-width: 480px) {
  .ig-grid {
    gap: .75rem;
  }

  .ig-follow-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ig-cta-btn {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
  }
}


/* ═══════════════════════════════════════
   25. TESTIMONIALS — mobile
   ═══════════════════════════════════════ */

@media (max-width: 640px) {
  .testi-card {
    min-width: 280px;
    padding: 1.25rem;
  }

  .testi-quote {
    font-size: .88rem;
    line-height: 1.6;
  }
}


/* ═══════════════════════════════════════
   26. FOOTER — mobile padding for CTA bar
   ═══════════════════════════════════════ */

@media (max-width: 1023px) {
  footer {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  }
}


/* ═══════════════════════════════════════
   27. ACTIVE STATES — tap feedback for mobile
   ═══════════════════════════════════════ */

@media (max-width: 1023px) {
  /* Cards get subtle press feedback */
  .feat-card:active,
  .step:active,
  .vibe:active,
  .upcoming-card:active,
  .pro-roi-stat:active,
  .pro-partner-logo:active {
    transform: scale(0.98);
    transition: transform 80ms ease;
  }

  /* Buttons get press feedback */
  .btn-primary-lg:active,
  .btn-ghost-lg:active,
  .btn-gold:active,
  .btn-ghost-pro:active,
  .nav-mm-cta:active,
  .pc:active,
  .uc-cta:active {
    transform: scale(0.97);
    transition: transform 60ms ease;
  }

  /* Links in mobile menu */
  .nav-mm-link:active {
    background: rgba(255,255,255,0.08);
    transition: background 60ms ease;
  }
}


/* ═══════════════════════════════════════
   28. SCROLL MARGIN — sections clear sticky header
   ═══════════════════════════════════════ */

@media (max-width: 1023px) {
  [id] {
    scroll-margin-top: 6.5rem;
  }
}


/* ═══════════════════════════════════════
   29. DESKTOP BREAKPOINTS — features/steps/vibes grid
   ═══════════════════════════════════════ */

@media (min-width: 1024px) {
  .steps-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }

  .feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .feat-plan-header {
    grid-column: 1 / -1;
  }

  .vibes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }

  /* Pricing grid on desktop */
  .grid4 {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
    overflow: visible;
  }
  .grid4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    overflow: visible;
  }
  .plan {
    min-width: 0;
    max-width: none;
  }

  /* Admin split — side by side */
  .admin-split {
    flex-direction: row;
    align-items: flex-start;
    gap: 3rem;
  }
  .admin-screen {
    flex: 1;
    position: sticky;
    top: 8rem;
  }
  .admin-text-col {
    flex: 1;
  }

  /* Upcoming events — 2 col */
  .upcoming-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}


/* ═══════════════════════════════════════
   30. MOBILE TOUCH FIXES — links & buttons that were too small
   ═══════════════════════════════════════ */

@media (max-width: 1023px) {

  /* Hero countdown link — was just text, no tap zone */
  .hc-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: .5rem 1rem;
    font-size: .85rem;
    margin-bottom: -.5rem;
  }

  /* Upcoming event CTA button — was too small at .55rem padding */
  .uc-cta {
    min-height: 44px;
    padding: .7rem 1.5rem;
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Vibe action items — if tappable, need bigger zone */
  .vaction {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: .6rem .85rem;
  }

  /* Vibe tags — too tiny to tap */
  .vtag {
    min-height: 32px;
    font-size: .72rem;
    padding: .35rem .7rem;
    display: inline-flex;
    align-items: center;
  }

  /* Hero organizer link — inline text with no tap area */
  .hero-btns + div a,
  a[href*="pro.html"][style*="muted2"],
  a[href*="pro.klarrro.com"][style*="muted2"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: .5rem .75rem;
    font-size: .9rem;
  }

  /* Nav CTA / gold CTA — ensure min-height */
  .nav-cta,
  .nav-cta.gold-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .65rem 1.25rem;
  }

  /* Nav back link (pro page) */
  .nav-back {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: .5rem .75rem;
  }

  /* Pro hero buttons — full width on mobile for easy tapping */
  .pro-page .btn-gold,
  .pro-page .btn-ghost-pro {
    width: 100%;
    justify-content: center;
    min-height: 52px;
  }

  /* Mobile CTA bar link — explicit min-height */
  .mobile-cta-bar a {
    min-height: 52px;
  }

  /* Hero trust items — text-only, add tap padding */
  .hero-trust-strip span {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
}