/* Ramadan city page (ramadan.php): lantern, today's suhoor & iftar, coloured timetable */
.rc-head { position: relative; padding-right: 112px; }
.rc-lantern {
    position: absolute; right: 0; top: 4px; width: 92px; height: 92px; background-color: var(--t-accent); opacity: .85;
    -webkit-mask: url('../../assets/icon/ramadan.svg') center / contain no-repeat; mask: url('../../assets/icon/ramadan.svg') center / contain no-repeat;
    transform-origin: 30% 10%; animation: rc-swing 6s ease-in-out infinite;
}
@keyframes rc-swing { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

.rc-today { margin: 0 0 22px; }
.rc-today-when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t-text-secondary); }
.rc-pill { padding: 3px 10px; border-radius: 999px; background: rgba(var(--t-accent-rgb), .14); color: var(--t-accent); letter-spacing: .02em; text-transform: none; }
.rc-live { width: 8px; height: 8px; border-radius: 50%; background: #059669; box-shadow: 0 0 0 0 rgba(5,150,105,.5); animation: rc-ping 1.8s ease-out infinite; }
@keyframes rc-ping { to { box-shadow: 0 0 0 9px rgba(5,150,105,0); } }
.rc-today-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rc-card {
    --c: 124, 58, 237;
    display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; border-radius: 18px;
    background: radial-gradient(120% 120% at 0% 0%, rgba(var(--c), .12), transparent 60%), var(--t-card);
    border: 1px solid rgba(var(--c), .25); transition: box-shadow .3s, transform .3s;
}
.rc-iftar { --c: 5, 150, 105; }
.rc-card.is-next { box-shadow: 0 0 0 2px rgba(var(--c), .45), 0 14px 30px -18px rgba(var(--c), .6); }
.rc-card h2 { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--t-text-secondary); }
.rc-time { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: clamp(30px, 3.4vw, 42px); font-weight: 700; line-height: 1.05; color: rgb(var(--c)); font-variant-numeric: tabular-nums; }
.rc-meta, .rc-count { margin: 4px 0 0; font-size: 12.5px; color: var(--t-text-secondary); }
.rc-count { font-weight: 700; color: rgb(var(--c)); }
.rc-ic { width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0; background: rgba(var(--c), .12); position: relative; }
.rc-ic::after, .rc-th-ic {
    content: ''; background-color: rgb(var(--c));
    -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
.rc-ic::after { position: absolute; inset: 16px; }
.rc-ic-sehur { --ic: url('../../assets/icon/fajr.svg'); --c: 124, 58, 237; }
.rc-ic-iftar { --ic: url('../../assets/icon/iftar.svg'); --c: 5, 150, 105; }

/* legend + table */
.rc-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 12px; }
.rc-lg { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.rc-lg-sehur { background: rgba(124, 58, 237, .12); color: #7c3aed; }
.rc-lg-iftar { background: rgba(5, 150, 105, .12); color: #047857; }
.rc-lg-fri { background: rgba(59, 130, 246, .12); color: #2563eb; }
.rc-lg-qadr { background: rgba(217, 119, 6, .14); color: #b45309; }
.rc-lg-today { background: rgba(var(--t-accent-rgb), .16); color: var(--t-accent); }
.rc-table th.rc-col-sehur, .rc-table td.rc-col-sehur { background: rgba(124, 58, 237, .07); color: #7c3aed; }
.rc-table th.rc-col-iftar, .rc-table td.rc-col-iftar { background: rgba(5, 150, 105, .09); color: #047857; }
.rc-table td.rc-col-sehur strong, .rc-table td.rc-col-iftar strong { color: inherit; }
.rc-th-ic { display: block; width: 18px; height: 18px; margin: 0 auto 4px; }
.rc-table th .rc-th-ic.rc-ic-sehur { --c: 124, 58, 237; }
.rc-table tr.is-fri > * { background-color: rgba(59, 130, 246, .06); }
.rc-table tr.is-fri > th:first-child { box-shadow: inset -3px 0 0 #3b82f6; color: #2563eb; }
.rc-table tr.is-fri td.rc-col-sehur { background: rgba(116, 98, 246, .13); }
.rc-table tr.is-fri td.rc-col-iftar { background: rgba(22, 163, 74, .14); }
.rc-table tr.is-qadr > * { background-color: rgba(217, 119, 6, .08); }
.rc-table tr.is-qadr > th:first-child { box-shadow: inset -3px 0 0 #d97706; color: #b45309; }
.rc-tag { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(217, 119, 6, .16); color: #b45309; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.rc-table tr.is-today > * { background-color: rgba(var(--t-accent-rgb), .16) !important; }
.rc-table tr.is-today > th:first-child { box-shadow: inset -4px 0 0 var(--t-accent); }
[data-theme="midnight"] .rc-table th.rc-col-sehur, [data-theme="midnight"] .rc-table td.rc-col-sehur, [data-theme="slate"] .rc-table td.rc-col-sehur { color: #a78bfa; }
[data-theme="midnight"] .rc-table th.rc-col-iftar, [data-theme="midnight"] .rc-table td.rc-col-iftar, [data-theme="slate"] .rc-table td.rc-col-iftar { color: #34d399; }
[data-theme="midnight"] .rc-lg-sehur { color: #a78bfa; } [data-theme="midnight"] .rc-lg-iftar { color: #34d399; }

@media (max-width: 700px) {
    .rc-head { padding-right: 0; padding-top: 70px; }
    .rc-lantern { width: 60px; height: 60px; }
    .rc-today-grid { grid-template-columns: 1fr; gap: 10px; }
    .rc-card { padding: 16px 18px; }
    .rc-ic { width: 48px; height: 48px; }
    .rc-ic::after { inset: 13px; }
}
@media (prefers-reduced-motion: reduce) { .rc-lantern, .rc-live { animation: none; } }
@media print { .rc-lantern { animation: none; } }