@import url("https://fonts.googleapis.com/css2?family=Changa:wght@400;600;700;800&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap");

:root {
    --rashid-paper: #f6f1e8;
    --rashid-paper-2: #fffaf2;
    --rashid-ink: #1a1f24;
    --rashid-ink-soft: #3b434b;
    --rashid-teal: #1d6f74;
    --rashid-teal-dark: #155a5e;
    --rashid-amber: #d08a3b;
    --rashid-rose: #d76552;
    --rashid-border: rgba(26, 31, 36, 0.12);
    --rashid-shadow: 0 32px 70px -50px rgba(12, 15, 18, 0.6);
    --rashid-radius: 22px;
    --swiper-bullet: rgba(26, 31, 36, 0.25);
    --swiper-bullet-active: var(--rashid-teal);
    --swiper-bullet-shadow: rgba(29, 111, 116, 0.35);
    --swiper-btn-bg: rgba(255, 255, 255, 0.85);
    --swiper-btn-color: var(--rashid-ink);
    --swiper-btn-border: rgba(26, 31, 36, 0.12);
    --swiper-btn-hover-bg: #fffaf2;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "IBM Plex Sans Arabic", "Changa", sans-serif;
    color: var(--rashid-ink);
    background:
        radial-gradient(
            circle at 20% -10%,
            rgba(208, 138, 59, 0.18),
            transparent 40%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(29, 111, 116, 0.18),
            transparent 45%
        ),
        linear-gradient(180deg, var(--rashid-paper), #efe7d9 55%, #f8f3ea);
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(26, 31, 36, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 31, 36, 0.035) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none;
    z-index: 0;
}

body > * {
    position: relative;
    z-index: 1;
}

html,
body,
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(29, 111, 116, 0.34) rgba(255, 255, 255, 0.56);
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.72),
            rgba(244, 238, 229, 0.94)
        );
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px rgba(29, 111, 116, 0.08);
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            rgba(29, 111, 116, 0.56),
            rgba(21, 90, 94, 0.8)
        );
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 8px 18px -12px rgba(21, 90, 94, 0.78);
}

::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            rgba(29, 111, 116, 0.72),
            rgba(21, 90, 94, 0.92)
        );
}

::-webkit-scrollbar-corner {
    background: transparent;
}

.rashid-home {
    color: var(--rashid-ink);
}

.rashid-panel {
    background: var(--rashid-paper);
    border: 1px solid var(--rashid-border);
    border-radius: calc(var(--rashid-radius) + 6px);
    padding: 24px;
    box-shadow: 0 24px 60px -46px rgba(12, 15, 18, 0.6);
}

@media (min-width: 1024px) {
    .rashid-panel {
        padding: 28px;
    }
}

.rashid-aside {
    align-self: start;
}

@media (min-width: 1024px) {
    .rashid-aside {
        position: sticky;
        top: 110px;
    }
}

.rashid-aside-card {
    background: var(--rashid-paper-2);
    border: 1px solid var(--rashid-border);
    border-radius: calc(var(--rashid-radius) + 6px);
    box-shadow: 0 22px 50px -40px rgba(12, 15, 18, 0.55);
}

.rashid-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(26, 31, 36, 0.14);
}

.rashid-section-title .title {
    font-size: 24px;
    font-weight: 800;
    color: var(--rashid-ink);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.rashid-section-title .title::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--rashid-teal);
    box-shadow: 0 0 0 4px rgba(29, 111, 116, 0.12);
}

.reveal {
    animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

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

::selection {
    background: var(--rashid-amber);
    color: #fff;
}

a {
    color: var(--rashid-teal);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--rashid-teal-dark);
}

h1,
h2,
h3,
h4,
.rashid-display {
    font-family: "Changa", "IBM Plex Sans Arabic", sans-serif;
    letter-spacing: 0.2px;
}

#headerTopbar,
header {
    background: rgba(255, 250, 242, 0.9) !important;
    color: var(--rashid-ink);
    border-bottom: 1px solid var(--rashid-border);
    box-shadow: 0 16px 40px -32px rgba(14, 18, 22, 0.55);
}

#headerTopbar [class*="bg-white"],
header [class*="bg-white"] {
    background-color: rgba(29, 111, 116, 0.08) !important;
}

#headerTopbar [class*="text-white"],
header [class*="text-white"] {
    color: var(--rashid-ink) !important;
}

#headerTopbar [class*="text-slate-300"],
header [class*="text-slate-300"] {
    color: var(--rashid-ink-soft) !important;
}

#headerTopbar [class*="border-white"],
header [class*="border-white"] {
    border-color: var(--rashid-border) !important;
}

header a {
    color: var(--rashid-ink);
}

#headerNavBar nav a {
    color: var(--rashid-ink);
    border: 1px solid transparent;
}

#headerNavBar nav a:hover {
    background: rgba(29, 111, 116, 0.08);
    border-color: rgba(29, 111, 116, 0.2);
    color: var(--rashid-teal-dark);
}

#headerNavBar nav a[class*="bg-emerald-500"] {
    background: rgba(29, 111, 116, 0.14) !important;
    color: var(--rashid-teal-dark) !important;
    border-color: rgba(29, 111, 116, 0.25);
}

#headerTopbar button,
header button {
    color: var(--rashid-ink);
}

#headerTopbar button:hover,
header button:hover {
    background: rgba(29, 111, 116, 0.12) !important;
}

header input,
#headerSearchModal input,
#mobileHeaderDrawer input {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: var(--rashid-border) !important;
    color: var(--rashid-ink) !important;
}

header input::placeholder,
#headerSearchModal input::placeholder,
#mobileHeaderDrawer input::placeholder {
    color: rgba(26, 31, 36, 0.55) !important;
}

#headerSearchModal .header-search-panel,
#mobileHeaderDrawer .mobile-menu-panel {
    background: var(--rashid-paper-2);
    border: 1px solid var(--rashid-border);
    box-shadow: var(--rashid-shadow);
}

