/* Owner Access login card styles — uses CSS variables defined in the main stylesheet:
   --navy, --ocre, --gray-light, --gray-mid, --line, --line-strong, --off-white, --font */

  .login-card{
    position:absolute; top:52px; right:5%; width:340px; max-width:88%;
    background:var(--white); border-radius:8px; box-shadow:var(--shadow-lg);
    padding:28px 26px 26px; z-index:3;
  }
  .login-card .lc-logo{ display:flex; justify-content:center; margin-bottom:18px; }
  .login-card .lc-logo img{ height:26px; }
  .login-card h3{ text-align:center; font-size:17px; font-weight:800; margin-bottom:16px; }
  .lc-avatar{ width:52px; height:52px; border-radius:50%; background:var(--gray-light); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
  .lc-avatar svg{ width:22px; height:22px; stroke:var(--gray-mid); }
  .login-card .lc-sub{ text-align:center; font-size:12.5px; color:var(--gray-mid); line-height:1.5; margin-bottom:20px; padding:0 6px; }
  .lc-field{ margin-bottom:14px; }
  .lc-field label{ display:block; font-size:11px; font-weight:700; color:var(--navy); margin-bottom:6px; }
  .lc-input{ position:relative; }
  .lc-input input{ width:100%; border:1px solid var(--line-strong); border-radius:4px; padding:10px 36px 10px 12px; font-size:13px; font-family:var(--font); color:var(--navy); background:var(--off-white); }
  .lc-input input:focus{ outline:2px solid var(--ocre); }
  .lc-input svg{ position:absolute; right:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; stroke:var(--gray-mid); }
  .lc-row{ display:flex; align-items:center; justify-content:space-between; margin:14px 0 18px; font-size:11.5px; }
  .lc-remember{ display:flex; align-items:center; gap:6px; color:var(--gray-mid); }
  .lc-remember input{ accent-color:var(--ocre); }
  .lc-row a{ color:var(--ocre); font-weight:600; text-decoration:none; }
  .login-card .btn{ width:100%; justify-content:center; font-size:12px; }
  .lc-divider{ display:flex; align-items:center; gap:10px; margin:16px 0; }
  .lc-divider::before,.lc-divider::after{ content:""; flex:1; height:1px; background:var(--line); }
  .lc-divider span{ font-size:11px; color:var(--gray-mid); }
  .login-card .btn-outline{ margin-top:0; }
  .lc-footer{ text-align:center; font-size:11.5px; color:var(--gray-mid); margin-top:16px; }
  .lc-footer a{ color:var(--ocre); font-weight:700; text-decoration:none; }

  /* On mobile/tablet the photo shrinks (see .hero-photo-mobile in the main stylesheet),
     so the card stops floating over it and flows normally below with its own space. */
  @media (max-width:980px){
    .login-card{
      position:static;
      width:100%;
      max-width:400px;
      margin:0 auto 32px;
      right:auto; top:auto;
    }
  }