/* =========================================================
   Shrang RTL + Arabic-Script Interface Support
   File: wp-content/themes/shrang/assets/css/rtl.css
   Purpose:
   - RTL direction
   - Vazirmatn font application
   - Pashto/Arabic-script text rendering
   - RTL forms, buttons, header, footer, and app pages
   ========================================================= */

/* =========================================================
   Generic Arabic-Script Font System
   ========================================================= */

[dir="rtl"],
[lang="ps"],
[lang^="ps-"],
[lang="fa"],
[lang^="fa-"],
[lang="fa-AF"],
[lang="fa-IR"],
[lang="prs"],
[lang^="prs-"],
[lang="ur"],
[lang^="ur-"],
[lang="ar"],
[lang^="ar-"],
[lang="ckb"],
[lang^="ckb-"],
[lang="ku"],
[lang^="ku-"],
[lang="sd"],
[lang^="sd-"],
html[lang^="ps"] body,
html[lang^="fa"] body,
html[lang^="prs"] body,
html[lang^="ur"] body,
html[lang^="ar"] body,
html[lang^="ckb"] body,
html[lang^="ku"] body,
html[lang^="sd"] body,
.sharang-rtl,
.sharang-rtl-input,
.sharang-arabic-script,
.sharang-singing-version-field,
.sharang-singing-version-field textarea,
.sharang-header-language-option[dir="rtl"] {
    font-family: var(--shrang-rtl-font);
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
}

[dir="rtl"],
[lang="ps"],
[lang^="ps-"],
[lang="fa"],
[lang^="fa-"],
[lang="fa-AF"],
[lang="fa-IR"],
[lang="prs"],
[lang^="prs-"],
[lang="ur"],
[lang^="ur-"],
[lang="ar"],
[lang^="ar-"],
[lang="ckb"],
[lang^="ckb-"],
[lang="ku"],
[lang^="ku-"],
[lang="sd"],
[lang^="sd-"],
.sharang-rtl,
.sharang-rtl-input,
.sharang-arabic-script {
    direction: rtl;
    unicode-bidi: plaintext;
}

.sharang-rtl-input,
textarea[dir="rtl"],
input[dir="rtl"] {
    text-align: right;
    line-height: 1.9;
}

/* Force better Arabic-script rendering inside Shrang plugin output too. */

.sharang-result [dir="rtl"],
.sharang-result [lang="ps"],
.sharang-result [lang^="ps-"],
.sharang-result [lang="fa"],
.sharang-result [lang^="fa-"],
.sharang-result [lang="ur"],
.sharang-result [lang^="ur-"],
.sharang-result [lang="ar"],
.sharang-result [lang^="ar-"],
.sharang-result [lang="ckb"],
.sharang-result [lang^="ckb-"],
.sharang-recent-clips [dir="rtl"],
.sharang-recent-clips [lang="ps"],
.sharang-recent-clips [lang^="ps-"],
.sharang-recent-clips [lang="fa"],
.sharang-recent-clips [lang^="fa-"],
.sharang-recent-clips [lang="ur"],
.sharang-recent-clips [lang^="ur-"],
.sharang-recent-clips [lang="ar"],
.sharang-recent-clips [lang^="ar-"],
.sharang-recent-clips [lang="ckb"],
.sharang-recent-clips [lang^="ckb-"],
.sharang-my-clips [dir="rtl"],
.sharang-my-clips [lang="ps"],
.sharang-my-clips [lang^="ps-"],
.sharang-my-clips [lang="fa"],
.sharang-my-clips [lang^="fa-"],
.sharang-my-clips [lang="ur"],
.sharang-my-clips [lang^="ur-"],
.sharang-my-clips [lang="ar"],
.sharang-my-clips [lang^="ar-"],
.sharang-my-clips [lang="ckb"],
.sharang-my-clips [lang^="ckb-"],
.sharang-clip-studio [dir="rtl"],
.sharang-clip-studio [lang="ps"],
.sharang-clip-studio [lang^="ps-"],
.sharang-clip-studio [lang="fa"],
.sharang-clip-studio [lang^="fa-"],
.sharang-clip-studio [lang="ur"],
.sharang-clip-studio [lang^="ur-"],
.sharang-clip-studio [lang="ar"],
.sharang-clip-studio [lang^="ar-"],
.sharang-clip-studio [lang="ckb"],
.sharang-clip-studio [lang^="ckb-"] {
    font-family: var(--shrang-rtl-font);
    letter-spacing: 0;
}

