/* eLocal Info Network registration page | Author: Sudhakar Narra (SKN) */
:root{--skn-green:#078438;--skn-dark:#05652d;--skn-ink:#101b31;--skn-muted:#526078;--skn-border:#dce3eb;--skn-red:#c62828}
*{box-sizing:border-box}.skn-register-page{margin:0;min-width:320px;background:#f4f8f7;color:var(--skn-ink);font:16px/1.5 Poppins,Arial,sans-serif}.skn-register-page button,.skn-register-page input,.skn-register-page select{font:inherit}.skn-register-page a{color:var(--skn-dark)}
.skn-header{position:relative;min-height:100px;padding:12px clamp(16px,5vw,72px);display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fff}.skn-brand{display:flex;align-items:center;text-decoration:none;min-width:0}.skn-brand img{width:min(510px,52vw);max-height:82px;object-fit:contain;object-position:left}.skn-brand-fallback{line-height:1.1}.skn-brand-fallback b{display:block;font-size:clamp(22px,3vw,38px);color:#111;letter-spacing:-1px}.skn-brand-fallback b span{color:var(--skn-green)}.skn-brand-fallback small{display:block;margin-top:5px;color:var(--skn-dark);font-weight:700}.skn-login{display:flex;align-items:center;gap:16px;white-space:nowrap;font-size:14px}.skn-login a{padding:10px 15px;border:1.5px solid var(--skn-green);border-radius:10px;text-decoration:none;font-weight:700}
.skn-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(470px,1fr);gap:clamp(24px,4vw,58px);padding:clamp(22px,3vw,40px) clamp(16px,5vw,72px);background-color:#eaf4f7;background-image:linear-gradient(115deg,rgba(231,245,251,.92),rgba(255,255,255,.82) 55%,rgba(241,249,242,.94)),url("/assets/images/Sunlit-Coastal-Town-with-Temple-and-Sea.png");background-size:cover;background-position:center}
.skn-intro{display:flex;min-width:0}.skn-intro-copy{width:100%;display:flex;flex-direction:column;padding:16px 0}.skn-kicker{margin:0 0 10px;color:var(--skn-dark);font-size:12px;font-weight:800;letter-spacing:1.5px}.skn-intro h1{margin:0;font-size:clamp(38px,4.2vw,58px);line-height:1.03;font-weight:900;letter-spacing:-1.7px;color:#111}.skn-intro h1 span{color:var(--skn-green)}.skn-intro h2{margin:8px 0 14px;color:var(--skn-dark);font-size:clamp(17px,2vw,25px);font-weight:800}.skn-lead{max-width:520px;margin:0 0 22px;font-size:clamp(16px,1.7vw,22px);line-height:1.5}.skn-benefits{list-style:none;margin:0;padding:0;display:grid;gap:15px}.skn-benefits li{display:flex;align-items:center;gap:14px}.skn-benefits li>i{flex:0 0 52px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--skn-green);color:#fff;font-size:22px}.skn-benefits b,.skn-benefits small{display:block}.skn-benefits b{font-size:17px}.skn-benefits small{font-size:13px;color:#34445c}.skn-stats{margin-top:auto;padding:16px 12px;display:flex;justify-content:space-around;gap:10px;border:1px solid #fff;border-radius:16px;background:rgba(255,255,255,.85)}.skn-stats>div{display:flex;align-items:center;gap:9px}.skn-stats i{color:var(--skn-green);font-size:27px}.skn-stats b,.skn-stats small{display:block}.skn-stats b{font-size:15px;line-height:1.2}.skn-stats small{font-size:10px;color:var(--skn-muted)}
.skn-form-side{display:flex;align-items:center;min-width:0}.skn-card{width:100%;padding:clamp(20px,2.5vw,34px);border:1px solid #e2e8ec;border-radius:18px;background:rgba(255,255,255,.97);box-shadow:0 14px 42px #172d3810}.skn-card h2{margin:0;font-size:clamp(25px,2.6vw,34px);line-height:1.2;letter-spacing:-.6px;font-weight:850}.skn-subtitle{margin:8px 0 18px;color:#394961;font-size:14px}.skn-account-types{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:0 0 18px;padding:0;border:0}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skn-account{position:relative;min-height:132px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1.5px solid var(--skn-border);border-radius:12px;text-align:center;cursor:pointer;background:#fff}.skn-account input{position:absolute;width:1px;height:1px;opacity:0}.skn-account:focus-within{outline:3px solid #07843830;outline-offset:2px}.skn-account.is-selected{border-color:var(--skn-green);background:#f0fbf2;box-shadow:inset 0 0 0 1px var(--skn-green)}.skn-account-icon{font-size:31px;color:var(--skn-green)}.skn-account b{font-size:15px}.skn-account small{font-size:12px;color:#47566e;line-height:1.4}.skn-check{position:absolute;right:9px;top:9px;width:20px;height:20px;border:1.5px solid #aab5c3;border-radius:50%;display:grid;place-items:center;font-size:10px;color:transparent}.skn-account.is-selected .skn-check{background:var(--skn-green);border-color:var(--skn-green);color:white}
.skn-field{margin-bottom:13px;min-width:0}.skn-field>label{display:block;margin:0 0 5px;font-size:13px;font-weight:700}.skn-field em{color:#df2929;font-style:normal}.skn-control{min-height:46px;display:flex;align-items:center;min-width:0;border:1.5px solid var(--skn-border);border-radius:9px;background:#fff;transition:border-color .15s,box-shadow .15s}.skn-control:focus-within{border-color:var(--skn-green);box-shadow:0 0 0 3px #07843817}.skn-control>i{flex:0 0 42px;text-align:center;color:#596981}.skn-control input,.skn-control select{width:100%;min-width:0;min-height:43px;padding:8px 9px;border:0;outline:0;background:transparent;color:#152238;font-size:13px}.skn-control input::placeholder{color:#7a879a;opacity:1}.skn-phone select{flex:0 0 75px;width:75px;padding:7px 4px;border-left:1px solid #e1e6ec;border-right:1px solid #e1e6ec}.skn-phone input{padding-left:12px}.skn-password-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.skn-eye{flex:0 0 36px;height:40px;border:0;background:transparent;color:#53647c;cursor:pointer}.skn-eye:hover{color:var(--skn-green)}.skn-hint,.skn-error{display:block;margin-top:4px;font-size:11px;line-height:1.4}.skn-hint{color:#6d788a}.skn-error{color:var(--skn-red)}.skn-error:empty{display:none}.skn-control.is-invalid{border-color:var(--skn-red)}.skn-control.is-valid{border-color:#167a39}.skn-terms{display:flex;align-items:flex-start;gap:9px;margin:8px 0 0}.skn-terms input{width:19px;height:19px;flex:0 0 auto;margin:2px 0 0;accent-color:var(--skn-green)}.skn-terms label{font-size:12px;line-height:1.55;color:#26364c}.skn-terms a{font-weight:600;text-decoration:underline}.skn-submit,.skn-google{width:100%;min-height:48px;display:flex;align-items:center;justify-content:center;gap:11px;border-radius:9px;font-weight:750;cursor:pointer}.skn-submit{margin-top:12px;background:var(--skn-green);border:1px solid var(--skn-green);color:#fff}.skn-submit:hover{background:var(--skn-dark)}.skn-or{display:flex;align-items:center;gap:14px;margin:13px 0;color:var(--skn-muted);font-size:13px}.skn-or:before,.skn-or:after{content:"";height:1px;background:#e0e6ec;flex:1}.skn-google{border:1.5px solid var(--skn-border);background:#fff;color:#17243a;font-size:14px}.skn-google:hover{background:#f8fafc}.skn-google b{font:bold 22px Arial;color:#4285f4}.skn-note{margin:14px 0 0;text-align:center;color:#68758a;font-size:11px}.skn-status{margin:0 0 12px;padding:10px 12px;border-radius:8px;font-size:13px}.skn-status.is-success{background:#eaf8ee;border:1px solid #b8e4c4;color:#155e2e}.skn-status.is-info{background:#fff6df;border:1px solid #f0dca9;color:#7b4b00}
.skn-footer{display:grid;grid-template-columns:repeat(4,1fr);padding:18px clamp(20px,7vw,100px);background:#fff;border-top:1px solid #e5ebef}.skn-footer>div{display:flex;justify-content:center;align-items:center;gap:12px;padding:6px 10px;color:#43536b;font-size:13px;line-height:1.4}.skn-footer>div+div{border-left:1px solid #e0e6ec}.skn-footer i{font-size:30px;color:var(--skn-dark)}
@media(max-width:1050px){.skn-main{grid-template-columns:1fr;gap:22px}.skn-intro-copy{padding:8px 0 0}.skn-benefits{grid-template-columns:1fr 1fr}.skn-stats{margin-top:22px}.skn-form-side{justify-content:center}.skn-card{max-width:760px}}
@media(max-width:640px){.skn-header{min-height:75px;padding:10px 13px;gap:8px}.skn-brand img{width:min(52vw,260px);max-height:52px}.skn-login{gap:7px;font-size:10px}.skn-login a{padding:8px;font-size:11px}.skn-main{padding:18px 12px;gap:20px}.skn-intro h1{font-size:38px}.skn-intro h2{font-size:17px}.skn-lead{font-size:16px}.skn-benefits{gap:13px 8px}.skn-benefits li{align-items:flex-start;gap:8px}.skn-benefits li>i{flex-basis:39px;width:39px;height:39px;font-size:16px}.skn-benefits b{font-size:13px}.skn-benefits small{font-size:10px}.skn-stats{padding:12px 7px;gap:6px}.skn-stats>div{gap:5px}.skn-stats i{font-size:19px}.skn-stats b{font-size:11px}.skn-stats small{font-size:8px}.skn-card{padding:19px 14px;border-radius:14px}.skn-card h2{font-size:25px}.skn-account-types{gap:7px}.skn-account{min-height:120px;padding:11px 5px}.skn-account b{font-size:13px}.skn-account small{font-size:10px}.skn-password-grid{grid-template-columns:1fr;gap:0}.skn-footer{grid-template-columns:1fr 1fr;padding:10px}.skn-footer>div{justify-content:flex-start;padding:12px 8px;font-size:12px}.skn-footer>div+div{border-left:0}.skn-footer>div:nth-child(even){border-left:1px solid #e0e6ec}.skn-footer>div:nth-child(n+3){border-top:1px solid #e0e6ec}}
@media(prefers-reduced-motion:reduce){.skn-register-page *{scroll-behavior:auto!important;transition:none!important}}



/* SKN - Balanced Registration Layout */

.skn-main {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    padding: 28px 36px;
    background-image:
        linear-gradient(
            100deg,
            rgba(231, 245, 251, 0.72),
            rgba(255, 255, 255, 0.52) 55%,
            rgba(241, 249, 242, 0.68)
        ),
        url("/assets/images/Sunlit-Coastal-Town-with-Temple-and-Sea.png");
    background-size: cover;
    background-position: center 100%;
}

.skn-intro {
    min-width: 0;
}

.skn-intro-copy {
    padding: 10px 0;
}

.skn-intro h1 {
    font-size: clamp(40px, 3.7vw, 56px);
}

.skn-lead {
    max-width: 480px;
}

.skn-benefits {
    gap: 13px;
}

.skn-form-side {
    min-width: 0;
    justify-content: flex-end;
}

.skn-card {
    width: 100%;
    max-width: none;
    padding: 28px;
}

@media (max-width: 1050px) {
    .skn-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 24px;
    }

    .skn-form-side {
        justify-content: center;
    }

    .skn-card {
        max-width: 760px;
    }
}

@media (max-width: 640px) {
    .skn-main {
        padding: 18px 12px;
    }

    .skn-card {
        padding: 19px 14px;
    }
}