/*
 * AYIN Frontend Foundation R27B
 * Additive frontend layer for the authenticated and public AYIN interfaces.
 */

:root {
    --ayin-font-family: 'Tajawal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ayin-focus-ring: 0 0 0 3px rgba(27, 111, 214, .28);
    --ayin-page-inline-padding: clamp(16px, 3vw, 32px);
    --ayin-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html {
    scroll-behavior: smooth;
}

body.ayin-page,
body.ayin-page button,
body.ayin-page input,
body.ayin-page select,
body.ayin-page textarea {
    font-family: var(--ayin-font-family);
}

body.ayin-page {
    overflow-x: clip;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.ayin-page *,
body.ayin-page *::before,
body.ayin-page *::after {
    box-sizing: border-box;
}

body.ayin-page img,
body.ayin-page svg,
body.ayin-page video {
    max-inline-size: 100%;
}

body.ayin-page [hidden] {
    display: none !important;
}

body.ayin-page button,
body.ayin-page a,
body.ayin-page input,
body.ayin-page select,
body.ayin-page textarea {
    -webkit-tap-highlight-color: transparent;
}

body.ayin-page :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid #1b6fd6;
    outline-offset: 3px;
    box-shadow: var(--ayin-focus-ring);
}

body.ayin-page :where(button, input, select, textarea):disabled,
body.ayin-page [aria-disabled='true'] {
    cursor: not-allowed;
}

.ayin-skip-link {
    position: fixed;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    z-index: 100000;
    translate: 0 -180%;
    padding: 10px 16px;
    border-radius: 10px;
    background: #fff;
    color: #071f42;
    font-family: var(--ayin-font-family);
    font-weight: 800;
    box-shadow: 0 12px 32px rgba(7, 31, 66, .24);
    transition: translate .2s ease;
}

.ayin-skip-link:focus {
    translate: 0;
}

.ayin-brand-lockup,
.auth-brand-lockup {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ayin-brand-lockup {
    min-inline-size: 0;
    flex: 0 0 auto;
}

.ayin-hero-muted {
    margin-block-start: 6px;
    color: rgba(255, 255, 255, .68) !important;
}

.ayin-card-pad {
    padding: 22px;
}

.ayin-status-pending {
    color: #b8860b;
    font-weight: 900;
}

.welcome-logo-spacing {
    margin-block-end: 24px;
}

.preview-brand-logo-size {
    inline-size: 230px !important;
    max-inline-size: 78% !important;
    block-size: auto !important;
    object-fit: contain !important;
    filter: none !important;
}

.preview-user-avatar {
    display: grid;
    place-items: center;
    inline-size: 54px;
    block-size: 54px;
    flex: 0 0 54px;
    border-radius: 16px;
    background: linear-gradient(145deg, #f7e6bc, #d8b66c);
    color: #08244a;
    font-size: 22px;
    font-weight: 900;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
}

.preview-user-id {
    color: rgba(255, 255, 255, .65);
    font-size: 13px;
    direction: ltr;
    text-align: start;
}

.ayin-text-profit {
    color: #16a34a !important;
}

.ayin-text-wallet {
    color: #0b4db3 !important;
}

[data-progress-width] {
    width: 0;
    transition: width .45s ease;
}

.profile-completion-ring[data-progress-value] {
    --profile-progress: 0;
}

html.ayin-js-ready [data-progress-width] {
    width: var(--ayin-progress-width, 0%);
}

html.ayin-js-ready .profile-completion-ring[data-progress-value] {
    --profile-progress: var(--ayin-progress-value, 0);
}

.ayin-topbar-inner,
.ayin-top-actions,
.ayin-nav {
    min-inline-size: 0;
}

.ayin-nav {
    scrollbar-width: thin;
}

.ayin-account-link {
    max-inline-size: min(230px, 24vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-bottom-nav {
    padding-block-end: max(8px, var(--ayin-safe-bottom));
}

body.ayin-page main:focus {
    outline: none;
}

body.ayin-page :where(input, select, textarea) {
    max-inline-size: 100%;
}

body.ayin-page input[type='search'] {
    appearance: none;
}

body.ayin-page .ayin-btn,
body.ayin-page button,
body.ayin-page [role='button'] {
    touch-action: manipulation;
}

body.ayin-page .ayin-toast,
body.ayin-page .profile-toast {
    max-inline-size: min(440px, calc(100vw - 32px));
}

.notification-filters button[aria-pressed='true'],
.profile-tab[aria-selected='true'] {
    cursor: default;
}

.tree-explorer-viewport.is-dragging {
    cursor: grabbing;
    user-select: none;
}

@media (max-width: 1100px) {
    .ayin-topbar-inner {
        gap: 14px;
    }

    .ayin-nav {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding-block: 4px;
    }

    .ayin-nav a {
        flex: 0 0 auto;
    }
}

@media (max-width: 760px) {
    .ayin-card-pad {
        padding: 18px;
    }

    .ayin-account-link {
        max-inline-size: 42vw;
    }

    body.ayin-page {
        padding-block-end: calc(76px + var(--ayin-safe-bottom));
    }

    body.auth-page,
    body.welcome-page {
        padding-block-end: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    body.ayin-page *,
    body.ayin-page *::before,
    body.ayin-page *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}