/*
 * dream-smart-ui.css — واجهة مقالات تفسير الأحلام (category_id = 120)
 * كل الـ classes مبدوءة بـ‌ dsu- لتجنب تعارض الأنماط مع باقي الموقع
 * لا تأثير على أي قسم آخر
 */

/* ══════════════════════════════════════════════════════
   VARIABLES — نفس منظومة ألوان الموقع
   الخط: نرثه من var(--font) المعرّف في style.css
══════════════════════════════════════════════════════ */
.dsu-wrap {
    --dsu-bg: #f7f4fb;
    --dsu-card: #ffffff;
    --dsu-ink: #241b32;
    --dsu-muted: #756982;
    --dsu-line: #e8deef;
    --dsu-primary: #6f3bb5;
    --dsu-primary2: #8f5de8;
    --dsu-soft: #f0e7fb;
    --dsu-good: #edf8f1;
    --dsu-good-text: #236a3a;
    --dsu-shadow: 0 12px 30px rgba(50,22,82,.10);
    --dsu-radius: 20px;
}

.dsu-wrap {
    display: block;
    /* يرث خط الموقع مباشرة من var(--font) = Arial, Tahoma, sans-serif */
    font-family: var(--font, Arial, Tahoma, sans-serif);
    /* لا نحدد حجماً ثابتاً — نرث من body الموقع (16px) */
    font-size: inherit;
    font-weight: 700;
}

/* ══════════════════════════════════════════════════════
   QUICK ANSWER — Featured Snippet Box
══════════════════════════════════════════════════════ */
.dsu-quick-answer {
    background: var(--dsu-good);
    color: var(--dsu-good-text);
    border: 1px solid #ccebd5;
    border-radius: 18px;
    padding: 13px 15px;
    font-size: 16px;
    margin: 12px 0;
    line-height: 1.8;
}
.dsu-quick-answer strong {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
    color: #1d5c32;
    font-size: 14px;
    font-weight: 800;
}