#headerSearchModal .header-search-overlay {
    background:
        radial-gradient(circle at top, rgba(208, 138, 59, 0.14), transparent 26%),
        rgba(26, 31, 36, 0.54);
}

#headerSearchModal .header-search-panel {
    position: relative;
    background:
        linear-gradient(
            180deg,
            rgba(255, 251, 245, 0.97),
            rgba(246, 239, 228, 0.99)
        ),
        var(--rashid-paper-2) !important;
}

#headerSearchModal .header-search-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(29, 111, 116, 0.08), transparent 24%),
        radial-gradient(circle at bottom left, rgba(208, 138, 59, 0.08), transparent 28%);
    pointer-events: none;
}

#headerSearchModal .header-search-head {
    position: relative;
    border-bottom: 1px solid rgba(29, 111, 116, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(248, 244, 236, 0.5));
}

#headerSearchModal .header-search-kicker {
    color: var(--rashid-teal-dark);
    border: 1px solid rgba(29, 111, 116, 0.16);
    background: rgba(29, 111, 116, 0.08);
}

#headerSearchModal .header-search-title,
#headerSearchModal .header-search-section-title,
#headerSearchModal .header-search-shortcut-label {
    color: var(--rashid-ink);
}

#headerSearchModal .header-search-copy,
#headerSearchModal .header-search-results-count,
#headerSearchModal .header-search-loading-text {
    color: var(--rashid-ink-soft);
}

#headerSearchModal .header-search-close {
    border: 1px solid rgba(26, 31, 36, 0.08);
    background: rgba(255, 255, 255, 0.76);
    color: rgba(59, 67, 75, 0.82);
}

#headerSearchModal .header-search-close:hover {
    background: rgba(215, 101, 82, 0.1);
    color: var(--rashid-rose);
}

#headerSearchModal .header-search-input-icon,
#headerSearchModal .header-search-loader {
    color: var(--rashid-teal);
}

#headerSearchModal .header-search-input {
    border: 1px solid rgba(29, 111, 116, 0.12);
    background: rgba(255, 255, 255, 0.72);
    color: var(--rashid-ink);
}

#headerSearchModal .header-search-input:focus {
    border-color: rgba(29, 111, 116, 0.24);
    background: rgba(255, 255, 255, 0.92);
}

#headerSearchModal .header-search-input::placeholder {
    color: rgba(59, 67, 75, 0.62) !important;
}

#headerSearchModal .header-search-shortcut {
    border: 1px solid var(--rashid-border);
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 16px 28px -26px rgba(12, 15, 18, 0.42);
}

#headerSearchModal .header-search-shortcut:hover {
    border-color: rgba(29, 111, 116, 0.18);
    background: rgba(29, 111, 116, 0.08) !important;
}

#headerSearchModal .header-search-shortcut-icon {
    background: rgba(29, 111, 116, 0.1);
    color: var(--rashid-teal-dark);
}

#headerSearchModal .header-search-shortcut-arrow {
    color: rgba(59, 67, 75, 0.44);
}

#headerSearchModal .header-search-shortcut:hover .header-search-shortcut-arrow {
    color: var(--rashid-teal-dark);
}

#headerSearchModal .header-search-empty {
    border: 1px solid rgba(29, 111, 116, 0.12);
    background: rgba(255, 255, 255, 0.68);
    color: var(--rashid-ink-soft);
}

#headerSearchModal .header-search-result {
    border: 1px solid var(--rashid-border);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 16px 28px -26px rgba(12, 15, 18, 0.42);
}

#headerSearchModal .header-search-result:hover,
#headerSearchModal .header-search-result.is-active {
    border-color: rgba(29, 111, 116, 0.18);
    background: rgba(29, 111, 116, 0.08);
}

#headerSearchModal .header-search-result-text {
    color: var(--rashid-ink);
}

#headerSearchModal .header-search-result-arrow {
    color: rgba(59, 67, 75, 0.42);
}

#headerSearchModal .header-search-result:hover .header-search-result-arrow,
#headerSearchModal .header-search-result.is-active .header-search-result-arrow {
    color: var(--rashid-teal-dark);
}

#headerSearchModal .header-search-result-icon--teal {
    background: rgba(29, 111, 116, 0.12);
    color: var(--rashid-teal-dark);
}

#headerSearchModal .header-search-result-icon--rose {
    background: rgba(215, 101, 82, 0.14);
    color: var(--rashid-rose);
}

#headerSearchModal .header-search-result-icon--amber {
    background: rgba(208, 138, 59, 0.14);
    color: var(--rashid-amber);
}

#headerSearchModal .header-search-result-icon--muted {
    background: rgba(26, 31, 36, 0.07);
    color: rgba(59, 67, 75, 0.82);
}

#headerSearchModal .header-search-scroller,
#search-modal .rashid-search-content,
#search-modal #search-suggest-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(29, 111, 116, 0.32) rgba(255, 255, 255, 0.52);
}

#headerSearchModal .header-search-scroller {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
    border-top: 1px solid rgba(255, 255, 255, 0.28);
}

#search-modal .rashid-search-content,
#search-modal #search-suggest-list {
    background-clip: padding-box;
}

#headerSearchModal .header-search-scroller::-webkit-scrollbar,
#search-modal .rashid-search-content::-webkit-scrollbar,
#search-modal #search-suggest-list::-webkit-scrollbar {
    width: 12px;
}

#headerSearchModal .header-search-scroller::-webkit-scrollbar-track,
#search-modal .rashid-search-content::-webkit-scrollbar-track,
#search-modal #search-suggest-list::-webkit-scrollbar-track {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(244, 238, 229, 0.92));
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px rgba(29, 111, 116, 0.08);
}

