/* WASEL AI | واصل — global styles on top of Bootstrap 5.3 (LTR and RTL builds): fonts, brand design tokens and the
   Bootstrap overrides shared by the public site, the authentication pages and the application. Public-site sections
   live in marketing.css. No inline styles anywhere: the Content Security Policy only allows stylesheets from this
   origin. */

/* Fonts (self-hosted, SIL Open Font License — see wwwroot/lib/fonts). IBM Plex Sans Arabic covers Arabic script only;
   Latin text, digits and punctuation use Inter, so both languages share the same numerals and rhythm. */
@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../lib/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../lib/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../lib/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../lib/fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../lib/fonts/inter/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-200B, U+2012-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../lib/fonts/inter/inter-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Design tokens ------------------------------------------------------------------------------------------------- */
:root {
    /* Brand palette */
    --wasel-blue: #2563eb;
    --wasel-blue-hover: #1d4ed8;
    --wasel-blue-active: #1e40af;
    --wasel-cyan: #06b6d4;
    --wasel-cyan-ink: #0e7490; /* cyan for text on light backgrounds (AA) */
    --wasel-purple: #7c3aed;
    --wasel-purple-soft: #a78bfa;
    --wasel-navy: #0b1120;
    --wasel-navy-2: #111a33;
    --wasel-navy-3: #1b2540;
    --wasel-bg: #f8fafc;
    --wasel-white: #ffffff;
    --wasel-green: #10b981;
    --wasel-green-ink: #047857;

    /* Text and lines */
    --wasel-ink: #0b1120;
    --wasel-ink-2: #334155;
    --wasel-ink-3: #5b6b82;
    --wasel-line: rgba(15, 23, 42, .09);
    --wasel-line-strong: rgba(15, 23, 42, .16);
    --wasel-on-dark: #e2e8f0;
    --wasel-on-dark-2: #a7b3c8;
    --wasel-line-dark: rgba(255, 255, 255, .1);

    /* Gradients */
    --wasel-gradient: linear-gradient(135deg, var(--wasel-blue) 0%, var(--wasel-cyan) 52%, var(--wasel-purple) 100%);
    --wasel-gradient-brand: linear-gradient(135deg, var(--wasel-blue) 0%, var(--wasel-purple) 100%);
    --wasel-gradient-text: linear-gradient(100deg, #0891b2 0%, var(--wasel-blue) 45%, var(--wasel-purple) 100%);
    --wasel-gradient-text-dark: linear-gradient(100deg, #22d3ee 0%, #60a5fa 45%, var(--wasel-purple-soft) 100%);

    /* Shape, depth and motion */
    --wasel-radius-xs: .5rem;
    --wasel-radius-sm: .75rem;
    --wasel-radius: 1rem;
    --wasel-radius-lg: 1.5rem;
    --wasel-radius-xl: 2rem;
    --wasel-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
    --wasel-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 12px -4px rgba(15, 23, 42, .08);
    --wasel-shadow-md: 0 2px 4px rgba(15, 23, 42, .04), 0 16px 40px -16px rgba(15, 23, 42, .18);
    --wasel-shadow-lg: 0 4px 8px rgba(15, 23, 42, .04), 0 32px 64px -24px rgba(30, 41, 99, .28);
    --wasel-glow: 0 0 0 1px rgba(37, 99, 235, .1), 0 18px 48px -18px rgba(124, 58, 237, .45);
    --wasel-ease: cubic-bezier(.2, .8, .2, 1);
    --wasel-ease-spring: cubic-bezier(.34, 1.4, .64, 1);
    --wasel-font: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif;
    --wasel-font-ar: "IBM Plex Sans Arabic", "Inter", system-ui, -apple-system, "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif;

    /* Bootstrap, mapped to the brand */
    --bs-body-font-family: var(--wasel-font);
    --bs-body-color: #0f172a;
    --bs-body-color-rgb: 15, 23, 42;
    --bs-body-bg: #fff;
    --bs-secondary-color: rgba(15, 23, 42, .7);
    --bs-emphasis-color: var(--wasel-ink);
    --bs-primary: var(--wasel-blue);
    --bs-primary-rgb: 37, 99, 235;
    --bs-primary-text-emphasis: #1e40af;
    --bs-primary-bg-subtle: #e0ebff;
    --bs-primary-border-subtle: #bfd3fe;
    --bs-success: var(--wasel-green-ink);
    --bs-success-rgb: 4, 120, 87;
    --bs-success-text-emphasis: #065f46;
    --bs-success-bg-subtle: #d1fae5;
    --bs-success-border-subtle: #a7f3d0;
    --bs-link-color: var(--wasel-blue);
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: var(--wasel-blue-hover);
    --bs-link-hover-color-rgb: 29, 78, 216;
    --bs-border-color: #e2e8f0;
    --bs-border-radius: .625rem;
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: .875rem;
    --bs-border-radius-xl: 1.25rem;
    --bs-focus-ring-color: rgba(37, 99, 235, .3);
    --bs-tertiary-bg: #f1f5f9;

}

:root:lang(ar) {
    --bs-body-font-family: var(--wasel-font-ar);
}

/* Bootstrap components that hard-code its default blue */
.btn-primary {
    --bs-btn-bg: var(--wasel-blue);
    --bs-btn-border-color: var(--wasel-blue);
    --bs-btn-hover-bg: var(--wasel-blue-hover);
    --bs-btn-hover-border-color: var(--wasel-blue-hover);
    --bs-btn-active-bg: var(--wasel-blue-active);
    --bs-btn-active-border-color: var(--wasel-blue-active);
    --bs-btn-disabled-bg: var(--wasel-blue);
    --bs-btn-disabled-border-color: var(--wasel-blue);
    --bs-btn-focus-shadow-rgb: 37, 99, 235;
}
.btn-outline-primary {
    --bs-btn-color: var(--wasel-blue);
    --bs-btn-border-color: var(--wasel-blue);
    --bs-btn-hover-bg: var(--wasel-blue);
    --bs-btn-hover-border-color: var(--wasel-blue);
    --bs-btn-active-bg: var(--wasel-blue-hover);
    --bs-btn-active-border-color: var(--wasel-blue-hover);
    --bs-btn-disabled-color: var(--wasel-blue);
    --bs-btn-disabled-border-color: var(--wasel-blue);
    --bs-btn-focus-shadow-rgb: 37, 99, 235;
}
.btn-link { --bs-btn-color: var(--wasel-blue); --bs-btn-hover-color: var(--wasel-blue-hover); --bs-btn-active-color: var(--wasel-blue-active); }
.btn { font-weight: 500; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: #93b4fb;
    box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .2);
}
.form-check-input:checked { background-color: var(--wasel-blue); border-color: var(--wasel-blue); }
.form-range::-webkit-slider-thumb { background-color: var(--wasel-blue); }
.form-range::-moz-range-thumb { background-color: var(--wasel-blue); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--wasel-blue); }
.nav-link { --bs-nav-link-color: var(--wasel-blue); --bs-nav-link-hover-color: var(--wasel-blue-hover); }
.pagination {
    --bs-pagination-color: var(--wasel-blue);
    --bs-pagination-hover-color: var(--wasel-blue-hover);
    --bs-pagination-focus-color: var(--wasel-blue-hover);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .25);
    --bs-pagination-active-bg: var(--wasel-blue);
    --bs-pagination-active-border-color: var(--wasel-blue);
}
.dropdown-menu { --bs-dropdown-link-active-bg: var(--wasel-blue); }
.list-group { --bs-list-group-active-bg: var(--wasel-blue); --bs-list-group-active-border-color: var(--wasel-blue); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--wasel-blue); }
.accordion {
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .25);
    --bs-accordion-active-color: var(--bs-primary-text-emphasis);
    --bs-accordion-active-bg: #eef4ff;
}

