/* =====================================================================
   Obinrin — Vendor & Admin login redesign
   Scoped under `.obinrin-auth` so it overrides the stock `auth-wrapper`
   look without touching panel-wide shared CSS or leaking elsewhere.
   Colors track business settings via --bs-primary / --bs-secondary.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800&family=Sora:wght@600;700;800&display=swap');

/* Type pairing — Sora for headlines, Plus Jakarta Sans for everything else.
   Inherited only on text elements so the eye / refresh icon fonts stay intact. */
.obinrin-auth,
.obinrin-auth p,
.obinrin-auth a,
.obinrin-auth label,
.obinrin-auth input,
.obinrin-auth button,
.obinrin-auth .auth-feature-list li {
    font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
}
.obinrin-auth .display-4,
.obinrin-auth .auth-left-cont .title {
    font-family: 'Sora', 'Plus Jakarta Sans', sans-serif;
}

.obinrin-auth {
    --oa-primary: var(--bs-primary, #1f5c3d);
    --oa-secondary: var(--bs-secondary, #2e8b57);
    --oa-ink: #1d2433;
    --oa-muted: #6b7280;
    --oa-border: #e3e7ee;
    --oa-radius: .85rem;
}

.obinrin-auth .auth-wrapper {
    display: flex;
    min-height: 100vh;
    background: #fff;
}

/* ---------------------------------------------------------------------
   Left brand panel — rich on-brand photo + green scrim + logo lockup
   --------------------------------------------------------------------- */
.obinrin-auth .auth-wrapper-left {
    position: relative;
    flex: 0 0 46%;
    max-width: 46%;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    padding: 0;
    /* Self-hosted Unsplash hero (path relative to this CSS file) */
    background: #0d2a1c url('../img/obinrin-auth-bg.jpg') no-repeat center 18% / cover !important;
}

/* Brand-green scrim: subtle tint up top, deep green at the bottom so the
   headline + tagline stay perfectly legible over the photo. */
.obinrin-auth .auth-wrapper-left::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(11, 38, 25, .40) 0%,
            rgba(11, 38, 25, .18) 30%,
            rgba(11, 38, 25, .82) 68%,
            rgba(9, 30, 20, .97) 100%),
        linear-gradient(125deg,
            color-mix(in srgb, var(--oa-primary) 60%, transparent) 0%,
            transparent 58%);
}

.obinrin-auth .auth-left-cont {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 3.25rem 3rem 3.5rem;
}

/* Compact, refined logo lockup pinned to the top-left.
   margin-bottom:auto pushes the headline block to the bottom. */
.obinrin-auth .auth-left-cont .brand-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    background: #fff;
    padding: .55rem .85rem;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
    margin-bottom: auto;
}
.obinrin-auth .auth-left-cont .brand-badge img {
    width: 132px;
    max-width: 100%;
    height: auto;
    display: block;
}

.obinrin-auth .auth-left-cont .title {
    color: #fff;
    font-weight: 800;
    font-size: clamp(2rem, 3.1vw, 2.85rem);
    line-height: 1.12;
    margin: 0 0 .85rem;
    letter-spacing: -.6px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .4);
}
/* Beat the panel-wide `.c1 { color: var(--bs-primary)!important }` rule */
.obinrin-auth .auth-left-cont .title strong,
.obinrin-auth .auth-left-cont .title span,
.obinrin-auth .auth-left-cont .title .c1 {
    display: block;
    color: #ffce6a !important;
    font-weight: 800;
}
.obinrin-auth .auth-left-cont .brand-tagline {
    color: rgba(255, 255, 255, .92);
    font-size: 1.02rem;
    line-height: 1.55;
    max-width: 410px;
    margin: 0 0 1.5rem;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}

