@font-face {
    font-family: "Rotbam Vazir";
    src: url("/files/vazir.woff") format("woff");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Rotbam Vazir";
    src: url("/files/vazirMedium.woff") format("woff");
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
}

:root {
    --tblr-font-sans-serif: "Rotbam Vazir", Tahoma, "Segoe UI", sans-serif;
    --tblr-body-font-family: var(--tblr-font-sans-serif);
    --tblr-primary: #2456c7;
    --tblr-primary-rgb: 36, 86, 199;
    --rotbam-content-width: 1160px;
    --service-profile: #2563eb;
    --service-profile-bg: #eaf1ff;
    --service-content: #c0265e;
    --service-content-bg: #fff0f5;
    --service-presence: #7c3aed;
    --service-presence-bg: #f3edff;
    --service-inbox: #b45309;
    --service-inbox-bg: #fff5df;
    --service-media: #c2410c;
    --service-media-bg: #fff1e8;
    --service-trust: #4338ca;
    --service-trust-bg: #eeefff;
    --service-account: #475569;
    --service-account-bg: #eef2f6;
    --service-halam: #0f766e;
    --service-halam-bg: #e7f8f4;
    --service-fit: #0f766e;
    --service-fit-bg: #e5f8f5;
}

.rotbam-ui {
    min-height: 100vh;
    background: var(--tblr-bg-surface-secondary, #f6f8fb);
    color: var(--tblr-body-color, #1f2937);
    font-family: var(--tblr-font-sans-serif);
    letter-spacing: 0;
}

.rotbam-ui .site-header,
.rotbam-ui .site-footer {
    border-color: var(--tblr-border-color);
    background: rgba(255, 255, 255, .96);
    background: color-mix(in srgb, var(--tblr-bg-surface, #fff) 96%, transparent);
    color: var(--tblr-body-color);
    font-family: var(--tblr-font-sans-serif);
}

.rotbam-ui .site-header {
    box-shadow: 0 .125rem .35rem rgba(24, 36, 51, .06);
}

.rotbam-ui .site-brand,
.rotbam-ui .site-nav a,
.rotbam-ui .site-nav button {
    font-family: inherit;
}

.rotbam-ui .site-brand {
    color: var(--tblr-body-color);
    font-weight: 700;
}

.rotbam-ui .site-nav a,
.rotbam-ui .site-nav button {
    color: var(--tblr-secondary-color);
    font-weight: 500;
}

.rotbam-ui .site-nav a:hover,
.rotbam-ui .site-nav a.active,
.rotbam-ui .site-nav button:hover,
.rotbam-ui .site-nav button.active {
    background: var(--tblr-primary-lt, #e9efff);
    color: var(--tblr-primary);
}

.rotbam-ui .site-nav a.primary,
.rotbam-ui .site-nav button.primary,
.rotbam-ui .site-mobile-actions a.primary,
.rotbam-ui .site-mobile-actions button.primary {
    border-color: var(--tblr-primary);
    background: var(--tblr-primary);
    color: var(--tblr-primary-fg, #fff);
}

.rotbam-ui .site-nav .site-account-link {
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius, .375rem);
    background: var(--tblr-bg-surface, #fff);
    box-shadow: 0 1px 2px rgba(24, 36, 51, .04);
}

.rotbam-ui .site-nav .site-account-link:hover,
.rotbam-ui .site-nav .site-account-link.active {
    border-color: color-mix(in srgb, var(--tblr-primary) 32%, var(--tblr-border-color));
}

.rotbam-ui .site-nav .site-logout-action {
    border: 1px solid transparent;
    border-radius: var(--tblr-border-radius, .375rem);
    color: var(--tblr-danger, #d63939);
}

.rotbam-ui .site-nav .site-logout-action:hover {
    border-color: color-mix(in srgb, var(--tblr-danger, #d63939) 22%, transparent);
    background: var(--tblr-danger-lt, #fce8e8);
    color: var(--tblr-danger, #d63939);
}

.rotbam-ui .site-mobile-actions a,
.rotbam-ui .site-mobile-actions button {
    border-color: var(--tblr-primary);
    color: var(--tblr-primary);
    font-family: inherit;
}

.rotbam-ui .site-footer-inner {
    color: var(--tblr-secondary-color);
}

.rotbam-ui .site-footer-app {
    margin-top: 2rem;
    background: transparent;
}

.rotbam-ui .site-footer-app .site-footer-inner {
    min-height: 4rem;
    font-size: .8125rem;
}

.rotbam-ui .site-footer-app .site-footer-links {
    gap: 1rem;
}

.rotbam-ui .site-footer a,
.rotbam-ui .site-footer button {
    color: var(--tblr-primary);
    font-family: inherit;
    font-weight: 500;
}

.rotbam-ui .site-footer-badge {
    border-color: var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-lg);
    background: var(--tblr-bg-surface, #fff);
    box-shadow: var(--tblr-shadow-card);
}

.rotbam-ui .btn:not(.btn-sm),
.rotbam-ui .form-control,
.rotbam-ui .form-select,
.rotbam-ui .nav-link {
    min-height: 44px;
}

.rotbam-ui .btn,
.rotbam-ui .form-control,
.rotbam-ui .form-select {
    font-family: inherit;
}

.rotbam-ui :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #f59f00;
    outline-offset: 2px;
}

.rotbam-ui .text-ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

.rotbam-ui .site-main:focus {
    outline: none;
}

.rotbam-ui .profile-guide-slide {
    direction: ltr;
}

.rotbam-ui .profile-guide-slide > div {
    direction: rtl;
    text-align: right;
}

.rotbam-ui .service-profile { background: var(--service-profile-bg); color: var(--service-profile); }
.rotbam-ui .service-content { background: var(--service-content-bg); color: var(--service-content); }
.rotbam-ui .service-presence { background: var(--service-presence-bg); color: var(--service-presence); }
.rotbam-ui .service-inbox { background: var(--service-inbox-bg); color: var(--service-inbox); }
.rotbam-ui .service-media { background: var(--service-media-bg); color: var(--service-media); }
.rotbam-ui .service-trust { background: var(--service-trust-bg); color: var(--service-trust); }
.rotbam-ui .service-account { background: var(--service-account-bg); color: var(--service-account); }
.rotbam-ui .service-halam { background: var(--service-halam-bg); color: var(--service-halam); }
.rotbam-ui .service-fit { background: var(--service-fit-bg); color: var(--service-fit); }

.site-nav-icon {
    display: inline-grid;
    width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    font-size: 1.05rem;
    line-height: 1;
}

@media (min-width: 992px) {
    .rotbam-ui .site-header-admin {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        width: 15rem;
        border-bottom: 0;
        border-inline-end: 1px solid var(--tblr-border-color);
        overflow-y: auto;
    }

    .site-header-admin .site-header-inner {
        width: 100%;
        min-height: 100%;
        padding: 1.1rem .8rem;
        align-items: stretch;
        justify-content: flex-start;
        flex-direction: column;
    }

    .site-header-admin .site-brand {
        padding: 0 .55rem .8rem;
    }

    .site-header-admin .site-nav {
        flex: 1 1 auto;
        align-items: stretch;
        flex-direction: column;
        gap: .3rem;
    }

    .site-header-admin .site-nav a,
    .site-header-admin .site-nav button,
    .site-header-admin .site-nav form {
        width: 100%;
    }

    .site-header-admin .site-nav a,
    .site-header-admin .site-nav button {
        justify-content: flex-start;
        gap: .65rem;
        padding-inline: .8rem;
    }

    .site-header-admin .site-nav [data-nav-key="site_admin"] {
        margin-top: .75rem;
        border-top: 1px solid var(--tblr-border-color);
        padding-top: .9rem;
    }

    .site-header-admin .site-nav [data-nav-key="account"] {
        margin-top: auto;
    }

    .site-header-admin .site-nav .site-account-link,
    .site-header-admin .site-nav .site-logout-action {
        min-height: 2.75rem;
    }

    body:has(.site-header-admin) > .site-main {
        width: auto;
        max-width: var(--rotbam-content-width);
        margin-inline-start: 16.5rem;
        margin-inline-end: 1.5rem;
    }

    body:has(.site-header-admin) > .site-footer {
        margin-inline-start: 15rem;
    }
}

@media (max-width: 991.98px) {
    .rotbam-ui .site-header-admin {
        backdrop-filter: none;
    }

    body:has(.site-header-admin) {
        padding-bottom: calc(4.75rem + env(safe-area-inset-bottom));
    }

    .site-header-admin .site-nav {
        position: fixed;
        z-index: 1100;
        inset-inline: 0;
        bottom: 0;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        width: 100%;
        padding: .35rem .35rem calc(.35rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--tblr-border-color);
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 -.25rem 1rem rgba(24, 36, 51, .08);
        overflow: visible;
    }

    .site-header-admin .site-nav a,
    .site-header-admin .site-nav button {
        min-width: 0;
        min-height: 3.65rem;
        padding: .3rem .15rem;
        justify-content: center;
        flex-direction: column;
        gap: .18rem;
        border-radius: .4rem;
        font-size: .72rem;
        white-space: normal;
        text-align: center;
    }

    .site-header-admin .site-nav form,
    .site-header-admin .site-nav [data-nav-key="site_admin"],
    .site-header-admin .site-nav [data-nav-key="logout"] {
        display: none;
    }

    .site-header-admin .site-nav a[data-nav-key="account"] {
        display: inline-flex;
    }

    .site-header-admin .site-nav .site-account-link {
        border: 0;
        border-radius: .4rem;
        background: transparent;
        box-shadow: none;
    }

    .site-header-admin .site-nav .site-account-link .site-user-avatar {
        display: none;
    }

    .site-header-admin .site-nav .site-account-link > span {
        display: contents;
    }

    .site-header-admin .site-nav .site-account-link > span > span:last-child {
        overflow: visible;
    }

    .site-header-admin .site-footer {
        margin-bottom: 0;
    }

    .rotbam-ui .site-mobile-account-actions {
        max-width: min(64vw, 17rem);
        gap: .2rem;
        padding: .2rem;
        border: 1px solid var(--tblr-border-color);
        border-radius: .5rem;
        background: var(--tblr-bg-surface, #fff);
        box-shadow: 0 1px 3px rgba(24, 36, 51, .08);
    }

    .rotbam-ui .site-mobile-account-actions .site-account-link,
    .rotbam-ui .site-mobile-account-actions .site-mobile-logout {
        min-height: 2.5rem;
        border: 0;
        border-radius: .35rem;
        background: transparent;
        box-shadow: none;
    }

    .rotbam-ui .site-mobile-account-actions .site-account-link {
        max-width: min(46vw, 12rem);
        padding: .25rem .45rem;
        color: var(--tblr-body-color);
    }

    .rotbam-ui .site-mobile-account-actions .site-account-link:hover {
        background: var(--tblr-primary-lt, #e9efff);
        color: var(--tblr-primary);
    }

    .rotbam-ui .site-mobile-account-actions form {
        flex: 0 0 auto;
        padding-inline-start: .2rem;
        border-inline-start: 1px solid var(--tblr-border-color);
    }

    .rotbam-ui .site-mobile-account-actions .site-mobile-logout {
        width: 2.5rem;
        padding: 0;
        color: var(--tblr-danger, #d63939);
    }

    .rotbam-ui .site-mobile-account-actions .site-mobile-logout:hover {
        background: var(--tblr-danger-lt, #fce8e8);
        color: var(--tblr-danger, #d63939);
    }

    .rotbam-ui .site-mobile-action-icon {
        display: grid;
        place-items: center;
        font-size: 1.1rem;
        line-height: 1;
    }

    .rotbam-ui .site-mobile-logout .site-mobile-action-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

.rotbam-ui .profile-guide-chevron {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
}

.rotbam-ui .profile-guide-chevron > span {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.rotbam-ui nav.service-subnav {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 100%;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--tblr-border-color);
    border-radius: 0;
    background: transparent;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: .75rem;
    scrollbar-width: thin;
}

.rotbam-ui nav.service-subnav .nav-link {
    flex: 0 0 auto;
    min-width: max-content;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .65rem .9rem;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--tblr-secondary-color);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 700;
}

.rotbam-ui nav.service-subnav .nav-link:hover {
    background: rgba(var(--tblr-primary-rgb), .06);
    color: var(--tblr-primary);
}

.rotbam-ui nav.service-subnav .nav-link.active,
.rotbam-ui nav.service-subnav .nav-link[aria-current="page"] {
    border-bottom-color: var(--tblr-primary);
    background: rgba(var(--tblr-primary-rgb), .08);
    color: var(--tblr-primary);
}

.rotbam-ui nav.service-subnav-balanced .nav-link {
    flex: 1 1 0;
    min-width: 8.5rem;
}

.rotbam-ui nav.service-subnav-detailed .nav-link {
    min-height: 52px;
    display: grid;
    align-content: center;
    gap: .05rem;
}

.rotbam-ui nav.service-subnav-detailed .nav-link span {
    color: var(--tblr-secondary-color);
    font-size: .72rem;
    font-weight: 400;
    line-height: 1.45;
}

.rotbam-ui nav.service-subnav-detailed .nav-link.active span,
.rotbam-ui nav.service-subnav-detailed .nav-link[aria-current="page"] span {
    color: inherit;
}

.rotbam-ui nav.service-subnav-secondary {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    border-bottom-color: var(--tblr-border-color-translucent);
}

.rotbam-ui nav.service-subnav-secondary .nav-link {
    min-width: 10rem;
    padding-block: .55rem;
    font-size: .875rem;
}

@media (max-width: 767.98px) {
    .rotbam-ui input,
    .rotbam-ui select,
    .rotbam-ui textarea {
        font-size: 16px;
    }

    .rotbam-ui nav.service-subnav-balanced .nav-link {
        flex: 0 0 auto;
    }

    .rotbam-ui nav.service-subnav-detailed .nav-link {
        min-width: 10.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rotbam-ui *,
    .rotbam-ui *::before,
    .rotbam-ui *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