/* ══════════════════════════════════════════════════════
   CARD — الكروت البيضاء
══════════════════════════════════════════════════════ */
.dsu-card {
    background: var(--dsu-card);
    border: 1px solid var(--dsu-line);
    border-radius: var(--dsu-radius);
    box-shadow: var(--dsu-shadow);
    padding: 15px;
    margin-top: 13px;
}
.dsu-section-title {
    margin: 0 0 11px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--dsu-ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.dsu-section-title small {
    font-size: 12px;
    color: var(--dsu-muted);
    font-weight: 500;
}

/* ══════════════════════════════════════════════════════
   CHIPS — التابات (ملفتة للنظر — تلمع وتتلون)
══════════════════════════════════════════════════════ */

/* glow يتلون بين بنفسجي → وردي → نيلي */
@keyframes dsuChipGlow {
    0%   { box-shadow: 0 0 0 2px rgba(111,59,181,.30), 0 4px 14px rgba(111,59,181,.14); }
    33%  { box-shadow: 0 0 0 2px rgba(236,72,153,.35), 0 4px 18px rgba(236,72,153,.18); }
    66%  { box-shadow: 0 0 0 2px rgba(99,102,241,.30), 0 4px 16px rgba(99,102,241,.15); }
    100% { box-shadow: 0 0 0 2px rgba(111,59,181,.30), 0 4px 14px rgba(111,59,181,.14); }
}

/* shimmer يمشي على الزر */
@keyframes dsuChipShimmer {
    0%   { transform: translateX(180%) skewX(-18deg); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateX(-180%) skewX(-18deg); opacity: 0; }
}

/* نبضة خفيفة */
@keyframes dsuChipPulse {
    0%, 100% { transform: scale(1);     }
    50%       { transform: scale(1.045); }
}

/* gradient الخط العلوي */
@keyframes dsuChipBorder {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

.dsu-chip-row {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: none;
}
.dsu-chip-row::-webkit-scrollbar { display: none; }

.dsu-chip {
    position: relative;
    flex: 0 0 auto;
    border: 2px solid transparent;
    background: #fff;
    border-radius: 999px;
    padding: 8px 16px;
    color: var(--dsu-primary);
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    font-family: inherit;
    overflow: hidden;
    /* glow متلون */
    animation:
        dsuChipGlow  2.8s ease-in-out infinite,
        dsuChipPulse 3.5s ease-in-out infinite;
    transition: transform .15s ease, color .15s;
    /* خط ملون حول الزر عبر box-shadow */
    box-shadow:
        0 0 0 2px rgba(111,59,181,.28),
        0 4px 14px rgba(111,59,181,.12);
}

/* تأخير متتالي لكل زر عشان يبدو زي موجة */
.dsu-chip:nth-child(1) { animation-delay: 0s,    0s;    }
.dsu-chip:nth-child(2) { animation-delay: .35s,  .35s;  }
.dsu-chip:nth-child(3) { animation-delay: .70s,  .70s;  }
.dsu-chip:nth-child(4) { animation-delay: 1.05s, 1.05s; }
.dsu-chip:nth-child(5) { animation-delay: 1.40s, 1.40s; }
.dsu-chip:nth-child(6) { animation-delay: 1.75s, 1.75s; }

/* خط gradient ملون في أعلى كل زر */
.dsu-chip::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2.5px;
    background: linear-gradient(90deg,
        #a855f7, #ec4899, #6366f1, #8b5cf6, #a855f7);
    background-size: 300% 100%;
    animation: dsuChipBorder 2.5s linear infinite;
    border-radius: 999px 999px 0 0;
    pointer-events: none;
}

/* shimmer sweep */
.dsu-chip::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(
        110deg,
        transparent 25%,
        rgba(255,255,255,.65) 50%,
        transparent 75%
    );
    animation: dsuChipShimmer 2.6s ease-in-out infinite;
    pointer-events: none;
    border-radius: 999px;
}

/* تأخير shimmer أيضاً موجة */
.dsu-chip:nth-child(2)::after { animation-delay: .4s;  }
.dsu-chip:nth-child(3)::after { animation-delay: .8s;  }
.dsu-chip:nth-child(4)::after { animation-delay: 1.2s; }
.dsu-chip:nth-child(5)::after { animation-delay: 1.6s; }

/* الزر النشط — يتوقف عن التلميع لأنه مختلف بوضوح */
.dsu-chip.active {
    background: var(--dsu-primary);
    color: #fff;
    animation: none;
    transform: none;
    box-shadow:
        0 0 0 3px rgba(111,59,181,.50),
        0 6px 20px rgba(111,59,181,.30);
}
.dsu-chip.active::before { animation: none; background: rgba(255,255,255,.25); background-size: auto; }
.dsu-chip.active::after  { animation: none; opacity: 0; }

/* hover */
.dsu-chip:hover:not(.active) {
    transform: translateY(-2px) scale(1.06);
    animation: none;
    box-shadow:
        0 0 0 2.5px rgba(168,85,247,.65),
        0 8px 24px rgba(111,59,181,.28);
    color: var(--dsu-primary);
}
.dsu-chip:hover:not(.active)::after { animation: none; opacity: 0; }
.dsu-chip:hover:not(.active)::before { animation: none; }

/* موبايل — shimmer فقط بدون pulse عشان أداء أحسن */
@media (max-width: 600px) {
    .dsu-chip {
        padding: 8px 14px;
        font-size: 14px;
        animation: dsuChipGlow 3.5s ease-in-out infinite;
    }
    .dsu-chip::after { display: none; }
}


/* ══════════════════════════════════════════════════════
   TAB PANELS
══════════════════════════════════════════════════════ */
.dsu-tab-panel {
    display: none;
    margin-top: 12px;
    background: #fbf9fe;
    border: 1px solid var(--dsu-line);
    border-radius: 17px;
    padding: 12px;
    animation: dsuFadeUp .22s ease;
}
.dsu-tab-panel.active { display: block; }

.dsu-tab-panel ul {
    padding: 0 18px 0 0;
    margin: 6px 0 0;
    list-style: disc;
}
.dsu-tab-panel li {
    margin: 7px 0;
    font-size: 16px;
    color: #463c52;
    line-height: 1.85;
}

@keyframes dsuFadeUp {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════
   SUMMARY LIST
══════════════════════════════════════════════════════ */
.dsu-summary-list {
    display: grid;
    gap: 9px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.dsu-summary-list li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    background: #fbf9fe;
    border: 1px solid var(--dsu-line);
    border-radius: 15px;
    padding: 10px;
    font-size: 16px;
    color: #453b50;
    line-height: 1.8;
}
.dsu-tick {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--dsu-soft);
    color: var(--dsu-primary);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    font-weight: 900;
    font-size: 13px;
}

/* ══════════════════════════════════════════════════════
   DREAM TOOL — صندوق التفسير الذكي
══════════════════════════════════════════════════════ */
.dsu-dream-tool {
    background:
        radial-gradient(ellipse at top left, rgba(255,255,255,.18), transparent 40%),
        radial-gradient(ellipse at bottom right, rgba(160,100,255,.20), transparent 45%),
        linear-gradient(155deg, #251a3a 0%, #5530a0 55%, #7b47d3 100%);
    color: #fff;
    border-radius: 26px;
    padding: 20px 18px 22px;
    margin-top: 13px;
    box-shadow:
        0 22px 52px rgba(60,24,110,.36),
        inset 0 0 0 1px rgba(255,255,255,.12);
    overflow: visible;
    position: relative;
}
/* خط إضاءة علوي */
.dsu-dream-tool::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, transparent 40%);
    pointer-events: none;
}
.dsu-dream-tool .dsu-dt-title {
    font-size: 21px;
    margin: 0 0 6px;
    letter-spacing: -.4px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 14px rgba(180,130,255,.40);
}
.dsu-dream-tool > p {
    margin: 0 0 14px;
    color: rgba(238,229,255,.88);
    font-size: 15px;
    line-height: 1.75;
}
.dsu-dream-tool textarea {
    width: 100%;
    min-height: 110px;
    resize: none;
    border: 0;
    outline: 0;
    border-radius: 18px;
    padding: 14px 15px;
    background: rgba(255,255,255,.97);
    color: #2a1847;
    box-shadow:
        inset 0 0 0 1.5px rgba(200,160,255,.55),
        0 4px 18px rgba(0,0,0,.14);
    font-size: 17px;
    font-family: var(--font, Arial, Tahoma, sans-serif);
    font-weight: 700;
    transition: box-shadow .22s;
    direction: rtl;
    line-height: 1.8;
}
.dsu-dream-tool textarea::placeholder {
    color: #9a85b8;
    font-weight: 500;
}
.dsu-dream-tool textarea:focus {
    box-shadow:
        inset 0 0 0 2.5px rgba(160,100,255,.80),
        0 0 0 4px rgba(160,100,255,.14);
}