/* Value-prop bullet list (Stripe-style) on the brand panel */
.obinrin-auth .auth-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    max-width: 420px;
}
.obinrin-auth .auth-feature-list li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    color: rgba(255, 255, 255, .94);
    font-size: .98rem;
    font-weight: 500;
    line-height: 1.4;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.obinrin-auth .auth-feature-list li::before {
    content: "";
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: 50%;
    background-color: #ffce6a;
    /* check mark, deep-green stroke, no icon-font dependency */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2619' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 13 10 18 19 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px;
}

/* ---------------------------------------------------------------------
   Right form panel — clean, well-spaced
   --------------------------------------------------------------------- */
.obinrin-auth .auth-wrapper-right {
    position: relative;
    flex: 1 1 54%;
    max-width: 54%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem 2rem;
    background: #fff;
}

.obinrin-auth .auth-wrapper-form {
    width: 100%;
    max-width: 420px;
}

.obinrin-auth .auth-wrapper-form .display-4 {
    font-size: 2.15rem;
    font-weight: 700;
    color: var(--oa-ink);
    letter-spacing: -.6px;
    margin-bottom: .25rem;
}
.obinrin-auth .auth-wrapper-form h1.h4,
.obinrin-auth .auth-wrapper-form h1.h3 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--oa-muted);
    margin-bottom: 0 !important;
}
/* Tighten the header → form gap (markup wraps the heading in .mb-5) */
.obinrin-auth .auth-wrapper-form .mb-5 {
    margin-bottom: 1.75rem !important;
}

.obinrin-auth .auth-wrapper-form .form-group {
    margin-bottom: .9rem;
}
/* Pull the remember-me row snug under the password field */
.obinrin-auth .auth-wrapper-form .form-group.mb-3,
.obinrin-auth .auth-wrapper-form .form-group.mb-2 {
    margin-top: -.1rem;
    margin-bottom: .6rem !important;
}
.obinrin-auth .input-label,
.obinrin-auth .form-label {
    font-weight: 600;
    font-size: .9rem;
    color: var(--oa-ink);
    margin-bottom: .5rem;
}

.obinrin-auth .form-control,
.obinrin-auth .form-control-lg,
.obinrin-auth input.form-control {
    height: 50px;
    border-radius: var(--oa-radius);
    border: 1.5px solid var(--oa-border);
    background: #fbfcfe;
    color: var(--oa-ink);
    font-size: .95rem;
    /* Force our type over the theme's body font (Mulish/Open Sans) */
    font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: normal;
    padding: .65rem 1rem;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
/* Light, clean placeholders (all vendor-prefixed forms) */
.obinrin-auth .form-control::placeholder,
.obinrin-auth .default-captcha-container input::placeholder {
    font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif !important;
    color: #9aa3b2 !important;
    font-weight: 400 !important;
    opacity: 1;
}
.obinrin-auth .form-control::-webkit-input-placeholder,
.obinrin-auth .default-captcha-container input::-webkit-input-placeholder {
    font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif !important;
    color: #9aa3b2 !important;
    font-weight: 400 !important;
}
.obinrin-auth .form-control:focus,
.obinrin-auth .form-control-lg:focus {
    background: #fff;
    border-color: var(--oa-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--oa-primary) 18%, transparent);
    outline: 0;
}

/* Password input-group + eye toggle */
.obinrin-auth .input-group,
.obinrin-auth .input-group-merge {
    position: relative;
}
.obinrin-auth .input-group .form-control,
.obinrin-auth .input-group-merge .form-control {
    padding-inline-end: 3rem;
}
.obinrin-auth .input-group-append,
.obinrin-auth .changePassTarget,
.obinrin-auth #changePassTarget {
    position: absolute;
    inset-inline-end: 4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    border: 0;
    background: transparent;
}
.obinrin-auth .input-group-append .input-group-text,
.obinrin-auth #changePassTarget a,
.obinrin-auth .changePassTarget a {
    border: 0;
    background: transparent;
    color: var(--oa-muted);
    padding: .5rem .65rem;
    display: inline-flex;
    align-items: center;
}
.obinrin-auth #changePassTarget a:hover,
.obinrin-auth .changePassTarget a:hover { color: var(--oa-primary); }

