/* ========================================
   ثيم رمضان كريم - Ramadan Theme
   تصميم احترافي أنيق متناسق
   ======================================== */

:root {
    --rm-gold: #d4a843;
    --rm-gold-light: #f5e6b8;
    --rm-dark: #1a1a3e;
    --rm-purple: #2d1b69;
}

/* ===== تهنئة مدمجة تحت التحية ===== */
.seasonal-inline-greeting {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 20px;
    border-radius: 30px;
    background: linear-gradient(135deg, #f3eaff 0%, #ede4f7 50%, #e8ecff 100%);
    color: #4a3580;
    font-size: 0.85rem;
    font-weight: 600;
    direction: rtl;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(102,126,234,0.1);
    border: 1px solid rgba(102,126,234,0.08);
    animation: sigFadeIn 0.5s ease-out;
}
@keyframes sigFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.seasonal-inline-greeting .sig-icon {
    font-size: 0.9rem;
    animation: sigIconPulse 3s ease-in-out infinite;
}
@keyframes sigIconPulse {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
.seasonal-inline-greeting .sig-text {
    letter-spacing: 0.2px;
}
.seasonal-inline-greeting::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 70%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    animation: sigShimmer 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes sigShimmer {
    0% { left: -70%; }
    100% { left: 120%; }
}

/* ===== خلفية مُزخرفة خلف الشعار ===== */
.theme-ramadan .company-logo-wrapper {
    position: relative;
    z-index: 1;
}
.theme-ramadan .company-logo-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30,20,80,0.1) 0%, rgba(22,36,71,0.05) 50%, transparent 70%);
    border: 2px solid rgba(212,168,67,0.1);
    z-index: -1;
    animation: logoBgPulse 5s ease-in-out infinite;
}
.theme-ramadan .company-logo-wrapper::after {
    content: '☪';
    position: absolute;
    top: -8px;
    right: calc(50% - 82px);
    font-size: 1rem;
    color: var(--rm-gold);
    opacity: 0.55;
    z-index: 3;
    filter: drop-shadow(0 0 4px rgba(212,168,67,0.3));
    animation: crescentFloat 4s ease-in-out infinite;
}
@keyframes logoBgPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(212,168,67,0), 0 0 25px rgba(30,20,80,0.04); }
    50% { box-shadow: 0 0 0 5px rgba(212,168,67,0.05), 0 0 35px rgba(30,20,80,0.06); }
}
@keyframes crescentFloat {
    0%,100% { transform: translateY(0) rotate(0deg); opacity: 0.45; }
    50% { transform: translateY(-4px) rotate(8deg); opacity: 0.75; }
}
.theme-ramadan .company-logo { position: relative; }
.theme-ramadan .company-logo::before {
    content: '✦'; position: absolute; top: 5px; left: -12px;
    font-size: 0.55rem; color: var(--rm-gold); opacity: 0;
    animation: miniStar 3s ease-in-out 0.5s infinite;
}
.theme-ramadan .company-logo::after {
    content: '✧'; position: absolute; bottom: 8px; right: -10px;
    font-size: 0.5rem; color: var(--rm-gold); opacity: 0;
    animation: miniStar 3s ease-in-out 1.5s infinite;
}
@keyframes miniStar {
    0%,100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

/* ===== رذاذ النجوم - 16 نجمة كبيرة واضحة ===== */
.seasonal-decorations {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}
.ramadan-star {
    position: absolute;
    color: var(--rm-gold);
    opacity: 0;
    animation: twinkle 4s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(212,168,67,0.7));
}
.ramadan-star:nth-child(1)  { top: 2%;  right: 3%;  font-size: 22px; animation-delay: 0s; }
.ramadan-star:nth-child(2)  { top: 8%;  right: 16%; font-size: 16px; animation-delay: 0.6s; }
.ramadan-star:nth-child(3)  { top: 1%;  right: 32%; font-size: 20px; animation-delay: 1.3s; }
.ramadan-star:nth-child(4)  { top: 5%;  right: 50%; font-size: 26px; animation-delay: 2s; }
.ramadan-star:nth-child(5)  { top: 3%;  right: 66%; font-size: 18px; animation-delay: 0.3s; }
.ramadan-star:nth-child(6)  { top: 9%;  right: 80%; font-size: 14px; animation-delay: 1s; }
.ramadan-star:nth-child(7)  { top: 14%; right: 94%; font-size: 20px; animation-delay: 2.6s; }
.ramadan-star:nth-child(8)  { top: 12%; right: 8%;  font-size: 15px; animation-delay: 1.5s; }
.ramadan-star:nth-child(9)  { top: 22%; right: 25%; font-size: 14px; animation-delay: 3s; }
.ramadan-star:nth-child(10) { top: 19%; right: 42%; font-size: 18px; animation-delay: 0.5s; }
.ramadan-star:nth-child(11) { top: 26%; right: 58%; font-size: 24px; animation-delay: 2.2s; }
.ramadan-star:nth-child(12) { top: 24%; right: 74%; font-size: 16px; animation-delay: 1.1s; }
.ramadan-star:nth-child(13) { top: 34%; right: 6%;  font-size: 18px; animation-delay: 3.3s; }
.ramadan-star:nth-child(14) { top: 30%; right: 36%; font-size: 14px; animation-delay: 0.8s; }
.ramadan-star:nth-child(15) { top: 40%; right: 52%; font-size: 22px; animation-delay: 1.8s; }
.ramadan-star:nth-child(16) { top: 38%; right: 86%; font-size: 16px; animation-delay: 1.4s; }
@keyframes twinkle {
    0%,100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 0.85; transform: scale(1.2); }
}

