/* «اسأل عن ركاز»: the floating bubble and its dialog, on the two sign-in pages and the public
   pages (app/public_site.php, assets/js/ask-rekaz.js). Both are styled through their ids: the
   sign-in theme gives every element its own size, weight and line height
   (html[dir] body.auth-page *), and an id outranks that selector. */
.ask-rekaz,
#ask-rekaz-fab {
    --ask-ink: #21140d;
    --ask-muted: #6b5a50;
    --ask-primary: #ff5a2f;
    --ask-primary-dark: #d9431c;
    --ask-soft: #fff7ed;
    --ask-border: #efd8c8;
    font-family: "Droid Arabic Kufi", "Droid Kufi", Tahoma, Arial, sans-serif;
}

/* The bubble: bottom right, on every page, always in view. */
#ask-rekaz-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    margin: 0;
    padding: 0 20px 0 18px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--ask-primary);
    color: #fff;
    box-shadow: 0 14px 32px rgba(217, 67, 28, .38);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

#ask-rekaz-fab * {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

#ask-rekaz-fab .ps-icon {
    flex: none;
    width: 1.35em;
    height: 1.35em;
}

#ask-rekaz-fab:hover {
    background: var(--ask-primary-dark);
}

#ask-rekaz-fab:focus-visible {
    outline: 3px solid rgba(255, 90, 47, .5);
    outline-offset: 3px;
}

/* Sign-in pages on a phone or tablet: the card reaches the bottom corner, so the footer keeps
   its text clear of the bubble. */
@media (max-width: 900px) {
    body.auth-page:has(#ask-rekaz-fab) .auth-foot {
        padding-right: 150px !important;
    }
}

@media (max-width: 600px) {
    #ask-rekaz-fab {
        right: 12px;
        bottom: 12px;
        min-height: 46px;
        padding: 0 14px 0 12px;
        font-size: .9rem;
    }

    body.auth-page:has(#ask-rekaz-fab) .auth-foot {
        padding-right: 128px !important;
    }
}

/* Short phones: the card fills the screen, so the bubble shrinks to a round «؟» button and the
   footer needs less room (the label stays for screen readers). */
@media (max-width: 600px) and (max-height: 700px) {
    #ask-rekaz-fab {
        justify-content: center;
        width: 52px;
        min-height: 52px;
        padding: 0;
    }

    #ask-rekaz-fab span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    #ask-rekaz-fab .ps-icon {
        width: 1.6em;
        height: 1.6em;
    }

    body.auth-page:has(#ask-rekaz-fab) .auth-foot {
        padding-right: 58px !important;
        font-size: .68rem !important;
    }

    /* «اتصال آمن» gives way so the footer keeps to two lines and the card still fits. */
    body.auth-page:has(#ask-rekaz-fab) .auth-foot > span:first-child {
        display: none !important;
    }
}

#ask-rekaz .ps-icon {
    flex: none;
    width: 1.2em;
    height: 1.2em;
}

/* Dialog */
#ask-rekaz {
    width: min(640px, calc(100vw - 24px));
    max-width: none;
    max-height: calc(100dvh - 24px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: #fff;
    color: var(--ask-ink);
    box-shadow: 0 30px 80px rgba(33, 20, 13, .35);
    direction: rtl;
    text-align: right;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
}

/* The sign-in page theme gives every element its own size, weight and line height
   (html[dir] body.auth-page *) and every heading its colour with !important. Inside the dialog
   everything inherits instead, and the rules below set what differs. */
#ask-rekaz * {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

#ask-rekaz::backdrop {
    background: rgba(23, 13, 8, .6);
}

#ask-rekaz .ask-rekaz__panel {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 24px);
}

#ask-rekaz .ask-rekaz__head {
    flex: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 16px;
    background: linear-gradient(160deg, #21140d, #4d2a19);
    color: #fff;
}

#ask-rekaz .ask-rekaz__kicker {
    margin: 0 0 2px;
    color: #ffb59c;
    font-size: .76rem;
    font-weight: 700;
}

#ask-rekaz .ask-rekaz__head h2 {
    margin: 0 0 4px;
    color: #fff !important;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.4;
}

#ask-rekaz .ask-rekaz__head p:not(.ask-rekaz__kicker) {
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: .88rem;
    line-height: 1.8;
}

#ask-rekaz .ask-rekaz__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    cursor: pointer;
}

#ask-rekaz .ask-rekaz__close:hover {
    background: rgba(255, 255, 255, .18);
}

#ask-rekaz .ask-rekaz__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-color: #d9c1b1 transparent;
    scrollbar-width: thin;
    padding: 16px 22px 22px;
    overscroll-behavior: contain;
}

#ask-rekaz .ask-rekaz__jump {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 11px 16px;
    border-radius: 12px;
    background: var(--ask-primary);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
}

#ask-rekaz .ask-rekaz__jump:hover {
    background: var(--ask-primary-dark);
}

