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

:root {
    --navy: #061a2a;
    --navy2: #09253b;
    --navy3: #0d304a;
    --yellow: #ffc51b;
    --white: #ffffff;
    --soft: #dbe5ed;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
}

body {
    font-family: Arial, Tahoma, sans-serif;
    background: var(--navy);
    color: white;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

/* HEADER */

.topbar {
    height: 90px;
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;

    display: flex;
    flex-wrap: nowrap;
    gap: clamp(14px, 1.5vw, 24px);
    align-items: center;

    padding: 0 5%;

    background: rgba(4, 23, 38, .92);
    backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand { display: flex; flex-shrink: 0; align-items: center; text-decoration: none; }
.brand-logo { display: block; width: 145px; height: 76px; object-fit: contain; }

.desktop-nav {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.1vw, 21px);
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: clamp(14px, 1.05vw, 16px);
}

.desktop-nav a {
    flex-shrink: 0;
    white-space: nowrap;
    color: white;
    text-decoration: none;
    font-weight: 700;
    height: 90px;
    display: flex;
    align-items: center;
    position: relative;
}

.desktop-nav a:hover,
.desktop-nav a.active {
    color: white;
}

.desktop-nav a.active::after {
    content: "";
    position: absolute;
    bottom: 17px;
    left: 12%;
    right: 12%;
    height: 4px;
    border-radius: 10px;
    background: var(--yellow);
}

.top-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: clamp(10px, 1vw, 18px);
}

.language {
    min-width: 78px;
    padding: 11px 12px;
    border-radius: 25px;
    border: 1px solid rgba(255,255,255,.45);
    background: rgba(6,26,42,.85);
    color: white;
    font-weight: 800;
}

.yellow-btn {
    border: 0;
    border-radius: 12px;
    padding: 14px 23px;
    background: var(--yellow);
    color: #071b2c;
    font-weight: 900;
    transition: .2s ease;
}

.yellow-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
}

.top-request {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: clamp(14px, 1.05vw, 16px);
    padding-inline: clamp(14px, 1.2vw, 23px);
}

.mobile-menu,
.mobile-nav {
    display: none;
}

/* HERO: photograph, transparent overlay, then HTML content. */
.hero {
    position: relative;
    isolation: isolate;
    min-height: clamp(640px, 46.85vw, 700px);
    height: auto;
    padding: 100px 5% 18px;
    display: flex;
    background-color: var(--navy);
    background-image: url("../assets/images/workshop.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(4,24,39,.18), rgba(4,24,39,.10), rgba(4,24,39,.16));
}
.hero-content {
    width: min(1280px, 100%);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    min-width: 0;
}
.hero-intro {
    text-align: center;
    text-shadow: 0 2px 12px rgba(0,0,0,.8);
}
.hero-brand { display: flex; justify-content: center; margin: 0; }
.hero-logo { display: block; width: clamp(430px, 31.5vw, 480px); max-width: 100%; height: auto; filter: drop-shadow(0 3px 8px rgba(4,24,39,.65)); }
.hero-slogan { width: fit-content; max-width: 100%; margin: 8px auto 0; padding: 3px 24px 5px; border: 1px solid var(--yellow); border-radius: 22px 8px; background: rgba(4,24,39,.88); box-shadow: 0 0 10px rgba(255,197,27,.28); font-size: clamp(32px, 3.5vw, 50px); line-height: 1.25; font-weight: 900; }
.slogan-accent { color: var(--yellow); text-shadow: 0 1px 6px rgba(255,197,27,.3); }
.hero-description { margin: 0; font-size: 16px; line-height: 1.6; color: var(--soft); }
.hero-benefits { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 16px 34px; margin-top: 12px; }
.hero-benefits li { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 800; text-shadow: 0 2px 5px #041827; }
.benefit-icon { display: grid; place-items: center; flex-shrink: 0; width: 56px; height: 56px; border: 2px solid var(--yellow); border-radius: 50%; color: var(--yellow); background: rgba(4,24,39,.82); box-shadow: 0 0 8px rgba(255,197,27,.3); }
.benefit-icon svg { width: 34px; height: 34px; }
.hero-services { scroll-margin-top: 110px; }
.service-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: min(900px, 100%); margin-inline: auto; }
.service-tile { position: relative; height: 160px; min-width: 0; overflow: hidden; border: 1px solid rgba(255,194,28,.8); border-radius: 17px; color: white; background-color: var(--navy); background-size: cover; background-position: center; background-repeat: no-repeat; text-align: start; box-shadow: 0 5px 18px rgba(0,0,0,.25), 0 0 7px rgba(255,197,27,.25); transition: transform .2s ease, border-color .2s ease; }
.service-tile:hover { transform: translateY(-3px); border-color: white; }
/* Separate photographic categories; the reference image is never rendered. */
.tile-doors { background-image: url("../assets/images/door-service.png"); }
.tile-windows { background-image: url("../assets/images/window-service.png"); }
.tile-facades { background-image: url("../assets/images/glass-facade-service.png"); }
.tile-rapidMaintenance { background-image: url("../assets/images/rapid-maintenance-service.png"); }
.tile-caption { position: absolute; inset: auto 0 0; min-height: 46px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(4,24,39,.84); font-size: 16px; font-weight: 700; line-height: 1.25; }
[lang="ar"] .tile-caption { font-size: 18px; }
.tile-caption svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--yellow); }
.service-followup { padding: 18px 5%; text-align: center; background: var(--navy); }
.service-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.hero-secondary { border: 1px solid var(--yellow); border-radius: 12px; padding: 14px 23px; color: white; background: rgba(4,24,39,.85); font-weight: 700; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 5px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* EXTRA */

.content-section {
    min-height: 300px;
    padding: 80px 7%;
    background: #0b2940;
}

.content-section.darker {
    background: #061b2c;
}

.section-title {
    max-width: 1100px;
    margin: auto;
    text-align: center;
}

.section-title > span {
    color: var(--yellow);
    font-weight: 900;
    letter-spacing: 3px;
}

.section-title h2 {
    font-size: 38px;
    margin-top: 12px;
    overflow-wrap: anywhere;
}

.section-title p {
    color: #cad7df;
    margin-top: 15px;
}

.steps {
    max-width: 1200px;
    margin: 45px auto 0;

    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 16px;
}

.step {
    padding: 25px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
}

.step b {
    color: var(--yellow);
    font-size: 27px;
}

.step h3 {
    margin-top: 15px;
    font-size: 17px;
}

.large-request {
    margin-top: 30px;
}

/* MODAL */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 5000;

    background: rgba(0,0,0,.78);

    overflow-y: auto;
    padding: 35px 15px;
}