/* Brand links (forgot password / register) */
.obinrin-auth .text--primary,
.obinrin-auth a.text-primary {
    color: var(--oa-primary) !important;
    font-weight: 600;
    text-decoration: none;
}
.obinrin-auth .text--primary:hover,
.obinrin-auth a.text-primary:hover {
    text-decoration: underline;
}
.obinrin-auth .input-label span a,
.obinrin-auth .form-label span a { font-weight: 600; }

/* Remember-me checkbox — brand tinted */
.obinrin-auth .custom-control-input:checked ~ .custom-control-label::before,
.obinrin-auth .form-check-input:checked {
    background-color: var(--oa-primary);
    border-color: var(--oa-primary);
}
.obinrin-auth .form-check-input:focus,
.obinrin-auth .checkbox--input:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--oa-primary) 22%, transparent);
    border-color: var(--oa-primary);
}
.obinrin-auth .custom-control-label,
.obinrin-auth .form-check-label { color: var(--oa-muted); font-size: .9rem; }

/* Captcha container — match the input radius/height */
.obinrin-auth .default-captcha-container {
    height: 50px;
    border-radius: var(--oa-radius);
    border: 1.5px solid var(--oa-border);
    background: #fbfcfe;
    max-width: 100%;
    margin: .9rem 0 0;
}
.obinrin-auth .default-captcha-container input {
    height: 48px;
    background: transparent;
    font-size: .95rem;
    font-weight: 500 !important;
    font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif !important;
}
.obinrin-auth .dynamic-default-and-recaptcha-section.active { max-height: 70px; }

/* Primary sign-in button */
.obinrin-auth .btn--primary,
.obinrin-auth .btn-primary,
.obinrin-auth .btn-block.btn-primary,
.obinrin-auth #vendorLoginBtn,
.obinrin-auth #admin-login-btn {
    width: 100%;
    height: 52px;
    margin-top: 1.25rem;
    border: 0;
    border-radius: var(--oa-radius);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .2px;
    color: #fff;
    background: var(--oa-primary);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--oa-primary) 26%, transparent);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.obinrin-auth .btn--primary:hover,
.obinrin-auth .btn-primary:hover,
.obinrin-auth #vendorLoginBtn:hover,
.obinrin-auth #admin-login-btn:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--oa-primary) 88%, #000);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--oa-primary) 34%, transparent);
}
.obinrin-auth .btn--primary:active,
.obinrin-auth .btn-primary:active { transform: translateY(0); }

/* Software-version badge (admin) */
.obinrin-auth .auth-wrapper-right .badge {
    position: absolute;
    top: 1.5rem;
    inset-inline-end: 1.5rem;
    border-radius: 999px;
    padding: .4rem .9rem;
    font-weight: 600;
}

/* Demo-credentials card */
.obinrin-auth .card-footer {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius);
    background: #f7f9fc;
    font-size: .85rem;
    color: var(--oa-muted);
}
.obinrin-auth .card-footer .btn {
    width: auto;
    height: auto;
    padding: .45rem .6rem;
    margin: 0;
    border-radius: .6rem;
}

/* Mobile logo (shown when left panel hides) */
.obinrin-auth .auth-wrapper-form .d-block img { width: 150px; height: auto; }

/* ---------------------------------------------------------------------
   Responsive — stack to a single clean form on small screens
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .obinrin-auth .auth-wrapper { flex-direction: column; }
    .obinrin-auth .auth-wrapper-left { display: none; }
    .obinrin-auth .auth-wrapper-right {
        flex: 1 1 100%;
        max-width: 100%;
        min-height: 100vh;
        padding: 2.5rem 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .obinrin-auth .auth-wrapper-form .display-4 { font-size: 1.85rem; }
    .obinrin-auth .auth-wrapper-right .badge {
        position: static;
        display: inline-block;
        margin-bottom: 1rem;
    }
}