/**
 * KingMEDIA - Official Arabic RTL & Dubai Font Stylesheet
 * Customized for MSOMS Anime (msoms-anime.com)
 */

/* ==========================================================================
   1. DUBAI FONT FAMILY EMBEDDING
   ========================================================================== */

@font-face {
    font-family: 'Dubai';
    src: url('fonts/Dubai-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dubai';
    src: url('fonts/Dubai-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dubai';
    src: url('fonts/Dubai-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dubai';
    src: url('fonts/Dubai-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   2. GLOBAL TYPOGRAPHY & RTL RESET
   ========================================================================== */

html[dir="rtl"],
body.king-rtl,
.king-rtl {
    direction: rtl;
    text-align: right;
    font-family: 'Dubai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

html[dir="rtl"] body,
html[dir="rtl"] td,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] button,
html[dir="rtl"] select,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, 
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
.king-rtl body,
.king-rtl td,
.king-rtl input,
.king-rtl textarea,
.king-rtl button,
.king-rtl select,
.king-rtl h1, .king-rtl h2, .king-rtl h3,
.king-rtl h4, .king-rtl h5, .king-rtl h6 {
    font-family: 'Dubai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Arial, sans-serif !important;
    letter-spacing: 0 !important;
}

/* ==========================================================================
   3. DRAWER WINDOW (RIGHT-SIDE RTL SLIDE-OUT MENU)
   ========================================================================== */

/* Main drawer container: Pinned to the RIGHT side of the viewport */
.king-rtl .leftmenu {
    left: auto !important;
    right: -420px !important;
    width: 350px !important;
    max-width: 85vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    direction: rtl !important;
    box-shadow: -6px 0 30px rgba(0, 0, 0, 0.12) !important;
    -webkit-box-shadow: -6px 0 30px rgba(0, 0, 0, 0.12) !important;
    transition: right 320ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: row !important;
    background-color: #ffffff !important;
    z-index: 99999 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Open state: Slide fully into view on the right */
.king-rtl .leftmenu.open {
    left: auto !important;
    right: 0 !important;
}

/* Vertical action strip (at the right edge of the drawer) */
.king-rtl .leftmenu-left {
    width: 64px !important;
    min-width: 64px !important;
    border-right: none !important;
    border-left: 1px solid #f0f1f4 !important;
    background-color: #fafbfc !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 24px 0 20px 0 !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
}

.king-rtl .leftmenu-left > span {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 12px !important;
}

/* Close button 'X' inside the rail */
.king-rtl .leftmenu .king-left-close {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    cursor: pointer !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.king-rtl .leftmenu .king-left-close:hover {
    background-color: #fee2e2 !important;
    border-color: #fca5a5 !important;
}

.king-rtl .leftmenu.open .king-left-close:before,
.king-rtl .leftmenu.open .king-left-close:after {
    content: "" !important;
    position: absolute !important;
    width: 16px !important;
    height: 2px !important;
    background-color: #374151 !important;
    top: 50% !important;
    left: 50% !important;
    border-radius: 2px !important;
    transition: all 0.2s ease !important;
}

.king-rtl .leftmenu.open .king-left-close:before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

.king-rtl .leftmenu.open .king-left-close:after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.king-rtl .leftmenu .king-left-close:hover:before,
.king-rtl .leftmenu .king-left-close:hover:after {
    background-color: #ef4444 !important;
}

/* Utility icons inside rail (Messages, Favorites, Settings, Logout) */
.king-rtl .leftmenu-left span a.leftmenu-lout {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #4b5563 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.king-rtl .leftmenu-left span a.leftmenu-lout:hover {
    color: #f70047 !important;
    background-color: #fff1f2 !important;
    border-color: #fecdd3 !important;
    transform: translateY(-1px) !important;
}

.king-rtl .leftmenu-left span a.leftmenu-lout .mcount {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    background-color: #ef4444 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    padding: 2px 6px !important;
    line-height: 1 !important;
}

/* Night mode toggle switch in rail */
.king-rtl .leftmenu-left .king-nightb {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #4b5563 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    margin-top: 0 !important;
    font-size: 16px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.king-rtl .leftmenu-left .king-nightb:hover {
    color: #f70047 !important;
    background-color: #fff1f2 !important;
}

/* Main Navigation Menu Section (inside the drawer) */
.king-rtl .leftmenu .king-nav-main {
    flex: 1 !important;
    min-width: 0 !important;
    width: calc(100% - 64px) !important;
    padding: 24px 14px !important;
    margin: 0 !important;
    direction: rtl !important;
    text-align: right !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

.king-rtl .leftmenu .king-nav-main-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
}

/* Prevent menu items from floating side-by-side */
.king-rtl .leftmenu .king-nav-main-item {
    float: none !important;
    display: block !important;
    width: 100% !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Navigation Link Styling */
.king-rtl .leftmenu .king-nav-main-link {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    color: #374151 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    font-family: 'Dubai', sans-serif !important;
    text-align: right !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.king-rtl .leftmenu .king-nav-main-link:hover {
    background-color: #f3f4f6 !important;
    color: #f70047 !important;
}

.king-rtl .leftmenu .king-nav-main-selected {
    background-color: #f6f6f8 !important;
    color: #111827 !important;
    font-weight: 600 !important;
}

.king-rtl .leftmenu .king-nav-main-link i {
    width: 22px !important;
    min-width: 22px !important;
    font-size: 16px !important;
    text-align: center !important;
    color: #6b7280 !important;
    transition: color 0.2s ease !important;
}

.king-rtl .leftmenu .king-nav-main-link:hover i,
.king-rtl .leftmenu .king-nav-main-selected i {
    color: #f70047 !important;
}

/* Dark / Night Mode Support for Drawer */
.king-night .king-rtl .leftmenu,
.king-night.king-rtl .leftmenu {
    background-color: #121316 !important;
    box-shadow: -6px 0 30px rgba(0, 0, 0, 0.6) !important;
}

.king-night .king-rtl .leftmenu-left,
.king-night.king-rtl .leftmenu-left {
    background-color: #18191d !important;
    border-left-color: #26282e !important;
}

.king-night .king-rtl .leftmenu .king-left-close,
.king-night .king-rtl .leftmenu-left span a.leftmenu-lout,
.king-night .king-rtl .leftmenu-left .king-nightb {
    background-color: #22242a !important;
    border-color: #2e313a !important;
    color: #e5e7eb !important;
}

.king-night .king-rtl .leftmenu.open .king-left-close:before,
.king-night .king-rtl .leftmenu.open .king-left-close:after {
    background-color: #e5e7eb !important;
}

.king-night .king-rtl .leftmenu .king-nav-main-link {
    color: #d1d5db !important;
}

.king-night .king-rtl .leftmenu .king-nav-main-link:hover {
    background-color: #1f2128 !important;
    color: #f70047 !important;
}

.king-night .king-rtl .leftmenu .king-nav-main-selected {
    background-color: #1f2128 !important;
    color: #ffffff !important;
}

.king-night .king-rtl .leftmenu .king-nav-main-link i {
    color: #9ca3af !important;
}

/* ==========================================================================
   4. HEADER, HORIZONTAL SUB-NAVIGATION & SEARCH
   ========================================================================== */

.king-rtl .king-header {
    direction: rtl;
}

.king-rtl .king-nav-sub-list {
    padding-right: 0;
    padding-left: 0;
    direction: rtl;
}

.king-rtl .king-nav-sub-item {
    float: right;
    margin-left: 12px;
    margin-right: 0;
}

.king-rtl .king-nav-cat-link span i {
    margin: 0 0 0 10px;
}

.king-rtl .header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.king-rtl .king-search {
    margin-right: auto;
    margin-left: 0;
}

.king-rtl .king-search-field {
    text-align: right;
    padding-right: 15px;
    padding-left: 40px;
}

.king-rtl .king-search-button {
    left: 8px;
    right: auto;
}

.king-rtl .king-dropdown,
.king-rtl .king-dropdown2,
.king-rtl .user-drop {
    right: auto;
    left: 0;
    text-align: right;
}

/* ==========================================================================
   5. POST VIEW, VOTING & REACTIONS
   ========================================================================== */

.king-rtl .king-favoriting {
    margin-left: 8px;
    margin-right: 0;
}

.king-rtl .king-q-view-buttons {
    justify-content: flex-start;
}

.king-rtl .king-q-view-buttons button {
    margin-left: 4px;
    margin-right: 0;
}

.king-rtl .meta-when {
    margin: 0 4px 0 0;
}

.king-rtl .king-post-author-avatar {
    margin-left: 10px;
    margin-right: 0;
    float: right;
}

.king-rtl .reactions {
    padding-right: 0;
    direction: rtl;
}

.king-rtl .share-widget-container {
    direction: rtl;
}

/* ==========================================================================
   6. COMMENTS, LISTS & AVATARS
   ========================================================================== */

.king-rtl .king-c-list {
    padding-right: 0;
}

.king-rtl .king-c-item {
    padding-right: 60px;
    padding-left: 0;
    position: relative;
    text-align: right;
}

.king-rtl .king-c-item .king-avatar {
    position: absolute;
    right: 0;
    left: auto;
}

.king-rtl .king-c-item-indent {
    margin-right: 40px;
    margin-left: 0;
    border-right: 2px solid #e7e7e9;
    border-left: none;
    padding-right: 15px;
    padding-left: 0;
}

/* ==========================================================================
   7. SIDEBAR & WIDGETS
   ========================================================================== */

.king-rtl .rightsidebar {
    float: left;
}

.king-rtl .king-related-q-list {
    padding-right: 0;
    list-style: none;
}

.king-rtl .king-related-q-item {
    padding: 5px 8px 6px 4px;
    text-align: right;
}

.king-rtl .king-nav-cat-list {
    text-align: right;
}

/* ==========================================================================
   8. FORMS, INPUTS & MODALS
   ========================================================================== */

.king-rtl .king-form-tall-table,
.king-rtl .king-form-wide-table {
    text-align: right;
    direction: rtl;
}

.king-rtl .king-form-tall-label,
.king-rtl .king-form-wide-label {
    text-align: right;
}

.king-rtl .king-form-tall-data,
.king-rtl .king-form-wide-data {
    text-align: right;
}

.king-rtl .king-form-tall-text,
.king-rtl .king-form-wide-text {
    text-align: right;
    direction: rtl;
}

.king-rtl .king-form-tall-buttons,
.king-rtl .king-form-wide-buttons {
    text-align: left;
}

.king-rtl .king-form-tall-checkbox {
    margin-left: 8px;
    margin-right: 0;
}

.king-rtl .remove-btn {
    left: 8px;
    right: auto;
}

.king-rtl .mfp-close {
    left: 10px;
    right: auto;
    text-align: left;
}

/* ==========================================================================
   9. AI TOOLS & GENERATION INTERFACES
   ========================================================================== */

.king-rtl .king-aipost-left {
    text-align: right;
    direction: rtl;
}

.king-rtl .kingai-buttons {
    justify-content: flex-start;
}

.king-rtl .king-aimsccont {
    direction: rtl;
    text-align: right;
}

.king-rtl .kingai-down {
    direction: rtl;
}

/* ==========================================================================
   10. FOOTER & MISCELLANEOUS
   ========================================================================== */

.king-rtl .king-footer {
    direction: rtl;
    text-align: right;
}

.king-rtl .king-nav-footer-list {
    padding-right: 0;
}

.king-rtl .king-nav-footer-item {
    float: right;
    margin-left: 15px;
    margin-right: 0;
}

.king-rtl .king-notice {
    text-align: right;
    direction: rtl;
}

.king-rtl .king-error {
    text-align: center;
}


/* ==========================================================================
   11. CUSTOM FULL-PAGE / ABOUT PAGE ENHANCEMENTS
   ========================================================================== */
.king-rtl.king-template-custom .post-page {
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto 30px !important;
    display: block !important;
}

.king-rtl.king-template-custom .king-main-in {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    display: block !important;
    padding: 0 10px !important;
}

.king-rtl.king-template-custom .king-part-custompage {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    box-shadow: none !important;
}

.king-rtl.king-template-custom .king-part-custompage > .pheader {
    display: none !important;
}