.modal.open {
    display: block;
}

.modal-box {
    width: min(950px, 100%);
    margin: auto;

    background: #fff;
    color: #132333;

    border-radius: 22px;

    padding: 40px;

    position: relative;
}

.close {
    position: absolute;
    top: 12px;
    inset-inline-end: 20px;

    border: 0;
    background: transparent;

    font-size: 37px;
}

.modal-heading {
    margin-bottom: 30px;
}

.modal-heading small {
    color: #b68100;
    font-weight: 900;
}

.modal-heading h2 {
    font-size: 32px;
    margin-top: 7px;
}

.modal-heading p {
    color: #667887;
    margin-top: 8px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.form-grid label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-weight: 700;
}

.form-grid label.wide {
    grid-column: 1 / -1;
}

.form-grid input,
.form-grid select,
.form-grid textarea {
    width: 100%;
    padding: 13px 14px;

    border-radius: 9px;
    border: 1px solid #b8c4cc;

    background: white;
    color: #152532;
}

.invoice-fields {
    margin-top: 28px;
    padding-top: 25px;
    border-top: 1px solid #d6dde2;
}

.invoice-fields h3 {
    margin-bottom: 18px;
}

.modal-actions {
    margin-top: 28px;

    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.outline-btn {
    padding: 13px 18px;
    border-radius: 10px;

    border: 1px solid #173a54;

    background: white;
    color: #173a54;

    font-weight: 800;
}

/* PRINT */

#printArea {
    display: none;
    color: #111;
    background: white;
}

.print-header {
    display: flex;
    justify-content: space-between;
    gap: 30px;

    padding-bottom: 25px;
    border-bottom: 3px solid #111;
}

.print-header h1 {
    font-size: 38px;
}

.print-document-info {
    text-align: end;
}

.print-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 35px;
}

.print-table th,
.print-table td {
    border: 1px solid #999;
    padding: 12px;
    text-align: start;
}

.invoice-note {
    margin-top: 30px;
    padding: 18px;
    border: 1px solid #aaa;
}

.print-footer {
    margin-top: 70px;
    padding-top: 20px;
    border-top: 1px solid #aaa;
    text-align: center;
}

/* RESPONSIVE */
@media(max-width:1250px) {
    .topbar { justify-content: space-between; }
    .desktop-nav { display: none; }
    .mobile-menu { display: block; border: 0; background: transparent; color: white; font-size: 27px; }
    .mobile-nav { position: fixed; z-index: 990; top: 90px; inset-inline: 0; padding: 20px 5%; background: #061b2c; }
    .mobile-nav.open { display: grid; gap: 16px; }
    .mobile-nav a { color: white; text-decoration: none; padding: 6px; }
}
@media(max-width:950px) {
    .hero { min-height: auto; padding-inline: 24px; background-position: 65% center; }
    .service-tiles { width: min(456px, 100%); grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .steps { grid-template-columns: 1fr 1fr; }
}
@media(max-width:600px) {
    .topbar { height: 78px; padding: 0 15px; gap: 10px; }
    .top-actions { gap: 10px; }
    .top-request { display: none; }
    .language { min-width: 62px; padding: 9px; }
    .mobile-nav { top: 78px; }
    .hero { padding: 96px 16px 24px; }
    .brand-logo { width: 112px; height: 64px; }
    .hero-logo { width: min(350px, 100%); }
    .hero-slogan { font-size: 27px; padding: 8px 12px; }
    .hero-benefits li { font-size: 16px; gap: 7px; }
    .benefit-icon { width: 40px; height: 40px; }
    .benefit-icon svg { width: 24px; height: 24px; }
    .hero-benefits { gap: 12px 20px; }
    .service-tiles { gap: 12px; }
    .tile-caption { padding: 8px; font-size: 14px; gap: 6px; }
        .service-actions > button { width: 100%; }
    .steps, .form-grid { grid-template-columns: 1fr; }
    .form-grid label.wide { grid-column: auto; }
    .modal-box { padding: 30px 18px; }
}
@media(max-width:360px) {
    .service-tiles { width: min(220px, 100%); grid-template-columns: minmax(0, 1fr); }
}
@media(prefers-reduced-motion:reduce) {
    html { scroll-behavior: auto; }
    .service-tile, .yellow-btn { transition: none; }
    .service-tile:hover, .yellow-btn:hover { transform: none; }
}

/* PRINT */

@media print {

    @page {
        size: A4;
        margin: 14mm;
    }

    body * {
        visibility: hidden !important;
    }

    #printArea,
    #printArea * {
        visibility: visible !important;
    }

    #printArea {
        display: block !important;

        position: absolute;
        inset: 0;

        width: 100%;

        padding: 0;

        background: white;
        color: black;
    }
}