/* ── عداد الحروف ───────────────────────────────────── */
.dsu-char-counter {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 7px;
    opacity: 0;
    transition: opacity .22s;
}
.dsu-char-counter.dsu-counter-active,
.dsu-char-counter.dsu-counter-done {
    opacity: 1;
}
.dsu-char-bar-wrap {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,.18);
    border-radius: 99px;
    overflow: hidden;
}
.dsu-char-bar {
    height: 100%;
    width: 0%;
    border-radius: 99px;
    background: rgba(255,255,255,.35);
    transition: width .18s ease, background .25s;
}
.dsu-char-bar.dsu-bar-progress {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.dsu-char-bar.dsu-bar-done {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}
.dsu-char-text {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,.55);
    white-space: nowrap;
    letter-spacing: .01em;
    flex-shrink: 0;
    transition: color .25s;
    min-width: 90px;
    text-align: left;
    direction: rtl;
}
.dsu-counter-active .dsu-char-text {
    color: #fcd34d;
}
.dsu-counter-done .dsu-char-text {
    color: #86efac;
}
@media (max-width: 600px) {
    .dsu-char-text { font-size: 12px; min-width: 80px; }
}

.dsu-tool-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 10px 0;
}
/* ╔═══════════════════════════════════════════════════════
   SELECT — قائمة اختيار نظيفة بداخل الخلفية البنفسجية
   ══════════════════════════════════════════════════════╗ */
.dsu-dream-tool select {
    width: 100%;
    /* خلفية بيضاء حقيقية — النص دائماً مقروء بدون قصص */
    background: #fff;
    color: #2d1f4e;
    border: 2px solid rgba(255,255,255,.5);
    border-radius: 15px;
    padding: 11px 14px;
    outline: 0;
    font-family: var(--font, Arial, Tahoma, sans-serif);
    font-size: 16px;
    font-weight: 800;
    direction: rtl;
    text-align: right;
    cursor: pointer;
    /* نحتفظ بالسهم الافتراضي للمتصفح — يضمن compat كامل على الجوال */
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}
.dsu-dream-tool select:focus {
    border-color: #c3a0ff;
    box-shadow: 0 0 0 3px rgba(195,160,255,.25);
}
/* أوبشن القائمة */
.dsu-dream-tool select option {
    font-family: var(--font, Arial, Tahoma, sans-serif);
    font-weight: 800;
    font-size: 16px;
    color: #2d1f4e;
    background: #fff;
    padding: 8px 12px;
    direction: rtl;
}

.dsu-primary-btn {
    width: 100%;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f2e4ff 55%, #e5d0ff 100%);
    color: #4a1e8a;
    font-weight: 900;
    padding: 15px 12px;
    cursor: pointer;
    box-shadow:
        0 14px 30px rgba(80,30,150,.30),
        inset 0 1px 0 rgba(255,255,255,.80);
    font-size: 17px;
    font-family: var(--font, Arial, Tahoma, sans-serif);
    transition: transform .18s, box-shadow .18s;
    letter-spacing: .02em;
    margin-top: 16px;
}
.dsu-primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 38px rgba(80,30,150,.38), inset 0 1px 0 rgba(255,255,255,.80);
}
.dsu-primary-btn:active { transform: scale(.97); }

