/* Frontend shell typography, independent of the Tailwind runtime/font utility. */
:root { --jobia-ui-font: 'Vazirmatn', Tahoma, sans-serif; }
html[lang="fa"] body,
html[lang="fa"] .font-sans { font-family: var(--jobia-ui-font); }
html[lang="fa"] :is(button, input, select, textarea) { font-family: inherit; }

#mobile-drawer {
    width: min(390px, calc(100vw - 24px));
    max-width: 100%;
    padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
    font-size: 14px;
    line-height: 1.8;
    overscroll-behavior: contain;
}
#mobile-drawer :is(a, button) { min-height: 44px; }
#mobile-drawer :is(a, button) :is(span, div),
#mobile-drawer :is(a, button) { font-size: 14px; line-height: 1.8; }
#mobile-drawer :is(a, button) svg { width: 20px; height: 20px; flex-shrink: 0; }
#mobile-drawer :is(a, button):focus-visible { outline: 2px solid #d97706; outline-offset: 3px; }
#mobile-drawer > div > div:first-child > button { width: 44px; height: 44px; }
#mobile-drawer > div > div:first-child a { padding-inline: 12px; }
#mobile-drawer .text-slate-400 { color: #64748b; }
#mobile-drawer .text-\[11px\] { font-size: 13px; }
#mobile-drawer .text-xs { font-size: 14px; }

#mobile-account-panel {
    border: 1px solid #fcd38d;
    border-radius: 20px;
    padding: 14px;
    background: linear-gradient(145deg, #fffbeb, #fff 70%);
    box-shadow: 0 3px 12px #92400e06;
}
.mobile-account-heading-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
#mobile-account-heading { margin: 0; font-size: 16px; font-weight: 800; color: #0f172a; }
.mobile-account-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #047857; }
.mobile-account-status > span { width: 7px; height: 7px; border-radius: 50%; background: #10b981; }
.mobile-account-identity { display: flex; align-items: center; gap: 10px; padding-block: 14px; }
.mobile-account-avatar { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 14px; color: #b45309; background: #fef3c7; }
.mobile-account-avatar svg { width: 24px; height: 24px; }
.mobile-account-name { margin: 0; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; color: #1e293b; }
.mobile-account-phone { margin: 0; font-size: 13px; color: #64748b; text-align: start; letter-spacing: normal; }
#mobile-account-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#mobile-account-shortcuts > a { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 10px; min-height: 52px; border-radius: 12px; }
#mobile-account-shortcuts > a span { font-size: 13px; font-weight: 700; }
#mobile-account-shortcuts > a svg { width: 22px; height: 22px; }
#mobile-drawer .mobile-logout-button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border: 1px solid #fecdd3; border-radius: 14px; background: #fff1f2; color: #be123c; font-weight: 700; cursor: pointer; transition: background-color .15s; }
#mobile-drawer .mobile-logout-button:hover { background: #ffe4e6; }
@media (max-width: 359px) {
    #mobile-drawer { padding-inline: 12px; }
    #mobile-drawer > div > div:first-child > div { flex-wrap: wrap; }
    #mobile-drawer :is(a, button), #mobile-drawer :is(a, button) :is(span, div) { font-size: 13px; }
    #mobile-account-panel { padding: 12px; }
}