/* ===== WARCHATI PREMIUM UI ===== */

.hero-slogan{
    position:relative;
    padding:10px 34px 13px;
    border:1px solid rgba(255,197,27,.85);
    border-radius:18px;
    background:linear-gradient(135deg,rgba(4,24,39,.96),rgba(8,43,66,.90));
    box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 18px rgba(255,197,27,.16);
    letter-spacing:.2px;
}

.hero-slogan::after{
    content:"";
    position:absolute;
    left:12%;
    right:12%;
    bottom:-2px;
    height:3px;
    border-radius:10px;
    background:linear-gradient(90deg,transparent,var(--yellow),transparent);
}

.slogan-accent{
    display:inline-block;
    color:var(--yellow);
    font-weight:950;
    text-shadow:0 0 14px rgba(255,197,27,.32);
}

/* Request service modal */
.modal-box{
    border-radius:24px;
    border:1px solid rgba(19,55,78,.12);
    box-shadow:0 25px 70px rgba(0,0,0,.30);
    overflow:hidden;
}

.modal-box h2{
    margin-bottom:22px;
    font-size:clamp(25px,3vw,34px);
    font-weight:900;
    color:#071f31;
}

.form-grid{
    gap:20px;
}

.form-grid label{
    gap:9px;
    font-weight:800;
    color:#17364a;
}

.form-grid input,
.form-grid select,
.form-grid textarea{
    min-height:50px;
    padding:14px 16px;
    border:1px solid #cbd6dd;
    border-radius:13px;
    background:#f8fbfc;
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}

.form-grid textarea{
    min-height:115px;
    resize:vertical;
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus{
    outline:none;
    border-color:var(--yellow);
    background:#fff;
    box-shadow:0 0 0 4px rgba(255,197,27,.16);
}

.form-grid input[type="file"]{
    padding:12px;
    border:2px dashed #aebfc9;
    background:linear-gradient(135deg,#f8fbfc,#eef5f8);
}

#requestForm button[type="submit"],
#saveRequest{
    min-height:52px;
    padding:13px 28px;
    border:0;
    border-radius:13px;
    font-size:17px;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(255,197,27,.25);
    transition:transform .2s ease,box-shadow .2s ease;
}

#requestForm button[type="submit"]:hover,
#saveRequest:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 25px rgba(255,197,27,.35);
}

@media(max-width:600px){
    .hero-slogan{
        padding:8px 16px 10px;
        border-radius:14px;
    }

    .modal-box{
        border-radius:18px;
    }
}

/* ===== PROFESSIONAL REQUEST PAGE V2 ===== */

#requestModal{
    backdrop-filter:blur(8px);
    background:rgba(3,18,29,.72);
}

#requestModal .modal-box{
    position:relative;
    width:min(920px,94vw);
    max-height:92vh;
    overflow-y:auto;
    padding:0 0 28px;
    border-radius:26px;
    background:#f7fafc;
    border:1px solid rgba(255,255,255,.25);
}

#requestModal .modal-heading{
    position:relative;
    padding:28px 34px 24px;
    margin-bottom:26px;
    color:#fff;
    background:linear-gradient(135deg,#061d2d,#0b3a57);
    border-bottom:4px solid var(--yellow);
}

#requestModal .modal-heading small{
    display:inline-block;
    margin-bottom:6px;
    color:var(--yellow);
    font-size:13px;
    font-weight:900;
    letter-spacing:2px;
}

#requestModal .modal-heading h2{
    margin:0 0 10px;
    color:#fff;
    font-size:clamp(25px,3vw,34px);
    font-weight:900;
}

#requestNumber{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    margin:5px 0 0;
    padding:6px 14px;
    border:1px solid rgba(255,197,27,.5);
    border-radius:20px;
    background:rgba(255,197,27,.10);
    color:#fff;
    font-weight:800;
}

#requestModal .close{
    position:absolute;
    z-index:5;
    top:17px;
    right:20px;
    width:42px;
    height:42px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:50%;
    background:rgba(255,255,255,.10);
    color:#fff;
    font-size:26px;
    cursor:pointer;
    transition:.2s ease;
}

html[dir="rtl"] #requestModal .close{
    right:auto;
    left:20px;
}

#requestModal .close:hover{
    background:var(--yellow);
    color:#071d2c;
    transform:rotate(90deg);
}

#requestForm{
    padding:0 34px;
}

#requestForm .form-grid{
    gap:18px;
}

#requestForm .form-grid label{
    position:relative;
    padding:16px;
    border:1px solid #dde6eb;
    border-radius:16px;
    background:#fff;
    box-shadow:0 5px 18px rgba(7,31,49,.05);
}

#requestForm .form-grid label > span{
    display:block;
    margin-bottom:2px;
    color:#17384d;
    font-size:14px;
    font-weight:900;
}

#requestForm input,
#requestForm select,
#requestForm textarea{
    margin-top:6px;
}

#requestForm input[type="file"]{
    min-height:72px;
    cursor:pointer;
    border:2px dashed #b4c5cf;
    background:#f5f9fb;
}

#requestForm .modal-actions{
    display:flex;
    justify-content:center;
    margin-top:26px;
    padding-top:22px;
    border-top:1px solid #e0e8ed;
}

#requestForm .modal-actions .yellow-btn{
    width:min(380px,100%);
    min-height:58px;
    border-radius:15px;
    font-size:18px;
    font-weight:950;
    box-shadow:0 10px 25px rgba(255,197,27,.30);
}

#requestForm .modal-actions .yellow-btn:hover{
    transform:translateY(-2px);
}