.dsu-result-box {
    display: none;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 20px;
    padding: 16px 15px;
    margin-top: 14px;
    font-size: 17px;
    color: #fff;
    line-height: 2;
    animation: dsuFadeUp .32s ease;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.dsu-result-box.show { display: block; }
.dsu-result-box.dsu-result-error {
    background: rgba(255,80,80,.12);
    border-color: rgba(255,120,120,.30);
}
.dsu-result-box a {
    display: inline-flex;
    margin-top: 10px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.22);
    padding: 8px 14px;
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    transition: background .16s;
}
.dsu-result-box a:hover { background: rgba(255,255,255,.24); }
.dsu-mini-note {
    font-size: 12px;
    color: var(--dsu-muted);
    margin-top: 10px;
    text-align: center;
}
.dsu-dream-tool .dsu-mini-note { color: rgba(203,185,245,.75); font-size: 13px; }

/* ══════════════════════════════════════════════════════
   LIMIT REACHED CARD — كارت الحد اليومي + زر فتح تفسير إضافي
══════════════════════════════════════════════════════ */
.dsu-limit-card {
    text-align: center;
    padding: 6px 4px 4px;
    line-height: 1.7;
    direction: rtl;
}
.dsu-limit-icon {
    font-size: 44px;
    line-height: 1;
    margin-bottom: 8px;
    animation: dsuFadeUp .35s ease;
}
.dsu-limit-title {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -.2px;
}
.dsu-limit-text {
    font-size: 14px;
    color: rgba(255,255,255,.85);
    margin: 0 0 14px;
    line-height: 1.9;
}
.dsu-limit-countdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    padding: 12px 14px;
    margin: 0 auto 12px;
    max-width: 320px;
}
.dsu-limit-countdown-label {
    font-size: 13px;
    color: rgba(255,255,255,.78);
}
.dsu-limit-countdown-value {
    font-size: 28px;
    font-weight: 900;
    color: #ffd866;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 12px rgba(255,200,80,.25);
}
.dsu-limit-divider {
    position: relative;
    text-align: center;
    margin: 14px 0 12px;
    color: rgba(255,255,255,.55);
    font-size: 12px;
}
.dsu-limit-divider::before,
.dsu-limit-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 38%;
    height: 1px;
    background: rgba(255,255,255,.18);
}
.dsu-limit-divider::before { right: 0; }
.dsu-limit-divider::after  { left: 0; }
.dsu-limit-divider span {
    display: inline-block;
    background: rgba(80,30,150,.0);
    padding: 0 12px;
    position: relative;
    z-index: 1;
}
.dsu-share-unlock-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 420px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #1877F2 0%, #2851a3 100%);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 15.5px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(24,119,242,.42), inset 0 1px 0 rgba(255,255,255,.18);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    letter-spacing: -.2px;
    line-height: 1.4;
    animation: dsuShareGlow 2.4s ease-in-out infinite;
}
.dsu-share-unlock-btn i {
    font-size: 18px;
    background: rgba(255,255,255,.15);
    padding: 6px 9px;
    border-radius: 50%;
}
.dsu-share-unlock-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(24,119,242,.55), inset 0 1px 0 rgba(255,255,255,.22);
    filter: brightness(1.08);
}
.dsu-share-unlock-btn:active:not(:disabled) { transform: scale(.97); }
.dsu-share-unlock-btn:disabled {
    opacity: .82;
    cursor: wait;
    animation: none;
}
.dsu-share-unlock-note {
    font-size: 12.5px;
    color: rgba(255,255,255,.72);
    margin: 10px 0 2px;
    line-height: 1.7;
}
.dsu-share-unlock-note a { color: #fff; text-decoration: underline; }

.dsu-limit-success {
    background: rgba(80,200,120,.10);
    border: 1px solid rgba(120,220,160,.30);
    border-radius: 16px;
    padding: 16px 12px;
}
.dsu-limit-success .dsu-limit-icon { color: #80f0a0; }

@keyframes dsuShareGlow {
    0%, 100% { box-shadow: 0 10px 26px rgba(24,119,242,.42), inset 0 1px 0 rgba(255,255,255,.18); }
    50%      { box-shadow: 0 14px 36px rgba(24,119,242,.70), inset 0 1px 0 rgba(255,255,255,.22); }
}

@media (max-width: 540px) {
    .dsu-limit-title { font-size: 16px; }
    .dsu-limit-text  { font-size: 13.5px; }
    .dsu-limit-countdown-value { font-size: 24px; }
    .dsu-share-unlock-btn { font-size: 14.5px; padding: 13px 14px; }
}

/* ══════════════════════════════════════════════════════
   DETAIL CARDS GRID — بطاقات التفاصيل بتلمع وتلفت النظر
══════════════════════════════════════════════════════ */

/* حركة الـ glow اللي بيتلون */
@keyframes dsuCardGlow {
    0%   { box-shadow: 0 0 0 2px rgba(111,59,181,.25), 0 4px 18px rgba(111,59,181,.12); }
    25%  { box-shadow: 0 0 0 2px rgba(168,85,247,.35), 0 4px 22px rgba(168,85,247,.20); }
    50%  { box-shadow: 0 0 0 2px rgba(236,72,153,.30), 0 4px 22px rgba(236,72,153,.16); }
    75%  { box-shadow: 0 0 0 2px rgba(99,102,241,.30), 0 4px 20px rgba(99,102,241,.16); }
    100% { box-shadow: 0 0 0 2px rgba(111,59,181,.25), 0 4px 18px rgba(111,59,181,.12); }
}

/* حركة الـ border gradient الدوّار */
@keyframes dsuBorderSpin {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* حركة shimmer — شريط لامع يمشي على البطاقة */
@keyframes dsuShimmer {
    0%   { transform: translateX(150%) skewX(-20deg); }
    100% { transform: translateX(-150%) skewX(-20deg); }
}

/* نبضة خفيفة لجذب الانتباه */
@keyframes dsuCardPulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.018); }
}

