/*********************************************************
 * NADA 5.x - Arabic RTL Full Custom CSS
 * Cairo font + icon and text on same line
 * No custom colors
 *********************************************************/

/* ======================================================
   1) Global RTL + Typography
   ====================================================== */
html[lang="ar"],
html[dir="rtl"],
body {
    direction: rtl;
    text-align: right;
    font-family: "Cairo", "Tahoma", Arial, sans-serif;
    line-height: 1.8;
    letter-spacing: 0;
}

body,
p,
span,
div,
label,
li,
td,
th,
input,
textarea,
select,
button,
a {
    font-family: "Cairo", "Tahoma", Arial, sans-serif;
}

/* ======================================================
   2) Headings / Titles
   ====================================================== */
h1, h2, h3, h4, h5, h6,
.page-title,
.study-title,
.survey-title,
.block-title,
.panel-title,
.card-title,
.dataset-title,
.collection-title,
.result-title,
.search-result-title {
    direction: rtl !important;
    text-align: right !important;
    font-family: "Cairo", "Tahoma", Arial, sans-serif !important;
    font-weight: 700;
    line-height: 1.6;
    word-break: break-word;
    overflow-wrap: anywhere;
}

h1 { font-size: 30px; }
h2 { font-size: 26px; }
h3 { font-size: 22px; }
h4 { font-size: 19px; }
h5 { font-size: 17px; }
h6 { font-size: 15px; }

p {
    font-size: 15px;
    margin-bottom: 10px;
}

/* ======================================================
   3) Links
   ====================================================== */
a {
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: none;
}

/* ======================================================
   4) Layout Containers
   ====================================================== */
.container,
.container-fluid,
.content,
.main-content,
.wrapper,
.page-content,
.row {
    direction: rtl;
    text-align: right;
}

.pull-left {
    float: right !important;
}

.pull-right {
    float: left !important;
}

.text-left {
    text-align: right !important;
}

.text-right {
    text-align: right !important;
}

/* ======================================================
   5) Header / Navbar / Menus
   ====================================================== */
.navbar,
.navbar-nav,
.nav,
.breadcrumb,
.topbar,
.header,
.site-header,
.main-menu {
    direction: rtl;
    text-align: right;
    font-family: "Cairo", "Tahoma", Arial, sans-serif;
}

.navbar-nav {
    float: right;
    margin-right: 0;
    padding-right: 0;
}

.navbar-nav > li {
    float: right;
}

.dropdown-menu {
    right: 0;
    left: auto;
    text-align: right;
    direction: rtl;
}

.dropdown-menu > li > a {
    text-align: right;
}

.navbar-brand img,
.site-logo img {
    max-height: 52px;
    width: auto;
}

/* ======================================================
   6) Breadcrumbs
   ====================================================== */
.breadcrumb {
    padding-right: 0;
    padding-left: 0;
    margin-bottom: 15px;
}

.breadcrumb > li {
    float: right;
}

.breadcrumb > li + li:before {
    content: "/";
    padding: 0 6px;
}

/* ======================================================
   7) Panels / Cards / Boxes
   ====================================================== */
.panel,
.card,
.box,
.well,
.search-result-item,
.study-item,
.survey-item,
.result-row {
    border-radius: 10px;
    overflow: hidden;
}

.panel-heading,
.card-header,
.box-header {
    font-weight: 700;
    text-align: right;
    direction: rtl;
    padding: 12px 15px;
}

.panel-body,
.card-body,
.box-body,
.well {
    text-align: right;
    direction: rtl;
}

/* ======================================================
   8) Forms
   ====================================================== */
input,
textarea,
select,
.form-control {
    direction: rtl;
    text-align: right;
    font-family: "Cairo", "Tahoma", Arial, sans-serif;
    border-radius: 8px;
    box-shadow: none;
}

input[type="email"],
input[type="url"],
input[type="number"],
input[type="search"],
input.ltr,
textarea.ltr {
    direction: ltr;
    text-align: left;
}

