/* Kahramaa Arabic — same family as km.qa (HelveticaNeueLT Arabic 75 + Noto fallback) */
@font-face {
    font-family: 'HelveticaNeueLT Arabic 75';
    src: url('/km/assest/fonts/Helvetica/HelveticaNeueLTArabic-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Language toggle — match km.qa header pill */
.optionItem.lang a,
#ctl00_KahramaaLang_lbarabic,
#ctl00_KahramaaLang_lbarabic span {
    font-family: 'HelveticaNeueLT Arabic 75', 'Noto Sans Arabic', Tahoma, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #003366 !important;
    text-decoration: none !important;
}

body.qa-km-chrome-locked header .optionItem.lang {
    margin: 0 !important;
}

body.qa-km-chrome-locked header .optionItem.lang::after {
    display: none !important;
}

body.qa-km-chrome-locked header .optionItem.lang a {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #c8c8c8;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

body.qa-km-chrome-locked header .optionItem.lang a:active {
    background: #f7f7f7;
}

/* Remove km nav strip shadow under header */
body.qa-km-chrome-locked header .headerWrapper,
body.qa-km-chrome-locked header nav.mainNav.navbar,
body.qa-km-chrome-locked header .navbar-default {
    box-shadow: none !important;
}

body.qa-km-chrome-locked header #navContainer {
    box-shadow: none !important;
}

/* Mobile: logo (left) | language (center) | menu (right) — fixed LTR bar even on Arabic page */
@media (max-width: 767px) {
    body.qa-km-chrome-locked header nav.mainNav.navbar {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        direction: ltr;
        min-height: 56px;
        padding: 0 10px;
        margin: 0 !important;
    }

    body.qa-km-chrome-locked header .navbar-header {
        float: none !important;
        order: 3;
        margin: 0 0 0 auto !important;
        padding: 0 !important;
        width: auto !important;
        flex: 0 0 auto;
        z-index: 4;
    }

    body.qa-km-chrome-locked header .navbar-toggle {
        margin: 0 !important;
        padding: 10px 8px !important;
        float: none !important;
    }

    body.qa-km-chrome-locked header #navContainer {
        display: contents !important;
        padding: 0 !important;
        pointer-events: none;
        box-shadow: none !important;
    }

    body.qa-km-chrome-locked header .mainLogo {
        order: 1;
        position: static !important;
        float: none !important;
        width: auto !important;
        max-width: none;
        padding: 0 !important;
        margin: -4px auto 0 0 !important;
        flex: 0 0 auto;
        pointer-events: none;
        z-index: 4;
    }

    body.qa-km-chrome-locked header .mainLogo a.logo {
        display: flex;
        align-items: flex-start;
        line-height: 0;
    }

    body.qa-km-chrome-locked header .mainLogo .km-header-logo {
        display: block;
        max-height: 42px;
        width: auto;
        max-width: min(46vw, 200px);
        object-fit: contain;
        transform: translateY(-2px);
    }

    body.qa-km-chrome-locked header .navCont {
        display: none !important;
    }

    body.qa-km-chrome-locked header .optionsCont {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: auto !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: center !important;
        pointer-events: auto;
        z-index: 5;
    }

    body.qa-km-chrome-locked header .optionsLeft {
        width: auto !important;
        clear: none !important;
        padding: 0 !important;
        background: transparent !important;
        position: static !important;
        height: auto !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.qa-km-chrome-locked header .optionsLeft > svg.left,
    body.qa-km-chrome-locked header .optionsLeft > svg.right {
        display: none !important;
    }

    body.qa-km-chrome-locked header .optionsCont .optionItem:not(.lang) {
        display: none !important;
    }

    body.qa-km-chrome-locked header .optionItem.lang {
        display: flex;
        align-items: center;
    }

    body.qa-km-chrome-locked header .optionItem.lang a,
    body.qa-km-chrome-locked header #ctl00_KahramaaLang_lbarabic span {
        font-size: 16px !important;
        padding: 7px 16px;
        white-space: nowrap;
        line-height: 1.2 !important;
    }
}

/* Arabic page typography — do not force Open Sans / uniform 14px on everything */
html.qa-lang-ar {
    --km-ar-font: 'HelveticaNeueLT Arabic 75', 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
}

html.qa-lang-ar body {
    font-family: var(--km-ar-font) !important;
    font-size: 14px;
    line-height: 1.42857143;
}

html.qa-lang-ar .defaultFormLbl,
html.qa-lang-ar .defaultLabel,
html.qa-lang-ar label.defaultFormLbl {
    font-family: var(--km-ar-font) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #767676 !important;
}

html.qa-lang-ar .KMForm-description,
html.qa-lang-ar .KMForm-description p {
    font-family: var(--km-ar-font) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #333 !important;
}

html.qa-lang-ar .KMForm-description strong {
    font-weight: 700 !important;
}