@media(max-width:700px){
    #requestModal .modal-box{
        width:96vw;
        max-height:94vh;
        border-radius:20px;
    }

    #requestModal .modal-heading{
        padding:24px 20px 20px;
    }

    #requestForm{
        padding:0 18px;
    }

    #requestForm .form-grid{
        grid-template-columns:1fr;
    }

    #requestForm .form-grid label.wide{
        grid-column:auto;
    }
}

/* ===== REQUEST MODAL COMPACT PRO ===== */

#requestModal .modal-box{
    width:min(1000px,94vw);
    max-height:94vh;
}

#requestModal .modal-heading{
    padding:18px 30px 16px;
    margin-bottom:18px;
}

#requestModal .modal-heading small{
    margin-bottom:2px;
}

#requestModal .modal-heading h2{
    margin:0 0 6px;
    font-size:clamp(24px,2.4vw,31px);
}

#requestNumber{
    min-height:30px;
    padding:4px 13px;
    font-size:14px;
}

#requestForm{
    padding:0 28px;
}

#requestForm .form-grid{
    gap:12px 16px;
}

#requestForm .form-grid label{
    padding:11px 14px 13px;
    border-radius:14px;
}

#requestForm .form-grid label > span{
    margin-bottom:0;
    font-size:13px;
}

#requestForm input,
#requestForm select{
    min-height:44px;
    padding:10px 13px;
}

#requestForm textarea{
    min-height:82px;
    padding:11px 13px;
}

#requestForm input[type="file"]{
    min-height:54px;
}

#requestForm .modal-actions{
    position:sticky;
    bottom:-28px;
    z-index:3;
    margin-top:16px;
    padding:14px 0 4px;
    background:linear-gradient(180deg,rgba(247,250,252,.25),#f7fafc 30%);
}

#requestForm .modal-actions .yellow-btn{
    min-height:52px;
    width:min(420px,100%);
}

@media(max-width:700px){
    #requestModal .modal-heading{
        padding:16px 18px 14px;
    }

    #requestForm{
        padding:0 14px;
    }
}

/* ===== WARCHATI ARABIC TYPOGRAPHY ===== */
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea {
    font-family: "Traditional Arabic", "Arabic Typesetting", Tahoma, Arial, sans-serif;
}

html[lang="ar"] body {
    font-size: 18px;
}

html[lang="ar"] .hero-slogan {
    font-size: clamp(38px, 4vw, 58px);
    font-weight: 700;
}

html[lang="ar"] button,
html[lang="ar"] .tile-caption,
html[lang="ar"] .modal-heading h2,
html[lang="ar"] .form-grid label > span {
    font-weight: 700;
}

/* ===== LARGER ARABIC TEXT ===== */
html[lang="ar"] body {
    font-size: 21px;
}

html[lang="ar"] nav,
html[lang="ar"] button,
html[lang="ar"] .tile-caption {
    font-size: 20px;
}

html[lang="ar"] .hero-slogan {
    font-size: clamp(44px, 4.5vw, 64px);
}

html[lang="ar"] .hero-benefits li {
    font-size: 25px;
}

html[lang="ar"] #requestModal .modal-heading h2 {
    font-size: 38px;
}

html[lang="ar"] #requestForm .form-grid label > span {
    font-size: 19px;
}

html[lang="ar"] #requestForm input,
html[lang="ar"] #requestForm select,
html[lang="ar"] #requestForm textarea {
    font-size: 19px;
}

html[lang="ar"] #requestForm .yellow-btn {
    font-size: 22px;
}

/* ===== WARCHATI INFO MODAL ===== */
.warchati-info-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 18, 30, .72);
    backdrop-filter: blur(4px);
}

.warchati-info-modal.show {
    display: flex;
}

.warchati-info-box {
    position: relative;
    width: min(720px, 94vw);
    max-height: 85vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 24px 70px rgba(0,0,0,.32);
}

.warchati-info-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 27px;
    line-height: 1;
    background: #f1f3f5;
    color: #061b2b;
}

html[dir="rtl"] .warchati-info-close {
    right: auto;
    left: 14px;
}

.info-brand {
    color: #d89c00;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

.warchati-info-box h2 {
    margin: 0 0 22px;
    color: #061b2b;
    font-size: 32px;
}

.info-service-card {
    padding: 20px;
    margin-top: 14px;
    border: 1px solid #e5e8eb;
    border-radius: 14px;
    background: #f8fafb;
}

.info-service-card h3 {
    margin: 0 0 8px;
    color: #061b2b;
    font-size: 22px;
}

.info-service-card p {
    margin: 0;
    line-height: 1.9;
    font-size: 17px;
}

html[lang="ar"] .warchati-info-box {
    text-align: right;
}

html[lang="ar"] .warchati-info-box h2 {
    font-size: 36px;
}

html[lang="ar"] .info-service-card h3 {
    font-size: 25px;
}

html[lang="ar"] .info-service-card p {
    font-size: 20px;
}

@media (max-width: 600px) {
    .warchati-info-box {
        padding: 26px 18px 20px;
    }
}

/* ===== WARCHATI INFO MODAL FIX ===== */
.warchati-info-box {
    width: min(680px, 90vw);
    max-height: 78vh;
    padding: 28px 30px;
    overflow-y: auto;
}

.warchati-info-box,
.warchati-info-box p,
.warchati-info-box .info-service-card p {
    color: #263746 !important;
}

.info-service-card {
    padding: 17px 20px;
    margin-top: 12px;
    background: #f7f9fa;
}

.info-service-card h3 {
    color: #061b2b !important;
}

html[lang="ar"] .info-service-card p {
    font-size: 19px;
    line-height: 1.75;
}

html[lang="ar"] .warchati-info-box h2 {
    font-size: 34px;
    margin-bottom: 16px;
}

/* ===== WARCHATI GALLERY MODAL ===== */
.warchati-gallery-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3,18,30,.78);
    backdrop-filter: blur(5px);
}

