/*
  Miss EcoLegacy — Mobile Fixes
  Load LAST on every page, after all other CSS.
  Everything on mobile: smaller, tighter, more compact.
*/

/* ─────────────────────────────────────────────────
   DATA-ANIMATE base state (common-frontend only
   defines .active, not the initial hidden state)
───────────────────────────────────────────────── */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-animate].active {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
/* Hero content is always on dark bg — never hide */
[class*="-hero"] [data-animate],
[class*="-hero"] [data-animate].active {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
/* JS-toggled apply sections — display is the gate, not opacity */
#authSection [data-animate],
#requirementsSection [data-animate],
#applicationSection [data-animate],
#dashboardSection [data-animate],
#alreadySubmittedSection [data-animate],
.auth-container {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}


/* ─────────────────────────────────────────────────
   GLOBAL HEADER — never invisible
───────────────────────────────────────────────── */
.header:not(.scrolled) {
  background: rgba(0, 26, 0, 0.82) !important;
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
}


/* ─────────────────────────────────────────────────
   GLOBAL TYPOGRAPHY — Space Grotesk for body,
   Cinzel for headings only, no uppercase body text
───────────────────────────────────────────────── */
p, li, span, label, td, th, blockquote,
.section-desc, .mission-text, .hero-subtitle,
.page-subtitle, .info-content p, .info-content a,
.timeline-content p, .feature-card p, .pageant-card p,
.vision-card p, .benefit-item p, .sdg-text p,
.newsletter-text, .news-card-excerpt,
.stat-card p, .requirement-card p,
.queen-year, .auth-subtitle, .auth-switch p,
.footer-copy {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.65 !important;
}

@media (max-width: 768px) {

  h1, h2, h3, h4, h5, h6 {
    letter-spacing: 1px !important;
    word-break: break-word;
    line-height: 1.2;
  }
  .page-title {
    font-size: clamp(1.7rem, 8vw, 2.5rem) !important;
    letter-spacing: 2px !important;
    line-height: 1.15;
  }
  .page-subtitle {
    font-size: 0.9rem !important;
    letter-spacing: 0 !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    text-transform: none !important;
  }
  .hero-title {
    font-size: clamp(1.9rem, 9vw, 3.2rem) !important;
    letter-spacing: 3px !important;
    line-height: 1.15;
  }
  .hero-subtitle { font-size: 0.9rem !important; letter-spacing: 0 !important; }
  .section-title, .form-section-title, .newsletter-title, .content-title {
    font-size: clamp(1.3rem, 5.5vw, 1.9rem) !important;
    letter-spacing: 1px !important;
    margin-bottom: 1.25rem !important;
  }
  p, .section-desc, .mission-text,
  .timeline-content p, .feature-card p,
  .pageant-card p, .vision-card p,
  .sdg-text p, .benefit-item p {
    font-size: 0.9rem !important;
    text-align: left !important;
    line-height: 1.65 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
  }
}


/* ─────────────────────────────────────────────────
   SECTION PADDING — compact everywhere
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .story-section, .what-we-do, .pageant-info,
  .cta-section, .mission-statement, .vision-section,
  .impact-section, .initiatives, .impact-stats,
  .join-cause, .gallery, .queen-quote, .mission,
  .sponsors-section, .partnership-info,
  .requirements-section, .application-form-section,
  .next-steps, .featured-post, .news-grid-section,
  .newsletter-section, .upcoming-events,
  .countdown-section, .calendar-section,
  .past-events, .contact-section {
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
  }
  .panel { padding: 2rem 1rem !important; }
  .container { padding: 0 1rem !important; }
}


/* ─────────────────────────────────────────────────
   IMPACT / STAT CARDS — 2-column grid
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .stats-grid, .impact-stats .stats-grid, .impact-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  .stat-card, .stat-item {
    padding: 1rem 0.75rem !important;
    border-radius: 12px;
  }
  .stat-number, .stat-item .stat-number {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
    line-height: 1.1;
    margin-bottom: 0.25rem !important;
  }
  .stat-label, .stat-item .stat-label {
    font-size: 0.68rem !important;
    letter-spacing: 0.3px !important;
    line-height: 1.3 !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    text-transform: uppercase;
  }
  .stat-card p, .stat-item p {
    font-size: 0.68rem !important;
    margin-top: 0.2rem;
    font-style: italic;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }
}


/* ─────────────────────────────────────────────────
   QUEENS CAROUSEL — no clipping
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .queens-carousel { padding: 0.5rem 0 1rem; overflow: hidden; }
  .queens-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.7rem !important;
    padding: 0.4rem 1rem !important;
  }
  .queen-card {
    min-width: 120px !important;
    max-width: 120px !important;
    width: 120px !important;
    flex-shrink: 0 !important;
    padding: 0.75rem 0.6rem 0.7rem !important;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
  }
  .queen-card img {
    width: 68px !important; height: 68px !important;
    margin-bottom: 0.5rem; border-width: 2px; flex-shrink: 0;
  }
  .queen-card .queen-name, .queen-card h3 {
    font-size: 0.75rem !important;
    letter-spacing: 0.3px !important;
    line-height: 1.2;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: break-word;
    text-align: center;
    margin-bottom: 0.15rem;
  }
  .queen-card .queen-title, .queen-card p {
    font-size: 0.6rem !important;
    letter-spacing: 0 !important;
    line-height: 1.25;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    text-transform: none !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    text-align: center;
  }
  .queen-card-link { display: none !important; }
}


/* ─────────────────────────────────────────────────
   AUTH / LOGIN
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .auth-section { padding: 1.25rem 0.75rem !important; }
  .auth-container { padding: 1.5rem 1.1rem !important; border-radius: 16px; max-width: 100%; }
  .auth-header { margin-bottom: 1.25rem !important; }
  .auth-title { font-size: 1.25rem !important; letter-spacing: 1px !important; margin-bottom: 0.3rem !important; }
  .auth-subtitle { font-size: 0.8rem !important; margin-bottom: 0 !important; }
  .form-group { margin-bottom: 1rem !important; }
  .form-group label {
    font-size: 0.75rem !important; letter-spacing: 0.3px !important;
    margin-bottom: 0.4rem !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    text-transform: uppercase;
  }
  .form-group input, .form-group select, .form-group textarea {
    font-size: 1rem !important;
    padding: 0.7rem 0.9rem !important;
    border-radius: 10px !important;
  }
  .btn-auth {
    padding: 0.7rem 1rem !important; font-size: 0.82rem !important;
    letter-spacing: 1px !important; border-radius: 50px !important;
  }
  .btn-google, .btn-oauth, a.btn-oauth {
    padding: 0.65rem 0.9rem !important; font-size: 0.8rem !important;
    letter-spacing: 0 !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    text-transform: none !important;
    white-space: nowrap !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important; gap: 7px !important;
    border-radius: 50px !important;
  }
  .btn-google svg, .btn-oauth svg { flex-shrink: 0; width: 15px !important; height: 15px !important; }
  .auth-divider { margin: 0.6rem 0 !important; font-size: 0.75rem; }
  .auth-switch { margin-top: 0.9rem !important; }
  .auth-switch p { font-size: 0.8rem; font-family: 'Space Grotesk', system-ui, sans-serif !important; text-transform: none !important; }
  .form-options { flex-direction: column; gap: 0.4rem; }
  .forgot-password, .remember-me span {
    font-size: 0.78rem !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    text-transform: none !important; letter-spacing: 0 !important;
  }
  .progress-indicator { gap: 0.3rem; padding: 0.9rem 0; margin-top: 1.25rem; }
  .progress-step { width: 32px !important; height: 32px !important; font-size: 0.78rem !important; }
  .progress-line { width: 20px !important; }
  .form-navigation { gap: 0.6rem; flex-wrap: wrap; }
  .form-navigation button {
    flex: 1; min-width: 110px;
    padding: 0.65rem 0.9rem !important; font-size: 0.78rem !important; letter-spacing: 0.5px !important;
  }
  .btn-next, .btn-back, .btn-submit {
    padding: 0.65rem 1rem !important; font-size: 0.8rem !important; letter-spacing: 0.5px !important;
  }
}


/* ─────────────────────────────────────────────────
   APPLICATION FORM STEPS
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .form-container { padding: 1.5rem 1rem !important; border-radius: 16px; }
  .step-title { font-size: 1.2rem !important; letter-spacing: 0.5px !important; margin-bottom: 1.25rem; }
  .form-row { grid-template-columns: 1fr !important; gap: 0; }
}


/* ─────────────────────────────────────────────────
   TIMELINE
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .timeline { padding-left: 0; }
  .timeline-item { gap: 1rem !important; margin-bottom: 1.5rem !important; }
  .timeline-marker { width: 42px !important; height: 42px !important; font-size: 1.1rem !important; flex-shrink: 0; }
  .timeline-item:not(:last-child)::after { left: 19px !important; top: 52px !important; }
  .timeline-content { padding: 1.1rem !important; border-radius: 12px; }
  .timeline-content h3 { font-size: 0.95rem !important; letter-spacing: 0.5px !important; margin-bottom: 0.4rem; }
  .timeline-content p { font-size: 0.85rem !important; }
}


/* ─────────────────────────────────────────────────
   FEATURE / ABOUT / VISION / REQUIREMENT CARDS
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .pageant-card, .feature-card, .vision-card,
  .requirement-card, .benefit-item {
    border-radius: 12px; padding: 1.1rem !important;
  }
  .pageant-card h3, .feature-card h3, .vision-card h3,
  .requirement-card h3, .benefit-item h4 {
    font-size: 0.95rem !important; letter-spacing: 0.5px !important; margin-bottom: 0.4rem !important;
  }
  .card-number, .vision-number { font-size: 1.9rem !important; }
  .req-icon svg { width: 28px !important; height: 28px !important; }
}


/* ─────────────────────────────────────────────────
   QUEEN PROFILE HERO
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .queen-hero { padding: 90px 1rem 2.5rem !important; }
  .queen-profile { gap: 1.25rem !important; }
  .queen-image { width: 160px !important; height: 160px !important; border-width: 4px; }
  .queen-name { font-size: clamp(1.7rem, 7vw, 2.2rem) !important; letter-spacing: 2px !important; }
  .queen-title { font-size: 0.85rem !important; letter-spacing: 0.5px !important; font-family: 'Space Grotesk', system-ui, sans-serif !important; text-transform: uppercase; }
  .queen-year { font-size: 0.8rem !important; }
  .queen-socials a img { width: 22px !important; height: 22px !important; }
}


/* ─────────────────────────────────────────────────
   CONTACT PAGE
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .contact-wrapper { padding: 0 1rem !important; }
  .contact-info, .contact-form-container { padding: 1.5rem 1rem !important; border-radius: 12px; }
  .info-item { gap: 1rem !important; margin-bottom: 1.5rem !important; }
  .info-icon svg { width: 20px !important; height: 20px !important; }
  .info-content h3 { font-size: 0.85rem !important; margin-bottom: 0.25rem !important; }
  .info-content p, .info-content a { font-size: 0.85rem !important; }
  .submit-btn { padding: 0.8rem 1.5rem !important; font-size: 0.85rem !important; letter-spacing: 1px !important; }
  .social-links { gap: 1rem !important; margin-top: 1.5rem !important; }
  .social-links a img { width: 24px !important; height: 24px !important; }
}


/* ─────────────────────────────────────────────────
   EVENTS
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .countdown-item { padding: 0.75rem 0.9rem !important; min-width: 60px !important; border-radius: 8px; }
  .countdown-number { font-size: 1.7rem !important; }
  .countdown-label { font-size: 0.62rem !important; letter-spacing: 0.3px !important; font-family: 'Space Grotesk', system-ui, sans-serif !important; text-transform: uppercase; }
  .calendar-day-name { font-size: 0.6rem !important; padding: 0.35rem !important; }
  .calendar-day { font-size: 0.75rem; }
  .event-card { max-width: 100% !important; }
}


/* ─────────────────────────────────────────────────
   LEGAL TABS
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .tabs-section { padding: 0.75rem 0; top: 68px !important; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 1rem 0.6rem; justify-content: flex-start; gap: 0.4rem !important; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-button { white-space: nowrap; flex-shrink: 0; padding: 0.55rem 1rem !important; font-size: 0.75rem !important; }
}


/* ─────────────────────────────────────────────────
   NEWS
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .newsletter-section { padding: 2.25rem 1rem !important; }
  .newsletter-title { font-size: clamp(1.2rem, 5.5vw, 1.7rem) !important; letter-spacing: 1px !important; }
  .newsletter-text { font-size: 0.85rem !important; }
  .featured-title { font-size: clamp(1.15rem, 4.5vw, 1.5rem) !important; letter-spacing: 0.5px !important; }
  .news-card-excerpt { font-size: 0.83rem !important; line-height: 1.6 !important; }
}


/* ─────────────────────────────────────────────────
   SPONSORS
───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .sponsors-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.5rem 1rem !important; }
  .sponsor-circle { width: 90px !important; height: 90px !important; }
}


/* ─────────────────────────────────────────────────
   CTA BUTTONS
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cta-primary, .cta-button, .countdown-cta,
  .partnership-button, .btn-start-application, .join-btn {
    padding: 0.75rem 1.75rem !important;
    font-size: 0.85rem !important;
    letter-spacing: 1px !important;
  }
  .cta-primary, .btn-start-application { display: block; text-align: center; }
}


/* ─────────────────────────────────────────────────
   CHAT WIDGET
───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .chat-toggle { width: 46px !important; height: 46px !important; font-size: 20px !important; bottom: 14px !important; right: 14px !important; }
  .chat-widget { width: calc(100vw - 16px) !important; right: 8px !important; bottom: 8px !important; }
}


/* ─────────────────────────────────────────────────
   SDG SECTION
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sdg-container { gap: 1.5rem !important; }
  .sdg-subtitle { font-size: 1.1rem !important; letter-spacing: 0.5px !important; }
  .sdg-text p { font-size: 0.87rem !important; text-align: left !important; }
}


/* ─────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .footer { padding: 2.25rem 1rem 1.5rem !important; }
  .footer-socials { gap: 1rem !important; margin-bottom: 1rem !important; }
  .footer-socials a img { width: 20px !important; height: 20px !important; }
  .footer-links { justify-content: center; gap: 0.5rem 1rem !important; flex-wrap: wrap !important; flex-direction: row !important; }
  .footer-links a { font-size: 0.73rem !important; }
  .footer-copy { font-size: 0.68rem !important; margin-top: 1.25rem !important; }
}


/* ─────────────────────────────────────────────────
   ABOUT PAGE
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .story-section .container { padding: 0 1rem !important; }
  .story-text {
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
    text-align: left !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-bottom: 1rem !important;
  }
  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .feature-card {
    padding: 1.1rem !important;
    border-radius: 12px;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
  }
  .feature-icon { width: 40px !important; height: 40px !important; flex-shrink: 0; }
  .feature-content h3 { font-size: 0.9rem !important; letter-spacing: 0.5px !important; margin-bottom: 0.3rem !important; }
  .feature-content p { font-size: 0.85rem !important; margin: 0 !important; }
  .pageant-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  .pageant-card {
    padding: 1rem 0.85rem !important;
    border-radius: 12px;
  }
  .pageant-card .card-number { font-size: 1.6rem !important; margin-bottom: 0.4rem !important; }
  .pageant-card h3 { font-size: 0.82rem !important; letter-spacing: 0.3px !important; margin-bottom: 0.3rem !important; }
  .pageant-card p { font-size: 0.78rem !important; }
  .about-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .about-card { padding: 1.25rem !important; border-radius: 12px; }
}


/* ─────────────────────────────────────────────────
   MISSION PAGE — vision grid + statement
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mission-section .container,
  .statement-content { padding: 0 1rem !important; }
  .vision-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .vision-card { padding: 1.1rem !important; border-radius: 12px; }
  .vision-number { font-size: 1.7rem !important; margin-bottom: 0.4rem !important; }
  .vision-content h3 { font-size: 0.9rem !important; letter-spacing: 0.5px !important; margin-bottom: 0.3rem !important; }
  .vision-content p { font-size: 0.85rem !important; }
}


/* ─────────────────────────────────────────────────
   CTA SECTIONS — all pages
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cta-section .container { padding: 2rem 1rem !important; text-align: center; }
  .cta-title { font-size: 1.3rem !important; letter-spacing: 1px !important; margin-bottom: 0.75rem !important; }
  .cta-text, .cta-subtitle, .section-subtitle {
    font-size: 0.88rem !important;
    line-height: 1.65 !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-bottom: 1.25rem !important;
  }
  .partnership-text {
    font-size: 0.88rem !important;
    text-align: left !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }
}


/* ─────────────────────────────────────────────────
   EVENTS PAGE — grid, past events, countdown
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .countdown-wrapper { padding: 1.25rem 1rem !important; border-radius: 14px; }
  .countdown-title {
    font-size: 0.95rem !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 1rem !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    text-transform: uppercase;
  }
  .events-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .event-card { padding: 1.1rem !important; border-radius: 12px; }
  .event-title { font-size: 0.95rem !important; letter-spacing: 0.5px !important; margin-bottom: 0.4rem !important; }
  .event-content p { font-size: 0.85rem !important; }
  .past-events-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .past-event-card { padding: 1.1rem !important; border-radius: 12px; display: flex; gap: 1rem; }
  .past-event-image { flex-shrink: 0; }
  .past-event-image svg { width: 48px !important; height: 48px !important; }
  .past-event-date { font-size: 0.72rem !important; margin-bottom: 0.3rem !important; }
  .past-event-title { font-size: 0.92rem !important; letter-spacing: 0.3px !important; margin-bottom: 0.35rem !important; }
  .past-event-desc { font-size: 0.82rem !important; line-height: 1.6 !important; margin-bottom: 0.75rem !important; }
  .past-event-stats { gap: 1rem !important; }
  .past-event-stats .stat strong { font-size: 1rem !important; }
  .past-event-stats .stat span { font-size: 0.68rem !important; }
  /* Event search input */
  #eventSearch { font-size: 0.85rem !important; padding: 0.7rem 1rem !important; }
}


/* ─────────────────────────────────────────────────
   NEWS PAGE — grid, featured, newsletter form
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  #newsGrid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .featured-post .container { padding: 0 1rem !important; }
  .featured-badge { font-size: 0.68rem !important; padding: 0.3rem 0.75rem !important; margin-bottom: 0.75rem !important; }
  .featured-title { font-size: clamp(1.1rem, 4.5vw, 1.4rem) !important; letter-spacing: 0.5px !important; }
  .featured-text p { font-size: 0.88rem !important; }
  .newsletter-form { flex-direction: column !important; gap: 0.6rem !important; }
  .newsletter-form input { font-size: 1rem !important; padding: 0.7rem 1rem !important; border-radius: 10px !important; }
  .newsletter-form button { padding: 0.7rem 1.5rem !important; font-size: 0.82rem !important; }
  .newsletter-note { font-size: 0.75rem !important; font-family: 'Space Grotesk', system-ui, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; }
}


/* ─────────────────────────────────────────────────
   SPONSORS PAGE
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sponsors-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.25rem !important; }
  .sponsor-card { padding: 1rem 0.75rem !important; border-radius: 12px; text-align: center; }
  .sponsor-circle { width: 80px !important; height: 80px !important; }
  .sponsor-name { font-size: 0.75rem !important; letter-spacing: 0.3px !important; margin-top: 0.5rem !important; }
  .partnership-benefits { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
  .partnership-content { padding: 0 1rem !important; }
  .benefit-icon { width: 40px !important; height: 40px !important; margin-bottom: 0.5rem !important; }
  .benefit-icon svg { width: 22px !important; height: 22px !important; }
}


/* ─────────────────────────────────────────────────
   MY APPLICATION / DASHBOARD PAGE
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .profile-section { padding: 1.5rem 1rem !important; }
  .profile-card { padding: 1.25rem 1rem !important; border-radius: 14px; }
  .profile-header { flex-direction: column !important; align-items: center !important; gap: 0.75rem !important; text-align: center; }
  .profile-info h2 { font-size: 1.2rem !important; letter-spacing: 1px !important; }
  .profile-info p, .profile-email { font-size: 0.82rem !important; }
  .dashboard-section { padding: 1.5rem 1rem !important; }
  .user-welcome {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
    border-radius: 12px;
  }
  .user-welcome h3 { font-size: 1rem !important; letter-spacing: 0.5px !important; }
  .application-summary { padding: 1.25rem 1rem !important; border-radius: 12px; }
  .detail-row { flex-direction: column !important; gap: 0.25rem !important; margin-bottom: 0.75rem !important; }
  .field { font-size: 0.72rem !important; font-family: 'Space Grotesk', system-ui, sans-serif !important; text-transform: uppercase; letter-spacing: 0.5px !important; }
  .field-value { font-size: 0.88rem !important; font-family: 'Space Grotesk', system-ui, sans-serif !important; }
  .status-badge { font-size: 0.68rem !important; padding: 0.25rem 0.6rem !important; }
  /* Action buttons in dashboard */
  .actions { flex-direction: column !important; gap: 0.6rem !important; }
  .actions .btn { width: 100% !important; text-align: center !important; padding: 0.75rem !important; font-size: 0.8rem !important; }
}


