/* ==========================================================================
   Sicil Information Security - RTL (Right-to-Left) Stylesheet for Arabic
   ========================================================================== */

/* 1. Global Typography & Direction */
html[dir="rtl"],
html[dir="rtl"] body {
    direction: rtl !important;
    text-align: right !important;
    font-family: 'Cairo', 'Tahoma', Arial, sans-serif !important;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] p,
html[dir="rtl"] a,
html[dir="rtl"] span,
html[dir="rtl"] li,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] button,
html[dir="rtl"] select,
html[dir="rtl"] .big-text,
html[dir="rtl"] .text_slide1,
html[dir="rtl"] .caption h1,
html[dir="rtl"] .caption h2 {
    font-family: 'Cairo', 'Tahoma', Arial, sans-serif !important;
}

/* 2. Grid System (Overriding framework.css float:left) */
html[dir="rtl"] .column,
html[dir="rtl"] .columns {
    float: right !important;
}

html[dir="rtl"] [class*="column"] + [class*="column"]:last-child {
    float: right !important;
}

html[dir="rtl"] [class*="column"] + [class*="column"].end {
    float: right !important;
}

html[dir="rtl"] .text-right {
    text-align: left !important;
}

html[dir="rtl"] .text-left {
    text-align: right !important;
}

/* 3. Header & Main Menu (Strict Flexbox Navigation for 100% Consistent Layout) */
html[dir="rtl"] #mainmenu-wrapper .twelve.columns {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    float: none !important;
    width: 100% !important;
}

html[dir="rtl"] #mainmenu-wrapper #logo,
html[dir="rtl"] #logo {
    float: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

html[dir="rtl"] #mainmenu-wrapper #logo a,
html[dir="rtl"] #logo a {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    gap: 12px !important;
}

/* Brand Identity: Preserve original Latin 'Diavlo' font for 'Sicill' in RTL */
html[dir="rtl"] #mainmenu-wrapper #logo a span,
html[dir="rtl"] #logo a span,
html[dir="rtl"] #logo span,
html[dir="rtl"] .logo-text-large,
html[dir="rtl"] .brand-sicill,
html[dir="rtl"] .brand-latin {
    font-family: 'Diavlo', Arial, sans-serif !important;
    font-size: 3em !important;
    font-weight: 700 !important;
    color: #2c2c2c !important;
    line-height: 1 !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
    display: inline-block !important;
    letter-spacing: normal !important;
}

html[dir="rtl"] .logo-text-large {
    font-size: 34px !important;
    margin-top: 5px !important;
}

html[dir="rtl"] #mainmenu {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

html[dir="rtl"] #mainmenu ul#menu,
html[dir="rtl"] #mainmenu ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

html[dir="rtl"] #mainmenu ul#menu > li,
html[dir="rtl"] #mainmenu ul > li {
    float: none !important;
    display: inline-block !important;
    margin: -1px 2px 8px 2px !important;
    padding: 20px 17px 29px 17px !important;
    position: relative !important;
}

html[dir="rtl"] #mainmenu ul li ul {
    left: auto !important;
    right: 0 !important;
    text-align: right !important;
}

/* 4. Slogan & Titles */
html[dir="rtl"] #slogan-wrapper h2 {
    text-align: right !important;
}

html[dir="rtl"] .special-title {
    text-align: right !important;
}

html[dir="rtl"] .special-title h3 span {
    padding-right: 0 !important;
    padding-left: 15px !important;
}

html[dir="rtl"] .title-line {
    text-align: right !important;
}

html[dir="rtl"] .title-line span {
    padding-right: 0 !important;
    padding-left: 15px !important;
}

/* 5. Slideshow & Banners */
html[dir="rtl"] #slideshow-container {
    direction: rtl !important;
}

html[dir="rtl"] .tp-caption {
    direction: rtl !important;
    text-align: right !important;
    unicode-bidi: embed !important;
}

html[dir="rtl"] .circle-icon.img-left {
    float: right !important;
    margin-right: 0 !important;
    margin-left: 15px !important;
}

/* 6. Breadcrumbs */
html[dir="rtl"] #breadcrumb {
    float: left !important;
}

html[dir="rtl"] #breadcrumb ul {
    float: left !important;
}

html[dir="rtl"] #breadcrumb ul li {
    float: right !important;
}

html[dir="rtl"] #breadcrumb ul li:after {
    content: "«" !important;
    margin: 0 8px !important;
}

html[dir="rtl"] #breadcrumb ul li:last-child:after {
    content: "" !important;
}

/* 7. Lists & Sidebar */
html[dir="rtl"] ul.contact-list li,
html[dir="rtl"] ul.contact-info li {
    padding-left: 0 !important;
    padding-right: 28px !important;
    background-position: right center !important;
    text-align: right !important;
}

html[dir="rtl"] ul.advantage-list li {
    padding-left: 0 !important;
    padding-right: 18px !important;
    background-position: right 8px !important;
    text-align: right !important;
}

html[dir="rtl"] ul.sidebar-list li a {
    padding-left: 0 !important;
    padding-right: 16px !important;
    background-position: right center !important;
    display: block;
}

html[dir="rtl"] ul.bullet-list li {
    padding-left: 0 !important;
    padding-right: 16px !important;
    list-style-position: inside !important;
}

html[dir="rtl"] blockquote {
    border-left: none !important;
    border-right: 3px solid #94ba65 !important;
    padding-left: 0 !important;
    padding-right: 20px !important;
}

/* 8. Footer & Copyright Area (Fixing Overflow) */
html[dir="rtl"] footer {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] #bottom-wrapper {
    text-align: right !important;
}

html[dir="rtl"] .footer-slogan {
    text-align: right !important;
}

html[dir="rtl"] .copyright-area {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 12px !important;
    padding: 16px 0 !important;
}

html[dir="rtl"] .copyright-text {
    float: none !important;
    text-align: right !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

html[dir="rtl"] .footer-lang-link {
    direction: ltr !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 4px !important;
}

html[dir="rtl"] .socials-list-bottom {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    gap: 8px !important;
    list-style: none !important;
}

html[dir="rtl"] .socials-list-bottom li {
    float: none !important;
    margin: 0 !important;
}

/* 9. Blog Post & Content */
html[dir="rtl"] .blog-post-wrap .post-desc {
    text-align: right !important;
}

html[dir="rtl"] .post-meta {
    text-align: right !important;
}

html[dir="rtl"] .read-more {
    display: inline-block;
    direction: rtl;
}

html[dir="rtl"] .tag-cloud a {
    float: right !important;
    margin-left: 5px !important;
    margin-right: 0 !important;
}

/* 10. Language Modal RTL Adjustments */
html[dir="rtl"] .lang-modal-close {
    right: auto !important;
    left: 18px !important;
}

html[dir="rtl"] .lang-modal-header {
    text-align: right !important;
}

html[dir="rtl"] .lang-card-badge svg {
    transform: rotate(180deg) !important;
}