.warchati-gallery-box {
    position: relative;
    width: min(680px, 92vw);
    background: #fff;
    border-radius: 18px;
    padding: 24px 28px 20px;
    box-shadow: 0 25px 80px rgba(0,0,0,.35);
    text-align: center;
}

.gallery-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #f0f2f4;
    color: #061b2b;
    font-size: 27px;
    cursor: pointer;
    z-index: 3;
}

html[dir="rtl"] .gallery-close {
    right: auto;
    left: 14px;
}

.gallery-brand {
    color: #d89c00;
    font-weight: 800;
    letter-spacing: 3px;
}

.warchati-gallery-box h2 {
    margin: 5px 0 16px;
    color: #061b2b;
    font-size: 28px;
}

.gallery-view {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 390px;
    overflow: hidden;
    border-radius: 14px;
    background: #eef1f3;
}

#galleryMainImage {
    display: block;
    max-width: 100%;
    width: auto;
    max-height: 430px;
    object-fit: contain;
}

.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(6,27,43,.82);
    color: white;
    font-size: 36px;
    line-height: 40px;
    cursor: pointer;
}

.gallery-prev {
    left: 14px;
}

.gallery-next {
    right: 14px;
}

.gallery-arrow:hover {
    background: #d89c00;
}

.gallery-caption {
    margin-top: 12px;
    color: #061b2b;
    font-size: 20px;
    font-weight: 700;
}

.gallery-counter {
    margin-top: 3px;
    color: #6b7780;
    font-size: 14px;
}

@media (max-width: 600px) {
    .warchati-gallery-box {
        padding: 22px 14px 16px;
    }

    .gallery-view {
        min-height: 280px;
    }

    #galleryMainImage {
        max-height: 330px;
    }

    .gallery-arrow {
        width: 42px;
        height: 42px;
    }
}

/* ===== WARCHATI GALLERY LARGE IMAGE ===== */
.warchati-gallery-box {
    width: min(1000px, 94vw);
    height: min(760px, 88vh);
    padding: 18px;
    display: flex;
    flex-direction: column;
}

.warchati-gallery-box h2 {
    margin: 2px 0 10px;
}

.gallery-view {
    flex: 1;
    width: 100%;
    min-height: 0;
    position: relative;
    background: #101820;
    border-radius: 14px;
    overflow: hidden;
}

#galleryMainImage {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    display: block;
}

.gallery-arrow {
    width: 56px;
    height: 56px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(6,27,43,.88);
    border: 2px solid rgba(255,255,255,.75);
    color: #fff;
    font-size: 42px;
    z-index: 5;
}

.gallery-prev {
    left: 18px;
}

.gallery-next {
    right: 18px;
}

.gallery-caption {
    margin-top: 8px;
}

.gallery-counter {
    margin-top: 2px;
}

@media (max-width: 600px) {
    .warchati-gallery-box {
        width: 96vw;
        height: 78vh;
        padding: 12px;
    }

    .gallery-arrow {
        width: 46px;
        height: 46px;
        font-size: 34px;
    }

    .gallery-prev {
        left: 8px;
    }

    .gallery-next {
        right: 8px;
    }
}

/* ===== UNIVERSAL MODAL CLOSE BUTTON ===== */
.modal-box,
.warchati-info-box {
    position: relative;
}

.modal-close-x {
    position: absolute;
    top: 16px;
    right: 18px;
    z-index: 1000;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(7,28,45,.25);
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: #071c2d;
    font-size: 30px;
    line-height: 38px;
    font-family: Arial, sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close-x:hover {
    background: #071c2d;
    color: #ffffff;
}

[dir="rtl"] .modal-close-x {
    right: auto;
    left: 18px;
}

@media (max-width: 600px) {
    .modal-close-x {
        top: 10px;
        right: 10px;
        width: 38px;
        height: 38px;
        font-size: 27px;
    }

    [dir="rtl"] .modal-close-x {
        right: auto;
        left: 10px;
    }
}


/* ============================================================
   WARCHATI REQUEST FORM INPUT INTERACTION FIX
   ============================================================ */

#requestModal,
#requestModal *,
.request-modal,
.request-modal *,
.modal-box,
.modal-box *,
.warchati-info-modal,
.warchati-info-modal * {
    pointer-events: auto;
}

#requestModal input,
#requestModal textarea,
#requestModal select,
#requestModal button,
#requestModal label,
#requestModal input[type="file"] {
    pointer-events: auto !important;
    position: relative;
    z-index: 20;
}

#requestModal input:not([type="file"]),
#requestModal textarea,
#requestModal select {
    user-select: text !important;
    -webkit-user-select: text !important;
    cursor: text;
}

#requestModal input:disabled,
#requestModal textarea:disabled,
#requestModal select:disabled {
    pointer-events: auto !important;
}

#requestModal .modal-box {
    position: relative;
    z-index: 10;
}

#requestModal .form-grid,
#requestModal .form-group,
#requestModal .form-field,
#requestModal .field,
#requestModal form {
    position: relative;
    z-index: 15;
}

#requestModal::before,
#requestModal::after,
#requestModal .modal-overlay,
#requestModal .overlay {
    pointer-events: none !important;
}

#requestModal input,
#requestModal textarea,
#requestModal select {
    background-color: #ffffff !important;
    color: #09263a !important;
    opacity: 1 !important;
}