/* ─────────────────────────────────────────────────
   RESET PASSWORD & VERIFY EMAIL PAGES
   (these have their own inline styles but we still
   tighten cards and typography)
───────────────────────────────────────────────── */
@media (max-width: 600px) {
  .reset-card, .verify-card {
    padding: 1.75rem 1.1rem !important;
    border-radius: 16px !important;
  }
  .reset-card h1, .verify-card h1 {
    font-size: 1.3rem !important;
    letter-spacing: 1.5px !important;
  }
  .btn-reset, .btn-primary-verify, .btn-secondary-verify {
    padding: 0.75rem 1rem !important;
    font-size: 0.82rem !important;
    letter-spacing: 1px !important;
  }
  .action-buttons { flex-direction: column !important; gap: 0.5rem !important; }
  .success-icon, .status-icon { width: 68px !important; height: 68px !important; }
  .success-icon svg, .status-icon svg { width: 32px !important; height: 32px !important; }
  .success-title { font-size: 1.3rem !important; letter-spacing: 1px !important; }
  .success-text, .status-message, .detail-box {
    font-size: 0.85rem !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }
  .subtitle {
    font-size: 0.82rem !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    text-transform: none !important;
  }
}


/* ─────────────────────────────────────────────────
   QUEEN CAROUSEL CARD — gold title centred
───────────────────────────────────────────────── */
.queen-card .queen-title,
.queen-card p,
.queen-card-title {
  text-align: center !important;
  color: var(--gold, #D4AF37);
}


/* ─────────────────────────────────────────────────
   MISSION / HOME — body text centred to match
   the hero section design intent (centred layout)
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Home page mission paragraph */
  .mission-statement p,
  .mission-statement .mission-text,
  .mission-section p,
  .mission-section .mission-text,
  /* Queen profile mission */
  .mission .mission-text,
  .mission-content p {
    text-align: center !important;
  }
}