/* ============================================================
   home-v10.css — Refonte fluide & immersive (premium spirituel)
   Palette : crème / doré / brun doux. Mobile-first.
   ============================================================ */

:root {
    --v10-cream: #faf6ec;
    --v10-cream-2: #f3ecd8;
    --v10-gold: #c9a24a;
    --v10-gold-d: #9c7a2c;
    --v10-gold-l: #e6cf8a;
    --v10-brown: #4a3a1f;
    --v10-brown-2: #6b5530;
    --v10-ink: #2a2418;
    --v10-muted: #7a6a4f;
    --v10-line: rgba(156, 122, 44, 0.18);
    --v10-line-2: rgba(156, 122, 44, 0.32);
    --v10-bg: #fbf7ed;
    --v10-card: #ffffff;
    --v10-mourn: #5e6b76;
    --v10-joy: #a07a30;
    --v10-spec: #7a5d2d;

    --v10-radius: 18px;
    --v10-radius-l: 26px;
    --v10-shadow: 0 4px 24px rgba(70, 50, 15, 0.06), 0 1px 2px rgba(70, 50, 15, 0.04);
    --v10-shadow-lg: 0 10px 40px rgba(70, 50, 15, 0.10);
    --v10-pad-x: 20px;
    --v10-gap: 18px;
    --v10-gap-lg: 32px;
    --v10-trans: 220ms cubic-bezier(.2, .7, .3, 1);
}

/* Reset & base */
.home-v10 {
    background: var(--v10-bg);
    color: var(--v10-ink);
    font-feature-settings: "ss01", "kern";
    line-height: 1.55;
    padding: 0 0 60px;
}

.home-v10 * {
    box-sizing: border-box;
}

.home-v10 ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.home-v10 a {
    color: inherit;
    text-decoration: none;
}

.v10-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--v10-pad-x);
}

/* Reveal */
.home-v10>section {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 600ms ease, transform 600ms ease;
}

.home-v10>section.v10-in {
    opacity: 1;
    transform: none;
}

.home-v10>.v10-hero {
    opacity: 1;
    transform: none;
}

/* Section heads */
.v10-section-head {
    margin-bottom: 22px;
}

.v10-section-head h2 {
    margin: 0 0 4px;
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    font-size: clamp(22px, 3.2vw, 28px);
    font-weight: 600;
    color: var(--v10-brown);
    letter-spacing: -0.01em;
}

.v10-section-sub {
    margin: 0;
    color: var(--v10-muted);
    font-size: 14px;
}

.v10-section-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.v10-period-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: linear-gradient(135deg, var(--v10-gold-l), var(--v10-gold));
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ════════════════════════════════════════════════════
   1. AURORA HERO
   ════════════════════════════════════════════════════ */
.v10-hero {
    position: relative;
    padding: 60px 0 42px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(230, 207, 138, 0.55) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(201, 162, 74, 0.32) 0%, transparent 60%),
        linear-gradient(180deg, #fbf3dc 0%, #faf6ec 90%);
}

.v10-hero-aurora {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 80%;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 220, 140, 0.55), transparent 65%);
    filter: blur(40px);
    opacity: 0.7;
    pointer-events: none;
    animation: v10-glow 12s ease-in-out infinite alternate;
}

@keyframes v10-glow {
    0% {
        opacity: 0.45;
        transform: translateY(0);
    }

    100% {
        opacity: 0.85;
        transform: translateY(-10px);
    }
}

.v10-hero-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 12% 20%, rgba(201, 162, 74, 0.4), transparent),
        radial-gradient(1.5px 1.5px at 78% 35%, rgba(201, 162, 74, 0.3), transparent),
        radial-gradient(1.5px 1.5px at 38% 70%, rgba(201, 162, 74, 0.35), transparent),
        radial-gradient(1px 1px at 88% 75%, rgba(201, 162, 74, 0.25), transparent);
    opacity: 0.6;
}

.v10-hero-greeting {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.v10-hero-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #fff8e1, #f5e2a3);
    color: var(--v10-gold-d);
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(201, 162, 74, 0.25);
}

.v10-hero-salam {
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(28px, 5vw, 42px);
    font-weight: 500;
    color: var(--v10-brown);
    letter-spacing: -0.015em;
    line-height: 1.1;
}

.v10-hero-salam em {
    font-style: italic;
    color: var(--v10-gold-d);
    font-weight: 500;
}

.v10-comma {
    color: var(--v10-gold-d);
    margin-right: 6px;
}

.v10-hero-now {
    margin: 8px 0 4px;
    font-size: 17px;
    color: var(--v10-brown-2);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.v10-now-time {
    font-size: 22px;
    color: var(--v10-brown);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.v10-now-sep {
    color: var(--v10-gold);
}

.v10-now-current {
    font-weight: 600;
    color: var(--v10-gold-d);
}

.v10-now-state {
    color: var(--v10-muted);
    font-size: 14px;
}

.v10-hero-next {
    margin: 6px 0 0;
    font-size: 15px;
    color: var(--v10-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.v10-arrow {
    color: var(--v10-gold);
    font-weight: 700;
}

.v10-next-name {
    font-weight: 600;
    color: var(--v10-brown-2);
}

.v10-next-dur {
    color: var(--v10-brown);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Bismillah card embedded in hero */
.v10-bismillah-card {
    margin-top: 32px;
    padding: 28px 24px;
    background: linear-gradient(135deg, #fffaee 0%, #fbf2d6 100%);
    border: 1px solid var(--v10-line);
    border-radius: var(--v10-radius-l);
    box-shadow: var(--v10-shadow);
    text-align: center;
    position: relative;
}

.v10-bismillah-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--v10-radius-l);
    padding: 1px;
    background: linear-gradient(135deg, transparent, var(--v10-gold-l), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.v10-bismillah {
    margin: 0 0 18px;
    font-family: 'Amiri Quran', 'Scheherazade New', serif;
    font-size: clamp(28px, 4.5vw, 38px);
    color: var(--v10-brown);
    line-height: 1.4;
    font-weight: 400;
}

.v10-ayat {
    border-top: 1px solid var(--v10-line);
    padding-top: 18px;
}

.v10-ayat-ar {
    margin: 0 0 10px;
    font-family: 'Amiri Quran', serif;
    font-size: clamp(20px, 3.2vw, 26px);
    color: var(--v10-brown-2);
    line-height: 1.7;
}

.v10-ayat-tr {
    margin: 0 0 8px;
    font-style: italic;
    color: var(--v10-brown-2);
    font-size: 15px;
    max-width: 640px;
    margin-inline: auto;
}

.v10-ayat-src {
    margin: 0;
    font-size: 12px;
    color: var(--v10-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ════════════════════════════════════════════════════
   2. JOURNEY (date + badge)
   ════════════════════════════════════════════════════ */
.v10-journey {
    padding: 28px 0 8px;
}

.v10-journey-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.v10-journey-line {
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    line-height: 1.4;
    min-width: 0;
}

.v10-journey-hijri {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(18px, 2.4vw, 22px);
    color: var(--v10-brown);
    font-weight: 600;
}

.v10-journey-sep {
    color: var(--v10-gold);
    font-weight: 700;
}

.v10-journey-greg {
    color: var(--v10-muted);
    font-size: 14px;
    letter-spacing: 0.02em;
}

.v10-journey-msg {
    font-style: italic;
    color: var(--v10-brown-2);
    font-size: 14px;
}

.v10-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--v10-line-2);
    font-size: 13px;
    font-weight: 600;
    color: var(--v10-brown);
    box-shadow: 0 2px 8px rgba(70, 50, 15, 0.04);
}

.v10-badge-mourning {
    background: #f0f2f5;
    color: var(--v10-mourn);
    border-color: rgba(94, 107, 118, 0.25);
}

.v10-badge-celebration {
    background: linear-gradient(135deg, #fff4d6, #f5deaa);
    color: var(--v10-gold-d);
    border-color: var(--v10-gold-l);
}

.v10-badge-special {
    background: linear-gradient(135deg, #fff8e8, #f5e9c0);
    color: var(--v10-spec);
    border-color: var(--v10-gold-l);
}

/* ════════════════════════════════════════════════════
   3. KEY AMAL
   ════════════════════════════════════════════════════ */
.v10-amal {
    padding: 28px 0;
}

.v10-amal-card {
    position: relative;
    padding: 28px 28px 24px;
    background: linear-gradient(135deg, #fffaee 0%, #faecc1 100%);
    border-radius: var(--v10-radius-l);
    border: 1px solid var(--v10-gold-l);
    box-shadow: var(--v10-shadow-lg);
    overflow: hidden;
}

.v10-amal-card::after {
    content: '';
    position: absolute;
    right: -40px;
    top: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 110, 0.4), transparent 70%);
    pointer-events: none;
}

.v10-amal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(156, 122, 44, 0.12);
    color: var(--v10-gold-d);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.v10-amal-title {
    margin: 0 0 8px;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(22px, 3.6vw, 30px);
    color: var(--v10-brown);
    font-weight: 600;
    line-height: 1.25;
}

.v10-amal-why {
    margin: 0 0 20px;
    color: var(--v10-brown-2);
    font-size: 15px;
    font-style: italic;
}

.v10-amal-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--v10-brown);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    transition: transform var(--v10-trans), background var(--v10-trans);
}

.v10-amal-cta:hover {
    background: var(--v10-gold-d);
    transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════
   4. PROGRAM
   ════════════════════════════════════════════════════ */
.v10-program {
    padding: 32px 0;
}

.v10-program-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--v10-gap);
}

.v10-prog-block {
    background: var(--v10-card);
    border: 1px solid var(--v10-line);
    border-radius: var(--v10-radius);
    padding: 20px;
    box-shadow: var(--v10-shadow);
    transition: transform var(--v10-trans), box-shadow var(--v10-trans);
}

.v10-prog-block:hover {
    transform: translateY(-2px);
    box-shadow: var(--v10-shadow-lg);
}

.v10-prog-block header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--v10-line);
}

.v10-prog-block h3 {
    margin: 0;
    font-size: 14px;
    color: var(--v10-brown);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.v10-prog-icon {
    color: var(--v10-gold-d);
    display: grid;
    place-items: center;
}

.v10-prog-block ul li {
    padding: 8px 0;
    font-size: 14px;
    color: var(--v10-brown-2);
    border-bottom: 1px solid rgba(156, 122, 44, 0.06);
}

.v10-prog-block ul li:last-child {
    border-bottom: none;
}

.v10-prog-block ul li strong {
    color: var(--v10-brown);
}

/* ════════════════════════════════════════════════════
   5. ACTIONS DAY
   ════════════════════════════════════════════════════ */
.v10-actions-day {
    padding: 8px 0 32px;
}

.v10-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.v10-action-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #fffaee 0%, #f7ecd0 100%);
    border: 1px solid var(--v10-line);
    border-radius: var(--v10-radius);
    transition: transform var(--v10-trans), box-shadow var(--v10-trans);
}

.v10-action-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--v10-shadow);
}

.v10-action-ic {
    color: var(--v10-gold-d);
    margin-bottom: 6px;
}

.v10-action-t {
    font-size: 15px;
    font-weight: 600;
    color: var(--v10-brown);
}

.v10-action-s {
    font-size: 13px;
    color: var(--v10-muted);
}

/* ════════════════════════════════════════════════════
   6. GUIDANCE
   ════════════════════════════════════════════════════ */
.v10-guidance {
    padding: 32px 0;
}

.v10-guidance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--v10-gap);
}

.v10-guide-card {
    background: var(--v10-card);
    border: 1px solid var(--v10-line);
    border-radius: var(--v10-radius);
    padding: 24px;
    box-shadow: var(--v10-shadow);
    position: relative;
}

.v10-guide-dua {
    background: linear-gradient(180deg, #fffaee 0%, #fff 100%);
}

.v10-guide-wisdom {
    background: linear-gradient(180deg, #faf3e3 0%, #fff 100%);
}

.v10-guide-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--v10-gold-l);
    color: var(--v10-brown);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.v10-guide-title {
    margin: 0 0 6px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--v10-brown);
}

.v10-guide-sub {
    margin: 0 0 18px;
    color: var(--v10-muted);
    font-style: italic;
}

.v10-guide-ar {
    margin: 0 0 10px;
    font-family: 'Amiri Quran', serif;
    font-size: 22px;
    color: var(--v10-brown);
    line-height: 1.7;
}