#headerSearchModal .header-search-scroller::-webkit-scrollbar-thumb,
#search-modal .rashid-search-content::-webkit-scrollbar-thumb,
#search-modal #search-suggest-list::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            rgba(29, 111, 116, 0.58),
            rgba(21, 90, 94, 0.78)
        );
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 8px 18px -12px rgba(21, 90, 94, 0.8);
}

#headerSearchModal .header-search-scroller::-webkit-scrollbar-thumb:hover,
#search-modal .rashid-search-content::-webkit-scrollbar-thumb:hover,
#search-modal #search-suggest-list::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            rgba(29, 111, 116, 0.72),
            rgba(21, 90, 94, 0.9)
        );
}

#headerSearchModal .header-search-scroller::-webkit-scrollbar-corner,
#search-modal .rashid-search-content::-webkit-scrollbar-corner,
#search-modal #search-suggest-list::-webkit-scrollbar-corner {
    background: transparent;
}

#headerSearchModal [class*="bg-white/5"],
#mobileHeaderDrawer [class*="bg-white/5"] {
    background: rgba(29, 111, 116, 0.08) !important;
}

#headerSearchModal [class*="text-white"],
#mobileHeaderDrawer [class*="text-white"] {
    color: var(--rashid-ink) !important;
}

#mobileHeaderOverlay {
    background-color: rgba(20, 26, 32, 0.35) !important;
}

.rashid-home {
    color: var(--rashid-ink);
}

.rashid-hero {
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(208, 138, 59, 0.35),
            transparent 55%
        ),
        radial-gradient(
            circle at 85% 10%,
            rgba(29, 111, 116, 0.35),
            transparent 50%
        ),
        linear-gradient(135deg, #102b31, #1d4a52);
    color: #f8f4ec;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 70px -45px rgba(10, 16, 20, 0.7);
}

.rashid-chip {
    color: #fff0dd;
    background: rgba(208, 138, 59, 0.2);
    border: 1px solid rgba(208, 138, 59, 0.55);
}

.rashid-card,
.rashid-audio-card,
.rashid-book-card {
    background: var(--rashid-paper-2);
    border-radius: var(--rashid-radius);
    border: 1px solid var(--rashid-border);
    box-shadow: var(--rashid-shadow);
}

.rashid-btn {
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.3px;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;
}

.rashid-btn-primary {
    background: var(--rashid-teal);
    color: #fff;
    box-shadow: 0 16px 35px -24px rgba(29, 111, 116, 0.65);
}

.rashid-btn-primary:hover {
    background: var(--rashid-teal-dark);
    transform: translateY(-2px);
}

.rashid-btn-outline {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.rashid-btn-outline:hover {
    background: #fff5e8;
    color: #102b31;
}

.rashid-pill-link {
    color: var(--rashid-teal);
    background: rgba(29, 111, 116, 0.12);
}

.rashid-pill-link:hover {
    color: var(--rashid-teal-dark);
    background: rgba(29, 111, 116, 0.2);
}

.rashid-audio-card {
    padding: 20px;
    background: linear-gradient(145deg, #ffffff, #f9f4ec);
}

.rashid-audio-card::after {
    background: radial-gradient(
        circle at top left,
        rgba(29, 111, 116, 0.22),
        transparent 60%
    );
}

.rashid-video-card {
    border-radius: var(--rashid-radius);
    background: #101b1f;
    box-shadow: 0 22px 40px -28px rgba(12, 15, 18, 0.85);
}

.rashid-video-card .overlay {
    background: linear-gradient(
        180deg,
        rgba(16, 27, 31, 0.2),
        rgba(16, 27, 31, 0.92)
    );
}

.rashid-series-card {
    border-radius: calc(var(--rashid-radius) + 6px);
    background: linear-gradient(140deg, #1f4c55, #1a2f35);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.rashid-newsletter {
    background: linear-gradient(135deg, #1d6f74, #102b31);
    color: #fef6ef;
    border-radius: calc(var(--rashid-radius) + 8px);
    box-shadow: 0 22px 50px -34px rgba(12, 15, 18, 0.8);
}

.rashid-newsletter::before {
    background: rgba(208, 138, 59, 0.35);
}

#site-footer {
    background:
        radial-gradient(circle at top right, rgba(29, 111, 116, 0.1), transparent 24%),
        radial-gradient(circle at bottom left, rgba(208, 138, 59, 0.12), transparent 28%),
        linear-gradient(180deg, #f6f0e6 0%, #efe6d8 100%);
    color: var(--rashid-ink);
    border-color: rgba(29, 111, 116, 0.12) !important;
    margin-bottom: calc(var(--global-player-height, 0px) * -1);
    padding-bottom: calc(var(--global-player-height, 0px) + 18px);
}

#site-footer::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: var(--global-player-height, 0px);
    background:
        linear-gradient(180deg, rgba(239, 230, 216, 0.96), rgba(239, 230, 216, 1));
    pointer-events: none;
}

#site-footer a {
    color: var(--rashid-teal-dark);
}

#site-footer a:hover {
    color: var(--rashid-teal);
}

#site-footer [class*="border-white"] {
    border-color: rgba(29, 111, 116, 0.12) !important;
}

#site-footer input {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: var(--rashid-border) !important;
    color: var(--rashid-ink) !important;
}

#site-footer input::placeholder {
    color: rgba(59, 67, 75, 0.6) !important;
}

#site-footer .grid:first-of-type {
    border-bottom-color: rgba(29, 111, 116, 0.12);
}

#site-footer .footer-brand-card,
#site-footer .footer-links-card,
#site-footer .footer-newsletter-card {
    border: 1px solid var(--rashid-border);
    border-radius: calc(var(--rashid-radius) + 8px);
    box-shadow: 0 24px 48px -40px rgba(12, 15, 18, 0.46);
}

#site-footer .footer-brand-card,
#site-footer .footer-links-card {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.84),
            rgba(248, 244, 236, 0.96)
        ),
        var(--rashid-paper-2);
}

