:root {
    --dark-blue: #052e61;
    --primary-blue: #0877ba;
    --light-blue: #1495d3;
    --text-blue: #092f5b;
    --gray-text: #747c87;
    --page-background: #f8faff;
    --input-border: #ccd3dd;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    overflow-x: hidden;
    color: var(--text-blue);
    background: var(--page-background);
    font-family: "Tajawal", sans-serif;
}

a {
    text-decoration: none;
}

/* ===================================
   Login hero
=================================== */

.login-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f8faff;
}

.login-main-row {
    min-height: 1005px;
    display: grid;
    grid-template-columns: 40% 48%;
    direction: ltr;
}

/* ===================================
   Electricity image
=================================== */

.electricity-image-column {
    min-width: 0;
    position: relative;
    overflow: hidden;
    direction: rtl;
    background: #06376d;
}

.electricity-image-background {
    width: 100%;
    height: 100%;
    min-height: 1005px;
    position: relative;
    overflow: hidden;
    background-image: url("../images/contact/contact-building.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

    .electricity-image-background::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: radial-gradient( circle at 58% 20%, rgba(15, 145, 215, 0.34), transparent 38% ), linear-gradient( 180deg, rgba(3, 53, 105, 0.42) 0%, rgba(2, 48, 97, 0.10) 45%, rgba(0, 22, 53, 0.18) 100% );
    }

    .electricity-image-background::after {
        content: "";
        position: absolute;
        z-index: 3;
        top: -7%;
        right: -142px;
        width: 195px;
        height: 114%;
        border-radius: 50%;
        background: #f8faff;
    }

.electricity-image-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient( 135deg, rgba(3, 70, 132, 0.12), rgba(2, 40, 84, 0.04) );
}

.electricity-content {
    width: 72%;
    position: relative;
    z-index: 4;
    margin-right: auto;
    margin-left: auto;
    padding-top: 210px;
    color: #ffffff;
    text-align: right;
}

.electricity-small-icon {
    margin-bottom: 20px;
    color: #21a4e7;
    font-size: 42px;
}

.electricity-content h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(37px, 3.3vw, 51px);
    font-weight: 700;
    line-height: 1.45;
}

    .electricity-content h2 span {
        display: block;
        color: #1999da;
        font-weight: 700;
    }

.electricity-content p {
    max-width: 410px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.95);
    font-size: 18px;
    line-height: 2;
}

/* ===================================
   Form area
=================================== */

.login-form-column {
    min-width: 0;
    position: relative;
    z-index: 5;
    direction: rtl;
    background: #f8faff;
}

.login-form-area {
    min-height: 1005px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 44px 42px 57px;
}

.login-card {
    width: 100%;
    max-width: 610px;
    min-height: 910px;
    padding: 54px 46px 37px;
/*    border: 1px solid rgba(19, 73, 124, 0.06);*/
/*    border-radius: 21px;*/
/*    background: rgba(255, 255, 255, 0.99);*/
/*    box-shadow: 0 17px 50px rgba(26, 67, 108, 0.09), 0 3px 12px rgba(26, 67, 108, 0.05);*/
}

/* ===================================
   Login icon
=================================== */

.login-icon-container {
    width: 160px;
    height: 126px;
    position: relative;
    margin: 0 auto 11px;
}

.login-icon-circle {
    width: 116px;
    height: 116px;
    position: absolute;
    top: 2px;
    right: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #087fc4;
    font-size: 35px;
    transform: translateX(50%);
    background: radial-gradient( circle, rgba(22, 147, 216, 0.14) 0 34%, rgba(22, 147, 216, 0.075) 35% 51%, rgba(22, 147, 216, 0.025) 52% 68%, transparent 69% );
}

    .login-icon-circle::before,
    .login-icon-circle::after {
        content: "";
        position: absolute;
        border: 1px solid rgba(19, 135, 201, 0.08);
        border-radius: 50%;
    }

    .login-icon-circle::before {
        width: 108px;
        height: 108px;
    }

    .login-icon-circle::after {
        width: 86px;
        height: 86px;
    }

.decoration-point {
    width: 8px;
    height: 8px;
    position: absolute;
    border: 2px solid rgba(33, 153, 216, 0.34);
    border-radius: 50%;
}

.point-one {
    top: 17px;
    right: 2px;
}

.point-two {
    right: 16px;
    bottom: 22px;
}

.point-three {
    top: 17px;
    left: 2px;
}

.point-four {
    bottom: 22px;
    left: 16px;
}

/* ===================================
   Heading
=================================== */

