/* ==========================================================================
   DGTechQA — WhatsApp theme for LOGIN / CREATE ACCOUNT (phones only).
   Linked straight from login.html + register.html, so it works even if the
   shared skin script is cached or the visitor is just on a narrow browser.
   ========================================================================== */
@media (max-width: 820px) {
  html:root:root body{
    background-color:#efeae2 !important;
    background-image:radial-gradient(rgba(11,20,26,.05) 1px,transparent 1.3px) !important;
    background-size:16px 16px !important;
    color:#111b21 !important;
    font-size:14px;
  }
  /* desktop chrome + animated backgrounds are not part of the phone app */
  html body nav.navbar, html body .navbar, html body .statusbar, html body .promo-banner,
  html body canvas#itBg, html body #itBg, html body canvas#starfield, html body #starfield{display:none !important}

  /* the form card = white chat card */
  html body .form-container, html body .form-shell > *:not(script), html body .card{
    background:#fff !important; border:0 !important; border-radius:16px !important;
    box-shadow:0 1px 3px rgba(11,20,26,.14) !important;
  }
  html body .form-shell{background:transparent !important}
  html body h1, html body h2, html body h3{color:#111b21 !important;letter-spacing:0}
  html body h1, html body .form-body h2{font-size:21px !important;line-height:1.25 !important}
  html body .form-sub, html body .form-body p, html body label{font-size:12px !important}
  html body .form-sub{color:#667781 !important}
  html body label{color:#008069 !important;font-weight:800 !important}

  /* fields */
  html body input[type=text], html body input[type=email], html body input[type=password],
  html body input[type=tel], html body input[type=number], html body select, html body textarea{
    background:#f0f2f5 !important; color:#111b21 !important; border:1px solid transparent !important;
    border-radius:12px !important; font-size:14px !important; box-shadow:none !important;
    transition:box-shadow .2s, background .2s;
  }
  html body input:focus, html body select:focus, html body textarea:focus{
    background:#fff !important; border-color:transparent !important; box-shadow:0 0 0 2px #25D366 !important; outline:0 !important;
  }
  html body input::placeholder{color:#8696a0 !important}

  /* primary buttons = WhatsApp green pill (replaces the red→blue gradient) */
  html body button[type=submit], html body #submitBtn, html body .fp-primary-btn,
  html body #otpVerifyBtn, html body #fpSendBtn, html body #fpOtpVerifyBtn, html body #fpResetBtn, html body #fpDoneBtn{
    background:#25D366 !important; background-image:none !important; color:#fff !important; border:0 !important;
    border-radius:26px !important; font-size:14px !important; font-weight:800 !important;
    box-shadow:0 4px 12px rgba(37,211,102,.35) !important; text-shadow:none !important;
  }
  html body button[type=submit]:disabled, html body #submitBtn:disabled{
    background:#9be7b9 !important; box-shadow:none !important; opacity:1 !important; cursor:not-allowed;
  }
  html body button[type=submit]:active, html body .fp-primary-btn:active{transform:scale(.97)}
  /* secondary buttons */
  html body #verifyEmailBtn, html body #otpResendBtn, html body #fpResendBtn{
    background:#e7fce3 !important; color:#075E54 !important; border:0 !important; border-radius:22px !important;
    font-size:12.5px !important; font-weight:800 !important; box-shadow:none !important;
  }
  html body .fp-text-btn{background:none !important;color:#667781 !important;border:0 !important;box-shadow:none !important}
  html body .pass-toggle{color:#008069 !important;background:none !important;border:0 !important;font-size:11px !important;font-weight:800 !important}

  /* links */
  html body a.forgot-pass-link, html body .form-footer-link, html body .form-footer a, html body .form-body a{color:#008069 !important;font-weight:800}
  html body .register-btn, html body .login-btn{border-radius:20px !important}

  /* register steps / progress dots */
  html body .step-dot.active, html body .step.active, html body .dots .active{background:#25D366 !important;box-shadow:none !important}

  /* OTP / reset overlays */
  html body .modal-box, html body .fp-modal, html body .otp-box{
    background:#fff !important;border:0 !important;border-radius:18px !important;color:#111b21 !important;
  }
  html body .error, html body .form-error{color:#d93025 !important}
  html body .success, html body .form-success{color:#128C7E !important}

  /* entrance animation */
  @keyframes waAuthIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  html body .form-container, html body .form-body{animation:waAuthIn .5s cubic-bezier(.22,1,.36,1) both}
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce){ html body .form-container, html body .form-body{animation:none !important} }