.dsu-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.dsu-detail-card {
    position: relative;
    border-radius: 18px;
    background: #fff;
    padding: 13px 12px;
    cursor: pointer;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-decoration: none;
    overflow: hidden;
    /* الـ border عبر pseudo-element يسمح بـ gradient */
    border: 2px solid transparent;
    background-clip: padding-box;
    /* glow متلون دوري */
    animation:
        dsuCardGlow  3s ease-in-out infinite,
        dsuCardPulse 4s ease-in-out infinite;
    transition: transform .18s ease, border-color .18s;
    /* gradient border effect via outline workaround */
    box-shadow:
        0 0 0 2px rgba(111,59,181,.22),
        0 6px 20px rgba(111,59,181,.10);
}

/* الخط الملوّن في أعلى البطاقة */
.dsu-detail-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        #a855f7, #ec4899, #6366f1, #8b5cf6, #a855f7);
    background-size: 300% 100%;
    animation: dsuBorderSpin 3s linear infinite;
    border-radius: 18px 18px 0 0;
    z-index: 2; /* فوق البطاقة */
    pointer-events: none;
}

/* شريط shimmer لامع يمشي على البطاقة */
.dsu-detail-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255,255,255,.55) 50%,
        transparent 70%
    );
    animation: dsuShimmer 2.8s ease-in-out infinite;
    pointer-events: none;
}

.dsu-detail-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 0 0 2.5px rgba(168,85,247,.6),
        0 10px 30px rgba(111,59,181,.25);
    animation: none;
    border-color: rgba(168,85,247,.4);
}
/* نوقف shimmer وborder-spin عند hover */
.dsu-detail-card:hover::after {
    animation: none;
    opacity: 0;
}
.dsu-detail-card:hover::before {
    animation: none;
    background-position: 0% 50%;
}

.dsu-detail-card.active {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 3px rgba(99,102,241,.7),
        0 12px 32px rgba(99,102,241,.25);
    animation: none;
}
.dsu-detail-card.active::before,
.dsu-detail-card.active::after {
    animation: none;
}

.dsu-detail-card b {
    font-size: 15px;
    color: var(--dsu-primary);
    font-weight: 800;
    display: block;
    position: relative; /* فوق shimmer */
    z-index: 1;
}

.dsu-detail-card span {
    font-size: 13px;
    color: var(--dsu-muted);
    line-height: 1.45;
    position: relative;
    z-index: 1;
}

/* سهم صغير يُشير للنقر */
.dsu-detail-card b::after {
    content: ' ←';
    font-size: 12px;
    color: #a855f7;
    opacity: 0;
    transition: opacity .2s, transform .2s;
    display: inline-block;
    transform: translateX(4px);
}
.dsu-detail-card:hover b::after {
    opacity: 1;
    transform: translateX(0);
}

/* موبايل — نقلل الـ animation عشان ما تأثر على الأداء */
@media (max-width: 600px) {
    .dsu-detail-card::after { display: none; } /* shimmer مكلف */
    .dsu-detail-card {
        animation: dsuCardGlow 4s ease-in-out infinite;
        padding: 12px 10px;
    }
}


