/* ==========================================================================
   Premium Organic Wellness Login — shared stylesheet
   Used by: Member_Login.aspx, Login.aspx
   Brand: Swaraaj Bharti Wellness  |  Style: Premium SaaS + Organic Wellness
   ========================================================================== */

:root {
    --pl-primary: #2E7D32;
    --pl-primary-dark: #1B5E20;
    --pl-secondary: #66BB6A;
    --pl-accent: #A5D6A7;
    --pl-bg: #F8FBF7;
    --pl-ink: #1F2A24;
    --pl-muted: #6B7B72;
    --pl-line: #E4EFE6;
    --pl-card: rgba(255, 255, 255, 0.72);
    --pl-radius: 24px;
    --pl-radius-sm: 14px;
    --pl-shadow: 0 24px 60px -20px rgba(27, 94, 32, 0.28), 0 8px 24px -12px rgba(27, 94, 32, 0.18);
    --pl-shadow-soft: 0 8px 24px -12px rgba(46, 125, 50, 0.20);
    --pl-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---- Reset-ish (scoped, non-destructive) ---------------------------------- */
html, body { height: 100%; }

body.pl-body {
    margin: 0;
    font-family: var(--pl-font);
    color: var(--pl-ink);
    background: var(--pl-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
}

.premium-login *,
.premium-login *::before,
.premium-login *::after { box-sizing: border-box; }

/* ==========================================================================
   1. Organic background — soft gradient, blurred orbs, botanical pattern, leaves
   ========================================================================== */
.pl-stage {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 18px;
    overflow: hidden;
    background:
        radial-gradient(1100px 720px at 12% -8%, #E9F6EC 0%, rgba(233, 246, 236, 0) 55%),
        radial-gradient(1000px 700px at 110% 12%, #EAF7EE 0%, rgba(234, 247, 238, 0) 60%),
        linear-gradient(160deg, #F8FBF7 0%, #F2F9F3 48%, #ECF6EE 100%);
}

/* subtle botanical dot pattern */
.pl-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(46, 125, 50, 0.06) 1.4px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
    mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
    opacity: 0.7;
    pointer-events: none;
}

.pl-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(46px);
    opacity: 0.55;
    pointer-events: none;
    animation: pl-float 16s ease-in-out infinite;
}
.pl-orb--1 { width: 360px; height: 360px; top: -120px; left: -100px; background: radial-gradient(circle, #A5D6A7, transparent 70%); }
.pl-orb--2 { width: 420px; height: 420px; bottom: -160px; right: -120px; background: radial-gradient(circle, #66BB6A, transparent 70%); animation-delay: -5s; }
.pl-orb--3 { width: 240px; height: 240px; top: 38%; right: 10%; background: radial-gradient(circle, #C8E6C9, transparent 70%); animation-delay: -9s; }

/* floating leaf illustrations */
.pl-leaf {
    position: absolute;
    color: var(--pl-secondary);
    opacity: 0.16;
    pointer-events: none;
    animation: pl-drift 18s ease-in-out infinite;
}
.pl-leaf svg { display: block; width: 100%; height: 100%; }
.pl-leaf--1 { width: 92px; height: 92px; top: 12%; left: 8%; transform: rotate(-18deg); }
.pl-leaf--2 { width: 64px; height: 64px; top: 70%; left: 14%; transform: rotate(24deg); animation-delay: -4s; }
.pl-leaf--3 { width: 110px; height: 110px; top: 16%; right: 9%; transform: rotate(32deg); animation-delay: -8s; }
.pl-leaf--4 { width: 74px; height: 74px; bottom: 12%; right: 14%; transform: rotate(-12deg); animation-delay: -12s; opacity: 0.12; }

@keyframes pl-float {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-26px) translateX(14px); }
}
@keyframes pl-drift {
    0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
    50% { transform: translateY(-18px) rotate(calc(var(--r, 0deg) + 6deg)); }
}

/* ==========================================================================
   2. Card
   ========================================================================== */
.pl-shell {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 460px;
    animation: pl-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes pl-rise {
    from { opacity: 0; transform: translateY(24px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.pl-card {
    position: relative;
    background: var(--pl-card);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: var(--pl-radius);
    box-shadow: var(--pl-shadow);
    padding: 10px 28px 16px;
}

/* ---- Header ---- */
.pl-head { text-align: center; margin-bottom: 22px; }

.pl-leafbadge {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(140deg, var(--pl-secondary), var(--pl-primary));
    box-shadow: 0 10px 22px -8px rgba(46, 125, 50, 0.55);
}
.pl-leafbadge svg { width: 30px; height: 30px; }

.pl-logo { height: 56px; width: auto; margin: 2px auto 12px; display: block; }

.pl-title {
    margin: 0;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.4px;
    color: var(--pl-ink);
}
.pl-subtitle {
    margin: 6px 0 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--pl-muted);
}

/* ---- Trust badges ---- */
.pl-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 4px;
}
.pl-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--pl-primary-dark);
    background: rgba(165, 214, 167, 0.28);
    border: 1px solid rgba(102, 187, 106, 0.32);
    border-radius: 999px;
    white-space: nowrap;
}
.pl-badge svg { width: 13px; height: 13px; }

/* ==========================================================================
   3. Form fields — floating labels, icons, focus glow
   ========================================================================== */
.pl-form { margin-top: 18px; }

.pl-field { position: relative; margin-bottom: 16px; }

.pl-field__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pl-muted);
    display: flex;
    transition: color 0.2s ease;
    pointer-events: none;
    z-index: 2;
}
.pl-field__icon svg { width: 19px; height: 19px; }

/* the actual input (asp:TextBox renders <input>) */
.pl-input {
    width: 100%;
    height: 54px;
    padding: 18px 16px 6px 44px;
    font-family: var(--pl-font);
    font-size: 15px;
    color: var(--pl-ink);
    background: rgba(255, 255, 255, 0.85);
    border: 1.5px solid var(--pl-line);
    /*border-radius: var(--pl-radius-sm);*/
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}
.pl-input:hover { border-color: #CFE5D2; }
.pl-input:focus {
    border-color: var(--pl-secondary);
    background: #fff;
    /*box-shadow: 0 0 0 4px rgba(102, 187, 106, 0.18);*/
}

/* floating label */
.pl-label {
    position: absolute;
    left: 44px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--pl-muted);
    pointer-events: none;
    transition: all 0.16s ease;
    background: transparent;
}
.pl-input:focus ~ .pl-label,
.pl-input:not(:placeholder-shown) ~ .pl-label,
.pl-input:-webkit-autofill ~ .pl-label,
.pl-input:autofill ~ .pl-label {
    top: 13px;
    transform: translateY(0);
    font-size: 17px;
    font-weight: 500;
    color: var(--pl-primary);
}
.pl-input:focus ~ .pl-field__icon,
.pl-field:focus-within .pl-field__icon { color: var(--pl-primary); }

/* password visibility toggle */
.pl-eye {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border: none;
    background: transparent;
    color: var(--pl-muted);
    cursor: pointer;
    border-radius: 10px;
    transition: color 0.2s ease, background 0.2s ease;
    z-index: 3;
}
.pl-eye:hover { color: var(--pl-primary); background: rgba(102, 187, 106, 0.12); }
.pl-eye svg { width: 19px; height: 19px; }
.pl-eye .pl-eye-off { display: none; }
.pl-eye.is-on .pl-eye-on { display: none; }
.pl-eye.is-on .pl-eye-off { display: block; }

/* select field (e.g. admin login type) */
.pl-field-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--pl-muted);
    margin: 2px 2px 6px;
}
.pl-select-wrap { position: relative; }
.pl-select-wrap::after {
    content: "";
    position: absolute;
    right: 18px; top: 50%;
    width: 9px; height: 9px;
    border-right: 2px solid var(--pl-muted);
    border-bottom: 2px solid var(--pl-muted);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}
.pl-select {
    width: 100%;
    height: 54px;
    padding: 0 40px 0 16px;
    font-family: var(--pl-font);
    font-size: 15px;
    color: var(--pl-ink);
    background: rgba(255, 255, 255, 0.85);
    border: 1.5px solid var(--pl-line);
    border-radius: var(--pl-radius-sm);
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.pl-select:hover { border-color: #CFE5D2; }
.pl-select:focus {
    border-color: var(--pl-secondary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(102, 187, 106, 0.18);
}

/* inline error / alert banner */
.pl-alert {
    display: block;
    margin-bottom: 14px;
    padding: 0;
    text-align: center;
}
.pl-alert span,
.pl-alert .pl-alert-text {
    display: inline-block;
    width: 100%;
    padding: 10px 14px;
    font-size: 13px !important;
    font-weight: 500;
    color: #b3261e !important;
    background: #fdecea;
    border: 1px solid #f6c9c4;
    border-radius: var(--pl-radius-sm);
}
.pl-alert:empty,
.pl-alert span:empty { display: none; }

/* captcha row */
.pl-captcha-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--pl-muted);
    margin: 2px 2px 6px;
}
.pl-captcha {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.pl-captcha .pl-input { padding-left: 16px; flex: 1 1 auto; height: 50px; }
.pl-captcha .captchimg {
    height: 50px !important;
    width: auto !important;
    max-width: 130px;
    border-radius: var(--pl-radius-sm);
    border: 1.5px solid var(--pl-line);
    background: #fff;
    object-fit: cover;
}
.pl-refresh {
    flex: 0 0 auto;
    width: 50px; height: 50px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--pl-radius-sm);
    background: rgba(165, 214, 167, 0.25);
    border: 1.5px solid rgba(102, 187, 106, 0.3) !important;
    color: var(--pl-primary) !important;
    transition: transform 0.4s ease, background 0.2s ease;
    text-decoration: none;
}
.pl-refresh:hover { background: rgba(165, 214, 167, 0.45); transform: rotate(180deg); }
.pl-refresh img { max-height: 22px; }

/* validators / messages */
.pl-form .field-validation-error,
.pl-form span[id*="Validator"] {
    display: inline-block;
    margin-top: 5px;
    font-size: 12px !important;
    color: #d32f2f !important;
}

/* ---- options row: remember + forgot ---- */
.pl-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 2px 0 18px;
    flex-wrap: wrap;
}
.pl-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--pl-muted);
    cursor: pointer;
    user-select: none;
}
.pl-check input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px;
    margin: 0;
    border: 1.5px solid #CADDCD;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.pl-check input:checked {
    background: var(--pl-primary);
    border-color: var(--pl-primary);
}
.pl-check input:checked::after {
    content: "";
    position: absolute;
    left: 5px; top: 1.5px;
    width: 5px; height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.pl-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--pl-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}
