/* ═══════════════════════════════════════════════════════════════
   Login and OTP pages (login-new.php, OTP step in main_new.php)
   One responsive layout for desktop and phones. Palette as css.css:
   green #1a7a4a, navy #1e3a5f, tint #eef6f1, text #0f172a, muted #64748b.
   ═══════════════════════════════════════════════════════════════ */
* { box-sizing:border-box; }
html, body { margin:0; padding:0; min-height:100%; }
body { font-family:'Segoe UI', Arial, Helvetica, sans-serif; font-size:14px; color:#0f172a; background:#f5f8f6; -webkit-font-smoothing:antialiased; }
a { color:#1a7a4a; }
svg { fill:currentColor; }

.lg-page { position:relative; min-height:100vh; display:flex; flex-direction:column; overflow:hidden; }
@supports (height:100dvh) { .lg-page { min-height:100dvh; } }   /* phones: the real visible height, below the browser chrome */
.lg-blob { position:absolute; border-radius:50%; background:#e3efe7; z-index:0; pointer-events:none; }
.lg-blob.b1 { width:520px; height:520px; left:-180px; top:40px; }
.lg-blob.b2 { width:620px; height:620px; right:-240px; bottom:-260px; }
.lg-top, .lg-main, .lg-foot { position:relative; z-index:1; }

/* top bar */
.lg-top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 60px; background:#fff; border-bottom:1px solid #e8eef2; }
.lg-top img { display:block; height:48px; width:auto; }
.lg-top-contact { display:flex; align-items:center; gap:16px; font-size:14px; color:#1e3a5f; font-weight:500; }
.lg-top-contact span { display:inline-flex; align-items:center; gap:8px; }
.lg-top-contact svg { width:18px; height:18px; color:#1e3a5f; }
.lg-top-contact .sep { width:1px; height:18px; background:#cbd5e1; }

/* body: text and features on the left, card on the right (stacked on phones) */
.lg-main { flex:1; width:100%; max-width:1340px; margin:0 auto; padding:28px 60px 32px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px); grid-template-areas:"hero card" "more card"; gap:40px 64px; align-content:center; }
.lg-hero { grid-area:hero; align-self:end; }
.lg-card { grid-area:card; align-self:center; }
.lg-more { grid-area:more; align-self:start; }
.lg-hero h2 { margin:0 0 14px; font-size:52px; line-height:1.08; font-weight:600; color:#1e3a5f; letter-spacing:-.6px; }
.lg-hero h2 b { color:#1a7a4a; font-weight:600; }
.lg-hero p { margin:0; font-size:19px; color:#64748b; line-height:1.5; }

/* feature chips */
.lg-feat { list-style:none; margin:0; padding:0; display:flex; }
.lg-feat li { flex:1; display:flex; align-items:center; gap:14px; font-size:16px; line-height:1.3; color:#1e3a5f; padding:0 18px; border-left:1px solid #cfd8e0; }
.lg-feat li:first-child { padding-left:0; border-left:none; }
.lg-feat li i { width:58px; height:58px; border-radius:50%; background:#e3efe7; color:#1a7a4a; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.lg-feat li i svg { width:28px; height:28px; }
/* contact chips: only shown on phones, where the top bar hides them */
.lg-contact { display:none; list-style:none; margin:0 0 22px; padding:0; justify-content:center; }
.lg-contact li { display:flex; align-items:center; gap:12px; font-size:17px; color:#1e3a5f; font-weight:500; padding:0 22px; border-left:1px solid #cfd8e0; }
.lg-contact li:first-child { border-left:none; }
.lg-contact li i { width:52px; height:52px; border-radius:50%; background:#e3efe7; color:#1a7a4a; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.lg-contact li i svg { width:24px; height:24px; }
.lg-contact li a { color:#1e3a5f; text-decoration:none; }

/* card */
.lg-card { width:100%; background:#fff; border:1px solid #e8eef2; border-radius:20px; box-shadow:0 14px 40px rgba(15,23,42,.08); padding:32px 40px 28px; }
.lg-card h1 { margin:0 0 6px; font-size:34px; font-weight:600; color:#1e3a5f; letter-spacing:-.4px; }
.lg-sub { margin:0 0 22px; font-size:18px; color:#64748b; }
.lg-sub b { color:#1e293b; font-weight:600; }

.lg-alert { display:flex; align-items:flex-start; gap:10px; padding:11px 14px; border-radius:10px; font-size:14px; margin-bottom:18px; }
.lg-alert.err  { background:#fff5f5; border:1px solid #ffcdd2; color:#c62828; }
.lg-alert.info { background:#f0f8f3; border:1px solid #c8e6c9; color:#1a7a4a; }

.lg-field { margin-bottom:18px; }
.lg-field label { display:block; font-size:16px; font-weight:500; color:#1e3a5f; margin-bottom:6px; }
.lg-inp { position:relative; display:flex; align-items:center; }
.lg-inp .ic { position:absolute; left:18px; color:#64748b; display:inline-flex; pointer-events:none; }
.lg-inp .ic svg { width:20px; height:20px; }
.lg-inp input { width:100%; height:56px; padding:0 56px 0 54px; border:1px solid #dbe3ea; border-radius:10px; font:inherit; font-size:18px; color:#0f172a; background:#f3f5fb; outline:none; transition:border-color .15s, box-shadow .15s, background .15s; }
.lg-inp input::placeholder { color:#94a3b8; }
.lg-inp input:focus { border-color:#1a7a4a; background:#fff; box-shadow:0 0 0 3px rgba(26,122,74,.14); }
.lg-inp .eye { position:absolute; right:10px; top:50%; margin-top:-20px; width:40px; height:40px; border:none; background:transparent; border-radius:8px; color:#64748b; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.lg-inp .eye svg { width:22px; height:22px; }
.lg-inp .eye:hover, .lg-inp .eye.on { color:#1a7a4a; }

.lg-btn { width:100%; height:56px; margin-top:4px; border:none; border-radius:10px; background:#2f6b3a; color:#fff; font:inherit; font-size:20px; font-weight:600; cursor:pointer; transition:background .15s, transform .1s; display:inline-flex; align-items:center; justify-content:center; gap:10px; }
.lg-btn:hover { background:#1a7a4a; transform:translateY(-1px); }
.lg-btn[disabled] { opacity:.5; cursor:not-allowed; transform:none; }
.lg-btn .arr { font-size:22px; line-height:1; }

.lg-secure { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px; padding:14px 0; border-top:1px solid #e8eef2; border-bottom:1px solid #e8eef2; font-size:15px; color:#64748b; }
.lg-secure svg { width:20px; height:20px; color:#1a7a4a; flex-shrink:0; }
.lg-help { text-align:center; margin-top:14px; font-size:16px; color:#64748b; }
.lg-help a { color:#1a7a4a; text-decoration:none; font-weight:600; }
.lg-help a:hover { text-decoration:underline; }
.lg-help .arr { font-size:20px; line-height:1; margin-left:6px; }
.lg-card-links { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:16px; font-size:15px; }
.lg-card-links a { color:#1a7a4a; text-decoration:none; font-weight:600; }
.lg-card-links a:hover { text-decoration:underline; }

/* OTP boxes */
.lg-otp { display:flex; justify-content:space-between; gap:10px; margin:6px 0 22px; }
.lg-otp input { flex:1 1 0; min-width:0; height:56px; border:1px solid #dbe3ea; border-radius:10px; text-align:center; font:inherit; font-size:26px; font-weight:600; color:#0f172a; outline:none; background:#f3f5fb; transition:border-color .15s, box-shadow .15s, background .15s; }
.lg-otp input:focus { border-color:#1a7a4a; background:#fff; box-shadow:0 0 0 3px rgba(26,122,74,.14); }
.lg-qr { text-align:center; font-size:14px; color:#334155; line-height:1.5; background:#f8fafc; border:1px solid #e8eef2; border-radius:12px; padding:14px; margin-bottom:18px; }
.lg-qr img { max-width:100%; height:auto; margin:8px 0; }
.lg-wait { display:flex; align-items:center; justify-content:center; gap:10px; padding:18px 0; font-size:15px; color:#334155; }
.lg-wait img { height:36px; }

/* single centred card (OTP step) */
.lg-main-one { grid-template-columns:minmax(0,520px); grid-template-areas:"card"; justify-content:center; }
.lg-main-one .lg-card h1, .lg-main-one .lg-sub { text-align:center; }

/* footer */
.lg-foot { padding:12px 24px 14px; text-align:center; font-size:14px; line-height:1.5; color:#64748b; background:#fff; border-top:1px solid #e8eef2; }
.lg-foot a { color:#1a7a4a; text-decoration:none; }
.lg-foot a:hover { text-decoration:underline; }
.lg-foot .sep { margin:0 12px; color:#cbd5e1; }

/* privacy notice */
.lg-cookie { position:fixed; left:24px; bottom:24px; width:380px; max-width:calc(100% - 48px); background:#fff; border:1px solid #e8eef2; border-radius:14px; box-shadow:0 10px 30px rgba(15,23,42,.16); padding:16px 18px; z-index:50; }
.lg-cookie h3 { margin:0 0 8px; font-size:16px; font-weight:600; color:#1a7a4a; display:flex; align-items:center; gap:8px; }
.lg-cookie p { margin:0 0 8px; font-size:13px; color:#475569; line-height:1.5; }
.lg-cookie p a { font-weight:600; }
.lg-cookie-btns { display:flex; gap:10px; margin-top:12px; }
.lg-cookie-btns button { flex:1; height:38px; border-radius:8px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.lg-cookie-btns .ok { border:none; background:#1a7a4a; color:#fff; }
.lg-cookie-btns .no { border:1.5px solid #1a7a4a; background:#fff; color:#1a7a4a; }

/* short desktop windows (most laptops): tighter so nothing scrolls */
@media (min-width: 901px) and (max-height: 820px) {
    .lg-top { padding:8px 60px; }
    .lg-top img { height:42px; }
    .lg-main { padding:16px 60px 20px; gap:24px 64px; }
    .lg-hero h2 { font-size:42px; margin-bottom:10px; }
    .lg-hero p { font-size:17px; }
    .lg-feat li i { width:48px; height:48px; }
    .lg-feat li i svg { width:24px; height:24px; }
    .lg-card { padding:24px 32px 20px; }
    .lg-card h1 { font-size:28px; margin-bottom:4px; }
    .lg-sub { font-size:16px; margin-bottom:16px; }
    .lg-field { margin-bottom:14px; }
    .lg-field label { font-size:15px; margin-bottom:5px; }
    .lg-inp input, .lg-btn, .lg-otp input { height:48px; font-size:16px; }
    .lg-otp input { font-size:22px; }
    .lg-secure { margin-top:14px; padding:10px 0; font-size:14px; }
    .lg-help { margin-top:10px; font-size:15px; }
    .lg-foot { padding:8px 24px 10px; font-size:13px; }
}

/* laptops and tablets */
@media (max-width: 1200px) {
    .lg-top { padding:12px 32px; }
    .lg-main { padding:24px 32px 28px; gap:28px 40px; grid-template-columns:minmax(0,1fr) minmax(0,440px); }
    .lg-hero h2 { font-size:40px; }
    .lg-hero p { font-size:17px; }
    .lg-feat li { font-size:14px; padding:0 12px; gap:10px; }
    .lg-feat li i { width:48px; height:48px; }
    .lg-feat li i svg { width:24px; height:24px; }
    .lg-card { padding:34px 30px 26px; }
    .lg-card h1 { font-size:30px; }
    .lg-sub { font-size:16px; }
    .lg-inp input, .lg-btn, .lg-otp input { height:54px; font-size:17px; }
    .lg-otp input { font-size:24px; }
}

/* phones and small tablets: headline, card, then contacts and features */
@media (max-width: 900px) {
    .lg-main { grid-template-columns:minmax(0,1fr); grid-template-areas:"hero" "card" "more"; grid-template-rows:minmax(0,1fr) auto auto; gap:14px; padding:14px 16px 16px; max-width:560px; align-content:stretch; }   /* the headline row takes the spare height and centres its text: same distance to the top bar and to the card */
    .lg-hero { align-self:center; }
    .lg-hero h2 { font-size:22px; margin-bottom:6px; }
    .lg-hero p { font-size:15px; line-height:1.4; }
    .lg-contact { display:flex; margin:0; }
    .lg-contact li i { width:44px; height:44px; }
    .lg-contact li i svg { width:22px; height:22px; }
    .lg-feat { display:none; }               /* the service list only makes sense next to the big headline */
    .lg-top { padding:8px 16px; justify-content:center; }
    .lg-top img { height:38px; }
    .lg-top-contact { display:none; }
    .lg-card { padding:18px 18px 16px; border-radius:16px; }
    .lg-card h1 { display:none; }                 /* the headline above the card already greets the customer */
    .lg-main-one .lg-card h1 { display:block; font-size:24px; }
    .lg-sub { font-size:17px; color:#1e3a5f; font-weight:600; margin-bottom:14px; }
    .lg-main-one .lg-sub { font-size:15px; color:#64748b; font-weight:400; }
    .lg-field { margin-bottom:12px; }
    .lg-field label { font-size:14px; margin-bottom:5px; }
    .lg-inp input, .lg-btn { height:48px; font-size:16px; }
    .lg-btn { font-size:17px; }
    .lg-secure { font-size:13px; margin-top:12px; padding:10px 0; }
    .lg-help, .lg-card-links { font-size:14px; margin-top:10px; }
    .lg-otp { gap:6px; margin-bottom:16px; }
    .lg-otp input { height:48px; font-size:22px; }
    .lg-main-one { padding-top:20px; max-width:500px; align-content:start; grid-template-rows:auto; }
    .lg-blob.b1 { width:320px; height:320px; left:-160px; top:60px; }
    .lg-blob.b2 { width:360px; height:360px; right:-180px; bottom:-160px; }
    .lg-foot { font-size:12px; padding:10px 16px 12px; }
    .lg-cookie { left:12px; right:12px; bottom:12px; width:auto; max-width:none; }
}
@media (max-width: 420px) {
    .lg-contact li { font-size:15px; padding:0 12px; gap:8px; }
}
/* very short phones (e.g. 375x667): drop the chips so the card and footer still fit */
@media (max-width: 900px) and (max-height: 700px) {
    .lg-contact { display:none; }
    .lg-hero h2 { font-size:20px; }
    .lg-hero p { display:none; }
}