/* ══════════════════════════════════════════════════════
   FULL ARTICLE BLOCKS — HTML المقال مع IDs
══════════════════════════════════════════════════════ */
.dsu-article-block {
    background: #fff;
    border: 1px solid var(--dsu-line);
    border-radius: var(--dsu-radius);
    padding: 14px;
    margin-top: 12px;
    box-shadow: var(--dsu-shadow);
    scroll-margin-top: 80px;
}
.dsu-article-block h2 {
    font-size: 18px !important;
    line-height: 1.5 !important;
    margin: 0 0 10px !important;
    letter-spacing: -.4px;
    color: #2f2343 !important;
    font-weight: 800 !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
}
.dsu-article-block ul {
    padding: 0 20px 0 0;
    margin: 0;
    list-style: disc;
}
.dsu-article-block li {
    font-size: 16px;
    color: #4a4055;
    margin: 9px 0;
    line-height: 1.9;
    transition: background .2s, padding .2s, border-color .2s;
    border-radius: 0;
}
/* هايلايت عند scroll من أزرار التفاصيل */
.dsu-article-block li.dsu-hl,
.dsu-article-block li:target {
    background: #f5efff;
    border-radius: 10px;
    padding: 8px 10px;
    margin-right: -10px;
    border-right: 3px solid var(--dsu-primary2);
}

/* ══════════════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════════════ */
.dsu-faq-item {
    border: 1px solid var(--dsu-line);
    border-radius: 16px;
    background: #fff;
    margin-top: 8px;
    overflow: hidden;
}
.dsu-faq-q {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 0;
    padding: 12px 13px;
    cursor: pointer;
    font-weight: 800;
    color: #2f2441;
    text-align: right;
    font-size: 16px;
    font-family: inherit;
    line-height: 1.5;
}
.dsu-faq-q .dsu-arr {
    color: var(--dsu-primary);
    transition: transform .2s;
    flex-shrink: 0;
    font-size: 14px;
}
.dsu-faq-item.open .dsu-faq-q .dsu-arr { transform: rotate(180deg); }

.dsu-faq-a {
    display: none;
    padding: 0 13px 13px;
    color: var(--dsu-muted);
    font-size: 16px;
    line-height: 1.85;
}
.dsu-faq-item.open .dsu-faq-a { display: block; }

/* ══════════════════════════════════════════════════════
   FEEDBACK
══════════════════════════════════════════════════════ */
.dsu-feedback {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}
.dsu-feedback button {
    border: 1.5px solid var(--dsu-line);
    background: #fff;
    border-radius: 16px;
    padding: 11px;
    cursor: pointer;
    font-weight: 800;
    color: var(--dsu-ink);
    font-size: 16px;
    font-family: inherit;
    transition: border-color .15s, color .15s, background .15s;
}
.dsu-feedback button:hover {
    border-color: var(--dsu-primary);
    color: var(--dsu-primary);
}
.dsu-feedback .dsu-fb-yes {
    border-color: #ccebd5;
    background: var(--dsu-good);
    color: var(--dsu-good-text);
}