body { min-height: 100vh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body.app-page, body.error-page { background: var(--wasel-bg); }
::selection { background: rgba(37, 99, 235, .18); }

.skip-link {
    position: absolute;
    inset-inline-start: 1rem;
    top: .5rem;
    z-index: 2000;
    padding: .5rem 1rem;
    background: #fff;
    border: 2px solid var(--bs-primary);
    border-radius: .375rem;
}

main:focus { outline: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .55);
    outline-offset: 2px;
}
.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; vertical-align: -.25em; }
.logo-mark { flex-shrink: 0; }
.narrow { max-width: 52rem; }
.narrow-card { max-width: 40rem; }
.narrow-form { max-width: 28rem; }
.min-w-0 { min-width: 0; }

/* Brand lockup: mark + "WASEL AI" wordmark (used in every header) */
.brand-lockup { display: inline-flex; align-items: center; gap: .6rem; color: var(--wasel-ink); text-decoration: none; font-weight: 700; }
.brand-lockup:hover { color: var(--wasel-ink); }
.brand-word { direction: ltr; unicode-bidi: isolate; font-family: "Inter", system-ui, sans-serif; font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.brand-ai {
    background: var(--wasel-gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.brand-lockup.on-dark, .brand-lockup.on-dark:hover { color: #fff; }
.brand-lockup.on-dark .brand-ai { background-image: var(--wasel-gradient-text-dark); }

/* Authentication pages */
.auth-shell { display: flex; min-height: 100vh; }
.auth-brand {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 40%;
    max-width: 32rem;
    background:
        radial-gradient(60% 50% at 15% 10%, rgba(37, 99, 235, .55), transparent 70%),
        radial-gradient(55% 45% at 90% 85%, rgba(124, 58, 237, .5), transparent 70%),
        radial-gradient(40% 35% at 80% 20%, rgba(6, 182, 212, .28), transparent 70%),
        var(--wasel-navy);
}
.auth-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.auth-brand-title { font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem); font-weight: 700; line-height: 1.25; }
.auth-brand-body { color: var(--wasel-on-dark); font-size: 1.125rem; }
.auth-main { flex: 1; background: #fff; }
.auth-card { max-width: 26rem; }
.otp-input { letter-spacing: .3em; font-variant-numeric: tabular-nums; }

/* Application shell: wwwroot/css/app.css (loaded by _AppLayout) */
.icon-sm { width: 1.1em; height: 1.1em; }

/* Content */
.check-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    border: 2px solid var(--bs-border-color); color: #fff; font-size: .8rem;
}
.check-dot.done { background: var(--bs-success); border-color: var(--bs-success); }
.checklist-progress { height: .5rem; accent-color: var(--bs-primary); }
.qr-code { image-rendering: pixelated; }
.opening-hours select, .opening-hours input { min-width: 7rem; }
.admin-action summary { list-style: none; display: inline-block; }
.admin-action summary::-webkit-details-marker { display: none; }
.admin-action[open] { min-width: 18rem; }
.error-card { max-width: 32rem; }
table td, table th { vertical-align: middle; }

/* Billing ------------------------------------------------------------------------------------------------------- */
.usage-meter {
    width: 100%;
    height: 0.75rem;
}

.plan-option .plan-limits li:last-child {
    border-bottom: 0 !important;
}

@media print {
    .skip-link {
        display: none !important;
    }

    .invoice {
        box-shadow: none !important;
    }
}

/* Inbox --------------------------------------------------------------------------------------------------------- */
.conversation-list .list-group-item { border-radius: .375rem; }
.message-list {
    max-height: 60vh;
    min-height: 16rem;
    overflow-y: auto;
    background: var(--bs-tertiary-bg);
}
.message { display: flex; margin-bottom: .5rem; }
.message-in { justify-content: flex-start; }
.message-out { justify-content: flex-end; }
.message-bubble {
    max-width: 80%;
    padding: .5rem .75rem;
    border-radius: .75rem;
    background: var(--bs-body-bg);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
    overflow-wrap: anywhere;
}
.message-text { white-space: pre-wrap; }
.message-out .message-bubble { background: #d9fdd3; }
.message-meta { color: var(--bs-secondary-color); margin-top: .25rem; }
.message-type { color: var(--bs-secondary-color); }