#site-footer .footer-newsletter-card {
    background:
        radial-gradient(circle at top, rgba(208, 138, 59, 0.22), transparent 40%),
        linear-gradient(135deg, #1d6f74, #143f44);
    color: #fef6ef;
}

#site-footer .footer-brand-icon {
    background: rgba(29, 111, 116, 0.1);
    color: var(--rashid-teal-dark);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

#site-footer .footer-kicker {
    color: var(--rashid-teal-dark);
}

#site-footer .footer-brand-card h3,
#site-footer .footer-section-title,
#site-footer .footer-bottom {
    color: var(--rashid-ink);
}

#site-footer .footer-brand-card p,
#site-footer .footer-stat-label,
#site-footer .footer-bottom p,
#site-footer .footer-bottom div {
    color: var(--rashid-ink-soft);
}

#site-footer .footer-stat-card {
    border: 1px solid rgba(29, 111, 116, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.62);
}

#site-footer .footer-stat-value {
    color: var(--rashid-teal-dark);
}

#site-footer .footer-social {
    border: 1px solid rgba(29, 111, 116, 0.12);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

#site-footer .footer-link {
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.58);
    color: var(--rashid-ink-soft);
}

#site-footer .footer-link i {
    color: rgba(59, 67, 75, 0.38);
}

#site-footer .footer-link:hover {
    border-color: rgba(29, 111, 116, 0.14);
    background: rgba(29, 111, 116, 0.08);
    color: var(--rashid-teal-dark);
}

#site-footer .footer-link:hover i {
    color: var(--rashid-teal-dark);
}

#site-footer .footer-section-bar {
    background: linear-gradient(180deg, var(--rashid-teal), var(--rashid-amber));
}

#site-footer .footer-newsletter-card .footer-kicker,
#site-footer .footer-newsletter-card h4 {
    color: #fff7ed;
}

#site-footer .footer-newsletter-card p {
    color: rgba(255, 247, 237, 0.8);
}

#site-footer .footer-newsletter-input {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

#site-footer .footer-newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.62) !important;
}

#site-footer .footer-newsletter-submit {
    background: var(--rashid-amber);
    color: #17353a;
}

#site-footer .footer-pill {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 247, 237, 0.86);
}

#site-footer .footer-newsletter-message {
    border-radius: 16px;
    padding: 0.85rem 1rem;
}

#site-footer .footer-newsletter-message--success,
#site-footer .footer-newsletter-message--info {
    background: rgba(255, 255, 255, 0.12);
    color: #fff5e8;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

#site-footer .footer-newsletter-message--error {
    background: rgba(215, 101, 82, 0.14);
    color: #fff1ed;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 768px) {
    #site-footer {
        margin-bottom: calc(var(--global-player-height, 0px) * -1);
        padding-bottom: calc(var(--global-player-height, 0px) + 12px);
    }
}

[data-scroll-top] {
    background: var(--rashid-paper-2) !important;
    color: var(--rashid-ink) !important;
    border: 1px solid var(--rashid-border) !important;
    box-shadow: 0 16px 30px -22px rgba(12, 15, 18, 0.5) !important;
}

[data-scroll-top]:hover {
    background: #fff1db !important;
}

.footer-scroll-top {
    width: 54px;
    height: 54px;
    pointer-events: auto;
    border: 1px solid rgba(29, 111, 116, 0.14);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.92),
            rgba(248, 244, 236, 0.98)
        ),
        var(--rashid-paper-2);
    box-shadow: 0 24px 44px -28px rgba(12, 15, 18, 0.42);
    color: var(--rashid-ink);
    backdrop-filter: blur(14px);
}

.footer-scroll-top:hover {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.98),
            rgba(255, 241, 219, 0.98)
        ),
        var(--rashid-paper-2);
    color: var(--rashid-teal-dark);
}

