/* ==========================================================
   RUTSS V16 — ACCOUNT MOBILE REDESIGN
   Purpose: mobile auth first, compact clean information second.
   Desktop layout remains unchanged.
   ========================================================== */

@media (max-width: 700px) {
  body {
    overflow-x: hidden !important;
  }

  .rich-account-shell {
    padding: 16px 0 34px !important;
    min-height: auto !important;
    overflow: visible !important;
    background:
      radial-gradient(circle at 12% 2%, rgba(112,242,23,.07), transparent 27%),
      radial-gradient(circle at 93% 9%, rgba(91,139,255,.08), transparent 31%),
      #f5f8fb !important;
  }

  .rich-account-shell > .container.rich-account-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: calc(100% - 20px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
  }

  /* JavaScript also physically moves this first on mobile.
     Order is kept as a second layer of protection. */
  .rich-account-grid > .rich-account-card {
    order: 1 !important;
  }
  .rich-account-grid > .account-experience {
    order: 2 !important;
  }

  /* LOGIN / REGISTER FIRST */
  .rich-account-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 18px !important;
    border: 1px solid #dce6ef !important;
    border-radius: 17px !important;
    background: #fff !important;
    box-shadow: 0 14px 42px rgba(19,42,68,.08) !important;
    box-sizing: border-box !important;
  }

  .account-card-head {
    margin: 0 0 14px !important;
  }
  .account-card-kicker {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 25px !important;
    padding: 0 9px !important;
    margin: 0 0 9px !important;
    border-radius: 999px !important;
    background: #f0faeb !important;
    border: 1px solid #cceebc !important;
    color: #397c24 !important;
    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: .07em !important;
    font-weight: 500 !important;
  }
  .account-card-head h2 {
    margin: 0 !important;
    color: #10243a !important;
    font-size: 25px !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
    font-weight: 500 !important;
  }
  .account-card-head p {
    margin: 7px 0 0 !important;
    color: #667d92 !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
  }

  .social-auth-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .rich-account-card .social-auth {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 500 !important;
  }
  .rich-account-card .social-auth.google {
    background: #fff !important;
    border: 1px solid #d8e2eb !important;
    color: #173047 !important;
  }
  .rich-account-card .social-auth.facebook {
    background: #1f78ea !important;
    border: 1px solid #1f78ea !important;
    color: #fff !important;
  }

  .rich-account-card .auth-divider {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 13px 0 !important;
    color: #8394a5 !important;
    font-size: 9px !important;
  }
  .rich-account-card .auth-divider:before,
  .rich-account-card .auth-divider:after {
    content: "" !important;
    height: 1px !important;
    background: #e3eaf0 !important;
    flex: 1 1 auto !important;
  }

  .rich-account-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 4px !important;
    border-radius: 11px !important;
    background: #eff4f7 !important;
    box-sizing: border-box !important;
  }
  .rich-account-tabs button {
    min-width: 0 !important;
    height: 39px !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #5e7184 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
  }
  .rich-account-tabs button.active {
    background: #fff !important;
    color: #10243a !important;
    box-shadow: 0 3px 10px rgba(20,45,70,.06) !important;
  }

  .account-form-stage,
  .account-access-form {
    width: 100% !important;
    min-width: 0 !important;
  }
  .account-access-form {
    gap: 11px !important;
  }
  .account-access-form label {
    display: grid !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    color: #334a60 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
  }
  .account-access-form input {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border: 1px solid #d9e3ed !important;
    border-radius: 9px !important;
    background: #f8fafc !important;
    color: #11263b !important;
    font-size: 16px !important; /* avoids mobile auto zoom */
    font-weight: 400 !important;
    box-sizing: border-box !important;
  }
  .account-access-form input:focus {
    outline: 0 !important;
    border-color: #79a8d0 !important;
    box-shadow: 0 0 0 3px rgba(62,129,186,.10) !important;
  }
  .account-access-form .btn {
    width: 100% !important;
    min-height: 45px !important;
    height: 45px !important;
    margin-top: 1px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
  }

  .account-card-foot {
    display: flex !important;
    align-items: flex-start !important;
    gap: 7px !important;
    margin: 13px 0 0 !important;
    padding: 10px 11px !important;
    border: 1px solid #e1e9ef !important;
    border-radius: 9px !important;
    background: #f7fafc !important;
  }
  .account-card-foot span {
    font-size: 11px !important;
  }
  .account-card-foot p {
    margin: 0 !important;
    color: #718598 !important;
    font-size: 9px !important;
    line-height: 1.5 !important;
  }

  /* INFORMATION SECOND — compact, not a giant landing page */
  .account-experience {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .account-visual-card {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 17px !important;
    border: 1px solid #dce6ef !important;
    border-radius: 17px !important;
    background:
      radial-gradient(circle at 94% 4%, rgba(112,242,23,.11), transparent 26%),
      #fff !important;
    color: #10243a !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .account-glow {
    display: none !important;
  }
  .account-visual-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 0 13px !important;
  }
  .account-visual-top .badge {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 27px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    border: 1px solid #cceebc !important;
    background: #f0faeb !important;
    color: #397c24 !important;
    font-size: 9px !important;
    font-weight: 500 !important;
  }
  .account-live-dot {
    color: #597186 !important;
    font-size: 9px !important;
  }

  .account-visual-copy {
    max-width: none !important;
    margin: 0 !important;
  }
  .account-visual-copy h1 {
    max-width: 280px !important;
    margin: 0 !important;
    color: #10243a !important;
    font-size: 24px !important;
    line-height: 1.18 !important;
    letter-spacing: -.025em !important;
    font-weight: 500 !important;
  }
  .account-visual-copy p {
    margin: 8px 0 0 !important;
    color: #667d92 !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
  }

  /* Static example dashboard is useful on desktop but was making
     the mobile account screen long and visually noisy. */
  .account-dashboard-preview {
    display: none !important;
  }

  .rich-benefits {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    margin: 15px 0 0 !important;
  }
  .rich-benefits span {
    display: flex !important;
    min-width: 0 !important;
    min-height: 38px !important;
    align-items: center !important;
    padding: 8px 9px !important;
    border: 1px solid #e0e8ef !important;
    border-radius: 9px !important;
    background: #f8fafc !important;
    color: #50677b !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
    box-sizing: border-box !important;
  }

  .account-trust-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-top: 11px !important;
  }
  .account-trust-row span {
    display: inline-flex !important;
    min-height: 24px !important;
    align-items: center !important;
    padding: 0 7px !important;
    border: 1px solid #dce7ef !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #60768a !important;
    font-size: 8px !important;
    font-weight: 400 !important;
  }
}

@media (max-width: 380px) {
  .rich-benefits {
    grid-template-columns: 1fr !important;
  }
}