/**
 * Contextual SEO — Unified Design System CSS (v1.5.0)
 *
 * Shared visual layer applied to ALL five feature modules:
 *   - Top Bar        (.cseo-tb)
 *   - SEO Footer     (.cseo-sf)
 *   - Inline Related  (.cseo-irp)
 *   - Product Notices (.cseo-pn)
 *   - Related Posts   (.cseo-rp)
 *
 * Every module exposes the same `--cseo-d-*` CSS custom properties,
 * computed by Contextual_SEO_Display_Rules::design_to_css_vars() and
 * injected on the module's root element.
 *
 * This file is the visual contract between the five modules. Any visual
 * change here applies to all of them at once — exactly as the user
 * requested ("اگه رنگ یا تمی برای هریک از قابلیت‌ها هست برای همه وجود داشته باشه").
 */

/* ==========================================================================
   Design tokens — available to every module via the .cseo-design-root class
   ========================================================================== */
.cseo-design-root,
.cseo-tb,
.cseo-sf,
.cseo-irp,
.cseo-pn,
.cseo-rp {
        /* Default values — overridden inline per-instance. */
        --cseo-d-bg: #f8fafc;
        --cseo-d-text: #0f172a;
        --cseo-d-border: #e2e8f0;
        --cseo-d-accent: #3b82f6;
        --cseo-d-radius: 8px;
        --cseo-d-fs: 14px;
        --cseo-d-py: 14px;
        --cseo-d-px: 18px;
}

/* ==========================================================================
   Shared visual primitives — every module uses these
   ========================================================================== */

/* Headings inside any module */
.cseo-tb .cseo-tb__msg,
.cseo-sf .cseo-sf__block-title,
.cseo-irp .cseo-irp__heading,
.cseo-pn .cseo-pn__title,
.cseo-rp .cseo-rp__heading {
        color: var(--cseo-d-text);
        font-size: var(--cseo-d-fs);
        font-weight: 700;
        line-height: 1.45;
        margin: 0 0 0.4em;
}

/* Body text inside any module */
.cseo-tb,
.cseo-sf,
.cseo-irp,
.cseo-pn,
.cseo-rp {
        color: var(--cseo-d-text);
        font-size: var(--cseo-d-fs);
}

/* Links inside any module inherit accent color */
.cseo-tb a,
.cseo-sf a,
.cseo-irp a,
.cseo-pn a,
.cseo-rp a {
        color: var(--cseo-d-accent);
        text-decoration: none;
        transition: opacity 0.15s ease;
}
.cseo-tb a:hover,
.cseo-sf a:hover,
.cseo-irp a:hover,
.cseo-pn a:hover,
.cseo-rp a:hover {
        opacity: 0.85;
}

/* Buttons (CTAs) inside any module */
.cseo-tb .cseo-btn,
.cseo-sf .cseo-btn,
.cseo-irp .cseo-btn,
.cseo-pn .cseo-btn,
.cseo-rp .cseo-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: calc(var(--cseo-d-py) / 2) calc(var(--cseo-d-px) / 1.5);
        border-radius: var(--cseo-d-radius);
        background: var(--cseo-d-accent);
        color: #fff;
        font-size: var(--cseo-d-fs);
        font-weight: 600;
        border: 0;
        cursor: pointer;
        transition: transform 0.12s ease, opacity 0.15s ease;
        text-decoration: none;
}
.cseo-tb .cseo-btn:hover,
.cseo-sf .cseo-btn:hover,
.cseo-irp .cseo-btn:hover,
.cseo-pn .cseo-btn:hover {
        opacity: 0.9;
        transform: translateY(-1px);
}

/* ==========================================================================
   Frontend preset-aware rendering — each module's root element gets one of
   the .cseo-preset-* classes when its design.preset is set.
   The .cseo-preset-* class only sets the --cseo-d-* variables, so the same
   primitives above automatically take on the new look.
   ========================================================================== */
.cseo-preset-default {
        --cseo-d-bg: #f8fafc;
        --cseo-d-text: #0f172a;
        --cseo-d-border: #e2e8f0;
        --cseo-d-accent: #3b82f6;
}
.cseo-preset-blue {
        --cseo-d-bg: #eff6ff;
        --cseo-d-text: #1e3a8a;
        --cseo-d-border: #bfdbfe;
        --cseo-d-accent: #2563eb;
}
.cseo-preset-yellow {
        --cseo-d-bg: #fefce8;
        --cseo-d-text: #713f12;
        --cseo-d-border: #fde68a;
        --cseo-d-accent: #ca8a04;
}
.cseo-preset-red {
        --cseo-d-bg: #fef2f2;
        --cseo-d-text: #7f1d1d;
        --cseo-d-border: #fecaca;
        --cseo-d-accent: #dc2626;
}
.cseo-preset-green {
        --cseo-d-bg: #f0fdf4;
        --cseo-d-text: #14532d;
        --cseo-d-border: #bbf7d0;
        --cseo-d-accent: #16a34a;
}
.cseo-preset-soft {
        --cseo-d-bg: #fdf4ff;
        --cseo-d-text: #581c87;
        --cseo-d-border: #f5d0fe;
        --cseo-d-accent: #a21caf;
}
.cseo-preset-dark {
        --cseo-d-bg: #1e293b;
        --cseo-d-text: #f1f5f9;
        --cseo-d-border: #334155;
        --cseo-d-accent: #fbbf24;
}