/* ══════════════════════════════════════════════════════
   RELATED ARTICLES
══════════════════════════════════════════════════════ */
.dsu-related-list { display: grid; gap: 8px; }
.dsu-related-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--dsu-line);
    background: #fff;
    border-radius: 16px;
    padding: 9px;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
    color: inherit;
}
.dsu-related-item:hover {
    border-color: var(--dsu-primary2);
    box-shadow: 0 4px 14px rgba(111,59,181,.08);
}
.dsu-thumb {
    width: 58px;
    height: 48px;
    border-radius: 13px;
    background: linear-gradient(135deg, #e7d7f7, #ffffff);
    display: grid;
    place-items: center;
    font-size: 22px;
    flex: 0 0 auto;
    overflow: hidden;
}
.dsu-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dsu-related-item b {
    font-size: 15px;
    display: block;
    color: var(--dsu-ink);
    margin-bottom: 2px;
    line-height: 1.4;
}
.dsu-related-item small {
    color: var(--dsu-muted);
    font-size: 13px;
}

/* ══════════════════════════════════════════════════════
   STICKY CTA
══════════════════════════════════════════════════════ */
.dsu-sticky-cta {
    position: sticky;
    bottom: 10px;
    z-index: 40;
    display: flex;
    gap: 8px;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--dsu-line);
    border-radius: 20px;
    padding: 8px;
    box-shadow: 0 18px 40px rgba(42,22,68,.20);
    margin-top: 14px;
}
.dsu-cta-main,
.dsu-cta-sec {
    flex: 1;
    border: 0;
    border-radius: 15px;
    padding: 10px 8px;
    font-weight: 900;
    cursor: pointer;
    text-align: center;
    font-size: 15px;
    font-family: inherit;
    text-decoration: none;
    display: block;
    transition: opacity .15s;
}
.dsu-cta-main {
    background: var(--dsu-primary);
    color: #fff !important;
}
.dsu-cta-main:hover { opacity: .92; }
.dsu-cta-sec {
    background: #f3edf9;
    color: var(--dsu-primary);
}
.dsu-cta-sec:hover { background: #ece3f7; }

/* ══════════════════════════════════════════════════════
   ARTICLE BLOCK — تكبير نص المقال (مناسب لكل الشاشات)
══════════════════════════════════════════════════════ */
/* نص قوائم المقال الرئيسية */
.dsu-article-block li {
    font-size: 16px;
    line-height: 1.95;
}
/* نص تاب panels */
.dsu-tab-panel li {
    font-size: 16px;
    line-height: 1.9;
}
/* خلاصة سريعة */
.dsu-quick-answer {
    font-size: 16px;
    line-height: 1.85;
}
/* قائمة الملخص */
.dsu-summary-list li {
    font-size: 16px;
    line-height: 1.85;
}

/* ══════════════════════════════════════════════════════
   COMMENTS INSIDE DSU — تكبير التعليقات في صفحات الأحلام
   نستخدم .dsu-wrap scope حتى لا نؤثر على باقي الموقع
══════════════════════════════════════════════════════ */
.dsu-wrap .cf-body {
    font-size: 16px;
    line-height: 1.95;
}
.dsu-wrap .cf-author-name {
    font-size: 16px;
}
.dsu-wrap .cf-reply-thread .cf-body {
    font-size: 15px;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — على موبايل يكون أكثر تناسبًا
══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .dsu-details-grid { grid-template-columns: 1fr 1fr; }
    .dsu-dream-tool .dsu-dt-title { font-size: 22px; }       /* كان 19px + 3 */
    .dsu-tool-grid { grid-template-columns: 1fr; }
    .dsu-article-block h2 { font-size: 21px !important; } /* كان 18px + 3 */

    /* ── نص المقال على الموبايل (+3px) ── */
    .dsu-article-block li    { font-size: 20px; line-height: 2.1; }  /* كان 17px */
    .dsu-tab-panel li        { font-size: 20px; line-height: 2.1; }  /* كان 17px */
    .dsu-quick-answer        { font-size: 20px; line-height: 2.0; }  /* كان 17px */
    .dsu-summary-list li     { font-size: 20px; line-height: 2.0; }  /* كان 17px */
    .dsu-section-title       { font-size: 20px; }                    /* كان 17px */

    /* ── التعليقات على الموبايل (+3px) ── */
    .dsu-wrap .cf-body                  { font-size: 19px !important; line-height: 2.0 !important; }  /* كان 16px */
    .dsu-wrap .cf-author-name           { font-size: 18px !important; }                               /* كان 15px */
    .dsu-wrap .cf-reply-thread .cf-body { font-size: 18px !important; line-height: 1.95 !important; } /* كان 15px */
}



@media (min-width: 900px) {
    .dsu-details-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ══════════════════════════════════════════════════════
   FEATURED IMAGE — بعد الخلاصة، lazy loaded
══════════════════════════════════════════════════════ */
.dsu-feat-img {
    margin: 13px 0 0;
    border-radius: var(--dsu-radius);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #e8deef;
    box-shadow: var(--dsu-shadow);
    position: relative;
    display: block;
}
.dsu-feat-img-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dsu-feat-img-cap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(36,27,50,.55);
    color: #fff;
    font-size: 12px;
    padding: 5px 10px;
    text-align: center;
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════
   PILL PICKER — أزرار الجنس والحالة الاجتماعية
══════════════════════════════════════════════════════ */
.dsu-picker-label {
    font-size: 14px;
    font-weight: 800;
    color: rgba(255,255,255,.70);
    margin: 18px 0 9px;
    letter-spacing: .04em;
    text-transform: none;
}

.dsu-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .30s ease, transform .30s ease;
}

#dsuGenderRow {
    opacity: 1;
    transform: none;
}

.dsu-pill-row.dsu-row-visible {
    opacity: 1;
    transform: none;
}

.dsu-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.90);
    font-size: 15px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: background .20s, border-color .20s, transform .16s, box-shadow .20s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    letter-spacing: .01em;
    /* حجم touch target مناسب للموبايل */
    min-height: 44px;
}

.dsu-pill:hover {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.50);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.20);
}

.dsu-pill:active {
    transform: scale(.94);
    box-shadow: none;
}

.dsu-pill.active {
    background: #ffffff;
    border-color: #ffffff;
    color: #4a1e8a;
    box-shadow:
        0 6px 22px rgba(111,59,181,.40),
        inset 0 1px 0 rgba(255,255,255,.90);
    transform: translateY(-2px);
    font-weight: 900;
}

/* ══════════════════════════════════════════════════════
   FIELD ROW — خانة الاسم + سؤال الأمان
══════════════════════════════════════════════════════ */
.dsu-field-row {
    margin-top: 14px;
}