[lang="ps"] strong,
[lang^="ps-"] strong,
[lang="fa"] strong,
[lang^="fa-"] strong,
[lang="prs"] strong,
[lang^="prs-"] strong,
[lang="ur"] strong,
[lang^="ur-"] strong,
[lang="ar"] strong,
[lang^="ar-"] strong,
[lang="ckb"] strong,
[lang^="ckb-"] strong,
[dir="rtl"] strong,
[lang="ps"] b,
[lang^="ps-"] b,
[lang="fa"] b,
[lang^="fa-"] b,
[lang="prs"] b,
[lang^="prs-"] b,
[lang="ur"] b,
[lang^="ur-"] b,
[lang="ar"] b,
[lang^="ar-"] b,
[lang="ckb"] b,
[lang^="ckb-"] b,
[dir="rtl"] b {
    font-weight: 700;
}

/* =========================================================
   App Interface RTL Foundation
   Depends on plugin body classes:
   .shrang-app-lang-ps
   .shrang-app-dir-rtl
   ========================================================= */

body.shrang-app-dir-rtl {
    direction: rtl;
    unicode-bidi: isolate;
    text-align: right;
}

/* Keep Latin/brand logo isolated */

body.shrang-app-dir-rtl .shrang-logo-en,
body.shrang-app-dir-rtl .shrang-text-logo,
body.shrang-app-dir-rtl .shrang-brand-link {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Vazirmatn for Pashto and other RTL interface languages */

body.shrang-app-dir-rtl,
body.shrang-app-dir-rtl p,
body.shrang-app-dir-rtl span,
body.shrang-app-dir-rtl strong,
body.shrang-app-dir-rtl small,
body.shrang-app-dir-rtl label,
body.shrang-app-dir-rtl input,
body.shrang-app-dir-rtl textarea,
body.shrang-app-dir-rtl select,
body.shrang-app-dir-rtl button,
body.shrang-app-dir-rtl a,
body.shrang-app-dir-rtl h1,
body.shrang-app-dir-rtl h2,
body.shrang-app-dir-rtl h3,
body.shrang-app-dir-rtl h4,
body.shrang-app-dir-rtl h5,
body.shrang-app-dir-rtl h6,
body.shrang-app-dir-rtl .shrang-site-header,
body.shrang-app-dir-rtl .shrang-account-topbar,
body.shrang-app-dir-rtl .shrang-primary-navigation,
body.shrang-app-dir-rtl .shrang-header-account-nav,
body.shrang-app-dir-rtl .shrang-header-language,
body.shrang-app-dir-rtl .shrang-site-main,
body.shrang-app-dir-rtl .sharang-generator-wrap,
body.shrang-app-dir-rtl .sharang-result,
body.shrang-app-dir-rtl .sharang-recent-clips,
body.shrang-app-dir-rtl .sharang-my-clips,
body.shrang-app-dir-rtl .sharang-clip-studio,
body.shrang-app-dir-rtl .shrang-account-page,
body.shrang-app-dir-rtl .shrang-account-toolbar,
body.shrang-app-dir-rtl .shrang-google-auth-panel,
body.shrang-app-dir-rtl .shrang-upload-audio-form-wrap,
body.shrang-app-dir-rtl .sharang-bed-music-box,
body.shrang-app-dir-rtl .shrang-site-footer {
    font-family: var(--shrang-rtl-font);
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
}

/* Stronger Vazirmatn weights for headings, buttons, menus */

body.shrang-app-dir-rtl h1,
body.shrang-app-dir-rtl h2,
body.shrang-app-dir-rtl h3,
body.shrang-app-dir-rtl h4,
body.shrang-app-dir-rtl .shrang-primary-navigation a,
body.shrang-app-dir-rtl .shrang-header-account-nav a,
body.shrang-app-dir-rtl .shrang-header-language-toggle,
body.shrang-app-dir-rtl .shrang-header-language-option,
body.shrang-app-dir-rtl button,
body.shrang-app-dir-rtl .sharang-download-link,
body.shrang-app-dir-rtl .sharang-secondary-link,
body.shrang-app-dir-rtl .sharang-delete-link,
body.shrang-app-dir-rtl .shrang-theme-button-primary,
body.shrang-app-dir-rtl .shrang-theme-button-secondary {
    font-family: var(--shrang-rtl-font);
    font-weight: 800;
}

/* Header layout in RTL */

body.shrang-app-dir-rtl .shrang-account-topbar-inner,
body.shrang-app-dir-rtl .shrang-header-inner {
    direction: rtl;
}

body.shrang-app-dir-rtl .shrang-header-account-nav,
body.shrang-app-dir-rtl .shrang-primary-navigation,
body.shrang-app-dir-rtl .shrang-primary-navigation ul,
body.shrang-app-dir-rtl .shrang-menu {
    direction: rtl;
}

body.shrang-app-dir-rtl .shrang-header-account-nav {
    justify-content: flex-start;
}

body.shrang-app-dir-rtl .shrang-primary-navigation {
    justify-content: flex-start;
}

body.shrang-app-dir-rtl .shrang-primary-navigation ul,
body.shrang-app-dir-rtl .shrang-menu {
    justify-content: flex-start;
}

/* Header language dropdown opens from the left in RTL */

body.shrang-app-dir-rtl .shrang-header-language {
    margin-right: 4px;
    margin-left: 0;
}

body.shrang-app-dir-rtl .shrang-header-language-menu {
    right: auto;
    left: 0;
    direction: rtl;
    text-align: right;
}

body.shrang-app-dir-rtl .shrang-header-language-menu::before {
    right: auto;
    left: 22px;
}

body.shrang-app-dir-rtl .shrang-header-language-toggle::after {
    margin-right: 1px;
    margin-left: 0;
}

body.shrang-app-dir-rtl .shrang-header-language-option {
    direction: rtl;
    text-align: right;
    justify-content: flex-start;
}

body.shrang-app-dir-rtl .shrang-header-language-option.is-current::after {
    margin-right: 10px;
    margin-left: 0;
}

/* Main content direction */

body.shrang-app-dir-rtl .shrang-site-main,
body.shrang-app-dir-rtl .shrang-content-wrap,
body.shrang-app-dir-rtl .shrang-page-wrap,
body.shrang-app-dir-rtl .shrang-front-page-wrap,
body.shrang-app-dir-rtl .shrang-entry-content,
body.shrang-app-dir-rtl .sharang-generator-wrap,
body.shrang-app-dir-rtl .sharang-result,
body.shrang-app-dir-rtl .shrang-account-page,
body.shrang-app-dir-rtl .sharang-recent-clips,
body.shrang-app-dir-rtl .sharang-my-clips,
body.shrang-app-dir-rtl .sharang-clip-studio,
body.shrang-app-dir-rtl .shrang-upload-audio-form-wrap,
body.shrang-app-dir-rtl .sharang-bed-music-box {
    direction: rtl;
    text-align: right;
}

/* Forms and fields */

body.shrang-app-dir-rtl input,
body.shrang-app-dir-rtl textarea,
body.shrang-app-dir-rtl select {
    direction: rtl;
    text-align: right;
}

body.shrang-app-dir-rtl input[type="email"],
body.shrang-app-dir-rtl input[type="url"],
body.shrang-app-dir-rtl input[type="password"],
body.shrang-app-dir-rtl input[type="file"],
body.shrang-app-dir-rtl input[name*="email"],
body.shrang-app-dir-rtl input[name*="url"],
body.shrang-app-dir-rtl input[name*="password"] {
    direction: ltr;
    text-align: left;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Keep code/model/API-looking text LTR */

body.shrang-app-dir-rtl code,
body.shrang-app-dir-rtl pre,
body.shrang-app-dir-rtl .code,
body.shrang-app-dir-rtl .shrang-code,
body.shrang-app-dir-rtl [class*="model"],
body.shrang-app-dir-rtl [class*="url"],
body.shrang-app-dir-rtl [class*="api"] {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}

/* Buttons in RTL */

body.shrang-app-dir-rtl .sharang-action-buttons,
body.shrang-app-dir-rtl .shrang-primary-clip-actions,
body.shrang-app-dir-rtl .shrang-recent-share-actions,
body.shrang-app-dir-rtl .shrang-account-dashboard-actions,
body.shrang-app-dir-rtl .shrang-account-toolbar-actions,
body.shrang-app-dir-rtl .shrang-home-actions,
body.shrang-app-dir-rtl .shrang-home-bottom-action {
    direction: rtl;
}

/* Cards and metadata */

body.shrang-app-dir-rtl .sharang-recent-meta,
body.shrang-app-dir-rtl .shrang-result-details,
body.shrang-app-dir-rtl .sharang-visibility-status,
body.shrang-app-dir-rtl .sharang-reel-status,
body.shrang-app-dir-rtl .shrang-account-secondary-text,
body.shrang-app-dir-rtl .shrang-account-status-row,
body.shrang-app-dir-rtl .shrang-account-dashboard-card {
    direction: rtl;
    text-align: right;
}

/* Clip Studio grid should not look reversed-broken */

body.shrang-app-dir-rtl .sharang-clip-studio-preview-grid {
    direction: rtl;
}

body.shrang-app-dir-rtl .sharang-clip-studio-preview-info {
    text-align: right;
}

/* Footer RTL */

body.shrang-app-dir-rtl .shrang-footer-inner,
body.shrang-app-dir-rtl .shrang-footer-brand,
body.shrang-app-dir-rtl .shrang-footer-navigation,
body.shrang-app-dir-rtl .shrang-footer-copy {
    direction: rtl;
    text-align: right;
}

body.shrang-app-dir-rtl .shrang-footer-navigation ul {
    justify-content: flex-start;
}

/* RTL topbar layout */

body.shrang-app-dir-rtl .shrang-topbar-actions {
    direction: rtl;
    justify-content: flex-start;
}

body.shrang-app-dir-rtl .shrang-topbar-actions .shrang-header-account-nav {
    justify-content: flex-start;
}

body.shrang-app-dir-rtl .shrang-topbar-actions .shrang-header-language-menu {
    right: auto;
    left: 0;
}

body.shrang-app-dir-rtl .shrang-topbar-actions .shrang-header-language-menu::before {
    right: auto;
    left: 22px;
}

/* Mobile RTL adjustments */

@media (max-width: 900px) {
    body.shrang-app-dir-rtl .shrang-account-topbar-inner {
        text-align: center;
    }

    body.shrang-app-dir-rtl .shrang-header-account-nav {
        justify-content: center;
    }

    body.shrang-app-dir-rtl .shrang-primary-navigation {
        left: 8px;
        right: 8px;
    }

    body.shrang-app-dir-rtl .shrang-primary-navigation ul,
    body.shrang-app-dir-rtl .shrang-menu {
        direction: rtl;
    }

    body.shrang-app-dir-rtl .shrang-primary-navigation a {
        text-align: center;
        justify-content: center;
    }

    body.shrang-app-dir-rtl .shrang-header-language {
        margin-right: 10px;
        margin-left: 10px;
    }

    body.shrang-app-dir-rtl .shrang-header-language-menu {
        direction: rtl;
        text-align: center;
    }

    body.shrang-app-dir-rtl .shrang-header-language-option {
        justify-content: center;
        text-align: center;
    }

    body.shrang-app-dir-rtl .shrang-footer-inner,
    body.shrang-app-dir-rtl .shrang-footer-brand,
    body.shrang-app-dir-rtl .shrang-footer-copy {
        text-align: center;
    }

    body.shrang-app-dir-rtl .shrang-footer-navigation ul {
        justify-content: center;
    }

    body.shrang-app-dir-rtl .shrang-topbar-actions .shrang-header-language-menu {
        right: 50%;
        left: auto;
        direction: rtl;
        text-align: right;
        transform: translateX(50%);
    }

    body.shrang-app-dir-rtl .shrang-topbar-actions .shrang-header-language-menu::before {
        right: 50%;
        left: auto;
        transform: translateX(50%) rotate(45deg);
    }
}

/* Pashto-specific polish */

body.shrang-app-lang-ps {
    font-family: var(--shrang-rtl-font);
}

body.shrang-app-lang-ps .shrang-home-slogan,
body.shrang-app-lang-ps .shrang-home-intro,
body.shrang-app-lang-ps .shrang-home-step p,
body.shrang-app-lang-ps .shrang-result p,
body.shrang-app-lang-ps .sharang-result p,
body.shrang-app-lang-ps .shrang-account-page p,
body.shrang-app-lang-ps .sharang-generator-wrap p,
body.shrang-app-lang-ps .sharang-recent-clips p,
body.shrang-app-lang-ps .sharang-my-clips p,
body.shrang-app-lang-ps .sharang-clip-studio p {
    line-height: 1.9;
}

body.shrang-app-lang-ps .shrang-primary-navigation a,
body.shrang-app-lang-ps .shrang-header-account-nav a,
body.shrang-app-lang-ps .shrang-header-language-toggle,
body.shrang-app-lang-ps .shrang-header-language-option {
    text-transform: none;
    letter-spacing: 0;
}

/* =========================================================
   New element RTL — Drawer, Custom Dropdown, File Button
   These are newly added components that need RTL + Vazirmatn
   support added here since this file loads last.
   ========================================================= */

/* Vazirmatn font for new interactive components */
body.shrang-app-dir-rtl .shrang-dropdown-btn,
body.shrang-app-dir-rtl .shrang-dropdown-val,
body.shrang-app-dir-rtl .shrang-dropdown-option,
body.shrang-app-dir-rtl .shrang-file-btn,
body.shrang-app-dir-rtl .shrang-file-name,
body.shrang-app-dir-rtl .shrang-drawer-nav,
body.shrang-app-dir-rtl .shrang-drawer-nav a,
body.shrang-app-dir-rtl .shrang-drawer-lang-section,
body.shrang-app-dir-rtl .shrang-drawer-user-section {
    font-family: var(--shrang-rtl-font);
    letter-spacing: 0;
}

/* Dropdown button: always white — this overrides any blue from
   plugin CSS because rtl.css is the last stylesheet to load.
   Applied globally (not just RTL) so English mode is fixed too. */
.shrang-dropdown-btn {
    background: #ffffff !important;
    border-color: rgba(17, 17, 17, 0.16) !important;
    color: #111111 !important;
    box-shadow: 0 2px 8px rgba(17, 17, 17, 0.06) !important;
    font-weight: 700 !important;
    transform: none !important;
}

.shrang-dropdown-btn:hover {
    background: #fffdfb !important;
    border-color: rgba(250, 84, 32, 0.45) !important;
    color: #111111 !important;
    box-shadow: 0 4px 12px rgba(17, 17, 17, 0.08) !important;
    transform: none !important;
}

.shrang-dropdown.is-open .shrang-dropdown-btn {
    background: #ffffff !important;
    border-color: #fa5420 !important;
    color: #111111 !important;
    box-shadow: 0 0 0 3px rgba(250, 84, 32, 0.14) !important;
}

/* File button: always orange — same reason */
.shrang-file-btn {
    background: #fa5420 !important;
    border-color: #fa5420 !important;
    color: #ffffff !important;
    font-weight: 900 !important;
}

.shrang-file-btn:hover {
    background: #e94717 !important;
    border-color: #e94717 !important;
    color: #ffffff !important;
}

/* Drawer RTL — slides in from LEFT in RTL mode */
body.shrang-app-dir-rtl .shrang-mobile-drawer {
    right: auto !important;
    left: 0 !important;
    transform: translateX(-100%) !important;
    border-radius: 0 20px 20px 0 !important;
}

body.shrang-app-dir-rtl.shrang-drawer-open .shrang-mobile-drawer {
    transform: translateX(0) !important;
}

/* Drawer content direction */
body.shrang-app-dir-rtl .shrang-drawer-inner {
    direction: rtl;
    text-align: right;
}

body.shrang-app-dir-rtl .shrang-drawer-nav a {
    text-align: right;
    direction: rtl;
    justify-content: flex-start;
}

/* Create New hub cards RTL */
body.shrang-app-dir-rtl .sharang-create-options {
    direction: rtl;
}

body.shrang-app-dir-rtl .sharang-create-option {
    text-align: right;
}

body.shrang-app-dir-rtl .sharang-create-option em {
    direction: rtl;
}

/* Dropdown list RTL alignment */
body.shrang-app-dir-rtl .shrang-dropdown-list {
    text-align: right;
    direction: rtl;
}

/* File wrap RTL */
body.shrang-app-dir-rtl .shrang-file-wrap {
    flex-direction: row-reverse;
    justify-content: flex-end;
}