.footer-scroll-top__ring {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.footer-scroll-top__track {
    fill: none;
    stroke: rgba(29, 111, 116, 0.1);
    stroke-width: 2.5;
}

.footer-scroll-top__progress {
    fill: none;
    stroke: var(--rashid-teal);
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.18s ease;
}

.footer-scroll-top__percent {
    color: var(--rashid-teal-dark);
}

.footer-scroll-top__icon {
    color: var(--rashid-teal-dark);
}

.footer-scroll-top__percent-badge {
    background: rgba(255, 250, 242, 0.96);
    color: var(--rashid-teal-dark);
    border: 1px solid rgba(29, 111, 116, 0.12);
    box-shadow: 0 10px 20px -16px rgba(12, 15, 18, 0.38);
}

.quick-auth-panel {
    border-radius: calc(var(--rashid-radius) + 10px) !important;
}

/* Global component remap for Rashid pages */
body .bg-white {
    background-color: var(--rashid-paper-2) !important;
}

.rashid-panel .bg-white,
.rashid-aside-card .bg-white {
    background-color: #fffdf8 !important;
}

body .bg-stone-50 {
    background-color: #f6f0e6 !important;
}

body .bg-stone-100 {
    background-color: #f0e7da !important;
}

body .bg-stone-200 {
    background-color: #e6dac8 !important;
}

body .border-stone-100,
body .border-stone-200,
body .border-stone-300 {
    border-color: var(--rashid-border) !important;
}

body .text-slate-900,
body .text-slate-800,
body .text-stone-900,
body .text-stone-800 {
    color: var(--rashid-ink) !important;
}

body .text-slate-700,
body .text-slate-600,
body .text-stone-700,
body .text-stone-600 {
    color: var(--rashid-ink-soft) !important;
}

body .text-slate-500,
body .text-slate-400,
body .text-stone-500,
body .text-stone-400 {
    color: rgba(59, 67, 75, 0.7) !important;
}

body .bg-emerald-50 {
    background-color: rgba(29, 111, 116, 0.08) !important;
}

body .bg-emerald-100 {
    background-color: rgba(29, 111, 116, 0.14) !important;
}

body .border-emerald-100,
body .border-emerald-200 {
    border-color: rgba(29, 111, 116, 0.28) !important;
}

body .text-emerald-600,
body .text-emerald-700 {
    color: var(--rashid-teal) !important;
}

body .bg-emerald-500,
body .bg-emerald-600 {
    background-color: var(--rashid-teal) !important;
}

body .bg-emerald-700 {
    background-color: var(--rashid-teal-dark) !important;
}

body .bg-amber-50 {
    background-color: rgba(208, 138, 59, 0.12) !important;
}

body .bg-amber-100 {
    background-color: rgba(208, 138, 59, 0.18) !important;
}

body .border-amber-100,
body .border-amber-200 {
    border-color: rgba(208, 138, 59, 0.35) !important;
}

body .text-amber-600,
body .text-amber-700 {
    color: var(--rashid-amber) !important;
}

body .bg-amber-600 {
    background-color: var(--rashid-amber) !important;
}

body .text-rose-600 {
    color: var(--rashid-rose) !important;
}

body .bg-rose-50 {
    background-color: rgba(215, 101, 82, 0.14) !important;
}

body .shadow-sm,
body .shadow,
body .shadow-lg,
body .shadow-xl {
    box-shadow: 0 24px 55px -40px rgba(12, 15, 18, 0.55) !important;
}

body input,
body textarea,
body select {
    border-radius: 18px !important;
    border-color: var(--rashid-border) !important;
    background-color: rgba(255, 255, 255, 0.85) !important;
    color: var(--rashid-ink) !important;
}

body input:focus,
body textarea:focus,
body select:focus {
    border-color: rgba(29, 111, 116, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(29, 111, 116, 0.18) !important;
}

.quran-font {
    font-family: "Changa", "IBM Plex Sans Arabic", sans-serif;
}

body .bg-gradient-to-br[class*="from-emerald"] {
    background: linear-gradient(135deg, #102b31, #1d6f74) !important;
}

body .bg-gradient-to-br[class*="from-amber"] {
    background: linear-gradient(135deg, #3a2615, #d08a3b) !important;
}

body .bg-gradient-to-br[class*="from-rose"] {
    background: linear-gradient(135deg, #3a1c1a, #d76552) !important;
}

#search-modal .bg-white {
    background-color: var(--rashid-paper-2) !important;
}

#search-modal .border-stone-200,
#search-modal .border-stone-100 {
    border-color: var(--rashid-border) !important;
}

#search-modal .bg-stone-50 {
    background-color: #f6f0e6 !important;
}

#search-modal .text-stone-600,
#search-modal .text-stone-700,
#search-modal .text-stone-800 {
    color: var(--rashid-ink) !important;
}

#search-modal .text-stone-400 {
    color: rgba(59, 67, 75, 0.7) !important;
}

.rashid-search-backdrop {
    background:
        radial-gradient(circle at top, rgba(208, 138, 59, 0.12), transparent 32%),
        rgba(26, 31, 36, 0.6);
}

.rashid-search-panel {
    position: relative;
    background:
        linear-gradient(
            180deg,
            rgba(255, 251, 245, 0.97),
            rgba(246, 239, 228, 0.99)
        ),
        var(--rashid-paper-2);
    border: 1px solid var(--rashid-border);
    box-shadow: 0 34px 80px -46px rgba(12, 15, 18, 0.62);
}

.rashid-search-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(29, 111, 116, 0.08), transparent 24%),
        radial-gradient(circle at bottom left, rgba(208, 138, 59, 0.08), transparent 28%);
    pointer-events: none;
}

.rashid-search-header {
    position: relative;
    border-bottom: 1px solid rgba(29, 111, 116, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(248, 244, 236, 0.52));
}

.rashid-search-header__icon {
    color: var(--rashid-teal);
}

.rashid-search-input {
    color: var(--rashid-ink);
}

.rashid-search-input::placeholder {
    color: rgba(59, 67, 75, 0.62);
}

.rashid-search-esc {
    color: rgba(59, 67, 75, 0.72);
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid var(--rashid-border);
}

.rashid-search-submit {
    background: var(--rashid-teal);
    color: #fff;
    box-shadow: 0 18px 30px -24px rgba(29, 111, 116, 0.68);
}

.rashid-search-submit:hover {
    background: var(--rashid-teal-dark);
}

.rashid-search-close {
    background: rgba(255, 255, 255, 0.76);
    color: rgba(59, 67, 75, 0.8);
    border: 1px solid rgba(26, 31, 36, 0.08);
}

.rashid-search-close:hover {
    background: rgba(215, 101, 82, 0.1);
    color: var(--rashid-rose);
}

.rashid-search-suggest-box {
    background:
        linear-gradient(
            180deg,
            rgba(255, 251, 245, 0.98),
            rgba(246, 239, 228, 0.98)
        ),
        var(--rashid-paper-2);
    border: 1px solid rgba(29, 111, 116, 0.12);
    box-shadow: 0 28px 50px -36px rgba(12, 15, 18, 0.45);
}

.rashid-search-content {
    background:
        radial-gradient(circle at top left, rgba(208, 138, 59, 0.1), transparent 28%),
        radial-gradient(circle at bottom right, rgba(29, 111, 116, 0.08), transparent 24%),
        linear-gradient(180deg, #f7f1e8 0%, #f1e8db 100%);
}

.rashid-search-section-title {
    color: var(--rashid-teal-dark);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.rashid-search-chip {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--rashid-border);
    color: var(--rashid-ink);
    box-shadow: 0 16px 28px -26px rgba(12, 15, 18, 0.42);
}

.rashid-search-chip i {
    color: inherit;
}

.rashid-search-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 34px -28px rgba(12, 15, 18, 0.5);
}