.v10-guide-tr {
    margin: 0 0 6px;
    color: var(--v10-brown-2);
    font-style: italic;
    font-size: 15px;
}

.v10-guide-src {
    margin: 0 0 16px;
    font-size: 12px;
    color: var(--v10-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.v10-guide-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.v10-btn-primary,
.v10-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--v10-trans);
}

.v10-btn-primary {
    background: var(--v10-brown);
    color: #fff;
}

.v10-btn-primary:hover {
    background: var(--v10-gold-d);
}

.v10-btn-ghost {
    background: transparent;
    color: var(--v10-brown-2);
    border-color: var(--v10-line-2);
}

.v10-btn-ghost:hover {
    background: rgba(156, 122, 44, 0.08);
}

/* ════════════════════════════════════════════════════
   7. QUICK CHIPS
   ════════════════════════════════════════════════════ */
.v10-quick {
    padding: 16px 0 32px;
}

.v10-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.v10-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--v10-line-2);
    font-size: 14px;
    font-weight: 500;
    color: var(--v10-brown);
    transition: all var(--v10-trans);
}

.v10-chip:hover {
    background: var(--v10-gold-l);
    color: var(--v10-brown);
    border-color: var(--v10-gold);
    transform: translateY(-1px);
}

.v10-chip-ic {
    color: var(--v10-gold-d);
    display: grid;
    place-items: center;
}

/* ════════════════════════════════════════════════════
   8. LISTEN
   ════════════════════════════════════════════════════ */
.v10-listen {
    padding: 32px 0;
}

.v10-listen-feature {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px;
    background: linear-gradient(135deg, #2a2418 0%, #4a3a1f 100%);
    color: #f5e9c4;
    border-radius: var(--v10-radius-l);
    margin-bottom: 22px;
    box-shadow: var(--v10-shadow-lg);
    position: relative;
    overflow: hidden;
}

@media (min-width: 720px) {
    .v10-listen-feature {
        grid-template-columns: 1.5fr 1fr;
        align-items: center;
    }
}

.v10-listen-feature::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 50%, rgba(230, 207, 138, 0.18), transparent 60%);
    pointer-events: none;
}

.v10-listen-feature-text {
    position: relative;
    z-index: 1;
}

.v10-listen-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(230, 207, 138, 0.18);
    color: var(--v10-gold-l);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.v10-listen-feature h3 {
    margin: 0 0 8px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 600;
    color: #fff;
}

.v10-listen-feature p {
    margin: 0 0 20px;
    color: #d8c89a;
    font-style: italic;
}

.v10-listen-feature .v10-btn-primary {
    background: var(--v10-gold);
    color: var(--v10-ink);
}

.v10-listen-feature .v10-btn-primary:hover {
    background: var(--v10-gold-l);
}

.v10-listen-feature-art {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
}

.v10-wave {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 60px;
}

.v10-wave i {
    display: block;
    width: 4px;
    background: var(--v10-gold-l);
    border-radius: 2px;
    animation: v10-wave 1.4s ease-in-out infinite;
}

.v10-wave i:nth-child(1) {
    height: 18px;
    animation-delay: -1.4s;
}

.v10-wave i:nth-child(2) {
    height: 32px;
    animation-delay: -1.2s;
}

.v10-wave i:nth-child(3) {
    height: 50px;
    animation-delay: -1.0s;
}

.v10-wave i:nth-child(4) {
    height: 60px;
    animation-delay: -0.8s;
}

.v10-wave i:nth-child(5) {
    height: 50px;
    animation-delay: -0.6s;
}

.v10-wave i:nth-child(6) {
    height: 32px;
    animation-delay: -0.4s;
}

.v10-wave i:nth-child(7) {
    height: 18px;
    animation-delay: -0.2s;
}

@keyframes v10-wave {

    0%,
    100% {
        transform: scaleY(0.3);
        opacity: 0.4;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

.v10-listen-rail {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 4px 4px 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--v10-gold-l) transparent;
}

.v10-listen-rail::-webkit-scrollbar {
    height: 6px;
}

.v10-listen-rail::-webkit-scrollbar-thumb {
    background: var(--v10-gold-l);
    border-radius: 3px;
}

.v10-listen-card {
    flex: 0 0 220px;
    scroll-snap-align: start;
    padding: 18px;
    background: var(--v10-card);
    border: 1px solid var(--v10-line);
    border-radius: var(--v10-radius);
    transition: all var(--v10-trans);
}

.v10-listen-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--v10-shadow);
    border-color: var(--v10-gold-l);
}

.v10-listen-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--v10-gold-l);
    color: var(--v10-brown);
    display: grid;
    place-items: center;
    margin-bottom: 12px;
}

.v10-listen-card h4 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--v10-brown);
}

.v10-listen-card p {
    margin: 0;
    font-size: 13px;
    color: var(--v10-muted);
}

/* ════════════════════════════════════════════════════
   9. NEEDS
   ════════════════════════════════════════════════════ */
.v10-needs {
    padding: 32px 0;
}

.v10-needs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.v10-need-tile {
    padding: 20px;
    background: var(--v10-card);
    border: 1px solid var(--v10-line);
    border-radius: var(--v10-radius);
    transition: all var(--v10-trans);
    position: relative;
    overflow: hidden;
}

.v10-need-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--v10-shadow);
    border-color: var(--v10-gold-l);
}

.v10-need-emoji {
    font-size: 28px;
    display: block;
    margin-bottom: 10px;
}

.v10-need-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--v10-brown);
}

.v10-need-emo {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--v10-muted);
    font-style: italic;
}

.v10-need-dua {
    margin: 0;
    font-size: 13px;
    color: var(--v10-gold-d);
    font-weight: 600;
}

/* ════════════════════════════════════════════════════
   10. RECOS
   ════════════════════════════════════════════════════ */
.v10-recos {
    padding: 32px 0;
}

.v10-recos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.v10-reco-card {
    position: relative;
    padding: 22px 18px 20px;
    background: linear-gradient(180deg, #fff 0%, #fbf5e3 100%);
    border: 1px solid var(--v10-line);
    border-radius: var(--v10-radius);
    transition: all var(--v10-trans);
}

.v10-reco-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--v10-shadow-lg);
    border-color: var(--v10-gold-l);
}

.v10-reco-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--v10-gold-l);
    color: var(--v10-brown);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.v10-reco-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff8e1, #f5deaa);
    color: var(--v10-gold-d);
    display: grid;
    place-items: center;
    margin-bottom: 14px;
}

.v10-reco-card h3 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--v10-brown);
}

.v10-reco-card p {
    margin: 0;
    font-size: 13px;
    color: var(--v10-muted);
}

/* ════════════════════════════════════════════════════
   11. JOURNEY-XP + EVENTS
   ════════════════════════════════════════════════════ */
.v10-bottom {
    padding: 32px 0 0;
}

.v10-bottom-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--v10-gap);
}

@media (min-width: 820px) {
    .v10-bottom-grid {
        grid-template-columns: 1fr 1.2fr;
    }
}

.v10-xp,
.v10-events {
    background: var(--v10-card);
    border: 1px solid var(--v10-line);
    border-radius: var(--v10-radius);
    padding: 22px;
    box-shadow: var(--v10-shadow);
}

.v10-xp-head,
.v10-events-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.v10-xp-icon,
.v10-events-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff8e1, #f5deaa);
    color: var(--v10-gold-d);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.v10-xp-head h3,
.v10-events-head h3 {
    margin: 0;
    font-size: 16px;
    color: var(--v10-brown);
    font-weight: 600;
}

.v10-xp-sub,
.v10-events-sub {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--v10-muted);
}

.v10-xp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.v10-xp-stat {
    text-align: center;
    padding: 14px 8px;
    background: #faf3e3;
    border-radius: 12px;
}

.v10-xp-num {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--v10-gold-d);
    line-height: 1;
}

.v10-xp-lbl {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--v10-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.v10-xp-bar {
    height: 8px;
    background: var(--v10-cream-2);
    border-radius: 4px;
    overflow: hidden;
}

.v10-xp-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--v10-gold-l), var(--v10-gold));
    border-radius: 4px;
    transition: width 800ms ease;
}

.v10-events-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.v10-event {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: #faf6ec;
    border-radius: 12px;
    border-left: 3px solid var(--v10-gold);
}

.v10-event-mourning {
    border-left-color: var(--v10-mourn);
    background: #f1f3f6;
}

.v10-event-celebration {
    border-left-color: var(--v10-joy);
    background: #fff8e8;
}

.v10-event-special {
    border-left-color: var(--v10-spec);
    background: #fbf3dc;
}

.v10-event-ic {
    color: var(--v10-gold-d);
    margin-top: 2px;
    flex-shrink: 0;
}

.v10-event-mourning .v10-event-ic {
    color: var(--v10-mourn);
}

.v10-event-body {
    flex: 1;
    min-width: 0;
}

.v10-event-title {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--v10-brown);
}

.v10-event-meta {
    margin: 0;
    font-size: 12px;
    color: var(--v10-muted);
}

.v10-event-in {
    color: var(--v10-gold-d);
    font-weight: 600;
}

.v10-event-empty {
    padding: 20px;
    text-align: center;
    color: var(--v10-muted);
    font-style: italic;
}

/* ════════════════════════════════════════════════════
   RTL support
   ════════════════════════════════════════════════════ */
[dir="rtl"] .home-v10 .v10-arrow,
[dir="rtl"] .home-v10 .v10-amal-cta svg {
    transform: scaleX(-1);
}

/* ════════════════════════════════════════════════════
   Mood overrides
   ════════════════════════════════════════════════════ */
.home-v10[data-mood="mourning"] {
    --v10-bg: #f5f3ee;
    --v10-gold: #8a7a5a;
    --v10-gold-d: #5e6b76;
}

.home-v10[data-mood="mourning"] .v10-hero {
    background:
        radial-gradient(ellipse at 30% 0%, rgba(150, 150, 160, 0.2) 0%, transparent 60%),
        linear-gradient(180deg, #f0eee8 0%, #f5f3ee 90%);
}

/* ════════════════════════════════════════════════════
   Responsive fine-tuning
   ════════════════════════════════════════════════════ */
@media (max-width: 540px) {
    .v10-hero {
        padding: 40px 0 32px;
    }

    .v10-bismillah-card {
        padding: 22px 18px;
        margin-top: 24px;
    }

    .v10-hero-greeting {
        gap: 10px;
    }

    .v10-hero-icon {
        width: 40px;
        height: 40px;
    }

    .v10-program-grid {
        gap: 12px;
    }

    .v10-action-tile {
        padding: 14px 16px;
    }

    .v10-amal-card {
        padding: 22px 20px;
    }

    .v10-listen-feature {
        padding: 22px 20px;
    }
}/* ============================================================
   Hero clock cards — élégance ivoire & or
   Ajouté: Apr 27 — restaure les cartes du bloc prière du hero
   ============================================================ */

.v10-hero-clock {
  margin-top: 1.4rem;
  padding: 1.6rem 1.8rem 1.4rem;
  background: linear-gradient(160deg, rgba(255,251,242,0.85) 0%, rgba(248,237,217,0.65) 100%);
  border: 1px solid rgba(212,165,116,0.28);
  border-radius: 22px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 18px 38px -22px rgba(120, 80, 30, 0.22),
    0 4px 12px -6px rgba(120, 80, 30, 0.10);
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
}

/* Date row — Gregorian · Hijri */
.v10-hero-clock-dates {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.55rem;
  font-size: 0.95rem;
  color: #8a6a3a;
  margin-bottom: 0.35rem;
  letter-spacing: 0.01em;
}
.v10-hero-clock-greg { font-weight: 500; }
.v10-hero-clock-hijri {
  font-family: 'Mirza', 'Amiri', serif;
  font-size: 1.1rem;
  color: #a07a3e;
  direction: rtl;
}
.v10-hero-clock-dot { color: rgba(212,165,116,0.6); }

/* Big live clock */
.v10-hero-clock-now {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
}
.v10-hero-clock-now-label {
  font-size: 1.05rem;
  color: #6b5230;
  font-weight: 400;
}
.v10-hero-clock-now-time {
  font-family: 'Cormorant Garamond', 'Inter', serif;
  font-size: 2.3rem;
  font-weight: 600;
  color: #8b6322;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}

/* Two-card grid */
.v10-hero-clock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}

.v10-hero-clock-card {
  position: relative;
  padding: 1rem 1.15rem;
  background: linear-gradient(155deg, rgba(255,253,247,0.95), rgba(252,243,224,0.78));
  border: 1px solid rgba(212,165,116,0.32);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.85) inset,
    0 8px 20px -14px rgba(120, 80, 30, 0.25);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.v10-hero-clock-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212,165,116,0.5);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.85) inset,
    0 14px 26px -14px rgba(120, 80, 30, 0.30);
}

