.header{
    padding-right: 0;
}

.wrapper{
    width: 100%;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background-color: #eef1f7;
}

.pageContentHolder{
    width: 92%;
    margin: 0 auto;
    direction: rtl;
    position: relative;
    box-sizing: border-box;
    padding-top: 150px;
    padding-bottom: 64px;
    max-width: 560px;
}

.pageContentHeader{
    width: 100%;
    overflow: hidden;
    margin-bottom: 18px;
}

.pageContentHeaderTitle{
    overflow: hidden;
    width: 100%;
    color: var(--darkGrey2);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.6;
}

.pageContentHeaderTitle::before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    background-image: url("../assets/supportIcon.svg");
    width: 22px;
    height: 22px;
    margin-left: 8px;
}

.pageContentHeaderText{
    overflow: hidden;
    width: 100%;
    display: block;
    color: #4b5563;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.9;
    padding-top: 10px;
}

/* optional legacy sections kept (unused but harmless) */
.contentHolder{
    width: 100%;
    direction: rtl;
    position: relative;
    box-sizing: border-box;
    background-color: #e9ecf3;
    padding-top: 210px;
}

.contentSec{
    overflow: hidden;
    width: 100%;
    color: #333;
}

.fullWContentSec{
    padding: 40px 20px;
    box-sizing: border-box;
    position: relative;
}

.fullWContentSecInner{
    height: auto;
    width: 100%;
    margin: 0 auto;
    max-width: 1100px;
}

.title{
    display: block;
    font-weight: 800;
    font-size: 30px;
    padding-bottom: 4px;
    text-align: center;
    color: #beff0b;
}

.text{
    display: block;
    font-size: 14px;
    text-align: center;
    color: #ddd;
}

/* modern placeholder selector */
::placeholder{
    color: var(--lightGrey3);
    opacity: 1;
}

/* outer card */
.pageContentBody{
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    border: 1px solid rgba(17,24,39,0.08);
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(17,24,39,0.08);
    padding: 14px;
}

/* single-column layout container */
.contactGrid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.contactGridSingle .contactFormHolder{
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
}

.contactFormHolder{
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

/* form panel */
.contactForm{
    box-sizing: border-box;
    border-radius: 16px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,255,0.98) 100%);
    width: 100%;
    height: auto;
    font-size: 14px;
    direction: rtl;
    overflow: visible;
    border: 1px solid rgba(17,24,39,0.06);
    box-shadow: 0 8px 20px rgba(17,24,39,0.05);
}

.contactFormContent{
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding: 0;
    overflow: visible;
}

.contactForm .inputHolder{
    margin-bottom: 12px;
    overflow: visible; /* override global */
}

.contactForm .inputHolder label{
    display: block;
    margin-bottom: 6px;
    padding-bottom: 0;
    font-size: 13px;
    font-weight: 800;
    color: #374151;
}

/* inputs / textarea */
.contactForm .inputHolder input,
.contactForm .inputHolder textarea{
    width: 100%;
    border: 1px solid rgba(17,24,39,0.10);
    border-radius: 12px;
    background: #f3f6fb !important;
    color: #111827;
    box-sizing: border-box;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    font-family: inherit;
}

.contactForm .inputHolder input{
    height: 46px;
    padding: 0 12px;
    font-size: 15px;
    border-radius: 12px;
}

.contactForm .inputHolder input.engNum{
    direction: ltr;
    text-align: left;
}

.contactFormMsg{
    min-height: 130px !important;
    height: auto !important;
    display: block;
    width: 100%;
    resize: vertical;
    padding: 12px;
    box-sizing: border-box;
    line-height: 1.8;
    font-size: 15px;
    border-radius: 12px !important;
    outline: none;
    background-color: #f3f6fb !important;
}

/* focus */
.contactForm .inputHolder input:focus,
.contactForm .inputHolder textarea:focus{
    border-color: rgba(247,147,30,0.55);
    box-shadow: 0 0 0 4px rgba(247,147,30,0.12);
    background: #fff !important;
}