.rashid-search-chip--audio:hover {
    border-color: rgba(29, 111, 116, 0.32);
    color: var(--rashid-teal-dark);
    background: rgba(29, 111, 116, 0.08);
}

.rashid-search-chip--rose:hover {
    border-color: rgba(215, 101, 82, 0.28);
    color: var(--rashid-rose);
    background: rgba(215, 101, 82, 0.08);
}

.rashid-search-chip--book:hover {
    border-color: rgba(208, 138, 59, 0.32);
    color: var(--rashid-amber);
    background: rgba(208, 138, 59, 0.08);
}

.rashid-search-suggestion {
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.18);
}

.rashid-search-suggestion:hover,
.rashid-search-suggestion.is-active {
    background: rgba(255, 255, 255, 0.74);
    border-color: rgba(29, 111, 116, 0.18);
    box-shadow: 0 18px 34px -30px rgba(12, 15, 18, 0.34);
}

.rashid-search-suggestion__icon {
    color: var(--rashid-ink-soft);
}

.rashid-search-suggestion__icon--teal {
    background: rgba(29, 111, 116, 0.12);
    color: var(--rashid-teal-dark);
}

.rashid-search-suggestion__icon--amber {
    background: rgba(208, 138, 59, 0.14);
    color: var(--rashid-amber);
}

.rashid-search-suggestion__icon--rose {
    background: rgba(215, 101, 82, 0.14);
    color: var(--rashid-rose);
}

.rashid-search-suggestion__icon--muted {
    background: rgba(26, 31, 36, 0.07);
    color: rgba(59, 67, 75, 0.82);
}

.rashid-search-suggestion__title {
    color: var(--rashid-ink);
}

.rashid-search-suggestion:hover .rashid-search-suggestion__title,
.rashid-search-suggestion.is-active .rashid-search-suggestion__title {
    color: var(--rashid-teal-dark);
}

.rashid-search-suggestion__meta {
    color: rgba(59, 67, 75, 0.72);
}

.rashid-search-suggestion__arrow {
    color: rgba(59, 67, 75, 0.38);
}

/* Rashid hero */
.rashid-hero-swiper {
    position: relative;
    overflow: hidden;
    border-radius: calc(var(--rashid-radius) + 12px);
    border: 1px solid var(--rashid-border);
    background: var(--rashid-paper-2);
    box-shadow: 0 30px 70px -50px rgba(12, 15, 18, 0.65);
}

.rashid-hero-slide {
    position: relative;
    padding: 32px 24px;
    min-height: 420px;
}

@media (min-width: 768px) {
    .rashid-hero-slide {
        padding: 40px 36px;
    }
}

@media (min-width: 1024px) {
    .rashid-hero-slide {
        padding: 56px 56px;
    }
}

.rashid-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.rashid-hero-orb {
    position: absolute;
    border-radius: 999px;
    background: var(--hero-accent-soft);
    filter: blur(2px);
    opacity: 0.8;
}

.rashid-hero-orb.is-1 {
    width: 320px;
    height: 320px;
    top: -140px;
    right: -120px;
}

.rashid-hero-orb.is-2 {
    width: 260px;
    height: 260px;
    bottom: -140px;
    left: -120px;
    background: var(--hero-accent-glow);
    opacity: 0.65;
}

.rashid-hero-orb.is-3 {
    width: 180px;
    height: 180px;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.35);
    opacity: 0.4;
}

.rashid-hero-grid {
    position: relative;
    display: grid;
    gap: 32px;
    align-items: center;
}

@media (min-width: 1024px) {
    .rashid-hero-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: 48px;
    }
}

.rashid-hero-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rashid-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--hero-accent-soft);
    color: var(--hero-accent);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    width: fit-content;
}

.rashid-hero-title {
    font-size: clamp(24px, 3vw, 42px);
    font-weight: 800;
    color: var(--rashid-ink);
    line-height: 1.35;
}

.rashid-hero-highlight {
    color: var(--hero-accent);
    display: inline-block;
    margin-inline-start: 6px;
}

.rashid-hero-copy {
    color: var(--rashid-ink-soft);
    font-size: 15px;
    line-height: 1.9;
    max-width: 38rem;
}

.rashid-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.rashid-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;
}

.rashid-hero-primary {
    background: var(--hero-accent);
    color: #fff;
    box-shadow: 0 16px 30px -22px var(--hero-accent-glow);
}

.rashid-hero-primary:hover {
    transform: translateY(-2px);
}

.rashid-hero-secondary {
    border: 1px solid var(--rashid-border);
    background: rgba(255, 255, 255, 0.7);
    color: var(--rashid-ink);
}

.rashid-hero-secondary:hover {
    background: #fff;
    transform: translateY(-2px);
}

.rashid-hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.rashid-hero-feature {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px dashed var(--hero-accent-soft);
    background: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 600;
    color: var(--rashid-ink-soft);
}

.rashid-hero-media {
    display: grid;
    gap: 16px;
    justify-items: center;
}

.rashid-hero-image {
    width: min(280px, 70vw);
    height: min(280px, 70vw);
    padding: 14px;
    border-radius: calc(var(--rashid-radius) + 10px);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--hero-accent-soft);
    box-shadow: var(--rashid-shadow);
}

.rashid-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--rashid-radius) + 2px);
}

.rashid-hero-slide[data-hero-style="welcome"] .rashid-hero-image,
.rashid-hero-slide[data-hero-style="welcome"] .rashid-hero-image img {
    border-radius: 999px;
}

.rashid-hero-facts {
    display: grid;
    gap: 12px;
    width: min(320px, 100%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rashid-hero-fact {
    text-align: center;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--rashid-border);
    box-shadow: 0 18px 35px -30px rgba(12, 15, 18, 0.6);
}

.rashid-hero-fact span {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--rashid-ink-soft);
}

