/**

 * MAAC Jayanagar - 2026 Mobile Native-App Design System

 * Architecture: Maximum Viewport Width | Edge-to-Edge WhatsApp Voice Note | Liquid Glass Materiality | 3-Action Thumb Dock | Native Bottom Sheet | Zero-Zoom Form Engineering

 * Full compatibility: iOS 18+ / Android 15 Material You / WebKit Safe-Area / 100% Lead Generation Engine Protection

 */


@media (max-width: 1023px) {


  /* ══════════════════════════════════════════════════════════════════════════════

     1. GLOBAL NATIVE APP TOUCH PHYSICS, SAFE-AREAS & RESET

     ══════════════════════════════════════════════════════════════════════════════ */

  *, *::before, *::after {

    -webkit-tap-highlight-color: transparent !important;

    box-sizing: border-box;

  }


  html {

    -webkit-text-size-adjust: 100% !important;

    text-size-adjust: 100% !important;

    scroll-behavior: smooth;

    overflow-x: clip !important;

    width: 100% !important;

    max-width: 100vw !important;

  }


  body {

    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;

    -webkit-font-smoothing: antialiased !important;

    -moz-osx-font-smoothing: grayscale !important;

    touch-action: manipulation;

    overflow-x: clip !important;

    width: 100% !important;

    max-width: 100vw !important;

  }


  /* Universal Text Overflow & Mobile Viewport Boundary Defense */

  h1, h2, h3, h4, h5, h6, p, span, a, li, td, th, blockquote, figcaption, label {

    overflow-wrap: break-word !important;

    word-break: break-word !important;

  }


  /* Universal Horizontal Table Containment */

  .table-wrap {

    width: 100% !important;

    max-width: 100% !important;

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch !important;

    box-sizing: border-box !important;

  }


  /* ══════════════════════════════════════════════════════════════════════════════

     2. STRICT ANTI-ZOOM FORM ENGINEERING (LEAD GENERATION DEFENSE)

     ══════════════════════════════════════════════════════════════════════════════ */

  /* iOS Safari auto-zooms whenever an input has font-size < 16px.

     Enforcing 16px strictly guarantees zero viewport shift during lead capture. */

  input[type="text"],

  input[type="tel"],

  input[type="email"],

  input[type="number"],

  input[type="password"],

  select,

  textarea {

    font-size: 16px !important;

    line-height: 1.4 !important;

    touch-action: manipulation;

  }


  /* Tactile native spring feedback on all buttons & cards */

  button:active,

  a:active,

  .course-card:active,

  .submit-btn:active,

  .btn-apply:active,

  .app-dock-tab:active,

  .app-dock-cta:active,

  .sw-card:active,

  .wa-vn-play-btn:active,

  .course-filter:active {

    transform: scale(0.96) !important;

    transition: transform 0.08s cubic-bezier(0.2, 0, 0, 1) !important;

  }


  /* ══════════════════════════════════════════════════════════════════════════════

     3. MAXIMUM VIEWPORT WIDTH UTILIZATION ON MOBILE (EDGE-TO-EDGE LAYOUT)

     ══════════════════════════════════════════════════════════════════════════════ */

  /* Eliminates restrictive desktop padding on mobile, giving full edge-to-edge native-app feel */

  .hero {

    padding-left: 10px !important;

    padding-right: 10px !important;

    padding-top: clamp(28px, 5vh, 48px) !important;

    padding-bottom: clamp(36px, 6vh, 60px) !important;

    width: 100% !important;

    max-width: 100vw !important;

    box-sizing: border-box !important;

    gap: 20px !important;

  }


  .hero-text {

    width: 100% !important;

    max-width: 100% !important;

    padding: 0 4px !important;

    box-sizing: border-box !important;

    min-width: 0 !important;

  }


  .hero-right-col {

    width: 100% !important;

    max-width: 100% !important;

    flex: 1 1 100% !important;

    margin: 0 auto !important;

    box-sizing: border-box !important;

  }


  .hero-form-container {

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 auto !important;

    padding: 16px 12px !important;

    box-sizing: border-box !important;

    border-radius: 20px !important;

  }


  /* Full-width container standard on mobile */

  .bvoc-comparison-container,

  .career-roi-container,

  .container,

  .content-container,

  .course-detail-container,

  .course-hero-inner,

  .course-layout-bento,

  .curriculum-section,

  .guide-container,

  .main-container,

  .premium-bento-dashboard,

  .student-trust-suite,

  .tools-section {

    width: 100% !important;

    max-width: 100% !important;

    padding-left: 10px !important;

    padding-right: 10px !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    box-sizing: border-box !important;

  }


  .category-section,

  .counseling-section,

  .section,

  .seo-hero,

  main > section,

  section {

    padding-left: 10px !important;

    padding-right: 10px !important;

    width: 100% !important;

    max-width: 100vw !important;

    box-sizing: border-box !important;

  }


  .course-scholarship-wrap,

  .scholarship-spotlight-banner,

  .course-scholarship-card,

  .scholarship-card-container {

    width: 100% !important;

    max-width: 100% !important;

    padding-left: 10px !important;

    padding-right: 10px !important;

    box-sizing: border-box !important;

  }


  .course-card,

  .sw-card,

  .tool-card,

  .alumni-card,

  .bento-tile,

  .trust-card {

    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

  }


  /* ══════════════════════════════════════════════════════════════════════════════

     4. LIQUID GLASS TOP APP BAR & NOTIFICATION CAPSULE

     ══════════════════════════════════════════════════════════════════════════════ */

  .top-scholarship-scroller {

    background: rgba(12, 15, 20, 0.94) !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;

    color: #F8FAFC !important;

    height: 28px !important;

    backdrop-filter: blur(20px) saturate(180%) !important;

    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;

    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3) !important;

  }


  .top-scholarship-scroller .scroller-item {

    color: #E2E8F0 !important;

    font-size: 11px !important;

    font-weight: 600 !important;

    letter-spacing: -0.01em !important;

  }


  .top-scholarship-scroller .scroller-item strong {

    color: #F5D547 !important;

    font-weight: 800 !important;

  }


  .top-scholarship-scroller .scroller-badge {

    background: linear-gradient(135deg, #FF1A1A 0%, #D60000 100%) !important;

    color: #FFFFFF !important;

    font-size: 9px !important;

    font-weight: 800 !important;

    border-radius: 4px !important;

    padding: 1.5px 5.5px !important;

    box-shadow: 0 0 6px rgba(230, 36, 36, 0.5) !important;

  }


  /* Apple Liquid Glass Top App Bar */

  header {

    top: 28px !important;

    padding: clamp(8px, 1.4vh, 12px) 12px !important;

    background: rgba(10, 12, 16, 0.88) !important;

    backdrop-filter: blur(25px) saturate(200%) !important;

    -webkit-backdrop-filter: blur(25px) saturate(200%) !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;

  }


  .logo-img, .header-logo-img, .logo-link img {

    height: 38px !important;

    max-height: 40px !important;

    width: auto !important;

    filter: drop-shadow(0 0 12px rgba(255, 26, 26, 0.25));

  }


  .header-spacer {

    height: 90px !important;

  }


  .mobile-nav-toggle {

    width: 40px !important;

    height: 40px !important;

    border-radius: 12px !important;

    background: rgba(255, 255, 255, 0.08) !important;

    border: 1px solid rgba(255, 255, 255, 0.15) !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    transition: background 0.15s ease !important;

  }


  .mobile-nav-toggle:active {

    background: rgba(255, 255, 255, 0.15) !important;

  }


  /* ══════════════════════════════════════════════════════════════════════════════

     5. ELIMINATION OF FLOATING CLUTTER ON MOBILE

     ══════════════════════════════════════════════════════════════════════════════ */

  .whatsapp-sticky,

  .whatsapp-float,

  #wa-float-btn {

    display: none !important;

    visibility: hidden !important;

    pointer-events: none !important;

    opacity: 0 !important;

  }


  #maac-back-to-top {

    display: none !important;

  }


  /* Ensure Rootle Chat Widget stays cleanly ABOVE the dock without overlap */

  #maac-chat-widget-wrapper {

    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;

    right: 14px !important;

    z-index: 99990 !important;

  }


  /* ══════════════════════════════════════════════════════════════════════════════

     6. UNIFIED MOBILE APP BOTTOM DOCK (3-ACTION ARCHITECTURE)

     ══════════════════════════════════════════════════════════════════════════════ */

  .mobile-sticky-dock {

    position: fixed !important;

    bottom: 0 !important;

    left: 0 !important;

    right: 0 !important;

    width: 100% !important;

    max-width: 100% !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    pointer-events: none !important;

    z-index: 99995 !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    padding: 0 !important;

    margin: 0 !important;

  }


  .mobile-sticky-dock > * {

    pointer-events: auto !important;

  }


  .mobile-action-bar,

  .mobile-action-bar-jnr {

    position: fixed !important;

    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;

    left: 10px !important;

    right: 10px !important;

    width: calc(100% - 20px) !important;

    max-width: 460px !important;

    margin: 0 auto !important;

    z-index: 99995 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    padding: 6px 8px !important;

    border-radius: 100px !important;

    background: rgba(14, 17, 23, 0.90) !important;

    backdrop-filter: blur(30px) saturate(210%) !important;

    -webkit-backdrop-filter: blur(30px) saturate(210%) !important;

    border: 1px solid rgba(255, 255, 255, 0.18) !important;

    border-top: 1px solid rgba(255, 255, 255, 0.35) !important;

    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;

    box-sizing: border-box !important;

    gap: 8px !important;

    pointer-events: auto !important;

  }


  .mobile-sticky-dock .mobile-action-bar,

  .mobile-sticky-dock .mobile-action-bar-jnr {

    position: relative !important;

    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;

    left: auto !important;

    right: auto !important;

  }


  /* Individual App Dock Tab Items (3-Action Architecture) */

  .app-dock-tab {

    flex: 1 1 0 !important;

    min-width: 0 !important;

    height: 48px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 2px !important;

    text-decoration: none !important;

    color: #94A3B8 !important;

    border-radius: 50px !important;

    background: rgba(255, 255, 255, 0.04) !important;

    border: 1px solid rgba(255, 255, 255, 0.08) !important;

    padding: 4px 6px !important;

    cursor: pointer !important;

    user-select: none !important;

    transition: color 0.15s ease, background 0.15s ease, transform 0.12s ease !important;

  }


  .app-dock-tab:hover,

  .app-dock-tab:focus-visible {

    color: #FFFFFF !important;

    background: rgba(255, 255, 255, 0.09) !important;

  }


  .app-dock-tab:active {

    transform: scale(0.95) !important;

  }


  .app-dock-tab .dock-label {

    font-size: 0.70rem !important;

    font-weight: 800 !important;

    letter-spacing: 0.2px !important;

    line-height: 1 !important;

    white-space: nowrap !important;

  }


  .app-dock-tab.dock-wa {

    color: #25D366 !important;

    background: rgba(37, 211, 102, 0.08) !important;

    border-color: rgba(37, 211, 102, 0.25) !important;

  }


  .app-dock-tab.dock-wa:hover,

  .app-dock-tab.dock-wa:active {

    background: rgba(37, 211, 102, 0.16) !important;

  }


  .app-dock-tab.dock-call {

    color: #38BDF8 !important;

    background: rgba(56, 189, 248, 0.08) !important;

    border-color: rgba(56, 189, 248, 0.25) !important;

  }


  .app-dock-tab.dock-call:hover,

  .app-dock-tab.dock-call:active {

    background: rgba(56, 189, 248, 0.16) !important;

  }


  .dock-icon-wrap {

    position: relative !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

  }


  /* Pulse dot suppressed per user specification */

  .dock-pulse-dot {

    display: none !important;

  }


  /* Hero Center CTA Pill */

  .app-dock-cta,

  .mobile-action-bar .btn-apply,

  .mobile-action-bar-jnr .mobile-action-btn-apply {

    flex: 2.2 1 0 !important;

    height: 48px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    text-decoration: none !important;

    background: linear-gradient(135deg, #FF1A1A 0%, #D60000 100%) !important;

    color: #FFFFFF !important;

    border-radius: 50px !important;

    border: 1px solid rgba(255, 255, 255, 0.45) !important;

    box-shadow: 0 4px 18px rgba(230, 36, 36, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.45) !important;

    padding: 2px 10px !important;

    box-sizing: border-box !important;

    transition: transform 0.12s ease !important;

  }


  .app-dock-cta:active,

  .mobile-action-bar .btn-apply:active {

    transform: scale(0.96) !important;

  }


  .app-dock-cta .dock-cta-badge {

    font-size: 0.60rem !important;

    font-weight: 800 !important;

    letter-spacing: 0.5px !important;

    color: #FFE600 !important;

    text-transform: uppercase !important;

    line-height: 1 !important;

    margin-bottom: 2px !important;

  }


  .app-dock-cta .dock-cta-text {

    font-size: 0.86rem !important;

    font-weight: 800 !important;

    letter-spacing: -0.01em !important;

    color: #FFFFFF !important;

    line-height: 1.1 !important;

    white-space: nowrap !important;

  }


  /* Modal Open Dismissal */

  body.lead-modal-open .mobile-sticky-dock,

  body.lead-modal-open .mobile-action-bar,

  body.lead-modal-open .mobile-action-bar-jnr,

  body.menu-open .mobile-sticky-dock,

  body.menu-open .mobile-action-bar {

    opacity: 0 !important;

    pointer-events: none !important;

    transform: translateY(120%) !important;

    transition: transform 0.2s ease, opacity 0.15s ease !important;

  }


  /* ══════════════════════════════════════════════════════════════════════════════

     7. 2026 NATIVE BOTTOM SHEET ARCHITECTURE (THE LEAD MODAL)

     ══════════════════════════════════════════════════════════════════════════════ */

  .lead-modal {

    position: fixed !important;

    inset: 0 !important;

    background: rgba(0, 0, 0, 0.82) !important;

    backdrop-filter: blur(20px) saturate(180%) !important;

    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;

    z-index: 1000005 !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: flex-end !important;

    align-items: center !important;

    padding: 0 !important;

    margin: 0 !important;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;

  }


  .lead-modal.active {

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

  }


  .lead-modal .modal-content {

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

    border-radius: 28px 28px 0 0 !important;

    border-top: 1px solid rgba(255, 255, 255, 0.22) !important;

    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;

    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;

    border-bottom: none !important;

    background: linear-gradient(180deg, #181b22 0%, #0d0f13 100%) !important;

    box-shadow: 0 -16px 50px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;

    padding: 16px 14px calc(24px + env(safe-area-inset-bottom, 0px)) 14px !important;

    max-height: 90vh !important;

    overflow-y: auto !important;

    overscroll-behavior: contain !important;

    -webkit-overflow-scrolling: touch !important;

    transform: translateY(100%) !important;

    transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease !important;

    box-sizing: border-box !important;

  }


  .lead-modal.active .modal-content {

    transform: translateY(0) !important;

    opacity: 1 !important;

  }


  .lead-modal .modal-content::before {

    content: "" !important;

    display: block !important;

    width: 44px !important;

    height: 5px !important;

    background: rgba(255, 255, 255, 0.35) !important;

    border-radius: 100px !important;

    margin: 0 auto 16px auto !important;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;

  }


  .lead-modal .close-modal {

    top: 14px !important;

    right: 14px !important;

    width: 38px !important;

    height: 38px !important;

    min-width: 38px !important;

    min-height: 38px !important;

    border-radius: 50% !important;

    background: rgba(255, 255, 255, 0.1) !important;

    border: 1px solid rgba(255, 255, 255, 0.18) !important;

    color: #FFFFFF !important;

    font-size: 1.4rem !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    transition: background 0.15s ease !important;

  }


  .lead-modal .close-modal:active {

    background: rgba(255, 255, 255, 0.2) !important;

  }


  .lead-modal input[type="text"],

  .lead-modal input[type="tel"],

  .lead-modal input[type="email"],

  .lead-modal select {

    min-height: 50px !important;

    padding: 12px 14px !important;

    font-size: 16px !important;

    border-radius: 14px !important;

    background: rgba(255, 255, 255, 0.05) !important;

    border: 1px solid rgba(255, 255, 255, 0.16) !important;

    color: #FFFFFF !important;

    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;

    width: 100% !important;

    box-sizing: border-box !important;

  }


  .lead-modal input[type="text"]:focus,

  .lead-modal input[type="tel"]:focus,

  .lead-modal input[type="email"]:focus,

  .lead-modal select:focus {

    border-color: #E62424 !important;

    box-shadow: 0 0 0 3px rgba(230, 36, 36, 0.28) !important;

    background: rgba(255, 255, 255, 0.08) !important;

  }


  .lead-modal .submit-btn {

    min-height: 52px !important;

    padding: 14px 20px !important;

    font-size: 1rem !important;

    font-weight: 800 !important;

    border-radius: 14px !important;

    background: linear-gradient(135deg, #FF1A1A 0%, #D60000 100%) !important;

    box-shadow: 0 6px 20px rgba(230, 36, 36, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;

    letter-spacing: 0.3px !important;

    width: 100% !important;

  }


  /* ══════════════════════════════════════════════════════════════════════════════

     8. APP-STYLE BOTTOM SHEET & DRAWER HUB

     ══════════════════════════════════════════════════════════════════════════════ */

  .mobile-menu-drawer .drawer-overlay {

    background: rgba(0, 0, 0, 0.78) !important;

    backdrop-filter: blur(14px) !important;

    -webkit-backdrop-filter: blur(14px) !important;

  }


  .mobile-menu-drawer .drawer-content {

    background: linear-gradient(180deg, #161922 0%, #0d0f14 100%) !important;

    border-left: 1px solid rgba(255, 255, 255, 0.12) !important;

    box-shadow: -15px 0 45px rgba(0, 0, 0, 0.85) !important;

    padding: 20px 18px calc(24px + env(safe-area-inset-bottom, 0px)) 18px !important;

  }


  .drawer-header {

    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

    padding-bottom: 14px !important;

    margin-bottom: 18px !important;

  }


  .drawer-title {

    font-size: 1.05rem !important;

    font-weight: 800 !important;

    letter-spacing: 0.5px !important;

    color: #FFFFFF !important;

  }


  .close-drawer {

    width: 36px !important;

    height: 36px !important;

    border-radius: 50% !important;

    background: rgba(255, 255, 255, 0.08) !important;

    border: 1px solid rgba(255, 255, 255, 0.15) !important;

    color: #FFFFFF !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

  }


  /* ══════════════════════════════════════════════════════════════════════════════

     9. COURSE CARDS & EXPLORER (MOBILE NATIVE LOOK & SCROLL SNAP)

     ══════════════════════════════════════════════════════════════════════════════ */

  .course-filter-group {

    padding: 8px 10px 16px !important;

    gap: 8px !important;

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch !important;

    scroll-snap-type: x mandatory !important;

    scrollbar-width: none !important;

  }


  .course-filter {

    scroll-snap-align: start !important;

    flex-shrink: 0 !important;

    font-size: 0.82rem !important;

    font-weight: 700 !important;

    padding: 8px 16px !important;

    border-radius: 999px !important;

    border: 1px solid rgba(255, 255, 255, 0.14) !important;

    background: rgba(255, 255, 255, 0.04) !important;

  }


  .course-filter.active {

    background: #FF1A1A !important;

    border-color: #FF1A1A !important;

    box-shadow: 0 4px 14px rgba(255, 26, 26, 0.4) !important;

  }


  .course-card {

    background: rgba(20, 24, 32, 0.75) !important;

    backdrop-filter: blur(20px) !important;

    -webkit-backdrop-filter: blur(20px) !important;

    border: 1px solid rgba(255, 255, 255, 0.12) !important;

    border-radius: 20px !important;

    padding: 16px 14px !important;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;

    width: 100% !important;

    box-sizing: border-box !important;

  }


  .course-card h3 {

    font-size: 1.18rem !important;

    line-height: 1.3 !important;

  }


  .course-card p {

    font-size: 0.88rem !important;

    line-height: 1.5 !important;

    color: #94A3B8 !important;

  }


  .course-btn-row {

    display: flex !important;

    gap: 8px !important;

    margin-top: 14px !important;

  }


  .course-cta-btn {

    flex: 1 !important;

    height: 44px !important;

    min-height: 44px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 0.82rem !important;

    font-weight: 700 !important;

    border-radius: 12px !important;

    padding: 0 10px !important;

    text-align: center !important;

  }


  /* ══════════════════════════════════════════════════════════════════════════════

     10. THE WHATSAPP VOICE NOTE WIDGET (MAXIMUM VIEWPORT WIDTH ON MOBILE)

     ══════════════════════════════════════════════════════════════════════════════ */

  .wa-vn-card {

    width: 100% !important;

    max-width: 100% !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    margin-top: 0 !important;

    margin-bottom: 12px !important;

    padding: 10px 12px !important;

    border-radius: 16px !important;

    background: linear-gradient(135deg, #075e54 0%, #064E3B 50%, #0d5c4e 100%) !important;

    border: 1px solid rgba(37, 211, 102, 0.45) !important;

    box-shadow: 0 6px 20px rgba(7, 94, 84, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;

    box-sizing: border-box !important;

    display: block !important;

  }


  .wa-vn-header {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    width: 100% !important;

    gap: 8px !important;

    margin-bottom: 8px !important;

    box-sizing: border-box !important;

  }


  .wa-vn-identity {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    min-width: 0 !important;

    flex-shrink: 1 !important;

  }


  .wa-vn-avatar {

    height: 24px !important;

    width: auto !important;

    max-width: 56px !important;

    object-fit: contain !important;

    background: #ffffff !important;

    padding: 2px 4px !important;

    border-radius: 6px !important;

    border: 1px solid #25d366 !important;

    flex-shrink: 0 !important;

  }


  .wa-vn-title {

    font-size: clamp(0.74rem, 3.2vw, 0.82rem) !important;

    font-weight: 700 !important;

    color: #ffffff !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 4px !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    flex-shrink: 0 !important;

  }


  .wa-btn-shock {

    color: #ffffff !important;

    background: #25d366 !important;

    border: 1px solid #ffffff !important;

    text-decoration: none !important;

    padding: 5px 12px !important;

    border-radius: 20px !important;

    font-size: 0.74rem !important;

    font-weight: 700 !important;

    line-height: 1 !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 5px !important;

    flex-shrink: 0 !important;

  }


  /* Audio player track spanning 100% horizontal width */

  .wa-vn-player {

    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    gap: 10px !important;

    padding: 6px 10px !important;

    border-radius: 12px !important;

    background: rgba(0, 0, 0, 0.32) !important;

    box-sizing: border-box !important;

  }


  .wa-vn-play-btn {

    width: 32px !important;

    height: 32px !important;

    min-width: 32px !important;

    min-height: 32px !important;

    border-radius: 50% !important;

    background: #22C55E !important;

    color: #064E3B !important;

    border: none !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    flex-shrink: 0 !important;

    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.45) !important;

  }


  .wa-vn-controls {

    flex: 1 1 auto !important;

    width: 100% !important;

    min-width: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    gap: 3px !important;

  }


  .wa-vn-waveform {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    width: 100% !important;

    gap: 2px !important;

    height: 18px !important;

    margin-bottom: 2px !important;

    cursor: pointer !important;

  }


  .wa-bar {

    flex: 1 1 0 !important;

    max-width: 4px !important;

    min-width: 2px !important;

    margin: 0 1px !important;

    background: rgba(255, 255, 255, 0.55) !important;

    border-radius: 50px !important;

    transition: background 0.1s ease !important;

  }


  .wa-bar.played {

    background: #22C55E !important;

  }


  .wa-vn-meta {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    width: 100% !important;

    font-size: 0.72rem !important;

    color: rgba(255, 255, 255, 0.9) !important;

    line-height: 1 !important;

  }


  .wa-vn-speed {

    background: rgba(255, 255, 255, 0.22) !important;

    border: none !important;

    color: #ffffff !important;

    border-radius: 6px !important;

    padding: 0 4px !important;

    box-sizing: border-box !important;

    font-size: 0.68rem !important;

    font-weight: 700 !important;

    height: 18px !important;

    min-width: 24px !important;

    cursor: pointer !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

  }


  .wa-vn-nudge {

    width: 100% !important;

    box-sizing: border-box !important;

    text-align: center !important;

    font-size: 0.72rem !important;

    margin-top: 6px !important;

    padding: 4px 8px !important;

    border-radius: 8px !important;

    background: rgba(0, 0, 0, 0.28) !important;

    color: #D1FAE5 !important;

    line-height: 1.35 !important;

  }


  /* ══════════════════════════════════════════════════════════════════════════════

     11. PROGRESSIVE LEAD FORM (HERO & INLINE APP FORM STANDARD)

     ══════════════════════════════════════════════════════════════════════════════ */

  .form-group input,

  .form-group select {

    min-height: 50px !important;

    height: 50px !important;

    border-radius: 14px !important;

    background: rgba(255, 255, 255, 0.05) !important;

    border: 1px solid rgba(255, 255, 255, 0.15) !important;

    color: #FFFFFF !important;

    padding: 0 14px !important;

    font-size: 16px !important;

    width: 100% !important;

    box-sizing: border-box !important;

  }


  .form-group input:focus,

  .form-group select:focus {

    border-color: #FF1A1A !important;

    box-shadow: 0 0 12px rgba(255, 26, 26, 0.35) !important;

    background: rgba(255, 255, 255, 0.08) !important;

  }


  .submit-btn {

    min-height: 52px !important;

    height: 52px !important;

    border-radius: 14px !important;

    font-size: 0.98rem !important;

    font-weight: 800 !important;

    letter-spacing: 0.2px !important;

    box-shadow: 0 8px 25px rgba(230, 36, 36, 0.6) !important;

    width: 100% !important;

  }

}