#requestModal input::placeholder,
#requestModal textarea::placeholder {
    opacity: 1;
}

#requestModal select {
    cursor: pointer;
}


/* ============================================================
   WARCHATI REQUEST FORM - INPUT INTERACTION FIX
   ============================================================ */

#requestModal input,
#requestModal select,
#requestModal textarea,
#requestModal button,
#requestModal label {
    pointer-events: auto !important;
}

#requestModal input[type="text"],
#requestModal input[type="tel"],
#requestModal input[type="datetime-local"],
#requestModal select,
#requestModal textarea {
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    cursor: text !important;
}

#requestModal input[type="file"] {
    pointer-events: auto !important;
    cursor: pointer !important;
}

#complaintModal input,
#complaintModal textarea,
#complaintModal select,
#complaintModal button,
#complaintModal label {
    pointer-events: auto !important;
}

#complaintModal input,
#complaintModal textarea {
    user-select: text !important;
    -webkit-user-select: text !important;
}

#requestModal button,
#complaintModal button {
    cursor: pointer !important;
}


/* ============================================================
   WARCHATI REQUEST MODAL - FINAL LAYOUT FIX
   1. Keep the close button fully visible.
   2. Keep the submit button below the form content.
   3. Prevent the action area from covering form fields.
   ============================================================ */

/* ------------------------------------------------------------
   REQUEST MODAL CONTAINER
   ------------------------------------------------------------ */

#requestModal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9000 !important;
}

/* ------------------------------------------------------------
   REQUEST MODAL BOX
   ------------------------------------------------------------ */

#requestModal .modal-box {
    position: relative !important;
    z-index: 9001 !important;
    overflow-x: hidden !important;
}

/* ------------------------------------------------------------
   CLOSE BUTTON
   ------------------------------------------------------------ */

#requestModal .close {
    position: absolute !important;

    top: 16px !important;
    right: 16px !important;

    z-index: 99999 !important;

    width: 52px !important;
    height: 52px !important;

    min-width: 52px !important;
    min-height: 52px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;

    cursor: pointer !important;

    font-size: 28px !important;
    line-height: 1 !important;

    border-radius: 50% !important;
}

/* ------------------------------------------------------------
   FORM CONTENT
   ------------------------------------------------------------ */

#requestModal #requestForm {
    position: relative !important;
    z-index: 1 !important;
}

/* ------------------------------------------------------------
   FORM ACTIONS
   IMPORTANT:
   Do NOT let the yellow button float over fields.
   ------------------------------------------------------------ */

#requestModal .modal-actions {
    position: static !important;

    z-index: auto !important;

    width: 100% !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    margin-top: 24px !important;
    padding: 20px 0 10px !important;

    background: transparent !important;

    pointer-events: auto !important;
}

/* ------------------------------------------------------------
   SUBMIT BUTTON
   ------------------------------------------------------------ */

#requestModal .modal-actions .yellow-btn {
    position: static !important;

    z-index: auto !important;

    display: inline-flex !important;

    pointer-events: auto !important;

    cursor: pointer !important;

    margin: 0 auto !important;
}

/* ------------------------------------------------------------
   REQUEST FORM FIELDS
   ------------------------------------------------------------ */

#requestModal input,
#requestModal select,
#requestModal textarea {
    position: relative !important;
    z-index: 2 !important;

    pointer-events: auto !important;

    user-select: text !important;
    -webkit-user-select: text !important;
}

/* ------------------------------------------------------------
   FILE INPUT
   ------------------------------------------------------------ */

#requestModal input[type="file"] {
    position: relative !important;
    z-index: 3 !important;

    pointer-events: auto !important;

    cursor: pointer !important;
}

/* ------------------------------------------------------------
   DO NOT LET AN ACTION FOOTER COVER THE LAST FIELD
   ------------------------------------------------------------ */

#requestModal #requestForm {
    padding-bottom: 20px !important;
}

/* ------------------------------------------------------------
   MOBILE / SMALL WINDOWS
   ------------------------------------------------------------ */

@media (max-width: 700px) {

    #requestModal .close {
        top: 10px !important;
        right: 10px !important;

        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;
        min-height: 46px !important;

        font-size: 25px !important;
    }

    #requestModal .modal-actions {
        margin-top: 18px !important;
        padding-bottom: 16px !important;
    }

}


/* ============================================================
   WARCHATI REQUEST MODAL - REAL FINAL FIX
   Targets the actual HTML elements.
   ============================================================ */

/* The actual request modal */
#requestModal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9000 !important;

    display: none;
    align-items: center !important;
    justify-content: center !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding: 20px !important;

    pointer-events: auto !important;
}

#requestModal.open {
    display: flex !important;
}

/* Actual modal box */
#requestModal .modal-box {
    position: relative !important;

    z-index: 9001 !important;

    width: min(1000px, 96vw) !important;

    max-height: calc(100vh - 40px) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    margin: auto !important;

    padding: 0 0 28px !important;
}

/* ============================================================
   ACTUAL CLOSE BUTTON:
   class="modal-close-x"
   ============================================================ */

#requestModal .modal-close-x {
    position: absolute !important;

    top: 14px !important;
    right: 14px !important;

    z-index: 100000 !important;

    width: 46px !important;
    height: 46px !important;

    min-width: 46px !important;
    min-height: 46px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;

    cursor: pointer !important;

    font-size: 30px !important;
    line-height: 1 !important;

    border-radius: 50% !important;
}

/* Arabic: close button on the left */
html[dir="rtl"] #requestModal .modal-close-x {
    right: auto !important;
    left: 14px !important;
}

