/* scoped modal adjustments: refreshed login pop-up */
  #loginModal.modal-backdrop { display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; background:rgba(10,15,32,0.65); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:16px; box-sizing:border-box }
  .modal.login-modern { position:relative; display:flex; flex-direction:column; width:92%; max-width:420px; border-radius:20px; padding:2px; background:linear-gradient(160deg, rgba(91,70,255,0.65), rgba(29,78,216,0.65)); box-shadow:0 28px 70px rgba(15,23,42,0.28); overflow:hidden }
  .modal.login-modern::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(15,23,42,0.12)); pointer-events:none }
  .modal.login-modern button#closeModal { position:absolute; right:18px; top:16px; background:rgba(15,23,42,0.65); color:#fff; border:0; width:34px; height:34px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; z-index:5; transition:transform 0.18s ease, background 0.18s ease }
  .modal.login-modern button#closeModal:hover { background:rgba(15,23,42,0.85); transform:scale(1.05) }
  .login-header { padding:34px 28px 22px 28px; position:relative; z-index:2; text-align:center; background:linear-gradient(160deg, rgba(255,255,255,0.16), rgba(255,255,255,0)); color:#e0e7ff }
  .login-title { margin:0; font-size:22px; font-weight:800; letter-spacing:0.01em; color:#f8fafc }
  .login-subtitle { margin:6px 0 0 0; color:rgba(226,232,240,0.82); font-size:14px }
  .login-content { position:relative; z-index:3; background:#fff; border-radius:18px 18px 20px 20px; margin:0 14px 14px 14px; padding:22px 24px 24px 24px; box-sizing:border-box; flex:1 1 auto; display:flex; flex-direction:column; gap:18px; box-shadow:0 18px 45px rgba(15,23,42,0.12) }
  /* visual edge where the injected WHMCS form begins */
  .login-content .form-start-edge { flex:1 1 auto; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:14px }
  .login-error { color:#b91c1c; background:linear-gradient(90deg, rgba(248,113,113,0.14), rgba(248,113,113,0.08)); padding:10px 14px; margin:0; border-radius:10px; display:none; font-weight:600 }
  .login-content .form-start-edge .login-form-row { display:flex; flex-direction:column; gap:6px; width:100%; text-align:left }
  .login-content .form-start-edge .login-form-row .label { font-size:14px; color:#475569; display:flex; align-items:center; justify-content:space-between; font-weight:600 }
  .login-content .form-start-edge .login-form-row .forgot-wrap { margin-left:auto }
  .login-content .form-start-edge .login-input { width:100%; font-size:16px; padding:12px 14px; border:1px solid rgba(148,163,184,0.5); border-radius:12px; box-sizing:border-box; background:rgba(248,250,252,0.9); transition:border 0.18s ease, box-shadow 0.18s ease }
  /* left-align the text content and placeholders inside the inputs */
  .login-content .form-start-edge .login-input { text-align:left }
  .login-content .form-start-edge .login-input::placeholder { text-align:left; color:rgba(100,116,139,0.7) }
  .login-content .form-start-edge .login-input:focus { border-color:rgba(99,102,241,0.8); box-shadow:0 0 0 4px rgba(99,102,241,0.08); background:#fff; outline:none }
  .login-content .form-start-edge .pw-wrap { position:relative; width:100%; display:flex; justify-content:flex-start }
  .login-content .form-start-edge .pw-wrap .login-input { padding-right:52px }
  .login-content .form-start-edge .pw-toggle { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:rgba(241,245,249,0.9); border:1px solid rgba(148,163,184,0.4); padding:6px 8px; border-radius:8px; cursor:pointer; font-size:13px; line-height:1; color:#475569; transition:all 0.2s ease }
  .login-content .form-start-edge .pw-toggle:hover { color:#1e293b; border-color:rgba(99,102,241,0.4) }
  .login-content .form-start-edge .pw-toggle[aria-pressed="true"]{ color:var(--accent); background:rgba(99,102,241,0.12); border-color:rgba(99,102,241,0.4) }
  /* show/hide separate SVG icons inside pw-toggle */
  .login-content .form-start-edge .pw-toggle .show-icon { display:inline }
  .login-content .form-start-edge .pw-toggle .hide-icon { display:none }
  .login-content .form-start-edge .pw-toggle[aria-pressed="true"] .show-icon { display:none }
  .login-content .form-start-edge .pw-toggle[aria-pressed="true"] .hide-icon { display:inline }
  .login-content .form-start-edge .login-actions { display:flex; justify-content:space-between; align-items:center; margin-top:6px; width:100%; gap:12px; flex-wrap:wrap }
  .login-content .form-start-edge .remember-row { display:flex; justify-content:flex-start; align-items:center; gap:8px; width:auto; margin-top:0; font-size:13px; color:#475569 }
  .login-content .form-start-edge .remember-row input { width:16px; height:16px }
  /* larger action button inside login modal */
  .modal.login-modern .continue-btn { padding:12px 22px; font-size:15px; border-radius:12px; background:linear-gradient(120deg, #5b46ff, #8369ff); border:0; color:#fff; font-weight:700; box-shadow:0 15px 35px rgba(91,70,255,0.28); transition:transform 0.18s ease, box-shadow 0.18s ease; flex:1 0 auto; min-width:140px }
  .modal.login-modern .continue-btn:hover { transform:translateY(-1px); box-shadow:0 18px 40px rgba(91,70,255,0.32) }
  .modal.login-modern .continue-btn:disabled { opacity:0.65; box-shadow:none }
  .login-content .form-start-edge .forgot-wrap a { color:#5b46ff; text-decoration:none; font-weight:600; font-size:13px }
  .login-content .form-start-edge .forgot-wrap a:hover { text-decoration:underline }
  @media (max-width:600px) {
    .modal.login-modern { width:96%; max-width:360px; padding:1.5px; border-radius:18px }
    .modal.login-modern button#closeModal { right:14px; top:12px }
    .login-header { padding:30px 22px 18px 22px }
    .login-title { font-size:20px }
    .login-content { margin:0 10px 12px 10px; padding:18px 18px 20px 18px }
    .modal.login-modern .continue-btn { width:100%; min-width:0 }
  }
  /* login form loading UI */
  .login-loader { display:flex; gap:12px; align-items:center; padding:18px; width:100%; max-width:420px }
  .login-loader .spinner { width:36px; height:36px; border:4px solid rgba(0,0,0,0.08); border-top-color:var(--accent); border-radius:50%; animation:loader-spin .9s linear infinite }
  @keyframes loader-spin { to { transform:rotate(360deg) } }
  .login-loader .skeleton { flex:1; display:flex; flex-direction:column; gap:8px }
  .login-loader .skeleton .line { height:12px; background:linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.08) 37%, rgba(0,0,0,0.06) 63%); background-size:400% 100%; border-radius:6px; animation:skeleton-shimmer 1.2s linear infinite }
  .login-loader .skeleton .line.short { width:40% }
  @keyframes skeleton-shimmer { 0% { background-position:200% 0 } 100% { background-position:-200% 0 } }
  /* center the loader inside the modal when loading */
  .login-content.loading { align-items:center; justify-content:center }
  /* full-page signin loading overlay (appears below the modal but above page content) */
  #signinOverlay { display:none; position:fixed; inset:0; z-index:9900; align-items:center; justify-content:center; background:rgba(255,255,255,0.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px) }
  #signinOverlay .inner { background:rgba(26,35,64,0.78); padding:18px 20px; border-radius:14px; box-shadow:0 18px 50px rgba(15,23,42,0.32); display:flex; gap:12px; align-items:center; color:#f8fafc }
  #signinOverlay .spinner { width:40px; height:40px; border:4px solid rgba(0,0,0,0.08); border-top-color:var(--accent); border-radius:50%; animation:loader-spin .9s linear infinite }
  #signinOverlay .msg { font-weight:700; color:#e2e8f0 }
  /* modal-local overlay to blur the modal and show centered loader */
  .modal.login-modern .modal-local-overlay { display:none; position:absolute; inset:0; z-index:30; align-items:center; justify-content:center; background:rgba(15,23,42,0.55); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px) }
  .modal.login-modern .modal-local-overlay .spinner { width:44px; height:44px; border:5px solid rgba(148,163,184,0.24); border-top-color:#5b46ff; border-radius:50%; animation:loader-spin .9s linear infinite }
  .modal.login-modern.loading .modal-local-overlay { display:flex }
  /* compact mobile spacing for login form */
  @media (max-width:520px) {
    .login-content .form-start-edge .login-form-row { margin-bottom:6px }
    .login-content .form-start-edge .login-form-row .label { margin-bottom:4px; font-size:13px }
    .login-content .form-start-edge .login-input { padding:8px 10px; font-size:14px }
    .login-content .form-start-edge .pw-wrap .login-input { padding-right:42px }
    .login-content .form-start-edge .login-actions { margin-top:6px; gap:6px }
    .login-loader { gap:8px; padding:12px }
    .login-loader .skeleton .line { height:10px }
  }