textarea {
    min-height: 90px;
}

::placeholder {
    text-align: right;
    opacity: 1;
}

input[type="text"],
input[type="search"] {
    padding-right: 10px;
    padding-left: 10px;
}

/* ======================================================
   9) Buttons
   ====================================================== */
.btn,
button,
input[type="submit"],
input[type="button"] {
    font-family: "Cairo", "Tahoma", Arial, sans-serif;
    border-radius: 8px;
    font-weight: 600;
}

/* ======================================================
   10) Tables
   ====================================================== */
table {
    direction: rtl;
    width: 100%;
}

th,
td {
    text-align: right;
    vertical-align: middle;
}

td.numeric,
td.code,
td.id,
.number,
.code,
.num,
.identifier {
    direction: ltr;
    text-align: left;
}

/* ======================================================
   11) Study / Survey Title
   Icon and text on the SAME line
   ====================================================== */

/* outer result block */
.study-item,
.survey-item,
.search-result-item,
.result-row {
    overflow: hidden !important;
    padding: 14px;
    margin-bottom: 12px;
}

/* main title row */
.study-title,
.survey-title,
.dataset-title,
.search-result-title,
.result-title,
.title,
.title-with-icon {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    direction: rtl !important;
    text-align: right !important;
    line-height: 1.7 !important;
    margin-bottom: 4px;
    vertical-align: middle;
    flex-wrap: nowrap !important;
}

/* if title container is block by theme, normalize it */
.study-title,
.survey-title,
.dataset-title,
.search-result-title,
.result-title,
.title {
    white-space: nowrap !important;
}

/* title link/text */
.study-title a,
.survey-title a,
.dataset-title a,
.search-result-title a,
.result-title a,
.title a,
.title-with-icon a,
.study-title span,
.survey-title span,
.dataset-title span,
.search-result-title span,
.result-title span,
.title span {
    display: inline !important;
    direction: rtl !important;
    text-align: right !important;
    line-height: 1.8 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 700;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

/* icon on same line with text */
.study-title i,
.survey-title i,
.dataset-title i,
.search-result-title i,
.result-title i,
.title i,
.title-with-icon i,
.study-title .fa,
.survey-title .fa,
.dataset-title .fa,
.search-result-title .fa,
.result-title .fa,
.title .fa,
.title-with-icon .fa,
.study-title .glyphicon,
.survey-title .glyphicon,
.dataset-title .glyphicon,
.search-result-title .glyphicon,
.result-title .glyphicon,
.title .glyphicon,
.title-with-icon .glyphicon,
.study-title .icon,
.survey-title .icon,
.dataset-title .icon,
.search-result-title .icon,
.result-title .icon,
.title .icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    float: none !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    flex: 0 0 auto !important;
}

/* prevent older theme from forcing absolute icon */
.study-item i,
.survey-item i,
.result-row i,
.search-result-item i,
.study-item .fa,
.survey-item .fa,
.result-row .fa,
.search-result-item .fa {
    position: static !important;
}

/* if icon is inside anchor */
.study-title a i,
.survey-title a i,
.dataset-title a i,
.search-result-title a i,
.result-title a i,
.title a i,
.study-title a .fa,
.survey-title a .fa,
.dataset-title a .fa,
.search-result-title a .fa,
.result-title a .fa,
.title a .fa {
    margin-left: 8px !important;
    margin-right: 0 !important;
}

/* if icon is before or after anchor inside same title row */
.study-title > i,
.survey-title > i,
.dataset-title > i,
.search-result-title > i,
.result-title > i,
.title > i,
.study-title > .fa,
.survey-title > .fa,
.dataset-title > .fa,
.search-result-title > .fa,
.result-title > .fa,
.title > .fa {
    margin-left: 8px !important;
    margin-right: 0 !important;
}