/* validation state used by JS */
.contactForm .inputHolder input.inputError,
.contactForm .inputHolder textarea.inputError{
    border-color: #e11d48 !important;
    box-shadow: 0 0 0 4px rgba(225,29,72,0.10);
}

/* submit button */
.contactFormSubmitBtn{
    width: 100%;
    height: 48px;
    text-align: center;
    line-height: 48px;
    color: #1f2937;
    background: linear-gradient(180deg, #ffb04c 0%, #f7931e 100%);
    border-radius: 12px;
    font-weight: 900;
    cursor: pointer;
    user-select: none;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
    box-shadow: 0 10px 18px rgba(247,147,30,0.22);
    margin-top: 4px;
    float: none;
    outline: none;
}

.contactFormSubmitBtn:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 22px rgba(247,147,30,0.25);
}

.contactFormSubmitBtn:active{
    transform: translateY(0);
    filter: brightness(.98);
}

.contactFormSubmitBtn:focus-visible{
    box-shadow: 0 0 0 4px rgba(247,147,30,0.16), 0 10px 18px rgba(247,147,30,0.22);
}

.contactFormSubmitBtn.onSubmit{
    pointer-events: none;
    opacity: .95;
}

.contactFormSubmitBtn .stage{
    padding: 0;
    height: 48px;
    line-height: 48px;
}

/* desktop: keep single column and center form */
@media only screen and (min-width: 860px){
    .contactGrid,
    .contactGridSingle{
        grid-template-columns: 1fr !important;
    }

    .contactGridSingle .contactFormHolder{
        max-width: 820px;
        margin: 0 auto;
    }

    .pageContentBody{
        padding: 16px;
    }
}

/* mobile polish */
@media only screen and (max-width: 599px){
    .pageContentHolder{
        width: 94%;
        padding-top: 96px;
        padding-bottom: 48px;
    }

    .pageContentHeaderTitle{
        font-size: 20px;
    }

    .pageContentBody{
        border-radius: 16px;
        padding: 10px;
    }

    .contactForm{
        border-radius: 14px;
        padding: 14px;
    }

    .contactForm .inputHolder input{
        height: 44px;
        font-size: 14px;
    }

    .contactFormMsg{
        min-height: 110px !important;
        font-size: 14px;
    }

    .contactFormSubmitBtn{
        height: 46px;
        line-height: 46px;
    }
}

/* standalone mode */
@media all and (display-mode: standalone) {

    .headerHolder {
        background-color: var(--palePurple);
    }

    .wrapper{
        background-color: var(--palePurple) !important;
        background-image: none;
    }

    .wrapper .inputHolder input{
        color: var(--lightGrey3);
        background-color: rgba(0,0,0,.15) !important;
    }

    .wrapper .inputHolder textarea{
        color: var(--lightGrey3);
        background-color: rgba(0,0,0,.15) !important;
    }

    .main-footer {
        display: none;
    }

    .pageContentHeaderTitle::before{
        filter: invert(1);
    }

    .pageContentHeaderTitle{
        color: var(--lightGrey);
    }

    .pageContentHeaderText{
        color: var(--lightGrey2);
    }

    .pageContentHeaderText a{
        color: var(--lightGreen);
    }

    .pageContentBody{
        background: rgba(255,255,255,0.04);
        border-color: rgba(255,255,255,0.06);
        box-shadow: none;
    }

    .contactForm{
        background: rgba(255,255,255,0.05);
        box-shadow: none;
        border-color: rgba(255,255,255,0.07);
    }

    .inputHolder label,
    .contactForm .inputHolder label{
        color: var(--lightGrey2);
    }

    .contactForm .inputHolder input,
    .contactForm .inputHolder textarea{
        color: var(--lightGrey3);
        background-color: rgba(0,0,0,.15) !important;
        border-color: rgba(255,255,255,0.08);
    }

    .contactForm .inputHolder input:focus,
    .contactForm .inputHolder textarea:focus{
        background-color: rgba(0,0,0,.20) !important;
    }

    .contactFormSubmitBtn{
        margin-top: 10px;
        color: var(--darkGrey2);
        background: linear-gradient(180deg, #ffb04c 0%, #f7931e 100%);
        float: none;
    }
}