#ask-rekaz .ask-rekaz__faq {
    display: grid;
    gap: 8px;
}

#ask-rekaz .ask-rekaz__item {
    border: 1px solid var(--ask-border);
    border-radius: 12px;
    background: #fff;
}

#ask-rekaz .ask-rekaz__item summary {
    position: relative;
    padding: 11px 14px 11px 38px;
    color: var(--ask-ink);
    font-size: .93rem;
    font-weight: 700;
    line-height: 1.7;
    cursor: pointer;
    list-style: none;
}

#ask-rekaz .ask-rekaz__item summary::-webkit-details-marker {
    display: none;
}

#ask-rekaz .ask-rekaz__item summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--ask-primary-dark);
    font-size: 1.2rem;
    font-weight: 700;
}

#ask-rekaz .ask-rekaz__item[open] {
    background: var(--ask-soft);
}

#ask-rekaz .ask-rekaz__item[open] summary::after {
    content: "−";
}

#ask-rekaz .ask-rekaz__item p {
    margin: 0;
    padding: 0 14px 12px;
    color: var(--ask-muted);
    font-size: .88rem;
    line-height: 1.9;
}

#ask-rekaz .ask-rekaz__more {
    margin: 12px 0 0;
    color: var(--ask-muted);
    font-size: .84rem;
    line-height: 2;
}

#ask-rekaz .ask-rekaz__more a {
    color: var(--ask-primary-dark) !important;
    font-weight: 700;
}

#ask-rekaz .ask-rekaz__subscribe {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid rgba(255, 90, 47, .35);
    border-radius: 16px;
    background: var(--ask-soft);
    scroll-margin-top: 12px;
}

#ask-rekaz .ask-rekaz__subscribe h3 {
    margin: 0 0 4px;
    color: var(--ask-ink) !important;
    font-size: 1.15rem;
    font-weight: 700;
}

#ask-rekaz .ask-rekaz__subscribe > p {
    margin: 0 0 12px;
    color: var(--ask-muted);
    font-size: .86rem;
    line-height: 1.8;
}

#ask-rekaz .ask-rekaz__form {
    display: grid;
    gap: 10px;
}

#ask-rekaz .ask-rekaz__field {
    display: grid;
    gap: 4px;
}

#ask-rekaz .ask-rekaz__field span {
    color: var(--ask-ink);
    font-size: .86rem;
    font-weight: 700;
}

#ask-rekaz .ask-rekaz__field input,
#ask-rekaz .ask-rekaz__field select {
    width: 100%;
    height: 46px;
    padding: 0 12px;
    border: 1px solid #d9c1b1;
    border-radius: 10px;
    background: #fff;
    color: var(--ask-ink);
    font: inherit;
    font-size: 1rem;
}

#ask-rekaz .ask-rekaz__field input:focus,
#ask-rekaz .ask-rekaz__field select:focus {
    outline: none;
    border-color: var(--ask-primary);
    box-shadow: 0 0 0 4px rgba(255, 90, 47, .14);
}

#ask-rekaz .ask-rekaz__field [aria-invalid="true"] {
    border-color: #c0392b;
}

#ask-rekaz .ask-rekaz__error {
    margin: 0;
    color: #b42318;
    font-size: .85rem;
    font-weight: 700;
}

#ask-rekaz .ask-rekaz__error[hidden] {
    display: none;
}

#ask-rekaz .ask-rekaz__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    margin-top: 4px;
    border: 0;
    border-radius: 12px;
    background: #128c4a;
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

#ask-rekaz .ask-rekaz__submit:hover {
    background: #0e7a40;
}

#ask-rekaz .ask-rekaz__note {
    margin: 0;
    color: var(--ask-muted);
    font-size: .78rem;
    line-height: 1.8;
}

#ask-rekaz .ask-rekaz__trap {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

#ask-rekaz button:focus-visible,
#ask-rekaz a:focus-visible,
#ask-rekaz summary:focus-visible {
    outline: 3px solid rgba(255, 90, 47, .5);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    #ask-rekaz {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 18px;
    }

    #ask-rekaz .ask-rekaz__panel {
        max-height: calc(100dvh - 16px);
    }

    #ask-rekaz .ask-rekaz__head {
        padding: 16px 16px 12px;
    }

    #ask-rekaz .ask-rekaz__body {
        padding: 14px 16px 18px;
    }
}

/* The dialog in English (English public pages and the English sign-in pages) */
#ask-rekaz[dir="ltr"] {
    direction: ltr;
    text-align: left;
}

#ask-rekaz[dir="ltr"] .ask-rekaz__item summary {
    padding: 11px 38px 11px 14px;
}

#ask-rekaz[dir="ltr"] .ask-rekaz__item summary::after {
    left: auto;
    right: 14px;
}

.ps-ltr .ask-rekaz,
.ps-ltr #ask-rekaz-fab {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}