.rashid-hero-fact strong {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 800;
    color: var(--hero-accent);
}

.rashid-hero-swiper .swiper-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--swiper-btn-bg);
    border: 1px solid var(--swiper-btn-border);
    color: var(--swiper-btn-color);
    box-shadow: 0 16px 30px -22px rgba(12, 15, 18, 0.5);
    transition: 0.25s;
}

.rashid-hero-swiper .swiper-nav-btn:hover {
    background: var(--swiper-btn-hover-bg);
    transform: translateY(-50%) scale(1.05);
}

.rashid-hero-swiper .swiper-nav-btn i {
    font-size: 22px;
}

.rashid-hero-swiper .swiper-button-next-custom {
    left: 18px;
}

.rashid-hero-swiper .swiper-button-prev-custom {
    right: 18px;
}

.rashid-hero-swiper .swiper-button-next::after,
.rashid-hero-swiper .swiper-button-prev::after {
    display: none !important;
}

.rashid-hero-swiper .swiper-pagination {
    padding: 10px 14px;
    width: max-content !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--rashid-border);
    backdrop-filter: blur(10px);
}

.rashid-hero-swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--swiper-bullet);
    opacity: 0.55;
    transition:
        width 0.3s ease,
        background 0.3s ease,
        opacity 0.3s ease;
}

.rashid-hero-swiper .swiper-pagination-bullet-active {
    width: 28px;
    border-radius: 999px;
    background: var(--swiper-bullet-active);
    opacity: 1;
    box-shadow: 0 0 12px var(--swiper-bullet-shadow);
}

.nav-dropdown__panel {
    border: 1px solid var(--rashid-border);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.9),
            rgba(248, 244, 236, 0.96)
        ),
        rgba(244, 238, 229, 0.98);
    box-shadow: 0 24px 60px rgba(12, 15, 18, 0.14);
}

.nav-dropdown__head {
    border-bottom: 1px solid rgba(29, 111, 116, 0.12);
}

.nav-dropdown__kicker {
    color: var(--rashid-teal);
}

.nav-dropdown__title {
    color: var(--rashid-ink);
}

.nav-dropdown__desc {
    color: var(--rashid-ink-soft);
}

.nav-dropdown__icon {
    border: 1px solid rgba(29, 111, 116, 0.14);
    background: rgba(29, 111, 116, 0.08);
    color: var(--rashid-teal-dark);
}

.nav-dropdown__link {
    border: 1px solid rgba(29, 111, 116, 0.1);
    background: rgba(255, 255, 255, 0.62);
    text-decoration: none;
}

.nav-dropdown__link-title {
    color: var(--rashid-ink);
}

.nav-dropdown__link-meta {
    color: var(--rashid-ink-soft);
}

.nav-dropdown__link-icon {
    background: rgba(208, 138, 59, 0.12);
    color: var(--rashid-gold);
}

.nav-dropdown__link:hover {
    border-color: rgba(29, 111, 116, 0.25);
    background: rgba(29, 111, 116, 0.08);
}

.nav-dropdown__link:hover .nav-dropdown__link-icon {
    background: rgba(29, 111, 116, 0.16);
    color: var(--rashid-teal-dark);
    transform: translate(-2px, -2px);
}

.prayer-times__panel,
.prayer-times__picker-panel {
    border-color: var(--rashid-border) !important;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.92),
            rgba(248, 244, 236, 0.98)
        ),
        rgba(244, 238, 229, 0.98) !important;
    box-shadow: 0 24px 60px rgba(12, 15, 18, 0.14);
}

.prayer-times__status,
.prayer-times__active-location {
    border-color: rgba(29, 111, 116, 0.16) !important;
    background: rgba(29, 111, 116, 0.08) !important;
    color: var(--rashid-teal-dark) !important;
}

.prayer-times__summary,
.prayer-times__location,
.prayer-times__picker-country {
    color: var(--rashid-ink) !important;
}

.prayer-times__date,
.prayer-times__picker-city,
.prayer-times__picker-search::placeholder,
.prayer-times__error {
    color: var(--rashid-ink-soft) !important;
}

.prayer-times__picker-trigger,
.prayer-times__picker-search,
.prayer-times__picker-option,
.prayer-times__item {
    border-color: rgba(29, 111, 116, 0.1) !important;
    background: rgba(255, 255, 255, 0.66) !important;
    color: var(--rashid-ink) !important;
}

.prayer-times__picker-trigger:hover,
.prayer-times__picker-option:hover {
    border-color: rgba(29, 111, 116, 0.24) !important;
    background: rgba(29, 111, 116, 0.08) !important;
}

.prayer-times__picker-option.is-active,
.prayer-times__item.is-current {
    border-color: rgba(29, 111, 116, 0.24) !important;
    background: rgba(29, 111, 116, 0.1) !important;
}

.prayer-times__picker-option.is-active i,
.prayer-times__picker-option.is-active span:last-child,
.prayer-times__item.is-current .prayer-times__value,
.prayer-times__item.is-current .prayer-times__meta,
.prayer-times__value {
    color: var(--rashid-teal-dark) !important;
}

.prayer-times__meta {
    color: var(--rashid-ink-soft) !important;
}

.prayer-times__body-scroll::-webkit-scrollbar-track,
.prayer-times__picker-list::-webkit-scrollbar-track {
    background: rgba(29, 111, 116, 0.06);
}

.prayer-times__body-scroll::-webkit-scrollbar-thumb,
.prayer-times__picker-list::-webkit-scrollbar-thumb {
    background: rgba(29, 111, 116, 0.22);
}

.prayer-times--header {
    max-width: 215px;
}

.prayer-times--header .prayer-times__summary {
    max-width: 86px;
}

.prayer-times--header .prayer-times__active-location {
    max-width: 72px;
    white-space: nowrap;
}