/* ============================================================
   FORM
   ============================================================ */

#requestModal #requestForm {
    position: relative !important;

    z-index: 10 !important;

    display: block !important;

    pointer-events: auto !important;
}

/* ============================================================
   FIELDS
   ============================================================ */

#requestModal #requestForm .form-grid {
    position: relative !important;
    z-index: 11 !important;

    pointer-events: auto !important;
}

#requestModal #requestForm label {
    position: relative !important;
    z-index: 12 !important;

    pointer-events: auto !important;
}

#requestModal #requestForm input,
#requestModal #requestForm textarea,
#requestModal #requestForm select {
    position: relative !important;

    z-index: 13 !important;

    pointer-events: auto !important;

    user-select: text !important;
    -webkit-user-select: text !important;

    opacity: 1 !important;
}

/* ============================================================
   ACTION AREA
   NEVER FLOAT ABOVE THE FORM
   ============================================================ */

#requestModal #requestForm .modal-actions {
    position: static !important;

    z-index: 14 !important;

    display: flex !important;

    width: 100% !important;

    justify-content: center !important;
    align-items: center !important;

    margin-top: 24px !important;

    padding: 20px 0 10px !important;

    background: transparent !important;

    border-top: 1px solid #e0e8ed !important;

    pointer-events: auto !important;
}

/* Actual yellow submit button */
#requestModal #requestForm .modal-actions .yellow-btn {
    position: static !important;

    z-index: 15 !important;

    display: inline-flex !important;

    width: min(420px, 100%) !important;

    min-height: 54px !important;

    margin: 0 auto !important;

    pointer-events: auto !important;

    cursor: pointer !important;
}

/* ============================================================
   IMPORTANT:
   Remove the old sticky behavior completely
   ============================================================ */

#requestModal #requestForm .modal-actions {
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
}

/* ============================================================
   SMALL SCREENS
   ============================================================ */

@media (max-width: 700px) {

    #requestModal {
        padding: 10px !important;
    }

    #requestModal .modal-box {
        width: 96vw !important;
        max-height: calc(100vh - 20px) !important;
    }

    #requestModal .modal-close-x {
        top: 10px !important;
        right: 10px !important;

        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;
        min-height: 42px !important;

        font-size: 27px !important;
    }

    html[dir="rtl"] #requestModal .modal-close-x {
        right: auto !important;
        left: 10px !important;
    }
}

/* ============================================================
   WARCHATI REQUEST FORM - REAL FIELD VISIBILITY FIX
   ------------------------------------------------------------
   The HTML structure is:
   label
     span
     input / textarea / select
   Force the actual controls to remain visible and writable.
   ============================================================ */

#requestModal #requestForm {
    position: relative !important;
    z-index: 50 !important;
    pointer-events: auto !important;
}

#requestModal #requestForm .form-grid {
    position: relative !important;
    z-index: 51 !important;
    pointer-events: auto !important;
}

#requestModal #requestForm label {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;

    position: relative !important;
    z-index: 52 !important;

    pointer-events: auto !important;
    overflow: visible !important;
}

#requestModal #requestForm label > span {
    position: static !important;
    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    color: #09263a !important;
    opacity: 1 !important;

    pointer-events: none !important;
    z-index: 53 !important;
}

#requestModal #requestForm input:not([type="file"]),
#requestModal #requestForm textarea,
#requestModal #requestForm select {
    display: block !important;

    position: relative !important;
    z-index: 60 !important;

    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    background: #ffffff !important;
    background-color: #ffffff !important;

    color: #09263a !important;

    border: 1px solid #cbd9e3 !important;
    border-radius: 14px !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;

    user-select: text !important;
    -webkit-user-select: text !important;

    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 500 !important;

    outline: none !important;
}

#requestModal #requestForm input:not([type="file"]),
#requestModal #requestForm select {
    min-height: 58px !important;
    height: 58px !important;

    padding: 12px 16px !important;
}

#requestModal #requestForm textarea {
    min-height: 120px !important;
    height: 120px !important;

    padding: 14px 16px !important;

    resize: vertical !important;
}

#requestModal #requestForm input:not([type="file"]):focus,
#requestModal #requestForm textarea:focus,
#requestModal #requestForm select:focus {
    background: #ffffff !important;
    color: #09263a !important;

    border-color: #ffc51b !important;

    outline: 2px solid rgba(255,197,27,.22) !important;
    box-shadow: 0 0 0 3px rgba(255,197,27,.10) !important;

    pointer-events: auto !important;
}

#requestModal #requestForm input::placeholder,
#requestModal #requestForm textarea::placeholder {
    color: #7a8994 !important;
    opacity: 1 !important;
}

#requestModal #requestForm select {
    cursor: pointer !important;
}

#requestModal #requestForm input[type="datetime-local"] {
    cursor: text !important;
}

#requestModal #requestForm input[type="file"] {
    display: block !important;

    position: relative !important;
    z-index: 60 !important;

    width: 100% !important;

    min-height: 58px !important;
    height: auto !important;

    box-sizing: border-box !important;

    padding: 12px !important;

    background: #ffffff !important;
    color: #09263a !important;

    border: 1px dashed #aebfcb !important;
    border-radius: 14px !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;
    cursor: pointer !important;
}

#requestModal #requestForm label.wide {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

#requestModal .modal-heading,
#requestModal #requestForm,
#requestModal #requestForm .form-grid,
#requestModal #requestForm label,
#requestModal #requestForm input,
#requestModal #requestForm textarea,
#requestModal #requestForm select,
#requestModal #requestForm .modal-actions {
    isolation: auto !important;
}