/* Current prayer accent (warm gold) */
.v10-hero-clock-card-current {
  background: linear-gradient(155deg, rgba(255,247,228,0.96), rgba(248,225,184,0.78));
  border-color: rgba(196,142,68,0.42);
}
.v10-hero-clock-card-current::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(196,142,68,0.18) inset;
}

/* Next prayer accent (cool ivory) */
.v10-hero-clock-card-next {
  background: linear-gradient(155deg, rgba(255,253,247,0.95), rgba(245,238,224,0.78));
}

.v10-hero-clock-card-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
}
.v10-hero-clock-icon {
  font-size: 1.25rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(212,165,116,0.28);
  border-radius: 50%;
  box-shadow: 0 2px 6px -3px rgba(120,80,30,0.25);
}
.v10-hero-clock-card-titles {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.v10-hero-clock-card-prayer {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: #6b4a18;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.v10-hero-clock-card-state {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  width: fit-content;
}
.v10-state-now {
  color: #8b5a14;
  background: rgba(212,165,116,0.22);
  border: 1px solid rgba(212,165,116,0.4);
}
.v10-state-next {
  color: #6b5230;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(212,165,116,0.28);
}

.v10-hero-clock-card-meta {
  font-size: 0.85rem;
  color: #8a6a3a;
  margin-bottom: 0.35rem;
  font-weight: 400;
}
.v10-hero-clock-card-time {
  font-family: 'Cormorant Garamond', 'Inter', serif;
  font-size: 1.7rem;
  font-weight: 600;
  color: #7a5418;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Today's events chips */
.v10-hero-clock-events {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(212,165,116,0.35);
}
.v10-hero-clock-events-label {
  font-size: 0.85rem;
  color: #6b5230;
  font-weight: 500;
}
.v10-hero-clock-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: #6b4a18;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(212,165,116,0.35);
  border-radius: 999px;
  box-shadow: 0 2px 5px -3px rgba(120,80,30,0.2);
  transition: transform .2s ease, background .2s ease;
}
.v10-hero-clock-chip:hover {
  transform: translateY(-1px);
  background: rgba(255,250,238,0.95);
}
.v10-hero-clock-chip-birth { background: rgba(232,245,232,0.85); border-color: rgba(110,170,110,0.35); color: #2f6b2f; }
.v10-hero-clock-chip-martyrdom { background: rgba(245,232,232,0.85); border-color: rgba(180,90,90,0.35); color: #803333; }
.v10-hero-clock-chip-eid,
.v10-hero-clock-chip-celebration { background: rgba(255,247,228,0.95); border-color: rgba(212,165,116,0.5); color: #8b5a14; }

/* Dark theme */
[data-theme="dark"] .v10-hero-clock {
  background: linear-gradient(160deg, rgba(26,31,56,0.85), rgba(18,22,42,0.65));
  border-color: rgba(212,165,116,0.25);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 18px 38px -22px rgba(0,0,0,0.55);
}
[data-theme="dark"] .v10-hero-clock-dates,
[data-theme="dark"] .v10-hero-clock-now-label,
[data-theme="dark"] .v10-hero-clock-card-meta,
[data-theme="dark"] .v10-hero-clock-events-label { color: #c8b790; }
[data-theme="dark"] .v10-hero-clock-hijri { color: #d4a574; }
[data-theme="dark"] .v10-hero-clock-now-time,
[data-theme="dark"] .v10-hero-clock-card-prayer,
[data-theme="dark"] .v10-hero-clock-card-time { color: #e8d4a8; text-shadow: none; }
[data-theme="dark"] .v10-hero-clock-card {
  background: linear-gradient(155deg, rgba(36,42,72,0.85), rgba(26,31,56,0.7));
  border-color: rgba(212,165,116,0.22);
}
[data-theme="dark"] .v10-hero-clock-card-current {
  background: linear-gradient(155deg, rgba(58,46,28,0.7), rgba(40,32,22,0.7));
  border-color: rgba(212,165,116,0.4);
}
[data-theme="dark"] .v10-hero-clock-icon {
  background: rgba(255,255,255,0.06);
  border-color: rgba(212,165,116,0.25);
}
[data-theme="dark"] .v10-hero-clock-chip {
  background: rgba(255,255,255,0.05);
  border-color: rgba(212,165,116,0.22);
  color: #d4c294;
}

/* Mobile */
@media (max-width: 640px) {
  .v10-hero-clock { padding: 1.2rem 1rem; border-radius: 18px; }
  .v10-hero-clock-now-time { font-size: 1.9rem; }
  .v10-hero-clock-card-time { font-size: 1.4rem; }
  .v10-hero-clock-card-prayer { font-size: 1.2rem; }
}

/* RTL */
[dir="rtl"] .v10-hero-clock-card-state { letter-spacing: 0; }
/* ============================================================
   Hero clock — extension symétrie & richesse
   - header split (date | location)
   - timeline 5 prières
   - 3-col grid (current / next / progress)
   - wisdom footer
   ============================================================ */

/* Header split row */
.v10-hero-clock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.v10-hero-clock-loc {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(212,165,116,0.32);
  border-radius: 999px;
  color: #6b5230;
  box-shadow: 0 2px 6px -3px rgba(120,80,30,0.18);
}
.v10-hero-clock-loc-pin { font-size: 0.9rem; }
.v10-hero-clock-loc-city { font-weight: 600; color: #6b4a18; }
.v10-hero-clock-loc-country { color: #9c7e4e; font-size: 0.8rem; }

/* Prayer timeline */
.v10-hero-clock-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin: 1rem 0 1.1rem;
  padding: 0.55rem;
  background: rgba(255,253,247,0.55);
  border: 1px dashed rgba(212,165,116,0.32);
  border-radius: 14px;
}
.v10-pt-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  padding: 0.55rem 0.4rem;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
  text-align: center;
}
.v10-pt-pill:hover {
  background: rgba(255,255,255,0.75);
  transform: translateY(-1px);
}
.v10-pt-icon { font-size: 1.15rem; line-height: 1; }
.v10-pt-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #6b5230;
  letter-spacing: 0.01em;
}
.v10-pt-time {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #8a6a3a;
  font-variant-numeric: tabular-nums;
}
.v10-pt-pill.is-current {
  background: linear-gradient(155deg, rgba(255,247,228,0.95), rgba(248,225,184,0.85));
  border-color: rgba(196,142,68,0.5);
  box-shadow: 0 6px 14px -8px rgba(196,142,68,0.45), 0 1px 0 rgba(255,255,255,0.85) inset;
}
.v10-pt-pill.is-current .v10-pt-name,
.v10-pt-pill.is-current .v10-pt-time { color: #7a4a10; }
.v10-pt-pill.is-next {
  background: rgba(255,255,255,0.7);
  border-color: rgba(212,165,116,0.32);
}

/* 3-col responsive grid */
.v10-hero-clock-grid.v10-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Day progress card */
.v10-hero-clock-card-progress {
  background: linear-gradient(155deg, rgba(252,247,236,0.95), rgba(243,232,208,0.78));
}
.v10-state-progress {
  color: #6b4a18;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(212,165,116,0.32);
}
.v10-pt-progress {
  position: relative;
  height: 8px;
  margin-top: 0.4rem;
  background: rgba(212,165,116,0.18);
  border-radius: 999px;
  overflow: hidden;
}
.v10-pt-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #d4a574 0%, #c48e44 100%);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(212,165,116,0.4);
  transition: width .6s ease;
}
.v10-hero-clock-card-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: #9c7e4e;
  font-variant-numeric: tabular-nums;
}

/* Wisdom footer */
.v10-hero-clock-wisdom {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 0.95rem;
  padding-top: 0.95rem;
  border-top: 1px dashed rgba(212,165,116,0.35);
}
.v10-hero-clock-wisdom-icon {
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #c48e44;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(212,165,116,0.32);
  border-radius: 50%;
}
.v10-hero-clock-wisdom-body { flex: 1; min-width: 0; }
.v10-hero-clock-wisdom-text {
  margin: 0 0 0.2rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.45;
  color: #6b4a18;
}
.v10-hero-clock-wisdom-author {
  margin: 0;
  font-size: 0.82rem;
  color: #9c7e4e;
  font-weight: 500;
}

/* Mobile */
@media (max-width: 640px) {
  .v10-hero-clock-timeline {
    grid-template-columns: repeat(5, 1fr);
    gap: 0.25rem;
    padding: 0.4rem;
  }
  .v10-pt-name { font-size: 0.7rem; }
  .v10-pt-time { font-size: 0.9rem; }
  .v10-pt-icon { font-size: 1rem; }
  .v10-hero-clock-loc-country { display: none; }
}

/* Dark theme */
[data-theme="dark"] .v10-hero-clock-loc {
  background: rgba(255,255,255,0.05);
  border-color: rgba(212,165,116,0.22);
  color: #c8b790;
}
[data-theme="dark"] .v10-hero-clock-loc-city { color: #e8d4a8; }
[data-theme="dark"] .v10-hero-clock-loc-country { color: #9c8a64; }
[data-theme="dark"] .v10-hero-clock-timeline {
  background: rgba(255,255,255,0.03);
  border-color: rgba(212,165,116,0.18);
}
[data-theme="dark"] .v10-pt-pill:hover { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .v10-pt-name { color: #c8b790; }
[data-theme="dark"] .v10-pt-time { color: #d4a574; }
[data-theme="dark"] .v10-pt-pill.is-current {
  background: linear-gradient(155deg, rgba(58,46,28,0.85), rgba(40,32,22,0.75));
  border-color: rgba(212,165,116,0.5);
}
[data-theme="dark"] .v10-pt-pill.is-current .v10-pt-name,
[data-theme="dark"] .v10-pt-pill.is-current .v10-pt-time { color: #f0d9a8; }
[data-theme="dark"] .v10-pt-progress { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .v10-hero-clock-card-foot { color: #9c8a64; }
[data-theme="dark"] .v10-hero-clock-wisdom-icon {
  background: rgba(255,255,255,0.05);
  border-color: rgba(212,165,116,0.22);
}
[data-theme="dark"] .v10-hero-clock-wisdom-text { color: #d4c294; }
[data-theme="dark"] .v10-hero-clock-wisdom-author { color: #9c8a64; }
/* ============================================================
   Hero clock — extension symétrie & richesse
   - header split (date | location)
   - timeline 5 prières
   - 3-col grid (current / next / progress)
   - wisdom footer
   ============================================================ */

/* Header split row */
.v10-hero-clock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.v10-hero-clock-loc {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(212,165,116,0.32);
  border-radius: 999px;
  color: #6b5230;
  box-shadow: 0 2px 6px -3px rgba(120,80,30,0.18);
}
.v10-hero-clock-loc-pin { font-size: 0.9rem; }
.v10-hero-clock-loc-city { font-weight: 600; color: #6b4a18; }
.v10-hero-clock-loc-country { color: #9c7e4e; font-size: 0.8rem; }

/* Prayer timeline */
.v10-hero-clock-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin: 1rem 0 1.1rem;
  padding: 0.55rem;
  background: rgba(255,253,247,0.55);
  border: 1px dashed rgba(212,165,116,0.32);
  border-radius: 14px;
}
.v10-pt-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  padding: 0.55rem 0.4rem;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
  text-align: center;
}
.v10-pt-pill:hover {
  background: rgba(255,255,255,0.75);
  transform: translateY(-1px);
}
.v10-pt-icon { font-size: 1.15rem; line-height: 1; }
.v10-pt-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #6b5230;
  letter-spacing: 0.01em;
}
.v10-pt-time {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #8a6a3a;
  font-variant-numeric: tabular-nums;
}
.v10-pt-pill.is-current {
  background: linear-gradient(155deg, rgba(255,247,228,0.95), rgba(248,225,184,0.85));
  border-color: rgba(196,142,68,0.5);
  box-shadow: 0 6px 14px -8px rgba(196,142,68,0.45), 0 1px 0 rgba(255,255,255,0.85) inset;
}
.v10-pt-pill.is-current .v10-pt-name,
.v10-pt-pill.is-current .v10-pt-time { color: #7a4a10; }
.v10-pt-pill.is-next {
  background: rgba(255,255,255,0.7);
  border-color: rgba(212,165,116,0.32);
}

/* 3-col responsive grid */
.v10-hero-clock-grid.v10-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Day progress card */
.v10-hero-clock-card-progress {
  background: linear-gradient(155deg, rgba(252,247,236,0.95), rgba(243,232,208,0.78));
}
.v10-state-progress {
  color: #6b4a18;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(212,165,116,0.32);
}
.v10-pt-progress {
  position: relative;
  height: 8px;
  margin-top: 0.4rem;
  background: rgba(212,165,116,0.18);
  border-radius: 999px;
  overflow: hidden;
}
.v10-pt-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #d4a574 0%, #c48e44 100%);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(212,165,116,0.4);
  transition: width .6s ease;
}
.v10-hero-clock-card-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: #9c7e4e;
  font-variant-numeric: tabular-nums;
}

/* Wisdom footer */
.v10-hero-clock-wisdom {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 0.95rem;
  padding-top: 0.95rem;
  border-top: 1px dashed rgba(212,165,116,0.35);
}
.v10-hero-clock-wisdom-icon {
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #c48e44;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(212,165,116,0.32);
  border-radius: 50%;
}
.v10-hero-clock-wisdom-body { flex: 1; min-width: 0; }
.v10-hero-clock-wisdom-text {
  margin: 0 0 0.2rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.45;
  color: #6b4a18;
}
.v10-hero-clock-wisdom-author {
  margin: 0;
  font-size: 0.82rem;
  color: #9c7e4e;
  font-weight: 500;
}

/* Mobile */
@media (max-width: 640px) {
  .v10-hero-clock-timeline {
    grid-template-columns: repeat(5, 1fr);
    gap: 0.25rem;
    padding: 0.4rem;
  }
  .v10-pt-name { font-size: 0.7rem; }
  .v10-pt-time { font-size: 0.9rem; }
  .v10-pt-icon { font-size: 1rem; }
  .v10-hero-clock-loc-country { display: none; }
}

/* Dark theme */
[data-theme="dark"] .v10-hero-clock-loc {
  background: rgba(255,255,255,0.05);
  border-color: rgba(212,165,116,0.22);
  color: #c8b790;
}
[data-theme="dark"] .v10-hero-clock-loc-city { color: #e8d4a8; }
[data-theme="dark"] .v10-hero-clock-loc-country { color: #9c8a64; }
[data-theme="dark"] .v10-hero-clock-timeline {
  background: rgba(255,255,255,0.03);
  border-color: rgba(212,165,116,0.18);
}
[data-theme="dark"] .v10-pt-pill:hover { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .v10-pt-name { color: #c8b790; }
[data-theme="dark"] .v10-pt-time { color: #d4a574; }
[data-theme="dark"] .v10-pt-pill.is-current {
  background: linear-gradient(155deg, rgba(58,46,28,0.85), rgba(40,32,22,0.75));
  border-color: rgba(212,165,116,0.5);
}
[data-theme="dark"] .v10-pt-pill.is-current .v10-pt-name,
[data-theme="dark"] .v10-pt-pill.is-current .v10-pt-time { color: #f0d9a8; }
[data-theme="dark"] .v10-pt-progress { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .v10-hero-clock-card-foot { color: #9c8a64; }
[data-theme="dark"] .v10-hero-clock-wisdom-icon {
  background: rgba(255,255,255,0.05);
  border-color: rgba(212,165,116,0.22);
}
[data-theme="dark"] .v10-hero-clock-wisdom-text { color: #d4c294; }
[data-theme="dark"] .v10-hero-clock-wisdom-author { color: #9c8a64; }

.v10-hero-clock-wisdom-ar {
  margin: 0 0 0.4rem;
  font-family: 'Amiri', serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #7a5418;
  text-align: right;
  direction: rtl;
}
[data-theme="dark"] .v10-hero-clock-wisdom-ar { color: #d4a574; }

.v10-hero-clock-wisdom-ar {
  margin: 0 0 0.4rem;
  font-family: 'Amiri', serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #7a5418;
  text-align: right;
  direction: rtl;
}
[data-theme="dark"] .v10-hero-clock-wisdom-ar { color: #d4a574; }

/* Islamic SVG icons inside hero clock — gold tint */
.v10-pt-icon,
.v10-hero-clock-icon{
  color:#c48e44;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
}
.v10-pt-icon svg,
.v10-hero-clock-icon svg{
  display:block;
  filter:drop-shadow(0 1px 0 rgba(196,142,68,.15));
}
.v10-pt-pill.is-current .v10-pt-icon{ color:#8a5a18; }
[data-theme="dark"] .v10-pt-icon,
[data-theme="dark"] .v10-hero-clock-icon{ color:#e6b566; }

/* ─── Events block — refined Islamic-style aesthetic ─── */
.v10-hero-clock-events{
  margin-top:18px;
  padding:18px 20px 16px;
  background:linear-gradient(180deg, rgba(255,250,238,.85) 0%, rgba(252,243,224,.6) 100%);
  border:1px solid rgba(196,142,68,.18);
  border-radius:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 4px 14px -8px rgba(122,84,24,.18);
}
.v10-hero-clock-events-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.v10-hero-clock-events-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px; height:28px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff5dc, #f3dcae);
  border:1px solid rgba(196,142,68,.35);
  color:#8a5a18;
  flex:none;
  box-shadow:0 1px 2px rgba(122,84,24,.18);
}
.v10-hero-clock-events-label{
  font-family:'Cormorant Garamond', serif;
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:.02em;
  color:#6b4a18;
}
.v10-hero-clock-events-rule{
  flex:1 1 auto;
  height:1px;
  background:linear-gradient(90deg, rgba(196,142,68,.35), rgba(196,142,68,0));
  margin-left:6px;
}
.v10-hero-clock-events-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
}
.v10-hero-clock-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 13px 7px 10px;
  border-radius:999px;
  background:#fffaf0;
  border:1px solid rgba(196,142,68,.28);
  font-family:'Inter', sans-serif;
  font-size:.86rem;
  font-weight:500;
  color:#5a3f14;
  line-height:1.2;
  box-shadow:0 1px 2px rgba(122,84,24,.08), 0 1px 0 rgba(255,255,255,.7) inset;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.v10-hero-clock-chip:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px -4px rgba(122,84,24,.22);
  border-color:rgba(196,142,68,.55);
}
.v10-hero-clock-chip-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px; height:20px;
  border-radius:50%;
  flex:none;
}
.v10-hero-clock-chip-icon svg{ display:block; }

/* Type variants — subtle colored accents */
.v10-hero-clock-chip-celebration{
  background:linear-gradient(180deg,#fff8e3,#fceec3);
  border-color:rgba(212,165,80,.45);
  color:#6b4a18;
}
.v10-hero-clock-chip-celebration .v10-hero-clock-chip-icon{
  background:rgba(212,165,80,.22); color:#a36a14;
}
.v10-hero-clock-chip-spiritual{
  background:linear-gradient(180deg,#f3f6ee,#e7eddb);
  border-color:rgba(120,140,80,.4);
  color:#3f4a25;
}
.v10-hero-clock-chip-spiritual .v10-hero-clock-chip-icon{
  background:rgba(120,140,80,.2); color:#5a6a30;
}
.v10-hero-clock-chip-mourning{
  background:linear-gradient(180deg,#f4ecec,#e8dada);
  border-color:rgba(120,70,70,.35);
  color:#4a2828;
}
.v10-hero-clock-chip-mourning .v10-hero-clock-chip-icon{
  background:rgba(120,70,70,.18); color:#7a3030;
}
.v10-hero-clock-chip-special{
  background:linear-gradient(180deg,#f0eef9,#e2dff0);
  border-color:rgba(110,95,160,.35);
  color:#352a55;
}
.v10-hero-clock-chip-special .v10-hero-clock-chip-icon{
  background:rgba(110,95,160,.18); color:#5a4a90;
}

/* Dark theme */
[data-theme="dark"] .v10-hero-clock-events{
  background:linear-gradient(180deg, rgba(40,30,15,.55) 0%, rgba(30,22,10,.4) 100%);
  border-color:rgba(212,165,80,.22);
}
[data-theme="dark"] .v10-hero-clock-events-label{ color:#e6cfa0; }
[data-theme="dark"] .v10-hero-clock-events-icon{
  background:radial-gradient(circle at 30% 30%, #4a3818, #2a1f0d);
  color:#e6b566;
  border-color:rgba(212,165,80,.4);
}
[data-theme="dark"] .v10-hero-clock-chip{
  background:rgba(50,38,18,.55);
  border-color:rgba(212,165,80,.28);
  color:#ecd9a8;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
[data-theme="dark"] .v10-hero-clock-chip-celebration{
  background:linear-gradient(180deg, rgba(80,55,20,.7), rgba(60,40,12,.6));
  color:#f0d68f;
}
[data-theme="dark"] .v10-hero-clock-chip-spiritual{
  background:linear-gradient(180deg, rgba(50,60,30,.7), rgba(35,42,20,.6));
  color:#cfd8b0;
}
[data-theme="dark"] .v10-hero-clock-chip-mourning{
  background:linear-gradient(180deg, rgba(70,40,40,.7), rgba(50,28,28,.6));
  color:#ddbcbc;
}
[data-theme="dark"] .v10-hero-clock-chip-special{
  background:linear-gradient(180deg, rgba(55,45,80,.7), rgba(40,32,60,.6));
  color:#cdc2ec;
}

/* RTL */
[dir="rtl"] .v10-hero-clock-events-rule{
  margin-left:0;
  margin-right:6px;
  background:linear-gradient(270deg, rgba(196,142,68,.35), rgba(196,142,68,0));
}

/* Mobile */
@media (max-width: 600px){
  .v10-hero-clock-events{ padding:14px 14px 12px; }
  .v10-hero-clock-chip{ font-size:.8rem; padding:6px 11px 6px 8px; }
}

/* ─── Events 2x2 grid layout for symmetry ─── */
.v10-hero-clock-events-chips.v10-events-grid-2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px 10px;
}
.v10-hero-clock-events-chips.v10-events-grid-2 .v10-hero-clock-chip{
  width:100%;
  min-width:0;
  justify-content:flex-start;
  padding:8px 14px 8px 10px;
}
.v10-hero-clock-events-chips.v10-events-grid-2 .v10-hero-clock-chip-text{
  flex:1 1 auto;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.v10-hero-clock-events-count{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 7px;
  border-radius:999px;
  background:rgba(196,142,68,.18);
  border:1px solid rgba(196,142,68,.35);
  color:#6b4a18;
  font-family:'Inter', sans-serif;
  font-size:.74rem;
  font-weight:600;
  line-height:1;
}
[dir="rtl"] .v10-hero-clock-events-count{ margin-left:0; margin-right:auto; }
.v10-hero-clock-chip-filler{ opacity:.85; font-style:italic; }
[data-theme="dark"] .v10-hero-clock-events-count{
  background:rgba(212,165,80,.22);
  border-color:rgba(212,165,80,.4);
  color:#e6cfa0;
}
@media (max-width: 540px){
  .v10-hero-clock-events-chips.v10-events-grid-2{ grid-template-columns:1fr; }
}

/* Historical event type */
.v10-hero-clock-chip-historical{
  background:linear-gradient(180deg,#f1ece4,#e3d9c8);
  border-color:rgba(150,115,70,.4);
  color:#4a3818;
}
.v10-hero-clock-chip-historical .v10-hero-clock-chip-icon{
  background:rgba(150,115,70,.2); color:#7a5418;
}
[data-theme="dark"] .v10-hero-clock-chip-historical{
  background:linear-gradient(180deg, rgba(70,55,30,.7), rgba(50,40,20,.6));
  color:#e0cea0;
}

/* ─── Fancy hero greeting — luxury Islamic ornament ─── */
.v10-greeting-fancy{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:18px 24px 20px;
  margin:0 auto 18px;
  max-width:920px;
  position:relative;
  background:
    radial-gradient(120% 200% at 50% 0%, rgba(255,235,190,.55) 0%, rgba(255,235,190,0) 60%),
    linear-gradient(180deg, rgba(255,250,238,.7), rgba(252,243,224,.55));
  border:1px solid rgba(196,142,68,.22);
  border-radius:22px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 18px 40px -28px rgba(122,84,24,.45),
    0 2px 6px -3px rgba(122,84,24,.15);
  overflow:hidden;
}
/* Subtle arabesque corner glow */
.v10-greeting-fancy::before,
.v10-greeting-fancy::after{
  content:"";
  position:absolute;
  width:160px; height:160px;
  border-radius:50%;
  pointer-events:none;
  filter:blur(28px);
  opacity:.55;
}
.v10-greeting-fancy::before{
  top:-80px; left:-50px;
  background:radial-gradient(circle, rgba(255,210,130,.55), rgba(255,210,130,0));
}
.v10-greeting-fancy::after{
  bottom:-80px; right:-50px;
  background:radial-gradient(circle, rgba(212,165,80,.45), rgba(212,165,80,0));
}

/* Flourish lines (left/right) */
.v10-greeting-flourish{
  flex:0 1 120px;
  color:rgba(196,142,68,.6);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.v10-greeting-flourish svg{ display:block; max-width:100%; }
.v10-greeting-flourish-l svg{ transform:scaleX(-1); }

/* Medallion (icon container) */
.v10-greeting-medallion{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px; height:56px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, #fff8df 0%, #f3dca7 55%, #d8b06a 100%);
  color:#7a4a14;
  box-shadow:
    0 2px 4px rgba(122,84,24,.25),
    0 1px 0 rgba(255,255,255,.8) inset,
    0 -2px 6px rgba(122,84,24,.18) inset;
  flex:none;
  z-index:1;
}
.v10-greeting-medallion svg{
  position:relative;
  z-index:2;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.5));
}
.v10-greeting-medallion-ring{
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1px dashed rgba(196,142,68,.55);
  animation:v10-greet-spin 26s linear infinite;
}
@keyframes v10-greet-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .v10-greeting-medallion-ring{ animation:none; }
}

/* Salam typography */
.v10-hero-salam{
  margin:0;
  display:inline-flex;
  align-items:baseline;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:clamp(1.35rem, 2.5vw, 1.9rem);
  line-height:1.25;
  color:#5a3f14;
  text-align:center;
}
.v10-salam-ar{
  font-family:'Amiri', 'Cormorant Garamond', serif;
  font-weight:700;
  font-size:1.15em;
  background:linear-gradient(180deg, #8a5a18 0%, #c48e44 60%, #8a5a18 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
  letter-spacing:.01em;
}
.v10-comma{
  display:inline-block;
  color:#c48e44;
  opacity:.85;
  font-size:1.4em;
  line-height:0;
  transform:translateY(-.1em);
}
.v10-salam-tod{
  font-style:italic;
  font-weight:500;
  background:linear-gradient(180deg, #8a6a3a 0%, #b08038 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  letter-spacing:.005em;
}

/* Dark theme */
[data-theme="dark"] .v10-greeting-fancy{
  background:
    radial-gradient(120% 200% at 50% 0%, rgba(80,55,20,.55) 0%, rgba(80,55,20,0) 60%),
    linear-gradient(180deg, rgba(40,30,15,.55), rgba(28,20,10,.5));
  border-color:rgba(212,165,80,.28);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 18px 40px -22px rgba(0,0,0,.6);
}
[data-theme="dark"] .v10-greeting-flourish{ color:rgba(212,165,80,.55); }
[data-theme="dark"] .v10-greeting-medallion{
  background:radial-gradient(circle at 35% 30%, #5a4218 0%, #3a2a10 65%, #281c0a 100%);
  color:#f0d68f;
  box-shadow:
    0 2px 6px rgba(0,0,0,.5),
    0 1px 0 rgba(255,225,155,.15) inset;
}
[data-theme="dark"] .v10-greeting-medallion-ring{ border-color:rgba(212,165,80,.35); }
[data-theme="dark"] .v10-hero-salam{ color:#ecd9a8; }
[data-theme="dark"] .v10-salam-ar{
  background:linear-gradient(180deg, #f0c878 0%, #fff0c8 60%, #f0c878 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
}
[data-theme="dark"] .v10-salam-tod{
  background:linear-gradient(180deg, #e6cfa0, #c9a868);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Mobile */
@media (max-width: 720px){
  .v10-greeting-flourish{ flex-basis:48px; }
}
@media (max-width: 520px){
  .v10-greeting-fancy{ padding:14px 16px 16px; gap:10px; border-radius:18px; }
  .v10-greeting-flourish{ display:none; }
  .v10-greeting-medallion{ width:46px; height:46px; }
  .v10-hero-salam{ font-size:clamp(1.15rem, 5vw, 1.45rem); gap:6px; }
}

/* ─── Slim greeting bar (override fancy) ─── */
.v10-greeting-fancy{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:6px 18px;
  margin:0 auto 14px;
  max-width:none;
  width:auto;
  background:transparent;
  border:none;
  border-radius:999px;
  box-shadow:none;
  overflow:visible;
}
.v10-greeting-fancy::before,
.v10-greeting-fancy::after{ display:none; }

/* Center the inline-flex pill in its parent */
.v10-container > .v10-greeting-fancy{
  display:flex;
}
.v10-greeting-fancy{
  margin-left:auto;
  margin-right:auto;
}

/* Thin gold rule using border-bottom */
.v10-greeting-fancy{
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,
    rgba(196,142,68,0) 0%,
    rgba(196,142,68,.45) 30%,
    rgba(196,142,68,.7) 50%,
    rgba(196,142,68,.45) 70%,
    rgba(196,142,68,0) 100%) 1;
  padding-bottom:10px;
}

/* Tiny flourishes */
.v10-greeting-flourish{ flex:0 0 auto; color:rgba(196,142,68,.6); }
.v10-greeting-flourish svg{ width:42px; height:12px; }
.v10-greeting-flourish-l svg{ transform:scaleX(-1); }

/* Tiny medallion → simple gold dot */
.v10-greeting-medallion{
  width:22px; height:22px;
  background:radial-gradient(circle at 35% 30%, #fff5dc 0%, #e3c283 60%, #b88a3c 100%);
  box-shadow:0 1px 2px rgba(122,84,24,.3), 0 0 0 1px rgba(196,142,68,.4);
}
.v10-greeting-medallion svg{ width:14px; height:14px; }
.v10-greeting-medallion-ring{ display:none; }

/* Salam — single inline line, smaller */
.v10-hero-salam{
  font-size:clamp(.95rem, 1.3vw, 1.15rem);
  font-weight:500;
  gap:8px;
  line-height:1.2;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.v10-salam-ar{ font-size:1.15em; }
.v10-comma{ font-size:1.1em; transform:none; opacity:.7; }
.v10-salam-tod{ font-size:1em; }

/* Mobile */
@media (max-width: 600px){
  .v10-greeting-flourish{ display:none; }
  .v10-greeting-fancy{ padding:4px 12px 8px; gap:8px; }
  .v10-hero-salam{ font-size:.92rem; gap:6px; flex-wrap:wrap; white-space:normal; justify-content:center; }
}

/* Dark mode adjustments */
[data-theme="dark"] .v10-greeting-fancy{
  background:transparent;
  border-image:linear-gradient(90deg,
    rgba(212,165,80,0) 0%,
    rgba(212,165,80,.4) 30%,
    rgba(212,165,80,.65) 50%,
    rgba(212,165,80,.4) 70%,
    rgba(212,165,80,0) 100%) 1;
  box-shadow:none;
}
[data-theme="dark"] .v10-greeting-medallion{
  background:radial-gradient(circle at 35% 30%, #f0d68f 0%, #a07a30 60%, #5a4218 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(212,165,80,.4);
}

/* Match Arabic salam size to French translation */
.v10-hero-salam .v10-salam-ar{
  font-size:1em;
  font-weight:600;
  letter-spacing:0;
}
@media (max-width: 600px){
  .v10-hero-salam .v10-salam-ar{ font-size:.95em; }
}

/* ─── Slim greeting v2 — pill attached under header ─── */
.v10-greeting-fancy{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:8px 22px;
  margin:-2px auto 18px;
  background:linear-gradient(180deg, #fffaf0 0%, #f5e8c8 100%);
  border:1px solid rgba(196,142,68,.35);
  border-top-color:rgba(196,142,68,.18);
  border-radius:0 0 18px 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 8px 18px -10px rgba(122,84,24,.35),
    0 2px 4px -2px rgba(122,84,24,.15);
  border-bottom-width:1px;
  border-image:none;
}
.v10-greeting-fancy::before,
.v10-greeting-fancy::after{ display:none; }

/* Container is normally a block — wrap greeting to allow centering */
.v10-container > .v10-greeting-fancy{
  display:flex !important;
  width:auto;
}
.v10-hero .v10-container{
  text-align:center;
}

/* Tiny ornament side flourishes */
.v10-greeting-flourish{
  flex:0 0 auto;
  color:rgba(196,142,68,.55);
}
.v10-greeting-flourish svg{ width:36px; height:10px; }
.v10-greeting-flourish-l svg{ transform:scaleX(-1); }

/* Mini medallion (gold dot) */
.v10-greeting-medallion{
  width:20px; height:20px;
  background:radial-gradient(circle at 35% 30%, #fff5dc 0%, #e3c283 60%, #b88a3c 100%);
  box-shadow:0 1px 2px rgba(122,84,24,.3), 0 0 0 1px rgba(196,142,68,.4);
  flex:none;
}
.v10-greeting-medallion svg{ width:12px; height:12px; }
.v10-greeting-medallion-ring{ display:none; }

/* Compact one-line text */
.v10-hero-salam{
  display:inline-flex !important;
  align-items:baseline;
  flex-wrap:nowrap;
  white-space:nowrap;
  gap:8px;
  margin:0;
  font-family:'Cormorant Garamond', serif;
  font-size:.92rem;
  line-height:1.25;
  color:#5a3f14;
}

/* Arabic — refined Amiri, smaller, elegant */
.v10-hero-salam .v10-salam-ar{
  font-family:'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', serif;
  font-size:1em;
  font-weight:400;
  letter-spacing:.005em;
  background:linear-gradient(180deg, #7a4a14 0%, #c48e44 55%, #7a4a14 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
  padding-bottom:1px;
}

.v10-comma{
  font-size:1.1em;
  color:#c48e44;
  opacity:.7;
  transform:none;
}

.v10-salam-tod{
  font-size:1em;
  font-style:italic;
  color:#7a5418;
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  -webkit-text-fill-color:#7a5418;
}

/* Small-screen tweaks */
@media (max-width: 760px){
  .v10-greeting-flourish{ display:none; }
  .v10-greeting-fancy{ padding:7px 16px; gap:8px; border-radius:0 0 14px 14px; }
  .v10-hero-salam{ flex-wrap:wrap; white-space:normal; justify-content:center; font-size:.85rem; }
}

/* Dark theme */
[data-theme="dark"] .v10-greeting-fancy{
  background:linear-gradient(180deg, #2a1f0d 0%, #1c1408 100%);
  border-color:rgba(212,165,80,.35);
  border-top-color:rgba(212,165,80,.18);
  box-shadow:
    0 1px 0 rgba(255,225,155,.08) inset,
    0 8px 18px -8px rgba(0,0,0,.6);
}
[data-theme="dark"] .v10-greeting-flourish{ color:rgba(212,165,80,.5); }
[data-theme="dark"] .v10-hero-salam{ color:#ecd9a8; }
[data-theme="dark"] .v10-salam-ar{
  background:linear-gradient(180deg, #f0c878 0%, #fff0c8 55%, #f0c878 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
[data-theme="dark"] .v10-salam-tod{
  color:#d4b878;
  -webkit-text-fill-color:#d4b878;
}
[data-theme="dark"] .v10-greeting-medallion{
  background:radial-gradient(circle at 35% 30%, #f0d68f 0%, #a07a30 60%, #5a4218 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(212,165,80,.4);
}

/* ─── Greeting v3 — small centered pill, no cut ─── */
.v10-hero{ overflow:visible !important; }
.v10-hero-aurora,
.v10-hero-stars{ overflow:hidden; }

.v10-hero .v10-container{
  text-align:center;
  overflow:visible;
  padding-top:0;
}

/* Make wrapper a flex container so pill centers as inline block */
.v10-container > .v10-greeting-fancy{
  display:inline-flex !important;
  width:auto;
  max-width:min(680px, 92%);
}

.v10-greeting-fancy{
  padding:6px 18px !important;
  gap:10px !important;
  margin:-1px auto 16px !important;
  border-radius:0 0 16px 16px !important;
}

/* Force ALL salam children to identical small size */
.v10-hero-salam,
.v10-hero-salam *{
  font-size:.88rem !important;
  line-height:1.4 !important;
}

.v10-hero-salam{
  display:inline-flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:8px !important;
  white-space:nowrap !important;
  margin:0 !important;
}

.v10-hero-salam .v10-salam-ar{
  font-family:'Amiri','Scheherazade New','Noto Naskh Arabic',serif !important;
  font-weight:400 !important;
  background:linear-gradient(180deg,#7a4a14 0%,#c48e44 55%,#7a4a14 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  letter-spacing:0 !important;
}

.v10-hero-salam .v10-comma{
  color:#c48e44 !important;
  opacity:.65 !important;
  -webkit-text-fill-color:#c48e44 !important;
}

.v10-hero-salam .v10-salam-tod{
  font-style:italic !important;
  color:#7a5418 !important;
  -webkit-text-fill-color:#7a5418 !important;
  background:none !important;
}

.v10-greeting-medallion{
  width:18px !important; height:18px !important;
  flex:none;
}
.v10-greeting-medallion svg{ width:11px !important; height:11px !important; }

.v10-greeting-flourish svg{ width:32px !important; height:9px !important; }

@media (max-width: 700px){
  .v10-greeting-flourish{ display:none !important; }
  .v10-hero-salam,
  .v10-hero-salam *{ font-size:.8rem !important; }
  .v10-hero-salam{ flex-wrap:wrap !important; white-space:normal !important; justify-content:center !important; }
  .v10-greeting-fancy{ max-width:96% !important; padding:6px 12px !important; }
}

[data-theme="dark"] .v10-hero-salam{ color:#ecd9a8; }
[data-theme="dark"] .v10-hero-salam .v10-salam-tod{
  color:#d4b878 !important;
  -webkit-text-fill-color:#d4b878 !important;
}
[data-theme="dark"] .v10-hero-salam .v10-salam-ar{
  background:linear-gradient(180deg,#f0c878 0%,#fff0c8 55%,#f0c878 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ─── Greeting v4 — actually fix Arabic size ─── */
/* Amiri font renders ~1.6x larger than serif at same px,
   so use absolute px values and explicit smaller size for Arabic */

.v10-greeting-fancy{
  padding:10px 22px !important;
  min-height:36px !important;
  align-items:center !important;
  overflow:visible !important;
}

/* Reset ALL salam children to one explicit pixel size */
.v10-hero-salam{
  font-size:13px !important;
  line-height:1.5 !important;
  display:inline-flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
  gap:8px !important;
  margin:0 !important;
}

.v10-hero-salam *{
  font-size:13px !important;
  line-height:1.5 !important;
}

/* Arabic must be visually equal to Latin — Amiri needs smaller px */
.v10-hero-salam .v10-salam-ar{
  font-family:'Amiri','Scheherazade New','Noto Naskh Arabic',serif !important;
  font-size:13px !important;
  font-weight:400 !important;
  line-height:1.5 !important;
  background:linear-gradient(180deg,#7a4a14 0%,#c48e44 55%,#7a4a14 100%);
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  letter-spacing:0 !important;
  display:inline-block !important;
  vertical-align:middle !important;
}

.v10-hero-salam .v10-comma{
  font-size:13px !important;
  color:#c48e44 !important;
  -webkit-text-fill-color:#c48e44 !important;
  opacity:.6 !important;
}

.v10-hero-salam .v10-salam-tod{
  font-size:13px !important;
  font-style:italic !important;
  color:#7a5418 !important;
  -webkit-text-fill-color:#7a5418 !important;
  background:none !important;
  font-family:'Cormorant Garamond',serif !important;
}

@media (max-width: 700px){
  .v10-hero-salam,
  .v10-hero-salam *{ font-size:12px !important; }
  .v10-hero-salam{ flex-wrap:wrap !important; white-space:normal !important; justify-content:center !important; }
}

[data-theme="dark"] .v10-hero-salam .v10-salam-ar{
  background:linear-gradient(180deg,#f0c878 0%,#fff0c8 55%,#f0c878 100%);
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
[data-theme="dark"] .v10-hero-salam .v10-salam-tod{
  color:#d4b878 !important;
  -webkit-text-fill-color:#d4b878 !important;
}

/* ─── Greeting v5 — clean solution ─── */
.v10-hero-greeting{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  margin-top:18px !important;
  margin-bottom:18px !important;
  padding:0 16px !important;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
}

.v10-greeting-fancy{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;

  max-width:720px !important;
  width:auto !important;

  padding:10px 18px !important;
  border-radius:18px !important;

  background:linear-gradient(180deg,#f5e6c8,#ead8b0) !important;
  border:1px solid rgba(180,140,60,.25) !important;
  border-image:none !important;
  box-shadow:0 8px 20px rgba(0,0,0,.06) !important;

  text-align:center !important;
  margin:0 !important;
  overflow:visible !important;
  min-height:0 !important;
}
.v10-greeting-fancy::before,
.v10-greeting-fancy::after{ display:none !important; }

.v10-hero-salam{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  margin:0 !important;
  flex-wrap:wrap !important;
  white-space:normal !important;
  line-height:1.4 !important;
  color:#5a3f14 !important;
}

.v10-hero-salam .v10-salam-ar{
  font-family:'Amiri','Scheherazade New',serif !important;
  font-size:clamp(14px,2.5vw,18px) !important;
  line-height:1.4 !important;
  direction:rtl !important;
  white-space:nowrap !important;
  font-weight:400 !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-fill-color:#5a3f14 !important;
  color:#5a3f14 !important;
  letter-spacing:0 !important;
}

.v10-hero-salam .v10-comma{
  opacity:.6 !important;
  color:#5a3f14 !important;
  -webkit-text-fill-color:#5a3f14 !important;
  font-size:1em !important;
  transform:none !important;
}

.v10-hero-salam .v10-salam-tod{
  font-family:'Cormorant Garamond',serif !important;
  font-size:clamp(13px,2vw,16px) !important;
  font-style:italic !important;
  opacity:.85 !important;
  color:#5a3f14 !important;
  -webkit-text-fill-color:#5a3f14 !important;
  background:none !important;
}

.v10-greeting-flourish{
  opacity:.6 !important;
  color:rgba(180,140,60,.7) !important;
}
.v10-greeting-flourish svg{ width:36px !important; height:10px !important; }

.v10-greeting-medallion{
  width:auto !important;
  height:auto !important;
  background:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  color:rgba(180,140,60,.85) !important;
}
.v10-greeting-medallion-ring{ display:none !important; }
.v10-greeting-medallion svg{ width:18px !important; height:18px !important; }

@media (max-width: 640px){
  .v10-greeting-fancy{ padding:8px 12px !important; border-radius:14px !important; }
  .v10-hero-salam{ gap:4px !important; }
  .v10-greeting-flourish{ display:none !important; }
}

/* Dark theme */
[data-theme="dark"] .v10-greeting-fancy{
  background:linear-gradient(180deg,#3a2a14,#2a1d0a) !important;
  border-color:rgba(212,165,80,.3) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.4) !important;
}
[data-theme="dark"] .v10-hero-salam,
[data-theme="dark"] .v10-hero-salam .v10-salam-ar,
[data-theme="dark"] .v10-hero-salam .v10-salam-tod,
[data-theme="dark"] .v10-hero-salam .v10-comma{
  color:#ecd9a8 !important;
  -webkit-text-fill-color:#ecd9a8 !important;
}
[data-theme="dark"] .v10-greeting-medallion{ color:#e6cfa0 !important; }

/* ─── Salam card v6 — premium mini player look ─── */

/* Neutralize ALL legacy greeting/salam rules */
.v10-hero-greeting.v10-greeting-fancy,
.v10-greeting-fancy,
.v10-hero-salam,
.v10-greeting-flourish,
.v10-greeting-medallion,
.v10-greeting-medallion-ring,
.v10-comma,
.v10-salam-tod{
  all:unset;
}
.v10-greeting-fancy::before,
.v10-greeting-fancy::after{ display:none !important; content:none !important; }

/* Wrapper */
.v10-hero-greeting{
  width:100%;
  display:flex !important;
  justify-content:center;
  align-items:center;
  margin:16px auto 28px;
  padding:0 16px;
  overflow:visible;
  background:none;
  border:none;
  box-shadow:none;
}

/* The actual card */
.v10-salam-card{
  width:min(760px, calc(100vw - 32px));
  min-height:64px;
  padding:10px 22px;
  border-radius:28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,244,232,.92)),
    radial-gradient(circle at 50% 0%, rgba(212,173,83,.16), transparent 55%);
  border:1px solid rgba(207,168,76,.45);
  box-shadow:
    0 18px 45px rgba(96,66,20,.10),
    0 2px 0 rgba(255,255,255,.75) inset;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  overflow:visible;
  box-sizing:border-box;
}

/* Icon badge */
.v10-salam-icon{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:#b88935;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(244,232,210,.85));
  border:1px solid rgba(207,168,76,.35);
}
.v10-salam-icon svg{ display:block; width:18px; height:18px; }

/* Text content */
.v10-salam-content{
  min-width:0;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:12px;
  text-align:center;
  flex-wrap:wrap;
}

.v10-salam-ar{
  font-family:'Amiri','Scheherazade New','Noto Naskh Arabic',serif !important;
  font-size:clamp(24px, 2.8vw, 38px) !important;
  line-height:1.25 !important;
  font-weight:700;
  color:#6f4a18;
  white-space:nowrap;
  max-width:100%;
  direction:rtl;
}

.v10-salam-fr{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(13px, 1.1vw, 16px);
  font-style:italic;
  color:rgba(94,65,28,.78);
  white-space:nowrap;
}

/* Tablet */
@media (max-width: 900px){
  .v10-salam-card{
    width:min(680px, calc(100vw - 28px));
    min-height:60px;
    padding:9px 18px;
    border-radius:24px;
  }
  .v10-salam-ar{ font-size:clamp(22px, 4vw, 30px) !important; }
}

/* Mobile */
@media (max-width: 600px){
  .v10-hero-greeting{ margin:12px auto 20px; padding:0 12px; }
  .v10-salam-card{
    width:100%;
    min-height:auto;
    padding:10px 14px;
    border-radius:22px;
    gap:10px;
  }
  .v10-salam-content{
    flex-direction:column;
    align-items:center;
    gap:2px;
  }
  .v10-salam-ar{
    font-size:22px !important;
    line-height:1.35 !important;
    white-space:normal;
  }
  .v10-salam-fr{ font-size:13px; }
  .v10-salam-icon{ width:30px; height:30px; border-radius:12px; }
}

/* Dark theme */
[data-theme="dark"] .v10-salam-card{
  background:
    linear-gradient(180deg, rgba(40,30,15,.85), rgba(28,20,10,.85)),
    radial-gradient(circle at 50% 0%, rgba(212,173,83,.18), transparent 55%);
  border-color:rgba(212,173,83,.35);
  box-shadow:
    0 18px 45px rgba(0,0,0,.5),
    0 2px 0 rgba(255,225,155,.06) inset;
}
[data-theme="dark"] .v10-salam-ar{ color:#f0d68f; }
[data-theme="dark"] .v10-salam-fr{ color:rgba(230,207,160,.8); }
[data-theme="dark"] .v10-salam-icon{
  background:linear-gradient(180deg, rgba(60,45,20,.85), rgba(40,30,12,.85));
  border-color:rgba(212,173,83,.35);
  color:#e6b566;
}

/* ─── Salam pill v7 — compact capsule ─── */

/* Neutralize previous .v10-salam-card rules */
.v10-salam-card,
.v10-salam-content{ all:unset; }

.v10-hero-greeting{
  display:flex !important;
  justify-content:center !important;
  margin:14px auto 22px !important;
  padding:0 16px !important;
  width:100%;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.v10-salam-pill{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;

  max-width:640px;
  width:fit-content;

  padding:8px 16px !important;

  border-radius:999px !important;

  background:linear-gradient(180deg,#fbf6ea,#f2e6c9) !important;
  border:1px solid rgba(180,140,60,.25) !important;

  box-shadow:0 6px 18px rgba(0,0,0,.06) !important;

  white-space:nowrap;
  box-sizing:border-box;
}

.v10-salam-icon{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:999px;
  color:#b88935;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(244,232,210,.85));
  border:1px solid rgba(207,168,76,.3);
}
.v10-salam-icon svg{ display:block; width:14px; height:14px; }

.v10-salam-ar{
  font-family:'Amiri','Scheherazade New',serif !important;
  font-size:clamp(18px, 2vw, 26px) !important;
  line-height:1.3 !important;
  direction:rtl;
  color:#6b4a1e !important;
  font-weight:400;
  -webkit-text-fill-color:#6b4a1e !important;
  background:none !important;
}

.v10-salam-fr{
  font-family:'Cormorant Garamond', serif;
  font-size:13px !important;
  font-style:italic;
  opacity:.8;
  color:#6b4a1e !important;
  -webkit-text-fill-color:#6b4a1e !important;
  background:none !important;
}

@media (max-width: 640px){
  .v10-salam-pill{
    white-space:normal;
    justify-content:center;
    text-align:center;
    padding:8px 12px !important;
    flex-wrap:wrap;
  }
  .v10-salam-ar{ font-size:20px !important; }
  .v10-salam-fr{
    display:block;
    width:100%;
    margin-top:2px;
  }
}

/* Dark theme */
[data-theme="dark"] .v10-salam-pill{
  background:linear-gradient(180deg,#3a2a14,#2a1d0a) !important;
  border-color:rgba(212,165,80,.3) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.4) !important;
}
[data-theme="dark"] .v10-salam-ar,
[data-theme="dark"] .v10-salam-fr{
  color:#ecd9a8 !important;
  -webkit-text-fill-color:#ecd9a8 !important;
}
[data-theme="dark"] .v10-salam-icon{
  background:linear-gradient(180deg, rgba(60,45,20,.85), rgba(40,30,12,.85));
  border-color:rgba(212,165,80,.35);
  color:#e6b566;
}

/* ─── Salam pill — premium refinement v2 ─── */
.v10-salam-pill{
  display:inline-flex !important;
  align-items:center;
  gap:10px;

  padding:6px 14px !important;
  border-radius:999px !important;

  background:
    radial-gradient(circle at 30% 20%, rgba(212,173,83,0.18), transparent 60%),
    linear-gradient(180deg, #fffaf0, #f3e7cc) !important;

  border:1px solid rgba(207,168,76,0.35) !important;

  box-shadow:
    0 10px 25px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;

  width:auto !important;
  max-width:none !important;

  transition:transform .25s ease, box-shadow .25s ease;
}

.v10-salam-pill:hover{
  transform:translateY(-1px);
  box-shadow:
    0 12px 30px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

@media (prefers-reduced-motion: reduce){
  .v10-salam-pill{ transition:none; }
  .v10-salam-pill:hover{ transform:none; }
}

/* Arabic — refined */
.v10-salam-pill .v10-salam-ar{
  font-family:"Amiri","Scheherazade New","Noto Naskh Arabic",serif !important;
  font-size:clamp(16px, 1.6vw, 22px) !important;
  letter-spacing:0.5px;
  line-height:1.5;
  color:#5a3d1a !important;
  font-weight:400;
}

/* French — discreet */
.v10-salam-pill .v10-salam-fr{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:12px !important;
  opacity:0.7;
  letter-spacing:0.03em;
  font-style:italic;
  color:#6b4a1e;
}

/* Icon refinement */
.v10-salam-pill .v10-salam-icon{
  display:inline-flex;
  align-items:center;
  color:#b88935;
  opacity:.85;
}
.v10-salam-pill .v10-salam-icon svg{ width:14px; height:14px; }

@media (max-width: 520px){
  .v10-salam-pill{ padding:5px 12px !important; gap:8px; }
  .v10-salam-pill .v10-salam-fr{ font-size:11px !important; }
}

/* Dark theme */
[data-theme="dark"] .v10-salam-pill{
  background:
    radial-gradient(circle at 30% 20%, rgba(212,173,83,0.22), transparent 60%),
    linear-gradient(180deg, #2c2010, #1d150a) !important;
  border-color:rgba(212,165,80,0.35) !important;
  box-shadow:
    0 10px 25px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
[data-theme="dark"] .v10-salam-pill .v10-salam-ar{ color:#f0d68f !important; }
[data-theme="dark"] .v10-salam-pill .v10-salam-fr{ color:#cbb888; }

/* ─── Salam pill v3 — lifted + site-matched ─── */

/* Move the whole greeting up, closer to the header */
.v10-hero-greeting{
  margin: -22px auto 14px !important;
  padding: 0 16px !important;
}

/* Match site header capsule aesthetic (ivory + soft gold) */
.v10-salam-pill{
  padding: 6px 16px !important;
  border-radius: 999px !important;

  background:
    radial-gradient(circle at 30% 15%, rgba(212,173,83,0.16), transparent 65%),
    linear-gradient(180deg, #fffaf0 0%, #f6ecd2 100%) !important;

  border: 1px solid rgba(196,142,68,0.32) !important;

  box-shadow:
    0 6px 18px rgba(122, 86, 30, 0.10),
    0 1px 2px rgba(122, 86, 30, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;

  backdrop-filter: blur(2px);
}

.v10-salam-pill:hover{
  transform: translateY(-1px);
  box-shadow:
    0 10px 26px rgba(122, 86, 30, 0.14),
    0 1px 2px rgba(122, 86, 30, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

/* Arabic — slightly tighter & warmer */
.v10-salam-pill .v10-salam-ar{
  font-size: clamp(15px, 1.4vw, 20px) !important;
  color: #5a3d1a !important;
  letter-spacing: 0.3px;
  line-height: 1.5;
}

/* French — very subtle */
.v10-salam-pill .v10-salam-fr{
  font-size: 11.5px !important;
  opacity: 0.65;
  color: #6b4a1e;
  letter-spacing: 0.04em;
}

/* Icon — gold like header buttons */
.v10-salam-pill .v10-salam-icon{
  color: #c48e44;
  opacity: 0.9;
}

@media (max-width: 520px){
  .v10-hero-greeting{ margin: -14px auto 10px !important; }
  .v10-salam-pill{ padding: 5px 13px !important; }
}

/* Dark theme harmonised */
[data-theme="dark"] .v10-salam-pill{
  background:
    radial-gradient(circle at 30% 15%, rgba(212,173,83,0.20), transparent 65%),
    linear-gradient(180deg, #2c2010 0%, #1d150a 100%) !important;
  border-color: rgba(212,165,80,0.32) !important;
  box-shadow:
    0 6px 18px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* ─── Salam pill v4 — fix tashkeel overflow ─── */

/* Give the pill enough vertical room for Arabic diacritics (fatha, damma, sukun) */
.v10-salam-pill{
  padding: 10px 18px !important;
  line-height: 1 !important;
  overflow: visible !important;
  align-items: center !important;
}

/* Arabic — slightly smaller, generous line-height for tashkeel */
.v10-salam-pill .v10-salam-ar{
  font-size: clamp(14px, 1.25vw, 18px) !important;
  line-height: 1.9 !important;
  display: inline-block;
  padding: 2px 0;
  overflow: visible;
}

/* French — keep aligned with Arabic baseline */
.v10-salam-pill .v10-salam-fr{
  line-height: 1 !important;
  align-self: center;
}

/* Icon stays centered */
.v10-salam-pill .v10-salam-icon{
  align-self: center;
  line-height: 0;
}

@media (max-width: 520px){
  .v10-salam-pill{ padding: 8px 14px !important; }
  .v10-salam-pill .v10-salam-ar{ font-size: 13px !important; line-height: 1.8 !important; }
}

/* ═══════════════════════════════════════════════════
   DARK THEME — Home v10 page background fixes
   (Hero & "next prayer" pill were stuck in light bg)
   ═══════════════════════════════════════════════════ */

/* Page background container */
[data-theme="dark"] .home-v10{
  background:#0b0d12 !important;
  color:#e8d4a8;
}

/* Aurora hero — dark gradient instead of cream */
[data-theme="dark"] .v10-hero{
  background:
    radial-gradient(ellipse at 20% 0%,  rgba(212,165,116,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(180,130,60,0.08)  0%, transparent 60%),
    linear-gradient(180deg, #11151c 0%, #0b0d12 90%) !important;
}

[data-theme="dark"] .v10-hero-aurora{
  background:radial-gradient(ellipse at 50% 0%, rgba(212,165,116,0.18), transparent 65%) !important;
  opacity:0.5;
}

/* "Next prayer" pill — was hardcoded white */
[data-theme="dark"] .v10-pt-pill.is-next{
  background:rgba(255,255,255,0.04) !important;
  border-color:rgba(212,165,116,0.22) !important;
}
[data-theme="dark"] .v10-pt-pill.is-next .v10-pt-name,
[data-theme="dark"] .v10-pt-pill.is-next .v10-pt-time{
  color:#d4a574;
}

/* Day-progress card */
[data-theme="dark"] .v10-hero-clock-card-progress{
  background:linear-gradient(155deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)) !important;
}
[data-theme="dark"] .v10-state-progress{
  color:#e8d4a8;
  background:rgba(255,255,255,0.06);
  border-color:rgba(212,165,116,0.22);
}

/* Section headings */
[data-theme="dark"] .v10-section-head h2{ color:#e8d4a8; }
[data-theme="dark"] .v10-section-sub{ color:#9c8a64; }

/* ═══════════════════════════════════════════════════
   DARK THEME v2 — warm brown/gold (Islamic premium)
   Replaces the previous near-black background.
   ═══════════════════════════════════════════════════ */

/* Page container — warm dark brown */
[data-theme="dark"] .home-v10{
  background:
    radial-gradient(ellipse at 50% -10%, rgba(196,142,68,0.10), transparent 60%),
    linear-gradient(180deg, #2a1d10 0%, #1f1509 100%) !important;
  color:#f4e4c1 !important;
}

[data-theme="dark"] body{
  background:#1f1509 !important;
}

/* Hero — deep walnut with gold halo */
[data-theme="dark"] .v10-hero{
  background:
    radial-gradient(ellipse at 20% 0%,  rgba(232,196,124,0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(196,142,68,0.14)  0%, transparent 60%),
    linear-gradient(180deg, #3a2818 0%, #281a0e 100%) !important;
}

[data-theme="dark"] .v10-hero-aurora{
  background:radial-gradient(ellipse at 50% 0%, rgba(232,196,124,0.28), transparent 65%) !important;
  opacity:0.7;
}

/* All inner cards (clock, events, programme, rituels, guidance) */
[data-theme="dark"] .v10-hero-clock,
[data-theme="dark"] .v10-hero-clock-card,
[data-theme="dark"] .v10-hero-clock-card-progress,
[data-theme="dark"] .v10-events-card,
[data-theme="dark"] .v10-prog-card,
[data-theme="dark"] .v10-ritual-card,
[data-theme="dark"] .v10-guid-card,
[data-theme="dark"] .v10-amal-card,
[data-theme="dark"] .v10-card{
  background:
    linear-gradient(155deg, rgba(58,40,24,0.85), rgba(40,26,14,0.78)) !important;
  border:1px solid rgba(196,142,68,0.22) !important;
  box-shadow:
    0 6px 18px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(232,196,124,0.06) !important;
  color:#f4e4c1 !important;
}

/* Prayer pills */
[data-theme="dark"] .v10-pt-pill{
  background:rgba(58,40,24,0.55) !important;
  border-color:rgba(196,142,68,0.18) !important;
}
[data-theme="dark"] .v10-pt-pill .v10-pt-name,
[data-theme="dark"] .v10-pt-pill .v10-pt-time{
  color:#d4a574 !important;
}

[data-theme="dark"] .v10-pt-pill.is-current{
  background:linear-gradient(155deg, rgba(140,90,30,0.55), rgba(90,55,15,0.45)) !important;
  border-color:rgba(232,196,124,0.45) !important;
}
[data-theme="dark"] .v10-pt-pill.is-current .v10-pt-name,
[data-theme="dark"] .v10-pt-pill.is-current .v10-pt-time{
  color:#fce6b4 !important;
}

[data-theme="dark"] .v10-pt-pill.is-next{
  background:rgba(58,40,24,0.55) !important;
  border-color:rgba(196,142,68,0.30) !important;
}
[data-theme="dark"] .v10-pt-pill.is-next .v10-pt-name,
[data-theme="dark"] .v10-pt-pill.is-next .v10-pt-time{
  color:#e8c47c !important;
}

/* Time / clock big numbers */
[data-theme="dark"] .v10-hero-clock-now-time,
[data-theme="dark"] .v10-hero-clock-card-prayer,
[data-theme="dark"] .v10-hero-clock-card-time{
  color:#fce6b4 !important;
  text-shadow:none;
}
[data-theme="dark"] .v10-hero-clock-now-label,
[data-theme="dark"] .v10-hero-clock-dates,
[data-theme="dark"] .v10-hero-clock-card-meta,
[data-theme="dark"] .v10-hero-clock-card-foot{
  color:#d4b88a !important;
}
[data-theme="dark"] .v10-hero-clock-hijri{
  color:#e8c47c !important;
}

/* Section heads & generic text */
[data-theme="dark"] .v10-section-head h2,
[data-theme="dark"] h2,
[data-theme="dark"] h3{
  color:#fce6b4 !important;
}
[data-theme="dark"] .v10-section-sub,
[data-theme="dark"] p{
  color:#d4b88a !important;
}

/* Generic body text inside cards */
[data-theme="dark"] .home-v10 p,
[data-theme="dark"] .home-v10 li,
[data-theme="dark"] .home-v10 span:not(.v10-salam-ar):not(.v10-salam-fr):not(.dhikr-ar):not(.dhikr-fr):not(.dhikr-en):not(.dhikr-sep){
  color:#e8d4a8;
}

/* Chip / badge tints (EN COURS, PROCHAINE, count) */
[data-theme="dark"] .v10-state-progress,
[data-theme="dark"] .v10-state-next,
[data-theme="dark"] .v10-state-chip{
  background:rgba(232,196,124,0.18) !important;
  color:#fce6b4 !important;
  border-color:rgba(232,196,124,0.35) !important;
}

/* Event row chips with weekday colors stay tinted but darker */
[data-theme="dark"] .v10-event-chip{
  background:rgba(58,40,24,0.7) !important;
  border-color:rgba(196,142,68,0.25) !important;
  color:#f4e4c1 !important;
}

/* Wisdom (Bihar al-Anwar) */
[data-theme="dark"] .v10-hero-clock-wisdom-text{ color:#e8d4a8 !important; }
[data-theme="dark"] .v10-hero-clock-wisdom-author{ color:#c49a5a !important; }

/* "Brussels Belgique" location pill */
[data-theme="dark"] .v10-hero-clock-loc{
  background:rgba(58,40,24,0.55) !important;
  border-color:rgba(196,142,68,0.25) !important;
}
[data-theme="dark"] .v10-hero-clock-loc-city{ color:#fce6b4 !important; }
[data-theme="dark"] .v10-hero-clock-loc-country{ color:#c49a5a !important; }

/* "Jour paisible" pill */
[data-theme="dark"] .v10-mood-pill,
[data-theme="dark"] [class*="mood"]{
  background:linear-gradient(180deg, #3a2818, #281a0e) !important;
  border-color:rgba(196,142,68,0.32) !important;
  color:#fce6b4 !important;
}

/* Bismillah card (the cream block in middle) */
[data-theme="dark"] .v10-bismillah-card,
[data-theme="dark"] [class*="bismillah"]{
  background:linear-gradient(180deg, #3a2818, #281a0e) !important;
  border:1px solid rgba(232,196,124,0.30) !important;
  color:#fce6b4 !important;
}

/* Amal du moment — the warm hero card */
[data-theme="dark"] .v10-amal-card,
[data-theme="dark"] [class*="amal"]{
  background:linear-gradient(155deg, #3d2a14 0%, #2a1c0c 100%) !important;
  border:1px solid rgba(232,196,124,0.35) !important;
}

/* Programme / Rituels / Guidance cards — white in screenshot */
[data-theme="dark"] [class*="prog-"],
[data-theme="dark"] [class*="ritual"],
[data-theme="dark"] [class*="guid"]{
  background:linear-gradient(155deg, rgba(58,40,24,0.85), rgba(40,26,14,0.78)) !important;
  border-color:rgba(196,142,68,0.22) !important;
  color:#f4e4c1 !important;
}

/* Inputs / buttons (action chips) */
[data-theme="dark"] .home-v10 button,
[data-theme="dark"] .home-v10 .v10-btn{
  background:linear-gradient(180deg, #5a3f1e, #3d2a14) !important;
  border:1px solid rgba(232,196,124,0.35) !important;
  color:#fce6b4 !important;
}

/* Salam pill harmony */
[data-theme="dark"] .v10-salam-pill{
  background:
    radial-gradient(circle at 30% 15%, rgba(232,196,124,0.18), transparent 65%),
    linear-gradient(180deg, #3a2818, #281a0e) !important;
  border-color:rgba(232,196,124,0.35) !important;
}
[data-theme="dark"] .v10-salam-pill .v10-salam-ar{ color:#fce6b4 !important; }
[data-theme="dark"] .v10-salam-pill .v10-salam-fr{ color:#d4b88a !important; }

/* ─── Amal CTA — lighter gold capsule ─── */
.v10-amal-cta{
  background:linear-gradient(180deg, #f0d28a 0%, #d4a574 100%) !important;
  color:#5a3d1a !important;
  border:1px solid rgba(180,140,60,0.45) !important;
  box-shadow:
    0 4px 14px rgba(168,120,56,0.25),
    inset 0 1px 0 rgba(255,255,255,0.55) !important;
  font-weight:600;
}
.v10-amal-cta:hover{
  background:linear-gradient(180deg, #f5dca0, #e0b683) !important;
  color:#3a2614 !important;
  box-shadow:
    0 6px 18px rgba(168,120,56,0.32),
    inset 0 1px 0 rgba(255,255,255,0.65) !important;
  transform:translateY(-1px);
}
.v10-amal-cta svg{
  stroke:#5a3d1a !important;
  opacity:0.9;
}

/* Dark mode keeps gold but slightly more saturated */
[data-theme="dark"] .v10-amal-cta{
  background:linear-gradient(180deg, #e8c47c, #b88935) !important;
  color:#2a1d10 !important;
  border-color:rgba(232,196,124,0.65) !important;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
[data-theme="dark"] .v10-amal-cta svg{ stroke:#2a1d10 !important; }

/* ─── Primary buttons — light gold capsule (matches .v10-amal-cta) ─── */
.v10-btn-primary{
  background:linear-gradient(180deg, #f0d28a 0%, #d4a574 100%) !important;
  color:#5a3d1a !important;
  border:1px solid rgba(180,140,60,0.45) !important;
  box-shadow:
    0 4px 14px rgba(168,120,56,0.25),
    inset 0 1px 0 rgba(255,255,255,0.55) !important;
  font-weight:600;
}
.v10-btn-primary:hover{
  background:linear-gradient(180deg, #f5dca0, #e0b683) !important;
  color:#3a2614 !important;
  box-shadow:
    0 6px 18px rgba(168,120,56,0.32),
    inset 0 1px 0 rgba(255,255,255,0.65) !important;
  transform:translateY(-1px);
}
.v10-btn-primary svg{ stroke:#5a3d1a !important; opacity:0.9; }

[data-theme="dark"] .v10-btn-primary{
  background:linear-gradient(180deg, #e8c47c, #b88935) !important;
  color:#2a1d10 !important;
  border-color:rgba(232,196,124,0.65) !important;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
[data-theme="dark"] .v10-btn-primary svg{ stroke:#2a1d10 !important; }

/* ─── Listen feature card — light ivory variant ─── */
.v10-listen-feature{
  background:
    radial-gradient(circle at 80% 50%, rgba(212,165,116,0.22), transparent 60%),
    linear-gradient(135deg, #fffaf0 0%, #f3e7cc 100%) !important;
  color:#5a3d1a !important;
  border:1px solid rgba(196,142,68,0.30) !important;
  box-shadow:
    0 8px 24px rgba(168,120,56,0.15),
    inset 0 1px 0 rgba(255,255,255,0.85) !important;
}
.v10-listen-feature::before{
  background:radial-gradient(circle at 80% 50%, rgba(232,196,124,0.30), transparent 60%) !important;
}
.v10-listen-feature h3{ color:#3a2614 !important; }
.v10-listen-feature p{ color:#7a5a2e !important; }
.v10-listen-tag{
  background:rgba(196,142,68,0.18) !important;
  color:#8a5a18 !important;
}
.v10-listen-feature .v10-wave i{
  background:#c48e44 !important;
}

/* Dark mode keeps the warm rich gradient */
[data-theme="dark"] .v10-listen-feature{
  background:
    radial-gradient(circle at 80% 50%, rgba(232,196,124,0.20), transparent 60%),
    linear-gradient(135deg, #3a2818 0%, #2a1d10 100%) !important;
  color:#fce6b4 !important;
  border:1px solid rgba(232,196,124,0.30) !important;
}
[data-theme="dark"] .v10-listen-feature h3{ color:#fce6b4 !important; }
[data-theme="dark"] .v10-listen-feature p{ color:#d4b88a !important; }
[data-theme="dark"] .v10-listen-tag{
  background:rgba(232,196,124,0.18) !important;
  color:#fce6b4 !important;
}

/* ─── Bismillah ribbon (inside hero-clock, under date row) ─── */
.v10-bismillah-ribbon{
  display:flex;
  align-items:center;
  gap:14px;
  margin:14px 0 18px;
  padding:0 4px;
}
.v10-bismillah-ribbon .v10-bism-orn{
  flex:1;
  display:flex;
  align-items:center;
  color:rgba(196,142,68,0.55);
  min-width:60px;
}
.v10-bismillah-ribbon .v10-bism-orn-l{ justify-content:flex-end; }
.v10-bismillah-ribbon .v10-bism-orn-r{ justify-content:flex-start; }
.v10-bismillah-ribbon .v10-bism-orn svg{
  width:100%;
  max-width:200px;
  height:12px;
}
.v10-bism-text{
  margin:0;
  flex:0 0 auto;
  font-family: Amiri,Scheherazade New,Noto Naskh Arabic,serif;
  font-size:clamp(20px, 2.2vw, 28px);
  line-height:1.6;
  color:#8a5a18;
  letter-spacing:0.5px;
  text-shadow:0 1px 0 rgba(255,255,255,0.5);
  padding:4px 10px;
  white-space:nowrap;
}

@media (max-width: 640px){
  .v10-bismillah-ribbon{ gap:8px; margin:10px 0 14px; }
  .v10-bism-text{ font-size:17px; }
  .v10-bismillah-ribbon .v10-bism-orn{ min-width:24px; }
}

/* Dark mode */
[data-theme="dark"] .v10-bismillah-ribbon .v10-bism-orn{
  color:rgba(232,196,124,0.50);
}
[data-theme="dark"] .v10-bism-text{
  color:#fce6b4;
  text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

/* ─── Salam ribbon (inline inside header row, between date and location) ─── */
.v10-hero-clock-header{
  flex-wrap:nowrap !important;
  gap:14px !important;
}
.v10-salam-ribbon{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 auto;
  min-width:0;
  justify-content:center;
  padding:0 8px;
}
.v10-salam-ribbon .v10-salam-orn{
  flex:1;
  display:flex;
  align-items:center;
  color:rgba(196,142,68,0.55);
  min-width:30px;
  max-width:140px;
}
.v10-salam-ribbon .v10-salam-orn-l{ justify-content:flex-end; }
.v10-salam-ribbon .v10-salam-orn-r{ justify-content:flex-start; }
.v10-salam-ribbon .v10-salam-orn svg{ width:100%; max-width:120px; height:10px; }
.v10-salam-text{
  margin:0;
  flex:0 0 auto;
  font-family: Amiri,Scheherazade New,Noto Naskh Arabic,serif;
  font-size:clamp(14px, 1.3vw, 18px);
  line-height:1.7;
  color:#8a5a18;
  letter-spacing:0.3px;
  white-space:nowrap;
  padding:2px 6px;
  text-shadow:0 1px 0 rgba(255,255,255,0.45);
}

/* Hide the old big bismillah ribbon if any leftover */
.v10-bismillah-ribbon{ display:none !important; }

@media (max-width: 900px){
  .v10-hero-clock-header{ flex-wrap:wrap !important; }
  .v10-salam-ribbon{ order:3; flex:0 0 100%; padding:6px 0; }
  .v10-salam-ribbon .v10-salam-orn{ max-width:none; }
  .v10-salam-text{ font-size:15px; }
}

/* Dark mode */
[data-theme="dark"] .v10-salam-ribbon .v10-salam-orn{ color:rgba(232,196,124,0.5); }
[data-theme="dark"] .v10-salam-text{
  color:#fce6b4;
  text-shadow:0 1px 0 rgba(0,0,0,0.4);
}