.prayer-times--aside .prayer-times__aside-card {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.96),
            rgba(248, 244, 236, 0.98)
        ),
        var(--rashid-paper-2);
    border: 1px solid var(--rashid-border);
    box-shadow: 0 24px 54px -42px rgba(12, 15, 18, 0.58);
}

.prayer-times--aside .prayer-times__aside-badge {
    border: 1px solid rgba(29, 111, 116, 0.14);
    background:
        radial-gradient(circle at top, rgba(217, 177, 117, 0.24), transparent 60%),
        rgba(29, 111, 116, 0.08);
    color: var(--rashid-teal-dark);
}

.prayer-times--aside .prayer-times__aside-chevron {
    border: 1px solid rgba(29, 111, 116, 0.12);
    background: rgba(29, 111, 116, 0.06);
    color: var(--rashid-ink-soft);
}

.prayer-times--aside .prayer-times__aside-card[open] .prayer-times__aside-chevron {
    color: var(--rashid-teal-dark);
    transform: rotate(180deg);
}

.prayer-times--aside .prayer-times__panel--static {
    margin-top: 18px;
    border-color: rgba(29, 111, 116, 0.12) !important;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.8),
            rgba(248, 244, 236, 0.9)
        ),
        rgba(255, 255, 255, 0.68) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.prayer-times--aside .prayer-times__panel--static > .flex:first-child {
    border-bottom-color: rgba(29, 111, 116, 0.12);
}

.prayer-times--aside .prayer-times__kicker,
.prayer-times--aside .prayer-times__picker-label {
    color: var(--rashid-teal-dark);
}

.prayer-times--aside .prayer-times__heading,
.prayer-times--aside .prayer-times__item-title {
    color: var(--rashid-ink);
}

.prayer-times--aside .prayer-times__item-subtitle,
.prayer-times--aside .prayer-times__picker-pin,
.prayer-times--aside .prayer-times__picker-chevron,
.prayer-times--aside .prayer-times__search-icon {
    color: var(--rashid-ink-soft);
}

.prayer-times--aside .prayer-times__error {
    border: 1px solid rgba(215, 101, 82, 0.16);
    background: rgba(215, 101, 82, 0.08);
    color: #9f4d3e !important;
}

.rashid-item-show .item-badge--section,
.rashid-item-show .item-pill--teal,
.rashid-item-show .item-action--teal,
.rashid-item-show .item-note--teal {
    background: rgba(29, 111, 116, 0.08);
    color: var(--rashid-teal-dark);
}

.rashid-item-show .item-badge--section {
    background: rgba(29, 111, 116, 0.1);
}

.rashid-item-show .item-badge--type,
.rashid-item-show .item-pill--rose {
    background: rgba(215, 101, 82, 0.1);
    color: var(--rashid-rose);
}

.rashid-item-show .item-action--amber,
.rashid-item-show .item-pill--amber {
    background: rgba(208, 138, 59, 0.1);
    color: var(--rashid-amber);
}

.rashid-item-show .item-card-soft {
    background: linear-gradient(180deg, #ffffff 0%, var(--rashid-paper-2) 100%);
}

.rashid-item-show .item-link-teal,
.rashid-item-show .item-heading-hover:hover,
.rashid-item-show .item-arrow-hover:hover,
.rashid-item-show .item-richtext a {
    color: var(--rashid-teal-dark);
}

.rashid-item-show .item-link-teal {
    color: var(--rashid-teal);
}

.rashid-item-show .item-card-hover:hover,
.rashid-item-show .item-row-hover:hover,
.rashid-item-show .item-related-card:hover {
    border-color: rgba(29, 111, 116, 0.3);
}

.rashid-item-show .item-summary-box,
.rashid-item-show .item-note--teal {
    border: 1px solid rgba(29, 111, 116, 0.18);
}

.rashid-item-show .item-audio-glow {
    background: rgba(29, 111, 116, 0.08);
}

.rashid-item-show .item-audio-icon {
    background: rgba(29, 111, 116, 0.14);
    color: var(--rashid-teal);
}

.rashid-item-show .item-audio-icon:hover,
.rashid-item-show .item-audio-icon.is-active {
    background: var(--rashid-teal);
    color: #fff;
}

.rashid-item-show .item-audio-control-primary:hover {
    border-color: var(--rashid-teal);
    background: var(--rashid-teal);
    color: #fff;
}

.rashid-item-show .item-outline-teal:hover {
    border-color: rgba(29, 111, 116, 0.3);
    color: var(--rashid-teal);
}

.rashid-item-show .item-focus-teal:focus {
    border-color: var(--rashid-teal);
}

.rashid-item-show .item-btn-teal {
    background: var(--rashid-teal);
}

.rashid-item-show .item-btn-teal:hover {
    background: var(--rashid-teal-dark);
}

.rashid-item-show .item-video-focus:focus {
    box-shadow: 0 0 0 2px rgba(29, 111, 116, 0.35);
}

.rashid-item-show .item-related-glow {
    background: rgba(29, 111, 116, 0.12);
}

.rashid-item-show .item-related-tone--audio {
    border-color: rgba(29, 111, 116, 0.18);
    background: linear-gradient(
        180deg,
        rgba(29, 111, 116, 0.08),
        rgba(29, 111, 116, 0.16)
    );
    color: var(--rashid-teal-dark);
}

.rashid-item-show .item-related-tone--video {
    border-color: rgba(208, 138, 59, 0.18);
    background: linear-gradient(
        180deg,
        rgba(208, 138, 59, 0.08),
        rgba(208, 138, 59, 0.18)
    );
    color: var(--rashid-amber);
}

.rashid-item-show .item-related-tone--book {
    border-color: rgba(215, 101, 82, 0.18);
    background: linear-gradient(
        180deg,
        rgba(215, 101, 82, 0.08),
        rgba(215, 101, 82, 0.16)
    );
    color: var(--rashid-rose);
}