/* Keep close button above everything */
#requestModal .modal-close-x {
    position: absolute !important;

    z-index: 1000000 !important;

    pointer-events: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    visibility: visible !important;
    opacity: 1 !important;
}

/* Keep submit button below the fields */
#requestModal #requestForm .modal-actions {
    position: static !important;

    z-index: 70 !important;

    display: flex !important;

    width: 100% !important;

    justify-content: center !important;
    align-items: center !important;

    margin-top: 24px !important;
    padding: 20px 0 10px !important;

    pointer-events: auto !important;
}

#requestModal #requestForm .modal-actions .yellow-btn {
    position: static !important;

    z-index: 71 !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    pointer-events: auto !important;
    cursor: pointer !important;
}

@media (max-width: 700px) {

    #requestModal #requestForm label {
        gap: 8px !important;
    }

    #requestModal #requestForm input:not([type="file"]),
    #requestModal #requestForm select {
        min-height: 54px !important;
        height: 54px !important;
        font-size: 16px !important;
    }

    #requestModal #requestForm textarea {
        min-height: 110px !important;
        height: 110px !important;
        font-size: 16px !important;
    }
}

/* ============================================================
   END REAL FIELD VISIBILITY FIX
   ============================================================ */

/* ============================================================
   WARCHATI REQUEST FORM - REAL FIELD VISIBILITY FIX
   ------------------------------------------------------------
   The HTML structure is:
   label
     span
     input / textarea / select
   Force the actual controls to remain visible and writable.
   ============================================================ */

#requestModal #requestForm {
    position: relative !important;
    z-index: 50 !important;
    pointer-events: auto !important;
}

#requestModal #requestForm .form-grid {
    position: relative !important;
    z-index: 51 !important;
    pointer-events: auto !important;
}

#requestModal #requestForm label {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;

    position: relative !important;
    z-index: 52 !important;

    pointer-events: auto !important;
    overflow: visible !important;
}

#requestModal #requestForm label > span {
    position: static !important;
    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    color: #09263a !important;
    opacity: 1 !important;

    pointer-events: none !important;
    z-index: 53 !important;
}

#requestModal #requestForm input:not([type="file"]),
#requestModal #requestForm textarea,
#requestModal #requestForm select {
    display: block !important;

    position: relative !important;
    z-index: 60 !important;

    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    background: #ffffff !important;
    background-color: #ffffff !important;

    color: #09263a !important;

    border: 1px solid #cbd9e3 !important;
    border-radius: 14px !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;

    user-select: text !important;
    -webkit-user-select: text !important;

    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 500 !important;

    outline: none !important;
}

#requestModal #requestForm input:not([type="file"]),
#requestModal #requestForm select {
    min-height: 58px !important;
    height: 58px !important;

    padding: 12px 16px !important;
}

#requestModal #requestForm textarea {
    min-height: 120px !important;
    height: 120px !important;

    padding: 14px 16px !important;

    resize: vertical !important;
}

#requestModal #requestForm input:not([type="file"]):focus,
#requestModal #requestForm textarea:focus,
#requestModal #requestForm select:focus {
    background: #ffffff !important;
    color: #09263a !important;

    border-color: #ffc51b !important;

    outline: 2px solid rgba(255,197,27,.22) !important;
    box-shadow: 0 0 0 3px rgba(255,197,27,.10) !important;

    pointer-events: auto !important;
}

#requestModal #requestForm input::placeholder,
#requestModal #requestForm textarea::placeholder {
    color: #7a8994 !important;
    opacity: 1 !important;
}

#requestModal #requestForm select {
    cursor: pointer !important;
}

#requestModal #requestForm input[type="datetime-local"] {
    cursor: text !important;
}

#requestModal #requestForm input[type="file"] {
    display: block !important;

    position: relative !important;
    z-index: 60 !important;

    width: 100% !important;

    min-height: 58px !important;
    height: auto !important;

    box-sizing: border-box !important;

    padding: 12px !important;

    background: #ffffff !important;
    color: #09263a !important;

    border: 1px dashed #aebfcb !important;
    border-radius: 14px !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;
    cursor: pointer !important;
}

#requestModal #requestForm label.wide {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

#requestModal .modal-heading,
#requestModal #requestForm,
#requestModal #requestForm .form-grid,
#requestModal #requestForm label,
#requestModal #requestForm input,
#requestModal #requestForm textarea,
#requestModal #requestForm select,
#requestModal #requestForm .modal-actions {
    isolation: auto !important;
}

/* Keep close button above everything */
#requestModal .modal-close-x {
    position: absolute !important;

    z-index: 1000000 !important;

    pointer-events: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    visibility: visible !important;
    opacity: 1 !important;
}

/* Keep submit button below the fields */
#requestModal #requestForm .modal-actions {
    position: static !important;

    z-index: 70 !important;

    display: flex !important;

    width: 100% !important;

    justify-content: center !important;
    align-items: center !important;

    margin-top: 24px !important;
    padding: 20px 0 10px !important;

    pointer-events: auto !important;
}

#requestModal #requestForm .modal-actions .yellow-btn {
    position: static !important;

    z-index: 71 !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    pointer-events: auto !important;
    cursor: pointer !important;
}

@media (max-width: 700px) {

    #requestModal #requestForm label {
        gap: 8px !important;
    }

    #requestModal #requestForm input:not([type="file"]),
    #requestModal #requestForm select {
        min-height: 54px !important;
        height: 54px !important;
        font-size: 16px !important;
    }

    #requestModal #requestForm textarea {
        min-height: 110px !important;
        height: 110px !important;
        font-size: 16px !important;
    }
}

/* ============================================================
   END REAL FIELD VISIBILITY FIX
   ============================================================ */