/* BizAuto — shared design tokens
   Single source of truth for color/radius/shadow/spacing used across
   the landing page, blog posts, admin panel, and business panel. */
:root {
    /* Surfaces */
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-glass: rgba(255,255,255,0.72);
    --border: rgba(15,23,42,0.06);

    /* Text */
    --text: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;

    /* Brand — the teal of the logo. Deliberately NO gradient: "AI purple/pink
       gradients" is a flagged anti-pattern for clinic/booking products, so brand
       colour is applied as solid fills only.

       #0f6b66 rather than the logo tile's darker #125E5C: this value is a button
       fill and a link colour, not a background, and at 6.33:1 against white it
       lands where the indigo it replaced did (6.29:1) — so every contrast decision
       made against --primary elsewhere still holds.

       It is also 30 ΔE from --success. That distance is the point: green means
       «paid / free slot / confirmed» in this product and is never decorative, and a
       brand colour close enough to be mistaken for it would teach the reader that
       the brand means «available».

       --accent stays pink. It is used in exactly one place, as TEXT (.pill-accent),
       where the logo's mint reads 2.4:1 and cannot be read; and an accent that looks
       like the primary is not an accent. */
    --primary: #0f6b66;
    --primary-light: rgba(15,107,102,0.08);
    --primary-hover: #0c5854;
    --primary-active: #0a4743;
    --primary-ring: rgba(15,107,102,0.35);
    --on-primary: #ffffff;
    --accent: #ec4899;
    --accent-light: rgba(236,72,153,0.08);

    /* Status — green carries "available / free slot / success", the booking
       domain's most load-bearing signal, so it is never used decoratively. */
    --success: #059669;
    --success-light: rgba(5,150,105,0.1);
    --success-strong: #047857;
    --danger: #dc2626;
    --danger-light: rgba(220,38,38,0.1);
    --warning: #f59e0b;
    --warning-light: rgba(245,158,11,0.1);
    --info: #0284c7;
    --info-light: rgba(2,132,199,0.1);

    /* Dark surfaces (headers, footers, sidebars) */
    --dark: #0f172a;
    --dark-elevated: #1e293b;
    --sidebar: #0f172a;
    --sidebar-hover: #1e293b;

    /* Radius */
    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 24px;

    /* Shadows — two-layer: a tight hairline for edge definition plus a soft
       ambient spread. Reads crisper than a single blurred shadow at any size. */
    --shadow-sm: 0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);
    --shadow-md: 0 1px 5px -4px rgba(15,23,42,0.5), 0 6px 16px rgba(15,23,42,0.07);
    --shadow-lg: 0 1px 5px -4px rgba(15,23,42,0.5), 0 16px 40px rgba(15,23,42,0.1);
    --shadow-xl: 0 1px 5px -4px rgba(15,23,42,0.5), 0 28px 68px rgba(15,23,42,0.14);
    /* Brand-tinted lift for primary buttons — a shadow, not a gradient. */
    --shadow-primary: 0 1px 2px rgba(15,107,102,0.2), 0 8px 20px rgba(15,107,102,0.22);

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;

    /* Motion — interaction feedback stays in the 150–300ms band; entrances run
       300–400ms. Anything slower starts to feel like lag rather than polish. */
    --dur-instant: 120ms;
    --dur-fast: 180ms;
    --dur-base: 240ms;
    --dur-slow: 320ms;
    --dur-reveal: 380ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

    /* Reveal geometry — small offsets so motion reads as a fade, not a slide. */
    --reveal-y: 14px;
    --reveal-scale: 0.985;

    /* Focus ring — 3px, always visible on :focus-visible. Never removed. */
    --focus-ring: 0 0 0 3px var(--primary-ring);

    /* Inline SVG icons for CSS-generated content (list bullets etc). Used with
       `mask`, so the colour comes from background-color and stays tokenised. */
    --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Icons inherit text colour and align with their label. */
svg[aria-hidden="true"], svg[role="img"] { flex-shrink: 0; vertical-align: middle; }

/* Buttons keep the Persian face and always signal interactivity. */
.btn, button { font-family: 'vazirmatn', sans-serif; }
button:not(:disabled), a[href], [onclick], [role="button"] { cursor: pointer; }
button:disabled { cursor: not-allowed; }

/* Visible keyboard focus everywhere, without forcing a ring on mouse clicks. */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* Anyone who asks for less motion gets essentially none. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

select{
   width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.95rem;
    direction: rtl;
    text-align: right;
}

#leadSearch{
   width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
}

.sb-mark img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}