*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "DM Sans", sans-serif;
    min-height: 100vh;
    background: linear-gradient(rgb(3 14 0 / 85%), rgb(6 13 1 / 92%)),
    url("/images/africaBg.jpg");

    background-size: cover;
    background-repeat: no-repeat;
    /* background-position: center; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.lp-root {
    width: 100%;
    max-width: 900px;
    min-height: 580px;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    position: relative;
    border: 1px solid rgba(200, 169, 110, 0.15);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}

/* Background effects */
.lp-bg-glow {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(
            circle,
            rgba(200, 169, 110, 0.06) 0%,
            transparent 70%
    );
    pointer-events: none;
}

.lp-map-bg {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 55%;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 700'%3E%3Cpath fill='%23c8a96e' d='M400 60 C370 55 340 70 318 93 296 116 280 148 275 180 270 212 275 245 287 268 274 285 261 308 255 334 249 360 252 387 262 410 272 433 286 450 290 472 283 494 276 516 282 536 294 554 312 566 330 574 352 577 368 573 381 580 396 587 415 587 432 583 449 574 461 562 473 550 483 534 488 518 490 500 490 483 493 467 502 452 514 440 526 428 536 414 543 399 549 382 553 365 556 347 551 330 545 313 536 297 527 281 521 265 523 249 527 234 532 219 535 203 532 187 527 172 519 159 508 147 495 137 481 129 466 121 450 116 435 112 420 109 408 107 400 105 392 102 389 97 391 86 397 74 403 65 400 60Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

/* Left panel — form */
.lp-left {
    position: relative;
    z-index: 2;
    width: 48%;
    padding: 52px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid rgba(200, 169, 110, 0.08);
}

/* Right panel — branding */
.lp-right {
    position: relative;
    z-index: 2;
    width: 52%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
}

/* Logo */
.lp-logo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
}

.lp-logo-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.lp-logo-text-wrap {
    display: flex;
    flex-direction: column;
}

.lp-logo-name {
    font-weight: 600;
    font-size: 18px;
    color: #c8a96e;
    letter-spacing: 0.02em;
    line-height: 1;
}

.lp-logo-tagline {
    font-size: 9px;
    color: #6a5030;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-top: 3px;
}

/* Headings */
.lp-eyebrow {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #c8a96e;
    margin-bottom: 10px;
    opacity: 0.75;
}

.lp-heading {
    font-family: "Playfair Display", serif;
    font-size: 30px;
    font-weight: 700;
    color: #f5e8d0;
    line-height: 1.2;
    margin-bottom: 6px;
}

.lp-subheading {
    font-size: 13px;
    color: #6a5030;
    margin-bottom: 36px;
}

/* Form fields */
.lp-field {
    margin-bottom: 16px;
}

.lp-label {
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7a6040;
    margin-bottom: 7px;
}

.lp-input-wrap {
    position: relative;
}

.lp-input {
    width: 100%;
    padding: 13px 44px 13px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(200, 169, 110, 0.18);
    border-radius: 10px;
    color: #15120b;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s,
    background 0.2s;
}

.lp-input::placeholder {
    color: #3a2818;
}

.lp-input:focus {
    border-color: rgba(200, 169, 110, 0.55);
    background: rgba(255, 255, 255, 0.06);
}

.lp-input-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #5a4030;
    pointer-events: none;
    display: flex;
    align-items: center;
}

.lp-eye-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #5a4030;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.lp-eye-toggle:hover {
    color: #c8a96e;
}

.lp-forgot {
    display: block;
    text-align: right;
    font-size: 12px;
    color: #6a5030;
    margin-top: 8px;
    cursor: pointer;
    transition: color 0.2s;
    text-decoration: none;
}

.lp-forgot:hover {
    color: #c8a96e;
}

/* Login button */
.lp-btn {
    width: 100%;
    padding: 14px;
    /* background: linear-gradient(135deg, #c8a96e 0%, #2d5016 100%); */
    background: #8b9b47;
    border: none;
    border-radius: 10px;
    color: #1a0e07;
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 24px;
    transition: opacity 0.2s,
    transform 0.15s;
}

.lp-btn:hover {
    opacity: 0.85;
}

.lp-btn:active {
    transform: scale(0.985);
}

/* Secure badge */
.lp-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 18px;
}

.lp-secure-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3a6e3a;
    flex-shrink: 0;
}

.lp-secure-text {
    font-size: 11px;
    color: #3a5030;
    letter-spacing: 0.05em;
}

/* Right panel — Africa badge */
.lp-africa-badge {
    background: rgba(200, 169, 110, 0.05);
    border: 1px solid rgba(200, 169, 110, 0.12);
    border-radius: 18px;
    padding: 36px 36px 32px;
    text-align: center;
    width: 100%;
    max-width: 300px;
}

.lp-africa-svg {
    display: block;
    margin: 0 auto 24px;
}

.lp-badge-title {
    font-family: "Playfair Display", serif;
    font-size: 22px;
    font-weight: 500;
    color: #6d5e42;
    margin-bottom: 10px;
    line-height: 1.3;
}

.lp-badge-copy {
    font-size: 12px;
    color: #6a5030;
    line-height: 1.7;
    margin-bottom: 24px;
}

/* Stats row */
.lp-stats {
    display: flex;
    gap: 0;
    justify-content: center;
    border-top: 1px solid rgba(200, 169, 110, 0.1);
    padding-top: 20px;
}

.lp-stat-item {
    text-align: center;
    flex: 1;
}

.lp-stat-item + .lp-stat-item {
    border-left: 1px solid rgba(200, 169, 110, 0.1);
}

.lp-stat-num {
    display: block;
    font-family: "Playfair Display", serif;
    font-size: 22px;
    color: #c8a96e;
    font-weight: 700;
}

.lp-stat-lbl {
    display: block;
    font-size: 10px;
    color: #5a4030;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 3px;
}

/* Version footer */
.lp-version {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 10px;
    color: black;
    letter-spacing: 0.1em;
    z-index: 3;
    font-weight: 500;
}

.link {
    text-decoration: none;
    font-size: 13px;
    color: #7a6040;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 680px) {
    .lp-root {
        flex-direction: column;
        min-height: auto;
    }
    .lp-left {
        width: 100%;
        padding: 40px 28px 32px;
        border-right: none;
        border-bottom: 1px solid rgba(200, 169, 110, 0.08);
    }
    .lp-right {
        width: 100%;
        padding: 32px 28px 48px;
    }
    .lp-map-bg {
        width: 100%;
    }
}
#page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(10, 14, 26, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
#page-loader.active {
    opacity: 1;
    pointer-events: all;
}

/* Spinner ring */
.pl-spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.12);
    border-top-color: #ffffff;
    animation: pl-spin 0.75s linear infinite;
}

/* Label */
.pl-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
}

@keyframes pl-spin {
    to { transform: rotate(360deg); }
}