/* ==========================================================================
   SurveyTo - Login / Register
   ========================================================================== */
body.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(520px 320px at 100% 0%, rgba(253, 151, 46, .20), transparent 60%),
    radial-gradient(480px 300px at 0% 100%, rgba(29, 78, 216, .10), transparent 60%),
    #f6f8fc;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}
body.auth-page .section.register { padding: 24px 0 40px !important; }
body.auth-page .section.register > .container { max-width: 460px; }
body.auth-page .section.register .col-lg-4,
body.auth-page .section.register .col-md-6 { width: 100%; max-width: 440px; flex: 0 0 100%; }

body.auth-page .auth-back {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; color: #475569;
  background: #fff; border: 1px solid #e7ecf3; border-radius: 999px;
  padding: 8px 14px; margin-bottom: 4px;
}
body.auth-page .auth-back:hover { color: #0f172a; border-color: #cbd5e1; }
body.auth-page .logo img { max-height: 42px !important; }

body.auth-page .card {
  width: 100%;
  border: 1px solid #e7ecf3 !important;
  border-radius: 22px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 18px 40px rgba(15,23,42,.08) !important;
}
body.auth-page .card-body { padding: 6px 24px 26px; }
body.auth-page .card-title { color: #0b1220 !important; font-weight: 800 !important; letter-spacing: -.02em; font-size: 24px !important; }
body.auth-page .card-body > .pt-4 p { color: #64748b; font-size: 14px !important; }

body.auth-page .form-label { font-weight: 700; color: #1e293b; font-size: 14px; margin-bottom: 6px; }
body.auth-page .form-control,
body.auth-page .form-select {
  height: 50px;
  font-size: 16px !important;
  border: 1px solid #e2e8f0;
  background-color: #f8fafc;
  border-radius: 14px;
  color: #0f172a;
}
body.auth-page .form-control:focus {
  background-color: #fff;
  border-color: #fdba74;
  box-shadow: 0 0 0 4px rgba(253, 151, 46, .15);
}
body.auth-page .input-group-text {
  border: 1px solid #e2e8f0; background: #f1f5f9; color: #64748b;
  border-radius: 14px 0 0 14px; min-width: 48px; justify-content: center; font-weight: 700;
}
body.auth-page .input-group > .form-control { border-radius: 0 14px 14px 0 !important; }
body.auth-page .form-check-input { width: 1.15em; height: 1.15em; }
body.auth-page .form-check-input:checked { background-color: #ff7b00; border-color: #ff7b00; }
body.auth-page .btn-primary {
  height: 52px; border: 0 !important; border-radius: 14px !important;
  font-weight: 800; font-size: 16px;
  background: linear-gradient(135deg, #fd972e 0%, #fb6a3c 55%, #fa5563 100%) !important;
  box-shadow: 0 10px 22px rgba(250, 100, 60, .28);
}
body.auth-page .card a { color: #1d4ed8; font-weight: 700; text-decoration: none; }
body.auth-page .g_id_signin { display: flex; justify-content: center; }
body.auth-page .alert { border-radius: 12px; font-size: 14px; }

body.auth-page .modal-content { border: 0; border-radius: 20px; }
body.auth-page .modal-header, body.auth-page .modal-footer { border: 0; }
body.auth-page .modal-dialog { margin: 16px auto; max-width: 440px; padding: 0 12px; }

html:not(.in-app) #gt_float_wrapper { left: 10px !important; bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; transform: none !important; }
#gt_float_wrapper .gt_float_switcher { font-size: 13px !important; border-radius: 999px !important; overflow: hidden; }
#gt_float_wrapper .gt_float_switcher .gt-selected .gt-current-lang { padding: 6px 10px !important; }
#gt_float_wrapper .gt_float_switcher img { width: 22px !important; height: auto; }

@media (max-width: 576px) {
  body.auth-page .card-body { padding: 4px 18px 22px; }
  body.auth-page .card-title { font-size: 22px !important; }
}

/* In the app the web Google sign-in does not work (the app uses native sign-in) */
html.in-app .auth-page .g_id_signin,
html.in-app body.auth-page .g_id_signin { display: none !important; }