/* ===== أهلّة عائمة - 4 أهلّة كبيرة ===== */
.ramadan-crescent-float {
    position: absolute;
    color: var(--rm-gold);
    opacity: 0;
    animation: crescentDrift 6s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(212,168,67,0.6));
}
.ramadan-crescent-float:nth-child(17) { top: 4%;  right: 5%;  font-size: 32px; animation-delay: 0s; }
.ramadan-crescent-float:nth-child(18) { top: 16%; right: 88%; font-size: 26px; animation-delay: 1.8s; }
.ramadan-crescent-float:nth-child(19) { top: 30%; right: 48%; font-size: 22px; animation-delay: 3.5s; }
.ramadan-crescent-float:nth-child(20) { top: 42%; right: 18%; font-size: 28px; animation-delay: 0.8s; }
@keyframes crescentDrift {
    0%,100% { opacity: 0; transform: translateY(0) rotate(-10deg) scale(0.6); }
    50% { opacity: 0.7; transform: translateY(-10px) rotate(12deg) scale(1.1); }
}

/* ===== تأثيرات على الكروت ===== */
.theme-ramadan .card {
    border-top: 2px solid rgba(212,168,67,0.12);
    transition: border-color 0.3s;
}
.theme-ramadan .card:hover {
    border-top-color: rgba(212,168,67,0.25);
}

/* ===== شدة خفيفة ===== */
.theme-ramadan.intensity-light .seasonal-decorations { display: none; }
.theme-ramadan.intensity-light .company-logo-wrapper::after { display: none; }
.theme-ramadan.intensity-light .company-logo::before,
.theme-ramadan.intensity-light .company-logo::after { display: none; }

/* ===== شدة كاملة ===== */
.theme-ramadan.intensity-full .company-logo-wrapper::before {
    width: 190px; height: 190px;
    border-width: 3px;
    border-color: rgba(212,168,67,0.18);
}
.theme-ramadan.intensity-full .ramadan-star { filter: drop-shadow(0 0 12px rgba(212,168,67,0.8)); }
.theme-ramadan.intensity-full .ramadan-crescent-float { filter: drop-shadow(0 0 18px rgba(212,168,67,0.7)); }
.theme-ramadan.intensity-full .card { border-top-width: 3px; }

/* ===== ريسبونسف ===== */
@media (max-width: 768px) {
    .seasonal-inline-greeting { font-size: 0.78rem; padding: 6px 16px; gap: 4px; }
    .seasonal-inline-greeting .sig-icon { font-size: 0.8rem; }
    .theme-ramadan .company-logo-wrapper::before { width: 130px; height: 130px; }
    .theme-ramadan .company-logo-wrapper::after { right: calc(50% - 62px); font-size: 0.8rem; }
    .ramadan-star { font-size: 12px !important; }
    .ramadan-crescent-float { font-size: 18px !important; }
}