.pl-link:hover { color: var(--pl-primary-dark); text-decoration: underline; }

/* ==========================================================================
   4. Buttons — gradient, hover, ripple, loading
   ========================================================================== */
.pl-btn {
    position: relative;
    width: 100%;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--pl-font);
    font-size: 15.5px;
    font-weight: 600;
    border: none;
    border-radius: var(--pl-radius-sm);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.25s ease, filter 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}
.pl-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--pl-secondary) 0%, var(--pl-primary) 60%, var(--pl-primary-dark) 100%);
    background-size: 160% 160%;
    box-shadow: 0 14px 26px -12px rgba(46, 125, 50, 0.65);
}
.pl-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 34px -12px rgba(46, 125, 50, 0.7);
    background-position: 100% 50%;
}
.pl-btn-primary:active { transform: translateY(0); }

/* loading state */
.pl-btn.is-loading { color: transparent !important; pointer-events: none; }
.pl-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 20px; height: 20px;
    border: 2.5px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pl-spin 0.7s linear infinite;
}
@keyframes pl-spin { to { transform: rotate(360deg); } }

/* ripple */
.pl-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255, 255, 255, 0.5);
    animation: pl-ripple 0.6s ease-out;
    pointer-events: none;
}
@keyframes pl-ripple { to { transform: scale(2.6); opacity: 0; } }