.login-heading {
    text-align: center;
}

    .login-heading h1 {
        margin: 0;
        color: #092f5b;
        font-size: 35px;
        font-weight: 800;
        line-height: 1.35;
    }

    .login-heading p {
        margin: 8px 0 0;
        color: #777f89;
        font-size: 16px;
        font-weight: 400;
    }

#loginForm {
    margin-top: 35px;
}

.validation-summary:empty,
.validation-summary-valid {
    display: none;
}

/* ===================================
   Inputs
=================================== */

.login-form-group {
    margin-bottom: 19px;
}

.login-label {
    display: block;
    margin-bottom: 8px;
    color: #17334f;
    font-size: 14px;
    font-weight: 700;
}

.login-input-container {
    width: 100%;
    height: 57px;
    position: relative;
}

.login-input {
    width: 100%;
    height: 57px;
    padding: 0 55px;
    border: 1px solid var(--input-border);
    border-radius: 9px;
    outline: none;
    color: #273d53;
    background: #ffffff;
    font-size: 15px;
    text-align: right;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .login-input::placeholder {
        color: #9299a2;
        opacity: 1;
    }

    .login-input:focus {
        border-color: #168bc8;
        outline: none;
        box-shadow: 0 0 0 4px rgba(16, 136, 199, 0.09);
    }

.phone-container {
    position: relative;
    direction: rtl;
}

    .phone-container .phone-input {
        direction: ltr !important;
        text-align: right !important;
        unicode-bidi: bidi-override;
        padding-right: 50px !important;
        padding-left: 15px !important;
    }

        .phone-container .phone-input::placeholder {
            direction: rtl;
            text-align: right;
        }

    .phone-container .input-side-icon {
        right: 18px !important;
        left: auto !important;
    }
.input-side-icon {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 20px;
    color: #8995a3;
    font-size: 18px;
    pointer-events: none;
    transform: translateY(-50%);
}

.password-input {
    direction: rtl !important;
    text-align: right !important;
    padding-right: 55px !important;
    padding-left: 45px; /* مساحة للعين */
}

.password-lock-icon {
    position: absolute;
    right: 15px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    color: #8995a3;
    pointer-events: none;
}

.password-visibility-button {
    position: absolute;
    left: 15px;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===================================
   Forgot password
=================================== */

.forgot-password-container {
    margin: -1px 0 20px;
    text-align: right;
}

.forgot-password-link {
    color: #0879b7;
    font-size: 14px;
    font-weight: 700;
}

    .forgot-password-link:hover {
        color: #075f92;
        text-decoration: underline;
    }

/* ===================================
   Login button
=================================== */

.login-submit-button {
    width: 100%;
    height: 59px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    border: 0;
    border-radius: 9px;
    color: #ffffff;
    background: linear-gradient( 90deg, #0757a7 0%, #158fd1 100% );
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(10, 120, 184, 0.17);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .login-submit-button:hover {
        color: #ffffff;
        box-shadow: 0 10px 22px rgba(10, 120, 184, 0.23);
        transform: translateY(-1px);
    }

/* ===================================
   Divider
=================================== */

.login-divider {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 25px 0;
}

    .login-divider span {
        height: 1px;
        flex: 1;
        background: #e0e3e7;
    }

    .login-divider p {
        margin: 0;
        color: #69717b;
        font-size: 15px;
    }

/* ===================================
   Sanad
=================================== */

.sanad-login-button {
    width: 100%;
    height: 63px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    border: 1px solid #1381b8;
    border-radius: 9px;
    color: #0877ad;
    background: #ffffff;
    font-size: 17px;
    font-weight: 700;
    transition: color 0.2s ease, background 0.2s ease;
}

    .sanad-login-button:hover {
        color: #07699a;
        background: #f5fbff;
    }

.sanad-logo {
    width: 66px;
    height: 39px;
    object-fit: contain;
}

/* ===================================
   Help card
=================================== */

.help-card {
    min-height: 105px;
    display: grid;
    grid-template-columns: 20px 1fr 48px;
    align-items: center;
    gap: 15px;
    margin-top: 23px;
    padding: 18px 20px;
    border-radius: 8px;
    color: inherit;
    background: #f7f9fb;
    transition: background 0.2s ease, transform 0.2s ease;
}

    .help-card:hover {
        color: inherit;
        background: #f2f7fb;
        transform: translateY(-1px);
    }

.help-icon {
    color: #078dd0;
    font-size: 35px;
    text-align: center;
}

.help-information {
    text-align: right;
}

    .help-information h2 {
        margin: 0 0 5px;
        color: #15314d;
        font-size: 16px;
        font-weight: 800;
    }

    .help-information p {
        margin: 0;
        color: #747d87;
        font-size: 13px;
        line-height: 1.7;
    }

.help-arrow {
    color: #a9afb7;
    font-size: 16px;
}

/* ===================================
   Register
=================================== */

.register-container {
    margin-top: 27px;
    padding-top: 21px;
    border-top: 1px solid #eceef2;
    color: #6d747d;
    font-size: 15px;
    text-align: center;
}

    .register-container a {
        margin-right: 12px;
        color: #0878b5;
        font-weight: 700;
    }

        .register-container a:hover {
            color: #075f91;
            text-decoration: underline;
        }

/* ===================================
   Features
=================================== */

.features-section {
    width: 100%;
    position: relative;
    z-index: 10;
    border-top: 1px solid #eff2f6;
    background: #ffffff;
}

.features-container {
    width: min(100%, 1200px);
    min-height: 215px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 auto;
}

.feature-card {
    min-height: 215px;
    position: relative;
    padding: 39px 24px 28px;
    border-left: 1px solid #edf0f4;
    text-align: center;
}

    .feature-card:last-child {
        border-left: 0;
    }

.feature-icon {
    display: block;
    margin-bottom: 15px;
    color: #0c8bc9;
    font-size: 39px;
}

.feature-card h3 {
    margin: 0 0 8px;
    color: #12375e;
    font-size: 16px;
    font-weight: 800;
}

.feature-card p {
    margin: 0;
    color: #777f89;
    font-size: 14px;
    line-height: 1.75;
}

/* ===================================
   Responsive
=================================== */

@media (max-width: 991.98px) {

    .login-main-row {
        display: flex;
        min-height: auto;
        flex-direction: column;
    }

    .electricity-image-column {
        order: 1;
    }

    .login-form-column {
        order: 2;
    }

    .electricity-image-background {
        min-height: 500px;
    }

        .electricity-image-background::after {
            display: none;
        }

    .electricity-content {
        width: calc(100% - 48px);
        padding-top: 100px;
        text-align: center;
    }

        .electricity-content p {
            margin-right: auto;
            margin-left: auto;
        }

    .login-form-area {
        min-height: auto;
        padding: 45px 24px 55px;
    }

    .login-card {
        min-height: auto;
    }

    .features-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .feature-card {
        border-bottom: 1px solid #edf0f4;
    }
}

@media (max-width: 575.98px) {

    .electricity-image-background {
        min-height: 420px;
        background-position: center;
    }

    .electricity-content {
        width: calc(100% - 32px);
        padding-top: 75px;
    }

        .electricity-content h2 {
            font-size: 31px;
        }

        .electricity-content p {
            font-size: 15px;
        }

    .login-form-area {
        padding: 28px 14px 42px;
    }

    .login-card {
        padding: 34px 20px 29px;
        border-radius: 16px;
    }

    .login-icon-container {
        height: 105px;
    }

    .login-icon-circle {
        width: 93px;
        height: 93px;
    }

        .login-icon-circle::before {
            width: 88px;
            height: 88px;
        }

        .login-icon-circle::after {
            width: 70px;
            height: 70px;
        }

    .login-heading h1 {
        font-size: 29px;
    }

    .login-heading p {
        font-size: 14px;
    }

    #loginForm {
        margin-top: 30px;
    }

    .sanad-login-button {
        gap: 8px;
        font-size: 15px;
    }

    .sanad-logo {
        width: 55px;
    }

    .help-card {
        grid-template-columns: 17px 1fr 38px;
        padding: 16px 13px;
    }

    .help-icon {
        font-size: 28px;
    }

    .help-information h2 {
        font-size: 14px;
    }

    .help-information p {
        font-size: 12px;
    }

    .features-container {
        grid-template-columns: 1fr;
    }

    .feature-card {
        min-height: auto;
        padding: 32px 24px;
        border-left: 0;
    }
}

/* ==================================================
   Compact desktop login - show form without scrolling
================================================== */

@media (min-width: 992px) {

    /*
       عدلي 96px إذا كان مجموع ارتفاع
       الـ top bar + navbar مختلفاً عندكِ
    */
    .login-main-row {
        min-height: calc(100vh - 96px);
        height: calc(100vh - 96px);
        grid-template-columns: 40% 48%;
        align-items: stretch;
    }

    .electricity-image-column,
    .login-form-column {
        height: 100%;
        min-height: 0;
    }

    .electricity-image-background {
        height: 100%;
        min-height: 0;
    }

    .login-form-area {
        height: 100%;
        min-height: 0;
        padding: 18px 42px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .login-card {
        width: 100%;
        max-width: 610px;
        min-height: 0;
        padding: 0 46px;
    }

    /* تصغير مساحة أيقونة القفل */
    .login-icon-container {
        width: 130px;
        height: 88px;
        margin: 0 auto 4px;
    }

    .login-icon-circle {
        width: 86px;
        height: 86px;
        top: 0;
        font-size: 27px;
    }

        .login-icon-circle::before {
            width: 80px;
            height: 80px;
        }

        .login-icon-circle::after {
            width: 63px;
            height: 63px;
        }

    .point-one,
    .point-three {
        top: 10px;
    }

    .point-two,
    .point-four {
        bottom: 10px;
    }

    /* العنوان */
    .login-heading h1 {
        font-size: 31px;
        line-height: 1.25;
    }

    .login-heading p {
        margin-top: 3px;
        font-size: 14px;
    }

    #loginForm {
        margin-top: 21px;
    }

    /* الحقول */
    .login-form-group {
        margin-bottom: 13px;
    }

    .login-label {
        margin-bottom: 5px;
        font-size: 13px;
    }

    .login-input-container,
    .login-input {
        height: 51px;
    }

    .forgot-password-container {
        margin: -2px 0 13px;
    }

    .login-submit-button {
        height: 53px;
        font-size: 18px;
    }

    /* الفاصل */
    .login-divider {
        margin: 17px 0;
    }

    /* زر سند */
    .sanad-login-button {
        height: 55px;
    }

    .sanad-logo {
        width: 58px;
        height: 33px;
    }

    /* المساعدة */
    .help-card {
        min-height: 79px;
        margin-top: 15px;
        padding: 11px 18px;
    }

    .help-icon {
        font-size: 29px;
    }

    .help-information h2 {
        margin-bottom: 2px;
        font-size: 15px;
    }

    .help-information p {
        font-size: 12px;
        line-height: 1.45;
    }

    /* إنشاء الحساب */
    .register-container {
        margin-top: 15px;
        padding-top: 14px;
        font-size: 14px;
    }

    /* توسيط محتوى الصورة */
    .electricity-content {
        width: 72%;
        padding-top: 0;
        position: absolute;
        top: 50%;
        right: 14%;
        transform: translateY(-50%);
    }
}

@media (min-width: 992px) and (max-height: 800px) {

    .login-form-area {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .login-icon-container {
        height: 65px;
    }

    .login-icon-circle {
        width: 67px;
        height: 67px;
        font-size: 22px;
    }

        .login-icon-circle::before {
            width: 63px;
            height: 63px;
        }

        .login-icon-circle::after {
            width: 49px;
            height: 49px;
        }

    .decoration-point {
        display: none;
    }

    .login-heading h1 {
        font-size: 28px;
    }

    #loginForm {
        margin-top: 14px;
    }

    .login-form-group {
        margin-bottom: 10px;
    }

    .login-input-container,
    .login-input {
        height: 47px;
    }

    .forgot-password-container {
        margin-bottom: 10px;
    }

    .login-submit-button {
        height: 48px;
    }

    .login-divider {
        margin: 12px 0;
    }

    .sanad-login-button {
        height: 49px;
    }

    .help-card {
        min-height: 67px;
        margin-top: 11px;
        padding: 8px 15px;
    }

    .register-container {
        margin-top: 10px;
        padding-top: 10px;
    }
}
.guest-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 22px 0;
    padding: 16px 18px;
    background: #fffaf0;
    border: 1px solid #f6d97a;
    border-radius: 16px;
}

.guest-note-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f4b400;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.guest-note-content {
    flex: 1;
}

    .guest-note-content h6 {
        margin: 0 0 6px;
        color: #1f2937;
        font-size: 17px;
        font-weight: 700;
    }

    .guest-note-content p {
        margin: 0;
        color: #5f6368;
        font-size: 14px;
        line-height: 1.8;
    }

@media (max-width:576px) {

    .guest-note {
        padding: 14px;
        gap: 12px;
    }

    .guest-note-icon {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    .guest-note-content h6 {
        font-size: 16px;
    }

    .guest-note-content p {
        font-size: 13px;
    }
}
.simple-divider {
    margin: 22px auto 18px;
    width: 120px;
}

    .simple-divider span {
        display: block;
        height: 1px;
        background: #e5e7eb;
    }