/* English subtitle under title */
.study-item .survey-subtitle,
.study-item .subtitle,
.survey-item .subtitle,
.search-result-item .subtitle,
.result-row .subtitle,
small.subtitle,
small.text-muted {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.6;
    direction: ltr;
    text-align: left;
}

/* ======================================================
   12) Metadata / Description / Keywords
   ====================================================== */
.metadata,
.metadata-row,
.keywords,
.abstract,
.study-desc,
.survey-desc,
.description,
.note,
.nested-list,
.dataset-metadata,
.study-metadata {
    direction: rtl;
    text-align: right;
    line-height: 1.8;
}

.keywords a,
.metadata a {
    display: inline-block;
    margin-left: 5px;
    margin-bottom: 4px;
}

.label,
.badge {
    border-radius: 16px;
    padding: 4px 10px;
}

/* ======================================================
   13) Pagination
   ====================================================== */
.pagination {
    direction: rtl;
    display: inline-block;
    padding-right: 0;
    margin-top: 15px;
}

.pagination > li {
    display: inline-block;
}

.pagination > li > a,
.pagination > li > span {
    float: none;
    margin-right: -1px;
}

/* ======================================================
   14) Lists
   ====================================================== */
ul,
ol {
    padding-right: 20px;
    padding-left: 0;
}

.list-group-item {
    text-align: right;
    direction: rtl;
}

/* ======================================================
   15) Mixed Arabic / English Text
   ====================================================== */
.mixed-text {
    unicode-bidi: plaintext;
}

code,
pre,
kbd,
samp,
.ltr,
.url,
.email,
.path,
.filename,
.command {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: plaintext;
    font-family: Consolas, "Courier New", monospace;
}

pre,
code {
    border-radius: 6px;
}

/* ======================================================
   16) Footer
   ====================================================== */
footer,
.site-footer,
.footer,
.footer-top,
.footer-bottom {
    direction: rtl;
    text-align: right;
    font-size: 14px;
    font-family: "Cairo", "Tahoma", Arial, sans-serif;
    padding: 18px 15px;
    margin-top: 25px;
}

footer ul,
.footer ul {
    padding-right: 18px;
    padding-left: 0;
}

/* ======================================================
   17) Images / Icons
   ====================================================== */
img {
    max-width: 100%;
    height: auto;
}

.fa,
.glyphicon,
.bi,
.icon {
    margin-left: 6px;
    margin-right: 0;
}

/* ======================================================
   18) Alerts / Notices
   ====================================================== */
.alert {
    text-align: right;
    direction: rtl;
    border-radius: 8px;
}

/* ======================================================
   19) Language Bar / Utility Blocks
   ====================================================== */
.lang-bar,
.language-switcher,
.utility-links {
    direction: rtl;
    text-align: right;
}

.lang-bar a,
.language-switcher a {
    font-weight: 600;
}

/* ======================================================
   20) Search Result Blocks
   ====================================================== */
.search-result-item .title,
.study-item .title,
.survey-item .title {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
}

.search-result-item .title a,
.study-item .title a,
.survey-item .title a {
    display: inline !important;
    white-space: normal !important;
    word-break: break-word !important;
}

/* ======================================================
   21) Responsive
   ====================================================== */
@media (max-width: 991px) {
    .navbar-nav {
        float: none;
    }

    .navbar-nav > li {
        float: none;
        text-align: right;
    }

    .study-title,
    .survey-title,
    .dataset-title,
    .search-result-title,
    .result-title,
    .title {
        gap: 6px !important;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    h1 { font-size: 24px; }
    h2 { font-size: 22px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }
    h5 { font-size: 16px; }

    .container,
    .container-fluid {
        padding-right: 12px;
        padding-left: 12px;
    }

    .study-item,
    .survey-item,
    .search-result-item,
    .result-row {
        padding: 12px;
    }

    .study-title,
    .survey-title,
    .dataset-title,
    .search-result-title,
    .result-title,
    .title {
        flex-wrap: wrap !important;
    }
}

/* ======================================================
   22) Final Safety Reset
   ====================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}