/* ---- divider ---- */
.pl-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0;
    color: var(--pl-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
}
.pl-divider::before,
.pl-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--pl-line), transparent);
}

.pl-btn-ghost {
    color: var(--pl-primary-dark);
    background: rgba(255, 255, 255, 0.7);
    border: 1.5px solid rgba(102, 187, 106, 0.4);
    text-decoration: none;
}
.pl-btn-ghost:hover {
    transform: translateY(-2px);
    background: #fff;
    border-color: var(--pl-secondary);
    box-shadow: var(--pl-shadow-soft);
}
.pl-btn-ghost svg { width: 18px; height: 18px; }

/* ---- create account line ---- */
.pl-signup {
    text-align: center;
    margin: 16px 0 2px;
    font-size: 13.5px;
    color: var(--pl-muted);
}
.pl-signup a {
    color: var(--pl-primary);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.pl-signup a:hover { color: var(--pl-primary-dark); }
.pl-signup a svg { width: 15px; height: 15px; transition: transform 0.2s ease; }
.pl-signup a:hover svg { transform: translateX(3px); }

/* ==========================================================================
   5. Footer
   ========================================================================== */
.pl-foot {
    margin-top: 18px;
    text-align: center;
}
.pl-foot__links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 10px;
}
.pl-foot__links a {
    font-size: 12.5px;
    color: var(--pl-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}
.pl-foot__links a:hover { color: var(--pl-primary); }
.pl-ssl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--pl-muted);
}
.pl-ssl svg { width: 13px; height: 13px; color: var(--pl-primary); }

/* ==========================================================================
   6. Responsive (mobile first refinements)
   ========================================================================== */
@media (max-width: 520px) {
    .pl-stage { padding: 16px 12px; align-items: flex-start; }
    .pl-shell { max-width: 100%; }
    .pl-card { padding: 24px 18px 22px; border-radius: 20px; }
    .pl-title { font-size: 19px; }
    .pl-leaf--1, .pl-leaf--3 { display: none; }
    .pl-badge { font-size: 10px; padding: 4px 8px; }
}

@media (max-width: 360px) {
    .pl-captcha .captchimg { max-width: 96px; }
}

/* honor reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pl-orb, .pl-leaf, .pl-shell { animation: none !important; }
    .pl-btn, .pl-input, .pl-refresh { transition: none !important; }
}

/* keep legacy hidden helper working */
.premium-login .hidden { display: none !important; }