.dsu-security-row {
    margin-top: 18px;
}

.dsu-field-label {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: rgba(255, 255, 255, .78);
    margin-bottom: 8px;
    letter-spacing: .03em;
}

.dsu-text-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, .10);
    border: 2px solid rgba(255, 255, 255, .22);
    border-radius: 15px;
    padding: 13px 16px;
    color: #fff;
    font-size: 16px;
    font-family: inherit;
    font-weight: 600;
    outline: none;
    transition: border-color .20s, background .20s, box-shadow .20s;
    /* touch target جيد */
    min-height: 48px;
    -webkit-appearance: none;
}

.dsu-text-input::placeholder {
    color: rgba(255, 255, 255, .38);
    font-weight: 400;
}

.dsu-text-input:focus {
    border-color: rgba(255, 255, 255, .65);
    background: rgba(255, 255, 255, .16);
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, .10),
        inset 0 1px 0 rgba(255,255,255,.14);
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE MOBILE — تكبير شامل على الجوال
══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .dsu-dream-tool {
        padding: 18px 15px 20px;
        border-radius: 22px;
    }
    .dsu-dream-tool .dsu-dt-title { font-size: 19px; }
    .dsu-dream-tool > p { font-size: 15px; }
    .dsu-dream-tool textarea {
        font-size: 16px;
        min-height: 100px;
        padding: 13px 14px;
    }
    .dsu-pill {
        font-size: 15px;
        padding: 11px 18px;
        min-height: 46px;
    }
    .dsu-picker-label { font-size: 14px; }
    .dsu-text-input {
        font-size: 16px;
        padding: 13px 15px;
        min-height: 50px;
    }
    .dsu-field-label { font-size: 14px; }
    .dsu-primary-btn {
        font-size: 17px;
        padding: 15px 12px;
    }
    .dsu-result-box { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════
   MOBILE SPACING — تقليل الحواف الجانبية على الجوال
   يُعوّض padding الكونتينر الخارجي جزئيًا
   لا يُغيّر أي قيمة Desktop
══════════════════════════════════════════════════════ */
@media (max-width: 600px) {

    /* تعويض padding الكونتينر الخارجي جزئيًا — بدون edge-to-edge كامل */
    .dsu-wrap {
        margin-inline: -8px;
        width: calc(100% + 16px);
        box-sizing: border-box;
        overflow-x: hidden; /* يمنع horizontal scroll */
    }

    /* الكروت البيضاء */
    .dsu-card {
        padding: 10px 9px;
        border-radius: 16px; /* نُصغّر border-radius على الجوال قليلًا */
    }

    /* صندوق أداة الذكاء الاصطناعي */
    .dsu-dream-tool {
        padding: 14px 10px 16px;
    }

    /* الإجابة المختصرة */
    .dsu-quick-answer {
        padding: 10px 11px;
    }

    /* محتوى التابات */
    .dsu-tab-panel {
        padding: 9px 8px;
    }

    /* قائمة ul داخل التاب — padding يمين أقل */
    .dsu-tab-panel ul {
        padding: 0 12px 0 0;
        margin-top: 6px;
    }

    /* عناصر قائمة الخلاصة */
    .dsu-summary-list li {
        padding: 8px;
    }

    /* المسافة الرأسية بين الكروت */
    .dsu-card,
    .dsu-dream-tool,
    .dsu-quick-answer {
        margin-top: 10px;
    }

    /* محتوى المقال — block لكل قسم */
    .dsu-article-block {
        padding: 10px 12px;
        margin-top: 10px;
    }
    .dsu-article-block ul {
        padding: 0 12px 0 0;
    }
}

/* ── روابط <a> — تأثيرات حركية لكل الأقسام ── */
@keyframes dsu-link-glow {
    0%,100% { text-shadow: 0 0 6px rgba(143,93,232,.0); }
    50%      { text-shadow: 0 0 14px rgba(143,93,232,.65), 0 0 4px rgba(212,180,74,.3); }
}

.dsu-tab-panel li a,
.dsu-faq-a a,
.dsu-article-block a {
    color: var(--dsu-primary2);
    font-weight: 800;
    text-decoration: none;
    background-image: linear-gradient(#d4b44a, #d4b44a);
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: right bottom;
    padding-bottom: 1px;
    transition: background-size .35s ease, color .22s, transform .18s;
    display: inline;
}
.dsu-tab-panel li a:hover,
.dsu-faq-a a:hover,
.dsu-article-block a:hover {
    color: #d4b44a;
    background-size: 100% 2px;
    background-position: left bottom;
    transform: translateY(-1px);
    animation: dsu-link-glow 1.2s ease infinite;
}