html.qa-lang-ar .section-title,
html.qa-lang-ar .section-title h3 {
    font-family: var(--km-ar-font) !important;
    font-size: 1.475em !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

html.qa-lang-ar .purpleBtn,
html.qa-lang-ar .greyBtn,
html.qa-lang-ar .whiteBtn,
html.qa-lang-ar .resetBtn {
    font-family: var(--km-ar-font) !important;
    font-size: 14px !important;
    line-height: 17px !important;
}

html.qa-lang-ar .form-control,
html.qa-lang-ar .NumericTextBox {
    font-family: var(--km-ar-font) !important;
    font-size: 14px !important;
}

html.qa-lang-ar .qa-bills-info {
    font-family: var(--km-ar-font) !important;
    font-weight: 400 !important;
}

html.qa-lang-ar .qa-bills-info-title {
    font-family: var(--km-ar-font) !important;
    font-weight: 700 !important;
}

html.qa-lang-ar .tabs-click a,
html.qa-lang-ar .error-text,
html.qa-lang-ar .qa-bill-captcha-title {
    font-family: var(--km-ar-font) !important;
}

html.qa-lang-ar .lang a,
html.qa-lang-ar .optionItem.lang a {
    font-family: var(--km-ar-font) !important;
}

/* Meter legend on inquiry form (always visible like km.qa) */
.qa-meter-legend-inquiry {
    display: table;
    width: auto;
    max-width: 100%;
    margin: 0 0 14px;
    clear: both;
    font-size: 14px !important;
    line-height: 1.35 !important;
    white-space: nowrap;
}

html.qa-lang-ar .qa-meter-legend-inquiry {
    font-family: var(--km-ar-font) !important;
    font-weight: 400 !important;
}

.qa-meter-legend-inquiry td {
    vertical-align: middle;
    padding: 4px 6px 8px;
    border: none;
    background: transparent !important;
}

.qa-meter-legend-inquiry .qa-legend-swatch {
    width: 4px;
    height: 14px;
    padding: 0 !important;
}

.qa-meter-legend-inquiry .qa-legend-red {
    background-color: #d9534f !important;
}

.qa-meter-legend-inquiry .qa-legend-green {
    background-color: #5cb85c !important;
}

.qa-meter-legend-inquiry .qa-legend-gap {
    width: 4px;
}

.qa-meter-legend-inquiry .qa-legend-gap-wide {
    width: 12px;
}

#billsArea .qa-meter-legend {
    font-family: inherit;
}

html.qa-lang-ar #billsArea .qa-meter-legend {
    font-family: var(--km-ar-font) !important;
    font-size: 14px !important;
}

/* Arabic layout — align with km.qa RTL bill form */
html.qa-lang-ar .innerPage,
html.qa-lang-ar .innerLayout,
html.qa-lang-ar .contentDiv,
html.qa-lang-ar .customerForms,
html.qa-lang-ar .KMForm {
    direction: rtl;
    text-align: right;
}

html.qa-lang-ar .defaultFormLbl,
html.qa-lang-ar .defaultLabel,
html.qa-lang-ar label.defaultFormLbl {
    text-align: right !important;
    float: none !important;
}

html.qa-lang-ar .form-control,
html.qa-lang-ar .NumericTextBox {
    text-align: right;
    direction: ltr;
}

html.qa-lang-ar .registerBtns.billsSearchView {
    text-align: right;
}

html.qa-lang-ar .qa-bill-captcha-panel {
    direction: rtl;
    text-align: right;
    max-width: 100%;
}

html.qa-lang-ar .qa-bill-captcha-panel.is-visible {
    display: block !important;
    visibility: visible !important;
}

html.qa-lang-ar .qa-bill-captcha-row {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

html.qa-lang-ar .qa-captcha-human {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

html.qa-lang-ar .qa-captcha-actions {
    justify-content: flex-start;
}

html.qa-lang-ar .qa-captcha-refresh {
    font-family: var(--km-ar-font) !important;
}

html.qa-lang-ar .km-header-logo {
    transform: none !important;
    object-fit: contain;
}

html.qa-lang-ar body.qa-km-chrome-locked header .mainLogo a.logo {
    display: block;
    overflow: visible;
}

/* Purple CTA chevron (no FontAwesome — avoids broken icon / logo glyph) */
a.purpleBtn .qa-purple-chevron {
    display: inline-block;
    margin-inline-start: 8px;
    font-family: inherit !important;
    font-weight: 700;
    font-size: 1.05em;
    line-height: 1;
    vertical-align: middle;
}

html.qa-lang-ar a.purpleBtn .qa-purple-chevron {
    margin-inline-start: 8px;
    margin-inline-end: 0;
}

/* Footer layout + Arabic typography */
html.qa-lang-ar .footer,
html.qa-lang-ar .footer .container {
    direction: rtl;
    font-family: var(--km-ar-font) !important;
}

body.qa-km-chrome-locked .footerLinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 14px;
    list-style: none;
    padding: 12px 10px 0;
    margin: 0 auto;
    max-width: 100%;
}

body.qa-km-chrome-locked .footerLinks li {
    float: none !important;
    display: inline-block;
    margin: 0 !important;
    padding: 0 !important;
}

body.qa-km-chrome-locked .footerLinks li a {
    white-space: nowrap;
}

body.qa-km-chrome-locked .copyRight {
    text-align: center;
    padding: 8px 12px;
    line-height: 1.5;
}

@media (max-width: 991px) {
    body.qa-km-chrome-locked .footerSiteMap,
    body.qa-km-chrome-locked #divFooterServices {
        display: none !important;
    }

    body.qa-km-chrome-locked .footer > .container > .row {
        display: block;
    }

    body.qa-km-chrome-locked .footer > .container > .row > .col-sm-3 {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    body.qa-km-chrome-locked .footerBtns {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    body.qa-km-chrome-locked .footerBtn {
        margin: 0 !important;
    }
}