/* ==========================================================================
   Admin UI for the unified design panel + display rules panel
   (admin.css already provides .cseo-panel, .cseo-field, .cseo-grid, etc.)
   ========================================================================== */

/* --- Display Rules panel --- */
.cseo-panel--display-rules .cseo-panel__header h2 {
        display: inline-flex;
        align-items: center;
        gap: 8px;
}
.cseo-dr-intro {
        background: #f8fafc;
        border-inline-start: 3px solid var(--cseo-primary, #3b82f6);
        padding: 10px 14px;
        border-radius: 4px;
        margin: 4px 0 16px;
}
.cseo-dr-subhead {
        margin: 18px 0 6px;
        padding-bottom: 4px;
        border-bottom: 1px solid #e2e8f0;
        font-size: 13px;
        font-weight: 700;
        color: #475569;
}
.cseo-dr-posttypes,
.cseo-dr-contexts {
        gap: 8px 16px;
        margin-bottom: 12px;
}
.cseo-dr-terms-select {
        min-height: 70px;
}

/* --- Design panel --- */
.cseo-panel--design .cseo-panel__header h2 {
        display: inline-flex;
        align-items: center;
        gap: 8px;
}
.cseo-design-copy {
        margin-inline-start: auto;
}
.cseo-preset-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 10px;
        margin: 8px 0;
}
.cseo-preset-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 10px 6px 8px;
        border: 2px solid #e2e8f0;
        border-radius: 8px;
        background: #fff;
        cursor: pointer;
        transition: border-color 0.15s ease, transform 0.12s ease;
}
.cseo-preset-card:hover {
        border-color: #94a3b8;
        transform: translateY(-1px);
}
.cseo-preset-card.is-active {
        border-color: var(--cseo-primary, #3b82f6);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.cseo-preset-card input[type="radio"] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
}
.cseo-preset-swatch {
        width: 100%;
        height: 36px;
        border-radius: 6px;
        border: 1px solid rgba(0, 0, 0, 0.05);
}
.cseo-preset-name {
        font-size: 11px;
        color: #475569;
        font-weight: 600;
        text-align: center;
}

/* Live preview block in the design panel */
.cseo-design-preview {
        margin-top: 16px;
        padding: 14px;
        background: #f8fafc;
        border-radius: 8px;
        border: 1px dashed #cbd5e1;
}
.cseo-design-preview__label {
        display: block;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #64748b;
        margin-bottom: 8px;
        font-weight: 700;
}
.cseo-design-preview__box {
        background: var(--cseo-d-bg, #f8fafc);
        color: var(--cseo-d-text, #0f172a);
        border: 1px solid var(--cseo-d-border, #e2e8f0);
        border-radius: var(--cseo-d-radius, 8px);
        padding: var(--cseo-d-py, 14px) var(--cseo-d-px, 18px);
        font-size: var(--cseo-d-fs, 14px);
        line-height: 1.5;
}
.cseo-design-preview__box::after {
        content: "→";
        display: inline-block;
        margin-inline-start: 8px;
        color: var(--cseo-d-accent, #3b82f6);
        font-weight: 700;
}


/* ==========================================================================
   NOTE (v1.5.9 premium admin redesign)
   ==========================================================================
   Admin-only rules previously defined here (.cseo-module-card, .cseo-toggle--lg,
   .cseo-bulk-row, .cseo-matrix-table, .cseo-mode-pill, .cseo-mode-card, etc.)
   have been consolidated into admin.css to avoid specificity wars between
   the two stylesheets. This file now contains ONLY the frontend module
   visual layer (.cseo-tb, .cseo-sf, .cseo-irp, .cseo-pn, .cseo-rp).
   ========================================================================== */

/* RTL: flip directional ARROW GLYPHS that use CSS `content` (e.g. the → in
 * .cseo-design-preview__box::after) or that are pure SVG arrow shapes.
 *
 * IMPORTANT: never flip text-bearing elements here — applying scaleX(-1) to
 * Persian/Latin text mirrors it and makes it unreadable. The previous rule
 * incorrectly included .cseo-preset-name (which holds the color preset's
 * Persian label) and produced the "آینه‌ای / برعکس" bug the user reported.
 */
/* v1.8.6-fix — Only flip the Inline Related arrow icon in RTL.
 * The .cseo-mode-card__icon contains a checkmark, prohibition sign, or the
 * letter "A" — flipping those makes them look wrong (mirrored checkmark goes
 * bottom-right to top-left; mirrored "A" looks backwards). Only true
 * directional arrows should be flipped for RTL. */
[dir="rtl"] .cseo-irp__arrow {
        transform: scaleX(-1);
}

/* Ensure the preset name text always renders with correct RTL direction
 * regardless of inherited bidi context. This is a defensive rule: even if
 * the parent card is set to LTR for layout reasons, the name itself stays
 * readable. */
.cseo-preset-name {
        direction: inherit;
        unicode-bidi: plaintext;
}

/* Reduced motion — respect user preference. */
@media (prefers-reduced-motion: reduce) {
        .cseo-mode-card,
        .cseo-mode-card *,
        .cseo-preset-card,
        .cseo-preset-card *,
        .cseo-design-panel,
        .cseo-design-panel * {
                animation-duration: 0.001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.001ms !important;
        }
}