/**
* IslamKVDM Toolkit - Search Widget Styles
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manjari:wght@400;700&family=Poppins:wght@400;500;600;700&display=swap');
:root {
--ik-mobile-title-size: 14px;
--ik-mobile-desc-size: 12px;
--ik-mobile-title-lh: 1.3;
--ik-mobile-desc-lh: 1.5;
/* Theme Variables - Default Light */
--ik-bg: #ffffff;
--ik-text: #1e293b;
--ik-text-dim: #64748b;
--ik-card-bg: #f8fafc;
--ik-border: rgba(0, 0, 0, 0.05);
--ik-accent: #cbd034;
--ik-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
/* Global Font Families */
/* --ik-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; */
--ik-font-primary: 'Manjari', sans-serif;
--ik-font-inter: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--ik-font-manjari: 'Manjari', sans-serif;
--ik-font-arabic: 'Amiri', 'Scheherazade New', serif;
--ik-quran-font: var(--ik-font-manjari);
/* Baby Names Fonts */
--ik-bn-font-en: 'Poppins', sans-serif;
--ik-bn-font-ar: 'Qatar2022', 'Amiri', serif;
--ik-bn-font-ml: 'Manjari', sans-serif;
}
[data-theme="dark"] {
--ik-bg: #06060c;
--ik-text: #f8fafc;
--ik-text-dim: #94a3b8;
--ik-card-bg: hsl(0 0% 20%);
--ik-border: rgba(255, 255, 255, 0.1);
--ik-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
--ik-accent-2: #121218
}
button:focus,
button:focus-visible,
button:focus-within,
button:hover {
background-color: var(--ik-accent) !important;
opacity: 0.8 !important;
color: rgb(1, 1, 1) !important;
/* border-radius: 100% !important; */
}
/* Global Dark Mode Overrides */
[data-theme="dark"],
[data-theme="dark"] body,
[data-theme="dark"] #page,
[data-theme="dark"] #content,
[data-theme="dark"] .site-content,
[data-theme="dark"] .elementor-page,
[data-theme="dark"] section,
[data-theme="dark"] article {
background-color: var(--ik-bg) !important;
color: var(--ik-text) !important;
}
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] p,
[data-theme="dark"] .cpel-switcher__icon,
[data-theme="dark"] span:not(.ik-toggle-icon),
[data-theme="dark"] .ik-prayer-name,
[data-theme="dark"] a:not(.ik-theme-toggle-btn) {
color: var(--ik-text) !important;
}
[data-theme="dark"] .elementor,
[data-theme="dark"] .main,
[data-theme="dark"] #main {
background-color: var(--ik-bg) !important;
}
[data-theme="dark"] input:not([type="submit"]):not([type="button"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
/* background-color: var(--ik-card-bg) !important; */
background-color: transparent;
color: var(--ik-text) !important;
border-color: var(--ik-border) !important;
}
[data-theme="dark"] .elementor-section,
[data-theme="dark"] .elementor-container,
[data-theme="dark"] .elementor-column-wrap,
[data-theme="dark"] .elementor-widget-wrap
/* [data-theme="dark"] .elementor-widget-container */
{
background-color: transparent !important;
background-image: none !important;
}
[data-theme="dark"] .elementor-column-wrap.elementor-element-populated,
/* [data-theme="dark"] .elementor-widget-container > div, */
[data-theme="dark"] .ik-card,
[data-theme="dark"] .card,
[data-theme="dark"] .post-item {
background-color: var(--ik-card-bg) !important;
border-color: var(--ik-border) !important;
color: var(--ik-text) !important;
}
[data-theme="dark"] header,
[data-theme="dark"] footer,
[data-theme="dark"] .site-header,
[data-theme="dark"] .site-footer,
[data-theme="dark"] .elementor-location-header,
[data-theme="dark"] .elementor-location-footer {
background-color: var(--ik-bg) !important;
}
[data-theme="dark"] .main-navigation,
[data-theme="dark"] .nav-menu,
[data-theme="dark"] .elementor-nav-menu--main {
background-color: transparent !important;
}
/* [data-theme="dark"] .elementor-widget-container, */
/* [data-theme="dark"] .elementor-widget-container > div, */
[data-theme="dark"] .elementor-card,
[data-theme="dark"] .elementor-image-box-wrapper,
[data-theme="dark"] .elementor-icon-box-wrapper {
background-color: var(--ik-card-bg) !important;
border-radius: 12px;
}
/* Specific fix for the light-colored cards in landing page grid */
[data-theme="dark"] .elementor-element.elementor-grid-item,
[data-theme="dark"] .elementor-posts-container .elementor-post {
background-color: var(--ik-card-bg) !important;
}
.islamkvdm-search-widget {
font-family: var(--ik-font-primary);
background: var(--ik-bg);
color: var(--ik-text);
border-radius: 20px;
padding: 40px;
box-shadow: var(--ik-shadow);
max-width: 100%;
overflow: visible;
}
.person-category-item {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 700;
background: transparent;
}
.person-results-header {
display: flex;
align-items: center;
padding: 12px 18px;
border-bottom: 1px solid #f1f5f9;
background: transparent;
position: sticky;
top: 0;
z-index: 10;
}
/* [data-theme="dark"] .elementor-widget-container, */
[data-theme="dark"] .ik-prayer-container,
[data-theme="dark"] .ik-post-card,
[data-theme="dark"] .elementor-widget-wrap,
[data-theme="dark"] .elementor-icon-box-wrapper,
[data-theme="dark"] .elementor-image-box-wrapper {
background-color: var(--ik-card-bg) !important;
border-color: var(--ik-border) !important;
border-radius: 15px;
}
[data-theme="dark"] .elementor-icon-box-title,
[data-theme="dark"] .elementor-icon-box-description,
[data-theme="dark"] .elementor-image-box-title,
[data-theme="dark"] .elementor-image-box-description {
color: var(--ik-text) !important;
}
[data-theme="dark"] .elementor-widget-image,
[data-theme="dark"] .site-logo,
[data-theme="dark"] .custom-logo-link {
background-color: transparent !important;
}
[data-theme="dark"] .elementor-nav-menu--main a {
color: var(--ik-text) !important;
}
/* Search Bar */
.islamkvdm-search-widget .search-bar {
display: flex !important;
align-items: center !important;
background: var(--ik-bg) !important;
border-radius: 100px !important;
padding: 10px 10px 10px 24px !important;
margin-bottom: 20px !important;
box-shadow: var(--ik-shadow) !important;
position: relative !important;
border: 1px solid var(--ik-border) !important;
width: 100% !important;
}
.search-icon {
color: #94a3b8;
margin-right: 14px;
flex-shrink: 0;
display: flex;
align-items: center;
}
.islamkvdm-search-widget .search-input {
flex: 1 !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
font-size: 16px !important;
color: var(--ik-text) !important;
background: transparent !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.islamkvdm-search-widget .search-input::placeholder {
color: #94a3b8 !important;
}
.mic-icon {
color: var(--ik-text-dim);
width: 40px;
height: 40px;
background: var(--ik-card-bg);
border-radius: 50%;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.mic-icon:hover {
background: var(--ik-border);
color: var(--ik-accent);
}
.mic-icon.listening,
.mic-icon-wrapper.listening,
.ik-mic-btn.listening {
background: #cbd034 !important;
color: #fff !important;
animation: micPulse 1.5s infinite;
}
@keyframes micPulse {
0% {
box-shadow: 0 0 0 0 rgba(203, 208, 52, 0.4);
}
70% {
box-shadow: 0 0 0 15px rgba(203, 208, 52, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(203, 208, 52, 0);
}
}
/* Filter Buttons */
.filter-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
position: relative;
}
.islamkvdm-search-widget .filter-btn {
background: var(--ik-card-bg) !important;
border: 1px solid var(--ik-border) !important;
border-radius: 12px !important;
padding: 12px 24px !important;
font-size: 15px !important;
font-weight: 500 !important;
color: var(--ik-text) !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
transition: all 0.2s ease !important;
box-shadow: var(--ik-shadow) !important;
min-width: 160px !important;
line-height: inherit !important;
overflow: hidden;
}
.islamkvdm-search-widget .filter-btn:hover {
background: var(--ik-bg) !important;
border-color: var(--ik-accent) !important;
transform: translateY(-2px) !important;
box-shadow: var(--ik-shadow) !important;
}
.dropdown-arrow {
font-size: 12px;
color: #94a3b8;
transition: transform 0.2s ease;
display: flex;
align-items: center;
}
.filter-btn.active .dropdown-arrow {
transform: rotate(180deg);
}
/* Filter Dropdowns */
.filter-dropdowns {
position: relative;
width: 100%;
}
.islamkvdm-search-widget .filter-dropdown {
display: none !important;
position: absolute;
top: 8px;
left: 0;
min-width: 220px;
background: var(--ik-bg);
border: 1px solid var(--ik-border);
border-radius: 16px;
box-shadow: var(--ik-shadow);
z-index: 1000;
overflow: hidden;
animation: dropdownPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dropdownPop {
from {
opacity: 0;
transform: translateY(-10px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.islamkvdm-search-widget .filter-dropdown.show {
display: block !important;
z-index: 999999 !important;
}
.dropdown-content {
padding: 12px 0;
max-height: 450px;
overflow-y: auto;
}
.dropdown-item {
padding: 12px 20px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 14px;
color: var(--ik-text-dim);
}
.dropdown-item:hover {
background: var(--ik-card-bg);
color: var(--ik-accent);
padding-left: 24px;
}
.dropdown-item.active {
background: var(--ik-card-bg);
color: var(--ik-accent);
font-weight: 600;
}
/* Alphabet Grid Dropdown */
.alphabet-dropdown {
width: 480px;
/* Wider as seen in screenshot */
max-width: 100%;
}
.alphabet-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
padding: 24px;
}
.alphabet-letter {
width: 100%;
aspect-ratio: 1;
border: none;
background: transparent;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
color: var(--ik-text);
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.alphabet-letter:hover {
background: var(--ik-card-bg);
color: var(--ik-accent);
}
.alphabet-letter.active {
background: var(--ik-accent);
color: #ffffff;
font-weight: 600;
}
/* Results Container */
.results-container {
margin-top: 32px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 24px;
backdrop-filter: blur(10px);
}
.results-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.results-count {
font-size: 14px;
color: #94a3b8;
font-weight: 500;
}
.clear-filters {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 8px 16px;
font-size: 13px;
color: #cbd5e1;
cursor: pointer;
transition: all 0.2s ease;
}
.clear-filters:hover {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
}
/* Results List */
.results-list {
max-height: 500px;
overflow-y: auto;
}
.result-item {
padding: 20px;
border-radius: 12px;
margin-bottom: 8px;
transition: all 0.20s ease;
background: rgba(255, 255, 255, 0.02);
}
.result-item:hover {
background: rgba(255, 255, 255, 0.05);
transform: translateX(5px);
}
.result-title {
font-size: 18px;
font-weight: 600;
color: #f8fafc;
margin-bottom: 8px;
line-height: 1.4;
}
.result-title a {
color: inherit;
text-decoration: none;
}
.result-title a:hover {
color: #3b82f6;
}
.result-excerpt {
font-size: 14px;
color: #94a3b8;
line-height: 1.6;
margin-bottom: 12px;
}
.result-meta {
font-size: 13px;
color: #64748b;
}
.no-results {
text-align: center;
padding: 60px 40px;
color: #64748b;
}
.no-results svg {
width: 64px;
height: 64px;
margin-bottom: 16px;
opacity: 0.2;
}
/* Custom Scrollbar */
.results-list::-webkit-scrollbar,
.dropdown-content::-webkit-scrollbar {
width: 6px;
}
.results-list::-webkit-scrollbar-thumb,
.dropdown-content::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
/* Responsive */
@media (max-width: 768px) {
.islamkvdm-search-widget {
padding: 24px;
}
.alphabet-dropdown {
width: 100%;
}
.filter-btn {
flex: 1;
min-width: calc(50% - 10px);
}
}
@media (max-width: 480px) {
.filter-btn {
min-width: 100%;
}
.alphabet-grid {
grid-template-columns: repeat(6, 1fr);
padding: 16px;
}
}
/* -------------------------------- */
/* IK Post List Widget Styles */
/* -------------------------------- */
.ik-post-list-wrapper {
width: 100%;
padding: 20px 0;
box-sizing: border-box;
}
.ik-post-list-container {
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
}
.ik-post-list-item {
display: flex;
flex-direction: row;
align-items: center;
background: #ffffff;
border: 1px solid #f0f0f0;
border-radius: 16px;
padding: 16px;
text-decoration: none;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
transition: all 0.3s ease;
box-sizing: border-box;
gap: 24px;
}
.ik-post-list-item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}
.ik-post-list-thumb-wrap {
flex-shrink: 0;
width: 100px;
height: 100px;
border-radius: 12px;
overflow: hidden;
}
.ik-post-list-thumb {
width: 100% !important;
height: 100% !important;
border-radius: 12px !important;
object-fit: cover !important;
background: #f1f5f9;
display: block;
}
/* Style 2 - Wide Layout */
.ik-layout-style_2 .ik-post-list-thumb-wrap {
width: 340px;
height: 130px;
aspect-ratio: auto;
}
.ik-layout-style_2 .ik-post-list-thumb {
width: 100%;
height: 100%;
}
.ik-post-list-content {
display: flex;
flex-direction: column;
justify-content: center;
gap: 12px;
flex: 1;
}
.ik-post-list-title {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #111827;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ik-post-list-meta {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
color: #64748b;
font-weight: 500;
}
.ik-post-list-meta .meta-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
background-color: #fef3c7;
color: #d97706;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
}
.ik-post-list-excerpt {
font-size: 15px;
color: #000000;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 600px) {
.ik-post-list-item {
flex-direction: row;
align-items: stretch;
padding: 20px;
gap: 20px;
}
.ik-post-list-thumb {
width: 100%;
height: 200px;
}
.ik-layout-style_2 .ik-post-list-thumb-wrap {
width: 160px;
height: 130px;
}
.ik-post-list-meta {
gap: 9px;
}
}
/* -------------------------------- */
/* IK Single Post Widget Styles */
/* -------------------------------- */
.ik-heading-play-btn {
background: transparent !important;
border: none !important;
cursor: pointer !important;
padding: 4px !important;
margin-left: 8px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
vertical-align: middle !important;
transition: transform 0.2s ease !important;
outline: none !important;
box-shadow: none !important;
touch-action: manipulation !important;
}
.ik-heading-play-btn:hover {
transform: scale(1.15) !important;
}
.ik-heading-play-btn svg {
width: 18px !important;
height: 18px !important;
}
.ik-single-post-widget {
font-family: var(--ik-font-primary);
color: #1e293b;
max-width: 1000px;
margin: 0 auto;
}
.ik-breadcrumbs {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #6b7280;
margin-bottom: 24px;
}
.ik-breadcrumbs a {
color: inherit;
text-decoration: none;
display: flex;
align-items: center;
gap: 4px;
transition: color 0.2s;
color: #6b7280 !important;
}
.ik-breadcrumbs a:hover {
color: #111827;
}
.ik-breadcrumbs .ik-sep {
font-size: 10px;
color: #d1d5db;
}
.ik-breadcrumbs .ik-current {
font-weight: 600;
color: #111827;
}
@media (max-width: 768px) {
.ik-breadcrumbs {
justify-content: flex-start;
overflow-x: auto;
white-space: nowrap;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px;
margin-bottom: 16px;
scrollbar-width: none;
/* Firefox */
}
.ik-breadcrumbs::-webkit-scrollbar {
display: none;
/* Chrome, Safari, Opera */
}
.ik-breadcrumbs a,
.ik-breadcrumbs .ik-sep,
.ik-breadcrumbs .ik-current {
flex-shrink: 0;
white-space: nowrap;
}
}
.ik-single-search {
margin-bottom: 30px;
position: relative;
}
.ik-search-inner {
display: flex;
align-items: center;
background: #ffffff;
border: 2px solid #e5e7eb;
border-radius: 100px;
padding: 6px 16px 6px 24px;
transition: border-color 0.2s;
}
.ik-search-inner.ik-focused {
border-color: #bac408;
/* Thick yellow/lime border on focus based on screenshot */
}
.ik-search-icon {
color: #64748b;
margin-right: 12px;
}
.ik-search-inner input {
flex: 1;
border: none;
background: transparent;
outline: none;
font-size: 16px;
color: #1e293b;
}
.ik-search-inner input::placeholder {
color: #94a3b8;
}
.ik-mic-btn {
background: #fcfceb;
/* Soft yellow tint */
border: none;
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s;
flex-shrink: 0;
}
.ik-mic-btn svg {
width: 22px;
height: 22px;
}
.ik-mic-btn:hover {
background: #f4f4d2;
}
.ik-search-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 100%;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 14px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
padding: 20px 24px;
z-index: 100;
}
.ik-dropdown-section {
margin-bottom: 20px;
}
.ik-dropdown-title {
display: block;
font-size: 13px;
font-weight: 500;
color: #000000;
margin-bottom: 12px;
}
.ik-article-search-btn {
background: #ffffff;
border: 1px solid #e5e7eb;
padding: 10px 22px;
border-radius: 100px;
font-size: 13px;
font-weight: 500;
color: #000000;
cursor: pointer;
transition: all 0.2s;
}
.ik-article-search-btn:hover {
background: #f8fafc;
border-color: #cbd5e1;
}
.ik-dropdown-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ik-dropdown-tags a {
color: #000 !important;
}
.ik-tag-pill {
background: #f3f4f6;
color: #000000;
padding: 10px 22px;
border-radius: 100px;
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: background 0.2s;
}
.ik-tag-pill:hover {
background: #e5e7eb;
}
.ik-search-divider {
border: 0;
height: 1px;
background: #e2e8f0;
margin: 30px 0;
display: none;
/* Hide if not needed visually below search */
}
/* --- Notes Modal Styles --- */
.ik-notes-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.ik-notes-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}
.ik-notes-card {
position: absolute;
width: 90%;
max-width: 500px;
background: #ffffff;
border-radius: 20px;
padding: 30px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
z-index: 10000;
}
.ik-notes-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.ik-notes-header h3 {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #000000;
}
.ik-toggle-actions {
display: flex;
align-items: center;
gap: 8px;
}
.ik-notes-close-btn {
background: transparent;
border: none;
color: #64748b;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: color 0.2s;
}
.ik-notes-close-btn:hover {
color: #0f172a;
}
.ik-notes-list {
max-height: 200px;
overflow-y: auto;
margin-bottom: 20px;
}
.ik-note-item {
background: #f8fafc;
border-radius: 12px;
padding: 16px;
margin-bottom: 12px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.ik-note-item:last-child {
margin-bottom: 0;
}
.ik-note-content p {
margin: 0 0 8px 0;
font-size: 14px;
color: #1e293b;
line-height: 1.5;
}
.ik-note-content small {
font-size: 12px;
color: #64748b;
}
.ik-note-delete {
background: transparent;
border: none;
color: #94a3b8;
cursor: pointer;
padding: 4px;
transition: color 0.2s;
}
.ik-note-delete:hover {
color: #bac4088f;
/* Theme color on hover */
}
.ik-notes-form {
display: flex;
flex-direction: column;
align-items: center;
}
.ik-notes-form textarea {
width: 100%;
min-height: 100px;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 16px;
font-size: 16px;
color: #1e293b;
resize: vertical;
margin-bottom: 20px;
outline: none;
transition: border-color 0.2s;
}
.ik-notes-form textarea:focus {
border-color: #bac408;
}
.ik-notes-form textarea::placeholder {
color: #94a3b8;
}
.ik-notes-save-btn {
background: #bac408;
/* Lime green matching theme */
color: #111827;
border: none;
padding: 12px 40px;
border-radius: 100px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.ik-notes-save-btn:hover {
background: #aab207;
}
.ik-single-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
flex-wrap: wrap;
gap: 16px;
}
.ik-cat-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: #c3cc06;
/* limeish yellow from design */
color: #1a1a1a;
padding: 8px 18px;
border-radius: 100px;
font-weight: 700;
font-size: 14px;
text-decoration: none;
transition: opacity 0.2s;
}
.ik-cat-pill:hover {
opacity: 0.9;
color: #000;
}
.ik-reading-time {
display: flex;
align-items: center;
gap: 8px;
color: #64748b;
font-size: 14px;
font-weight: 500;
}
.ik-reading-badge {
background: #f1f5f9;
color: #475569;
padding: 6px 12px;
border-radius: 16px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
user-select: none;
transition: all 0.2s ease;
border: 1px solid transparent;
}
.ik-read-status-active {
background: #e8fbd8;
color: #047857;
border-color: #86efac;
}
.ik-single-actions {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 30px;
}
.ik-action-btn {
width: 48px;
height: 48px;
border-radius: 12px;
/* More squarish according to new image */
border: 1px solid #e2e8f0;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
color: #475569;
cursor: pointer;
transition: all 0.2s;
}
.ik-action-btn svg {
width: 24px;
height: 24px;
}
.ik-action-btn:hover,
.ik-action-btn.ik-active {
background: #f8fafc;
border-color: #bac408;
color: #bac408;
}
.ik-action-btn.ik-active {
background: #fdfdea;
}
.ik-font-wrapper {
position: relative;
display: inline-block;
}
.ik-font-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
padding: 8px;
gap: 8px;
z-index: 100;
}
.ik-font-control-btn {
width: 36px;
height: 36px;
border-radius: 8px;
border: 1px solid #e2e8f0;
background: #ffffff;
font-weight: bold;
font-size: 16px;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
color: #1e293b;
}
.ik-font-control-btn:hover {
background: #f8fafc;
border-color: #cbd5e1;
}
.ik-font-size-display {
font-size: 13px;
color: #475569;
font-weight: 500;
min-width: 36px;
text-align: center;
}
.ik-single-title {
text-align: center;
font-size: 26px;
font-weight: 800;
margin-bottom: 40px;
line-height: 1.4;
color: #111827;
}
.ik-toc-wrap {
background: #fbfbf6;
/* Exact light yellow/beige bg */
border: 1px solid #eadaa2;
/* Thin yellow border */
border-radius: 12px;
margin-bottom: 40px;
overflow: hidden;
}
.ik-toc-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 28px;
cursor: pointer;
user-select: none;
}
.ik-toc-title {
display: flex;
align-items: center;
gap: 12px;
font-weight: 800;
font-size: 17px;
color: #1f2937;
}
.ik-toc-arrow {
color: #6b7280;
transition: transform 0.3s ease;
}
.ik-toc-arrow.ik-rotated {
transform: rotate(180deg);
}
.ik-toc-body {
/* Padding moved to inner wrapper for smooth animation */
}
.ik-toc-body ul {
list-style: none;
padding: 0;
margin: 0;
}
.ik-toc-body li {
margin-bottom: 18px;
display: flex;
align-items: center;
}
.ik-toc-body li:last-child {
margin-bottom: 0;
}
.ik-toc-body li.ik-toc-level-3 {
padding-left: 20px;
}
.ik-toc-arrow-ic {
color: #4b5563;
margin-right: 8px;
font-weight: bold;
}
.ik-toc-body a {
color: #4b5563;
text-decoration: none;
font-size: 15px;
font-weight: 500;
transition: color 0.2s;
display: inline-block;
}
.ik-toc-body a:hover {
color: #2563eb;
}
.ik-single-content {
font-family: var(--ik-font-manjari);
font-size: 16px;
line-height: 1.9;
color: #374151;
font-weight: 500;
}
.ik-single-content a {
font-size: inherit !important;
}
.ik-single-content h2 {
font-size: 1.6em !important;
}
.ik-single-content h3 {
font-size: 1.3em !important;
}
.ik-single-content h4 {
font-size: 1.15em !important;
}
.ik-single-content h2,
.ik-single-content h3,
.ik-single-content h4 {
color: #111827;
margin-top: 36px;
margin-bottom: 16px;
font-weight: 700;
line-height: 1.3;
}
.ik-single-content p {
margin-bottom: 24px;
}
.ik-single-content img {
max-width: 100%;
height: auto;
border-radius: 12px !important;
margin: 24px 0;
display: block;
/* Typically images are centered in this design */
margin-left: auto;
margin-right: auto;
}
@media (max-width: 600px) {
.ik-breadcrumbs {
font-size: 13px;
gap: 6px;
margin-bottom: 12px !important;
}
.ik-single-search {
margin-bottom: 16px !important;
}
.ik-single-meta {
flex-direction: row;
align-items: center;
gap: 8px !important;
margin-bottom: 16px !important;
}
.ik-reading-time {
justify-content: center;
/* width: auto; */
}
.ik-single-actions {
gap: 8px !important;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 16px !important;
}
.ik-action-btn {
width: 44px;
height: 44px;
}
.ik-action-btn svg {
width: 21px;
height: 21px;
}
.ik-single-title {
font-size: 22px !important;
margin-bottom: 20px !important;
}
.ik-cat-pill {
padding: 6px 14px;
font-size: 13px;
}
.ik-toc-header,
.ik-toc-body {
padding-left: 20px;
padding-right: 20px;
}
.ik-toc-wrap {
margin-bottom: 20px !important;
}
}
/* Toast Notification */
.ik-toast {
position: fixed;
bottom: 24px;
right: 24px;
background: #ffffff;
border: 1px solid #f1f5f9;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
padding: 14px 24px;
display: flex;
align-items: center;
gap: 12px;
z-index: 100000;
transform: translateY(100px);
opacity: 0;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.ik-toast.ik-toast-show {
transform: translateY(0);
opacity: 1;
}
.ik-toast-icon {
width: 26px;
height: 26px;
background: #333333;
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.ik-toast-text {
font-size: 15px;
color: #1a1a1a;
font-weight: 600;
}
.js-ik-search-input {
border: 1px solid #66666600 !important;
}
.ik-toc-level-2 a {
color: #0f0f0f85 !important;
}
.ik-toc-level-3 a {
color: #0f0f0f85 !important;
}
.ik-cat-pill {
color: #0f0f0f85 !important;
}
/* --- Audio Modal Bottom Sheet --- */
.ik-modal-bottom {
align-items: flex-end !important;
}
.ik-modal-bottom .ik-audio-modal-content {
width: 100% !important;
max-width: 100% !important;
border-radius: 32px 32px 0 0 !important;
margin: 0 !important;
padding: 30px 40px 50px !important;
animation: ikSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15) !important;
}
.ik-audio-handle {
width: 40px;
height: 4px;
background: #e2e8f0;
border-radius: 2px;
margin: -15px auto 20px;
}
@keyframes ikSlideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
/* --- Related Sections Styling --- */
.ik-article-footer-divider {
height: 1px;
background: #f1f5f9;
margin: 20px 0;
}
.ik-related-section {
margin-bottom: 40px;
}
.ik-section-header {
margin-bottom: 25px;
position: relative;
display: inline-block;
padding-left: 20px;
}
.ik-section-header .ik-section-title {
font-size: 16px !important;
font-weight: 700;
color: #1e293b;
margin: 0 0 8px 0;
}
.ik-section-underline {
margin-left: 0px;
width: calc(100% - 0px);
height: 3px;
background: #bac408;
border-radius: 2px;
}
/* Overrides for widgets inside the Related Section */
.ik-related-section .ik-post-grid-wrapper,
.ik-related-section .ik-video-grid-wrapper {
padding: 0 !important;
}
.ik-related-section .ik-post-card,
.ik-related-section .ik-video-card {
flex: 0 0 240px !important;
width: 240px !important;
border-radius: 12px !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
background: #fff !important;
border: 1px solid #f1f5f9 !important;
}
.ik-related-section .ik-post-content,
.ik-related-section .ik-video-content {
padding: 12px !important;
}
.ik-related-section .ik-post-title,
.ik-related-section .ik-video-title {
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
color: #1e293b !important;
margin: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.ik-related-section .ik-post-excerpt {
display: none !important;
}
.ik-related-section .ik-post-thumb,
.ik-related-section .ik-video-thumb-wrapper {
height: 135px !important;
/* Fixed height for 16:9 at 240px width */
}
/* Navigation buttons from the widgets inside related section */
@media (min-width: 769px) {
.ik-related-section .ik-nav-btn,
.ik-related-section .ik-video-nav {
width: 40px !important;
height: 40px !important;
background: #ffffff !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
z-index: 100 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
border: none !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.ik-related-section .ik-nav-btn svg,
.ik-related-section .ik-video-nav svg {
width: 22px !important;
height: 22px !important;
stroke: #64748b !important;
stroke-width: 3px !important;
display: block !important;
margin: 0 !important;
}
.ik-related-section .ik-nav-btn:hover,
.ik-related-section .ik-video-nav:hover {
background: #cbd034 !important;
}
.ik-related-section .ik-nav-btn:hover svg,
.ik-related-section .ik-video-nav:hover svg {
stroke: #ffffff !important;
}
}
/* Feedback Section */
.ik-feedback-section {
margin-top: 60px;
margin-bottom: 40px;
padding: 0 5px;
}
.ik-feedback-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}
.ik-feedback-header svg {
margin-top: 20px;
}
.ik-feedback-title {
font-size: 22px;
font-weight: 800;
color: #1e293b;
margin: 0;
}
.ik-feedback-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.ik-feedback-textarea {
width: 100%;
min-height: 150px;
padding: 20px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
font-size: 16px;
font-family: inherit;
color: #475569;
resize: vertical;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}
.ik-feedback-textarea:focus {
outline: none;
border-color: #bac408;
box-shadow: 0 0 0 4px rgba(186, 196, 8, 0.1);
}
.ik-feedback-submit-btn {
width: 100%;
padding: 18px;
background: #bac408 !important;
color: #1e293b !important;
border: none;
border-radius: 14px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
border-color: #bac408 !important;
}
.ik-feedback-submit-btn:hover {
background: #a5af07;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(186, 196, 8, 0.3);
}
.ik-feedback-submit-btn:active {
transform: translateY(0);
}
.ik-post-navigation {
display: flex;
justify-content: space-between;
margin-top: 50px;
margin-bottom: 0px;
gap: 24px;
}
.ik-nav-link {
flex: 1;
display: flex;
align-items: center;
gap: 20px;
padding: 24px 28px;
background: #ffffff;
border-radius: 20px;
text-decoration: none;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
border: 1px solid #f1f5f9;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
min-width: 0;
/* Important for ellipsis */
}
.ik-nav-link:hover {
transform: translateY(-5px);
border-color: #bac408;
box-shadow: 0 15px 35px rgba(186, 196, 8, 0.12);
}
.ik-nav-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: #f8fafc;
border-radius: 50%;
color: #94a3b8;
transition: all 0.3s ease;
border: 1px solid #f1f5f9;
}
.ik-nav-link:hover .ik-nav-icon {
background: #bac408;
color: #1a1a1a;
border-color: #bac408;
}
.ik-nav-content {
display: flex;
flex-direction: column;
gap: 6px;
flex-grow: 1;
min-width: 0;
}
.ik-nav-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #94a3b8;
font-weight: 700;
}
.ik-nav-title {
font-size: 17px;
font-weight: 800;
color: #1e293b;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.ik-nav-prev-link {
text-align: left;
}
.ik-nav-next-link {
text-align: right;
}
.ik-nav-next-link .ik-nav-content {
align-items: flex-end;
}
/* Feedback Section Refinement - EXACT MATCH TO IMAGE */
.ik-feedback-section {
margin-top: 0px;
margin-bottom: 0px;
padding: 0;
}
.ik-feedback-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.ik-feedback-title {
font-size: 24px;
font-weight: 800;
color: #1e293b;
margin: 0;
}
.ik-feedback-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.ik-feedback-textarea {
width: 100%;
min-height: 160px;
padding: 20px;
background: #f9fafb;
border: 1px solid #e2e8f0;
border-radius: 12px;
font-size: 16px;
font-family: inherit;
color: #475569;
resize: none;
transition: all 0.3s ease;
}
.ik-feedback-textarea:focus {
outline: none;
background: #fff;
border-color: #bac408;
}
.ik-feedback-submit-btn {
width: 100%;
padding: 18px;
background: #bac408;
color: #1e293b;
border: none;
border-radius: 12px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: none;
}
.ik-feedback-submit-btn:hover {
background: #c3cd09;
box-shadow: 0 5px 15px rgba(186, 196, 8, 0.2);
}
.ik-related-nav {
position: absolute;
top: 50%;
transform: translateY(-100%);
width: 40px;
height: 40px;
background: #fff;
border-radius: 50%;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
z-index: 10;
color: #64748b;
transition: all 0.2s;
}
.ik-related-nav:hover {
background: #bac408;
color: #fff;
}
.ik-related-nav.ik-nav-prev {
left: -20px;
}
.ik-related-nav.ik-nav-next {
right: -20px;
}
@media (max-width: 768px) {
.ik-modal-bottom .ik-audio-modal-content {
padding: 30px 20px 40px !important;
}
.ik-related-card {
flex: 0 0 85%;
}
.ik-related-nav {
display: none;
}
.ik-post-navigation {
flex-direction: column;
gap: 16px;
margin-top: 30px;
}
.ik-nav-link {
width: 100%;
padding: 16px 20px;
gap: 12px;
}
.ik-nav-icon {
width: 36px;
height: 36px;
}
.ik-nav-title {
font-size: 15px;
}
.ik-nav-label {
font-size: 10px;
}
}
/* --- Audio Modal Styles --- */
.ik-audio-modal-content {
max-width: 900px !important;
/* Wider for desktop as per screenshot */
background: #fbfbf6 !important;
/* Beige/yellow background */
}
.ik-audio-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.ik-audio-modal-title {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 18px;
color: #1a1a1a;
}
.ik-audio-options-list {
display: flex;
flex-direction: column;
gap: 12px;
max-height: 60vh;
overflow-y: auto;
padding-right: 8px;
/* Space for scrollbar */
}
/* Custom scrollbar for audio list */
.ik-audio-options-list::-webkit-scrollbar {
width: 6px;
}
.ik-audio-options-list::-webkit-scrollbar-track {
background: transparent;
}
.ik-audio-options-list::-webkit-scrollbar-thumb {
background: #e2e8f0;
border-radius: 10px;
}
.ik-audio-options-list::-webkit-scrollbar-thumb:hover {
background: #cbd5e1;
}
.ik-audio-option-primary {
width: 100%;
background: #f1f3e8;
/* Soft green/yellow tint */
border: none;
border-radius: 12px;
padding: 24px 30px;
display: flex;
align-items: center;
gap: 20px;
cursor: pointer;
transition: all 0.2s;
text-align: left;
margin-bottom: 10px;
}
.ik-audio-option-primary:hover {
background: #e9ebd9;
transform: translateY(-2px);
}
.ik-audio-play-circle {
width: 48px;
height: 48px;
background: #bac408;
/* Lime theme color */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #000;
}
.ik-audio-option-primary span {
font-size: 18px;
font-weight: 700;
color: #1a1a1a;
}
.ik-audio-option-item {
width: 100%;
background: transparent;
border: none;
border-radius: 12px;
padding: 14px 20px;
display: flex;
align-items: center;
gap: 20px;
cursor: pointer;
transition: all 0.2s;
text-align: left;
}
.ik-audio-option-item:hover {
background: rgba(0, 0, 0, 0.03);
}
.ik-audio-item-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: #666;
}
.ik-audio-item-number {
width: 32px;
height: 32px;
background: #f3f4f6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
color: #6b7280;
}
.ik-audio-option-item span {
font-size: 16px;
font-weight: 600;
color: #374151;
}
.ik-audio-divider {
height: 1px;
background: #e5e7eb;
margin: 10px 0;
}
@media (max-width: 768px) {
.ik-audio-modal-content {
width: 95%;
padding: 20px;
}
}
/* --- Floating Quick Menu Styles --- */
.ik-floating-menu-wrap {
position: fixed;
right: 30px;
bottom: 30px;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 15px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
visibility: hidden;
transform: translateY(20px);
}
.ik-floating-menu-wrap.ik-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.ik-floating-trigger {
width: 60px;
height: 60px;
background: #bac408;
/* Theme Color */
color: #1a1a1a;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 15px rgba(186, 196, 8, 0.4);
transition: all 0.3s ease;
}
.ik-floating-trigger:hover {
transform: scale(1.05);
background: #c3cd09;
}
.ik-floating-trigger.ik-active {
transform: rotate(90deg);
}
.ik-floating-menu {
position: absolute;
bottom: 75px;
right: 0;
width: 320px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
border: 1px solid #e2e8f0;
padding: 24px;
transform-origin: bottom right;
animation: ikFadeSlideIn 0.3s ease forwards;
}
@keyframes ikFadeSlideIn {
from {
opacity: 0;
transform: translateY(10px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.ik-floating-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-bottom: 20px;
}
.ik-floating-actions .ik-action-btn {
width: 44px !important;
height: 44px !important;
border-radius: 10px;
background: #f8fafc;
}
.ik-floating-menu-divider {
height: 1px;
background: #f1f5f9;
margin-bottom: 20px;
}
.ik-floating-toc-title {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 16px;
color: #1a1a1a;
margin-bottom: 15px;
}
.ik-floating-toc-list {
list-style: none;
padding: 0;
margin: 0;
max-height: 300px;
overflow-y: auto;
}
.ik-floating-toc-list::-webkit-scrollbar {
width: 4px;
}
.ik-floating-toc-list::-webkit-scrollbar-thumb {
background: #e2e8f0;
border-radius: 10px;
}
.ik-floating-toc-list li {
margin-bottom: 12px;
}
.ik-floating-toc-list li:last-child {
margin-bottom: 0;
}
.ik-floating-toc-list a {
display: flex;
align-items: flex-start;
gap: 10px;
color: #475569;
text-decoration: none;
font-size: 14px;
line-height: 1.5;
transition: color 0.2s;
}
.ik-floating-toc-list a:hover {
color: #bac408;
}
.ik-floating-toc-list .ik-toc-arrow-ic {
color: #94a3b8;
font-weight: bold;
flex-shrink: 0;
}
@media (max-width: 600px) {
.ik-floating-menu-wrap {
right: 20px;
bottom: 160px;
}
.ik-floating-menu {
width: calc(100vw - 40px);
max-width: 320px;
}
}
/* --- Category Archive (Numbered Model) --- */
.ik-cat-archive-wrapper {
max-width: 1000px;
margin: 0 auto;
padding: 0px 0;
}
.ik-cat-breadcrumb {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 25px;
}
@media (max-width: 768px) {
.ik-cat-breadcrumb {
justify-content: flex-start;
overflow-x: auto;
white-space: nowrap;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px;
margin-bottom: 15px;
scrollbar-width: none;
/* Firefox */
}
.ik-cat-breadcrumb::-webkit-scrollbar {
display: none;
/* Chrome, Safari, Opera */
}
.ik-breadcrumb-item,
.ik-breadcrumb-sep {
flex-shrink: 0;
white-space: nowrap;
}
}
.ik-breadcrumb-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px !important;
color: #64748b;
text-decoration: none;
transition: color 0.2s;
}
.ik-breadcrumb-item:hover {
color: #bac408;
}
.ik-breadcrumb-item.active {
color: #1a1a1a;
font-weight: 700;
}
.ik-breadcrumb-sep {
color: #cbd5e1;
}
/* Sub-categories Navigation */
.ik-cat-subs-wrap {
margin-bottom: 40px;
}
.ik-subs-title {
font-size: 20px;
font-weight: 800;
color: #1e293b;
margin-bottom: 15px;
text-align: left;
}
.ik-cat-subs-grid {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.ik-cat-sub-pill {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 50px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}
.ik-cat-sub-pill:hover {
border-color: #bac408;
background: #fbfbf6;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(186, 196, 8, 0.1);
}
.ik-sub-pill-icon {
color: #bac408;
display: flex;
align-items: center;
}
.ik-sub-pill-label {
font-size: 15px;
font-weight: 700;
color: #334155;
transition: color 0.2s;
}
.ik-cat-sub-pill:hover .ik-sub-pill-label {
color: #000;
}
.ik-cat-archive-title {
font-size: 32px;
font-weight: 800;
color: #1e293b;
margin-bottom: 30px;
text-align: center;
}
.ik-cat-intro-box {
background: #fbfbf6;
border: 1px solid #eadaa2;
border-radius: 12px;
padding: 24px;
margin-bottom: 40px;
transition: all 0.3s ease;
}
.ik-intro-header {
display: flex;
justify-content: space-between;
align-items: center;
transition: margin 0.3s ease;
}
.ik-cat-intro-box.is-open .ik-intro-header {
margin-bottom: 20px;
}
.ik-intro-title {
display: flex;
align-items: center;
gap: 12px;
font-weight: 800;
font-size: 18px;
color: #1a1a1a;
}
.ik-intro-chevron {
color: #94a3b8;
transition: transform 0.3s ease;
transform: rotate(180deg);
}
.ik-cat-intro-box.is-open .ik-intro-chevron {
transform: rotate(0deg);
}
.ik-intro-content-wrapper {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.ik-cat-intro-box.is-open .ik-intro-content-wrapper {
grid-template-rows: 1fr;
}
.ik-intro-content {
min-height: 0;
font-size: 16px;
line-height: 1.8;
color: #475569;
opacity: 0;
transition: opacity 0.3s ease;
}
.ik-cat-intro-box.is-open .ik-intro-content {
opacity: 1;
}
.ik-cat-archive-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.ik-cat-post-card {
display: flex;
align-items: center;
background: #ffffff;
border: 1px solid #f1f5f9;
padding: 16px 24px;
border-radius: 16px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}
.ik-cat-post-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
border-color: #bac408;
}
.ik-post-number-badge {
width: 36px;
height: 36px;
background: #fbfbf6;
color: #7c7d2c;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
margin-right: 20px;
flex-shrink: 0;
}
.ik-cat-post-card:hover .ik-post-number-badge {
background: #bac408;
color: #000;
}
.ik-post-card-content {
flex: 1;
}
.ik-post-card-title {
font-family: var(--ik-font-manjari);
font-size: 16px;
font-weight: normal;
color: #1e293b;
margin: 0;
}
.ik-post-card-arrow {
color: #94a3b8;
margin-left: 15px;
transition: transform 0.3s ease;
}
.ik-cat-post-card:hover .ik-post-card-arrow {
transform: translateX(5px);
color: #bac408;
}
/* Pagination */
.ik-cat-pagination {
margin-top: 40px;
display: flex;
justify-content: center;
gap: 8px;
}
.ik-cat-pagination .page-numbers {
padding: 8px 16px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
text-decoration: none;
color: #475569;
font-weight: 600;
transition: all 0.2s;
}
.ik-cat-pagination .page-numbers.current {
background: #bac408;
color: #000;
border-color: #bac408;
}
.ik-cat-pagination .page-numbers:hover:not(.current) {
background: #f8fafc;
border-color: #cbd5e1;
}
@media (max-width: 768px) {
.ik-cat-archive-title {
font-size: 26px;
}
.ik-cat-post-card {
padding: 14px 18px;
}
.ik-post-card-title {
font-family: var(--ik-font-manjari) !important;
font-size: 14px;
}
}
.ik-breadcrumb-item {
color: #000 !important;
}
.ik-post-card-title {
font-family: var(--ik-font-manjari) !important;
font-size: 16px;
font-weight: 500 !important;
}
/* -------------------------------- */
/* Search Popup Widget Styles */
/* -------------------------------- */
.ik-search-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: #1e293b;
line-height: 1;
}
.ik-search-trigger:hover {
transform: scale(1.1);
}
.ik-search-popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.ik-search-popup-overlay.is-active {
opacity: 1;
visibility: visible;
}
.ik-search-popup-content-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.ik-search-popup-container {
width: 100%;
max-width: 800px;
background: #06060c;
border-radius: 30px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
transform: translateY(30px) scale(0.95);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
max-height: 90vh;
}
.ik-search-popup-overlay.is-active .ik-search-popup-container {
transform: translateY(0) scale(1);
}
.ik-search-popup-header {
display: flex;
justify-content: flex-end;
padding: 20px 25px 0;
z-index: 10;
}
.ik-search-popup-close {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #94a3b8;
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
.ik-search-popup-close:hover {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
border-color: rgba(239, 68, 68, 0.2);
transform: rotate(90deg);
}
.ik-search-popup-body {
padding: 0 40px 40px;
overflow-y: auto;
flex: 1;
}
/* Adjustments for search widget inside popup */
.ik-search-popup-body .islamkvdm-search-widget {
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
.ik-search-popup-body .results-container {
background: rgba(255, 255, 255, 0.03) !important;
}
@media (max-width: 600px) {
.ik-search-popup-body {
padding: 0 20px 20px;
}
.ik-search-popup-container {
border-radius: 20px;
max-height: 95vh;
}
}
/* -------------------------------- */
/* Search Widget - Unified Styles */
/* -------------------------------- */
.islamkvdm-search-widget {
font-family: var(--ik-font-primary);
border-radius: 20px !important;
padding: 20px !important;
color: #fff !important;
background: transparent;
}
.islamkvdm-search-widget .search-bar {
display: flex !important;
align-items: center !important;
border-radius: 100px !important;
padding: 8px 10px 8px 18px !important;
margin-bottom: 25px !important;
position: relative !important;
gap: 10px;
background: #f1f5f9;
}
.islamkvdm-search-widget .search-input {
flex: 1 !important;
border: none !important;
outline: none !important;
background: transparent !important;
color: #1e293b !important;
font-size: 16px !important;
width: 100% !important;
margin: 0 !important;
font-weight: 500;
}
.islamkvdm-search-widget .search-icon {
color: #64748b !important;
display: flex !important;
align-items: center !important;
}
.islamkvdm-search-widget .mic-icon-wrapper {
width: 36px !important;
height: 36px !important;
background: #e2e8f0 !important;
border-radius: 100px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #64748b !important;
cursor: pointer;
flex-shrink: 0;
transition: all 0.2s;
}
.islamkvdm-search-widget .mic-icon-wrapper:hover {
background: #cbd5e1 !important;
color: #334155 !important;
}
.islamkvdm-search-widget .filter-buttons {
display: flex !important;
gap: 15px !important;
flex-wrap: wrap !important;
width: 100%;
}
.islamkvdm-search-widget .filter-item {
flex: 1;
min-width: 120px;
position: relative;
}
.islamkvdm-search-widget .filter-btn {
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 12px !important;
padding: 10px 15px !important;
color: #fff !important;
background: rgba(255, 255, 255, 0.05) !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
font-weight: 600 !important;
font-size: 14px !important;
transition: all 0.2s;
}
.islamkvdm-search-widget .filter-btn:hover,
.islamkvdm-search-widget .filter-btn.active {
background: rgba(255, 255, 255, 0.1) !important;
border-color: #cbd034 !important;
}
.islamkvdm-search-widget .filter-dropdown {
display: none !important;
position: absolute;
background: #fff !important;
border-radius: 16px !important;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3) !important;
z-index: 9999 !important;
min-width: 250px !important;
margin-top: 10px !important;
overflow-y: auto !important;
max-height: 400px !important;
}
.islamkvdm-search-widget .filter-dropdown.show {
display: block !important;
}
.islamkvdm-search-widget .dropdown-item {
padding: 12px 20px !important;
color: #334155 !important;
cursor: pointer !important;
font-size: 14px !important;
border-bottom: 1px solid #f1f5f9 !important;
transition: all 0.2s;
}
.islamkvdm-search-widget .dropdown-item:hover {
background: #f8fafc !important;
color: #cbd034 !important;
}
.islamkvdm-search-widget .alphabet-grid {
display: grid !important;
grid-template-columns: repeat(6, 1fr) !important;
gap: 5px !important;
padding: 15px !important;
}
.islamkvdm-search-widget .alphabet-letter {
padding: 8px !important;
border: none !important;
background: #f1f5f9 !important;
border-radius: 8px !important;
cursor: pointer !important;
font-size: 14px !important;
transition: all 0.2s;
}
.islamkvdm-search-widget .alphabet-letter:hover {
background: #cbd034 !important;
color: #fff !important;
}
.islamkvdm-search-widget .results-container {
margin-top: 30px !important;
}
.islamkvdm-search-widget .result-item {
padding: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.2s;
}
.islamkvdm-search-widget .result-item:hover {
background: rgba(255, 255, 255, 0.05);
}
.islamkvdm-search-widget .result-title a {
color: #cbd034 !important;
text-decoration: none !important;
font-weight: 600 !important;
}
.islamkvdm-search-widget .clear-filters {
background: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 8px !important;
padding: 5px 15px !important;
color: #ccc !important;
cursor: pointer !important;
font-size: 12px !important;
}
/* -------------------------------- */
/* Search Popup Trigger Enhancements */
/* -------------------------------- */
.ik-search-trigger {
min-width: 40px;
min-height: 40px;
color: inherit;
/* Adapt to header color */
}
.ik-search-trigger svg {
width: 24px;
height: 24px;
}
/* -------------------------------- */
/* Global Mobile Typography Unified */
/* -------------------------------- */
@media (max-width: 768px) {
/* Titles */
.ik-post-list-title,
.ik-post-title,
.ik-single-title,
.ik-cat-archive-title,
.ik-post-card-title,
.ik-video-title,
.ik-video-grid-title,
.result-title,
.ik-section-title,
.ik-nav-title,
.ik-category-label,
.ik-subs-title,
.ik-heading-title,
.ik-menu-icon-wrapper,
.ik-prayer-time {
font-size: var(--ik-mobile-title-size) !important;
line-height: var(--ik-mobile-title-lh) !important;
}
.ik-heading-title {
font-size: 20px !important;
}
.ik-single-title {
font-size: 22px !important;
}
.ik-cat-archive-title {
font-size: 22px !important;
}
/* Descriptions / Excerpts */
.ik-post-list-excerpt,
.ik-post-excerpt,
.result-excerpt,
.ik-intro-content {
font-size: var(--ik-mobile-desc-size) !important;
line-height: var(--ik-mobile-desc-lh) !important;
}
/* Search widget: force all 3 filter buttons into a single row */
.islamkvdm-search-widget .filter-buttons {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
flex-wrap: unset !important;
}
.islamkvdm-search-widget .filter-item {
min-width: 0 !important;
flex: unset !important;
}
.islamkvdm-search-widget .filter-btn {
min-width: 0 !important;
padding: 10px 8px !important;
font-size: 13px !important;
gap: 6px !important;
width: 100% !important;
overflow: hidden;
}
/* prayer time */
}
/* -------------------------------- */
/* Global Dark Mode Overrides */
/* -------------------------------- */
[data-theme="dark"] .ik-post-list-item,
[data-theme="dark"] .ik-notes-card,
[data-theme="dark"] .ik-search-dropdown,
[data-theme="dark"] .ik-font-dropdown,
[data-theme="dark"] .ik-audio-modal-content,
[data-theme="dark"] .ik-floating-menu,
[data-theme="dark"] .ik-cat-post-card,
[data-theme="dark"] .search-bar,
[data-theme="dark"] .ik-video-card,
[data-theme="dark"] .ik-related-section .ik-post-card,
[data-theme="dark"] .ik-related-section .ik-video-card {
background-color: var(--ik-card-bg) !important;
border-color: var(--ik-border) !important;
}
[data-theme="dark"] .ik-post-list-title,
[data-theme="dark"] .ik-notes-header h3,
[data-theme="dark"] .ik-single-title,
[data-theme="dark"] .ik-toc-title,
[data-theme="dark"] .ik-single-content h2,
[data-theme="dark"] .ik-single-content h3,
[data-theme="dark"] .ik-single-content h4,
[data-theme="dark"] .ik-audio-modal-title,
[data-theme="dark"] .ik-floating-toc-title,
[data-theme="dark"] .ik-subs-title,
[data-theme="dark"] .ik-cat-archive-title,
[data-theme="dark"] .ik-intro-title,
[data-theme="dark"] .ik-post-card-title,
[data-theme="dark"] .ik-feedback-title,
[data-theme="dark"] .ik-video-title,
[data-theme="dark"] .ik-nav-title {
color: var(--ik-text) !important;
}
[data-theme="dark"] .ik-post-list-excerpt,
[data-theme="dark"] .ik-single-content,
[data-theme="dark"] .ik-single-content p,
[data-theme="dark"] .ik-single-content li,
[data-theme="dark"] .ik-intro-content,
[data-theme="dark"] .ik-notes-list p {
color: var(--ik-text-dim) !important;
}
[data-theme="dark"] .ik-search-inner,
[data-theme="dark"] .ik-feedback-textarea,
[data-theme="dark"] .ik-notes-form textarea {
background-color: var(--ik-bg) !important;
border-color: var(--ik-border) !important;
color: var(--ik-text) !important;
}
[data-theme="dark"] .ik-search-inner input {
border: none !important;
background: transparent !important;
}
[data-theme="dark"] .ik-mic-btn {
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-color: transparent !important;
color: var(--ik-text-dim) !important;
}
[data-theme="dark"] .ik-action-btn,
[data-theme="dark"] .ik-font-control-btn,
[data-theme="dark"] .ik-nav-icon,
[data-theme="dark"] .ik-post-number-badge,
[data-theme="dark"] .ik-cat-pagination .page-numbers:not(.current),
[data-theme="dark"] .ik-related-nav {
background-color: var(--ik-card-bg) !important;
border-color: var(--ik-border) !important;
color: var(--ik-text-dim) !important;
}
[data-theme="dark"] .ik-nav-link {
background-color: var(--ik-card-bg) !important;
border-color: var(--ik-border) !important;
}
[data-theme="dark"] .ik-toc-wrap,
[data-theme="dark"] .ik-cat-intro-box {
background-color: var(--ik-card-bg) !important;
border-color: var(--ik-border) !important;
}
[data-theme="dark"] .ik-audio-option-primary,
[data-theme="dark"] .ik-audio-option-item,
[data-theme="dark"] .ik-note-item {
background-color: rgba(255, 255, 255, 0.05) !important;
}
[data-theme="dark"] .ik-cat-pill,
[data-theme="dark"] .ik-tag-pill,
[data-theme="dark"] .ik-cat-sub-pill,
[data-theme="dark"] .ik-reading-badge {
background-color: rgba(255, 255, 255, 0.1) !important;
color: var(--ik-text) !important;
border-color: var(--ik-border) !important;
}
[data-theme="dark"] .ik-floating-trigger {
background-color: var(--ik-accent) !important;
color: #000 !important;
}
[data-theme="dark"] .ik-sub-pill-label,
[data-theme="dark"] .ik-floating-toc-list a,
[data-theme="dark"] .ik-toc-body a {
color: var(--ik-text) !important;
}
[data-theme="dark"] .ik-search-divider,
[data-theme="dark"] .ik-article-footer-divider,
[data-theme="dark"] .ik-floating-menu-divider,
[data-theme="dark"] .ik-audio-divider {
background-color: var(--ik-border) !important;
}
[data-theme="dark"] .islamkvdm-search-widget .search-bar,
html[data-theme="dark"] .islamkvdm-search-widget.islamkvdm-search-widget.islamkvdm-search-widget .search-bar {
background: #06060c !important;
background-color: #06060c !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .islamkvdm-search-widget .alphabet-letter,
html[data-theme="dark"] .islamkvdm-search-widget.islamkvdm-search-widget.islamkvdm-search-widget .alphabet-letter {
background: rgba(255, 255, 255, 0.05) !important;
background-color: rgba(255, 255, 255, 0.05) !important;
color: #f8fafc !important;
}
[data-theme="dark"] .islamkvdm-search-widget .search-input,
html[data-theme="dark"] .islamkvdm-search-widget.islamkvdm-search-widget.islamkvdm-search-widget .search-input {
color: #f8fafc !important;
background: transparent !important;
}
[data-theme="dark"] .islamkvdm-search-widget .filter-btn,
[data-theme="dark"] .islamkvdm-search-widget .filter-dropdown,
[data-theme="dark"] .islamkvdm-search-widget .dropdown-children-container,
[data-theme="dark"] .ik-category-item,
[data-theme="dark"] .ik-menu-item {
background: rgba(255, 255, 255, 0.05) !important;
background-color: hsl(0, 0%, 9%) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .expand-toggle {
background: #000 !important;
}
[data-theme="dark"] .islamkvdm-search-widget .filter-btn,
[data-theme="dark"] .islamkvdm-search-widget .dropdown-item,
[data-theme="dark"] .ik-category-card,
[data-theme="dark"] .ik-subcategory-item,
[data-theme="dark"] .ik-menu-title,
[data-theme="dark"] .ik-heading-title {
color: #f8fafc !important;
}
[data-theme="dark"] .islamkvdm-search-widget .dropdown-item {
border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .islamkvdm-search-widget .dropdown-item:hover,
[data-theme="dark"] .ik-menu-icon-wrapper {
background: rgba(255, 255, 255, 0.1) !important;
background-color: rgba(255, 255, 255, 0.1) !important;
}
/* [data-theme="dark"] .person-category-item,
.person-results-header {
background: hsl(0, 0%, 9%) !important;
} */
[data-theme="dark"] .ik-subcategory-list,
[data-theme="dark"] .elementor-widget-ik_category .ik-subcategory-list {
background: #121218 !important;
background-color: #121218 !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: #f8fafc !important;
}
[data-theme="dark"] .elementor-widget-ik_category .ik-subcategory-item {
color: #f8fafc !important;
}
[data-theme="dark"] .ik-menu-item:hover {
background: #06060c !important;
background-color: #06060c !important;
border-color: #cbd034 !important;
}
[data-theme="dark"] .elementor-icon-box-wrapper {
background-color: transparent !important;
}
.ik-podcast {
background-color: #FDFDE0;
}
[data-theme="dark"] .elementor-9208 .elementor-element.elementor-element-90f47d2 .ik-humberg-toggle {
color: #ffffffa6 !important;
}
[data-theme="dark"] .ik-podcast {
background-color: #000 !important;
}
[data-theme="dark"] .ik-post-excerpt {
color: hsl(0 0% 65%) !important;
}
/* -------------------------------- */
/* Global Search Popup Styles */
/* -------------------------------- */
.ik-global-search-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
display: none;
align-items: flex-start;
justify-content: center;
padding-top: 5vh;
}
.ik-global-search-popup.active {
display: flex;
}
.ik-search-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
}
.ik-search-modal {
position: relative;
width: 90%;
max-width: 700px;
background: var(--ik-bg, #ffffff);
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
overflow: hidden;
animation: ikModalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
max-height: 85vh;
display: flex;
flex-direction: column;
}
@keyframes ikModalFadeIn {
from {
opacity: 0;
transform: translateY(-20px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.ik-search-header {
padding: 24px 32px;
border-bottom: 1px solid var(--ik-border);
}
.ik-search-input-wrap {
display: flex;
align-items: center;
gap: 16px;
}
.ik-search-icon {
color: var(--ik-text-dim);
display: flex;
align-items: center;
}
.ik-global-search-input {
flex: 1;
border: none !important;
outline: none !important;
font-size: 18px !important;
background: transparent !important;
color: var(--ik-text) !important;
padding: 10px 0 !important;
box-shadow: none !important;
}
.ik-global-search-input::placeholder {
color: var(--ik-text-dim);
opacity: 0.6;
}
.ik-search-actions {
display: flex;
align-items: center;
gap: 12px;
}
.ik-search-mic-btn,
.ik-search-close-btn {
background: none;
border: none;
color: var(--ik-text-dim);
cursor: pointer;
padding: 8px;
border-radius: 50%;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.ik-search-mic-btn:hover {
color: var(--ik-accent);
background: var(--ik-card-bg);
}
.ik-search-close-btn:hover {
color: #ef4444;
background: #fee2e2;
}
.ik-search-body {
padding: 32px;
overflow-y: auto;
flex: 1;
}
.ik-search-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.ik-search-section-title {
font-size: 15px;
font-weight: 600;
color: var(--ik-text);
margin: 0;
}
.ik-clear-history-btn {
background: none;
border: none;
color: var(--ik-accent, #cbd034);
font-size: 13px;
font-weight: 600;
cursor: pointer;
padding: 4px 8px;
}
.ik-search-history-list {
margin-bottom: 32px;
}
.ik-history-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--ik-border);
cursor: pointer;
}
.ik-history-text {
font-size: 14px;
color: var(--ik-text);
flex: 1;
}
.ik-remove-history {
background: none;
border: none;
color: var(--ik-text-dim);
cursor: pointer;
padding: 4px;
opacity: 0.5;
transition: opacity 0.2s;
}
.ik-remove-history:hover {
opacity: 1;
color: #ef4444;
}
.ik-search-tags-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ik-search-tag {
background: var(--ik-card-bg);
border: 1px solid var(--ik-border);
color: var(--ik-text);
padding: 8px 18px;
border-radius: 100px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.ik-search-tag:hover {
background: var(--ik-accent);
color: #000;
border-color: var(--ik-accent);
}
/* Results Styles */
.ik-global-results-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.ik-global-result-item {
padding: 16px;
border-radius: 16px;
background: var(--ik-card-bg);
border: 1px solid var(--ik-border);
text-decoration: none;
transition: all 0.2s;
}
.ik-global-result-item:hover {
transform: translateY(-2px);
border-color: var(--ik-accent);
box-shadow: var(--ik-shadow);
}
.ik-global-result-title {
font-size: 16px;
font-weight: 700;
color: var(--ik-text);
margin: 0 0 8px 0;
}
.ik-global-result-excerpt {
font-size: 13px;
color: var(--ik-text-dim);
line-height: 1.5;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.ik-global-result-meta {
font-size: 12px;
color: var(--ik-accent);
margin-bottom: 4px;
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 600;
}
.ik-global-result-meta svg {
flex-shrink: 0;
}
.ik-meta-post {
color: var(--ik-accent);
}
.ik-meta-ik_hadith {
color: var(--ik-accent);
}
.ik-meta-ik_podcast {
color: var(--ik-accent);
}
.ik-meta-ik_dua {
color: var(--ik-accent);
}
.ik-meta-ik_quran {
color: var(--ik-accent);
}
.ik-meta-ik_baby_name {
color: var(--ik-accent);
}
/* Match Highlight */
.ik-search-highlight {
background: rgba(203, 208, 52, 0.2);
color: var(--ik-text);
padding: 0 2px;
border-radius: 2px;
}
/* Category Match Styling */
.ik-global-result-category-match .ik-meta-category {
display: inline-flex !important;
align-items: center;
gap: 4px;
}
.ik-global-result-category-match .ik-meta-category svg {
flex-shrink: 0;
}
[data-theme="dark"] .ik-search-modal {
background: #121218;
}
[data-theme="dark"] .ik-search-mic-btn:hover {
background: #1e1e26;
}
[data-theme="dark"] .ik-search-tag {
background: #1e1e26;
}
[data-theme="dark"] .ik-search-tag:hover {
background: var(--ik-accent);
color: #000;
}
/* Loader & Spinner */
.ik-loader {
text-align: center;
padding: 60px 0;
width: 100%;
}
.ik-spinner {
width: 32px;
height: 32px;
border: 3px solid var(--ik-border);
border-top-color: var(--ik-accent);
border-radius: 50%;
animation: ik-spin 0.8s linear infinite;
margin: 0 auto 15px;
}
@keyframes ik-spin {
to {
transform: rotate(360deg);
}
}
/* Search Widget History Dropdown */
.ik-widget-history {
position: absolute;
top: calc(100% - 10px);
left: 0;
width: 100%;
background: var(--ik-bg);
border: 1px solid var(--ik-border);
border-radius: 20px;
box-shadow: var(--ik-shadow);
z-index: 1001;
padding: 20px;
margin-top: 5px;
display: none;
}
[data-theme="dark"] .ik-widget-history {
background: #121218;
}
[data-theme="dark"] .islamkvdm-search-widget .ik-search-history-card {
background: var(--ik-accent-2);
}
.ik-widget-history .ik-search-history-section {
margin-bottom: 0;
}
.ik-widget-history .ik-history-item {
padding: 10px 0;
}
/* Global Search Clear Button */
.ik-global-search-clear {
position: relative;
top: 50%;
margin-top: 10px;
background: none;
border: none;
color: #94a3b8;
cursor: pointer;
padding: 8px;
display: none;
align-items: center;
justify-content: center;
transition: all 0.2s;
z-index: 10;
}
.ik-global-search-clear:hover {
color: var(--ik-accent);
}
[data-theme="dark"] .ik-global-search-clear {
color: #94a3b8;
}
.ik-search-actions {
display: flex;
align-items: center;
gap: 8px;
}
[data-theme="dark"] .islamkvdm-search-widget .alphabet-results-header {
background-color: var(--ik-accent-2) !important;
}
.ik-search-inner button {
border: 1px solid #fefefe !important;
color: #94a3b8
}
.ik-search-inner button:hover {
color: #000;
background-color: transparent !important;
}
/* ==========================================================================
Premium Language Switcher Overrides
========================================================================== */
.ik-lang-switcher-wrapper {
position: relative;
display: inline-block;
vertical-align: middle;
}
.ik-lang-toggle-btn {
background: transparent !important;
border: none !important;
padding: 8px !important;
color: var(--ik-text, #1e293b) !important;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color 0.25s, color 0.25s;
width: 42px;
height: 42px;
box-shadow: none !important;
}
.ik-lang-toggle-btn:hover {
background-color: rgba(0, 0, 0, 0.04) !important;
color: var(--ik-accent, #cbd034) !important;
}
[data-theme="dark"] .ik-lang-toggle-btn:hover {
background-color: rgba(255, 255, 255, 0.06) !important;
}
/* Dropdown Card */
.ik-lang-dropdown-card {
position: absolute;
top: 120%;
right: 0;
background-color: var(--ik-bg, #ffffff) !important;
border: 1px solid var(--ik-border, rgba(0, 0, 0, 0.06)) !important;
border-radius: 16px;
padding: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
gap: 6px;
min-width: 170px;
z-index: 99999;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.ik-lang-switcher-wrapper.open .ik-lang-dropdown-card {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Languages List Items */
.ik-lang-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
font-size: 15px;
font-weight: 500;
color: var(--ik-text-dim, #64748b) !important;
text-decoration: none !important;
border-radius: 10px;
transition: all 0.2s;
gap: 20px;
}
.ik-lang-item:hover {
background-color: rgba(0, 0, 0, 0.03);
color: var(--ik-text, #1e293b) !important;
}
/* Active language item matching screenshot */
.ik-lang-item.active {
background-color: rgba(203, 208, 52, 0.12) !important;
/* Soft yellow tint */
color: var(--ik-accent, #cbd034) !important;
/* Yellow-green text */
font-weight: 600;
}
[data-theme="dark"] .ik-lang-item.active {
background-color: rgba(203, 208, 52, 0.2) !important;
}
.ik-lang-check-icon {
display: flex;
align-items: center;
color: var(--ik-accent, #cbd034);
}
/* --- JetPosts Custom Share Button --- */
.jet-posts__inner-box .post-thumbnail {
position: relative !important;
}
.ik-jet-share-btn {
position: absolute !important;
top: 12px !important;
right: 12px !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.9) !important;
border: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
z-index: 10 !important;
transition: all 0.2s ease !important;
color: #475569 !important;
padding: 0 !important;
}
.ik-jet-share-btn:hover {
background: #ffffff !important;
transform: scale(1.05) !important;
color: #bac408 !important;
}
.ik-jet-share-btn svg {
width: 16px !important;
height: 16px !important;
stroke-width: 2.5px !important;
display: block !important;
margin: 0 !important;
}
/* --- Footnotes Accordion --- */
.ik-footnotes-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
background: #fbfbf6 !important;
border: 1px solid #eadaa2 !important;
border-radius: 12px !important;
padding: 16px 20px !important;
cursor: pointer !important;
margin-top: 40px !important;
margin-bottom: 0 !important;
transition: all 0.3s ease !important;
user-select: none !important;
}
.ik-footnotes-header:hover {
background: #f8f8ee !important;
border-color: #cbd034 !important;
}
.ik-footnotes-title {
font-size: 16px !important;
font-weight: 700 !important;
color: #1e293b !important;
}
.ik-footnotes-chevron {
display: flex !important;
align-items: center !important;
color: #64748b !important;
transition: transform 0.3s ease !important;
}
.ik-footnotes-header.active .ik-footnotes-chevron {
transform: rotate(180deg) !important;
}
.ik-footnotes-content {
max-height: 0;
overflow: hidden !important;
transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
background: #ffffff !important;
border: 1px solid transparent !important;
border-top: none !important;
border-radius: 0 0 12px 12px !important;
}
.ik-footnotes-header.active {
border-radius: 12px 12px 0 0 !important;
}
.ik-footnotes-header.active+.ik-footnotes-content {
border-color: #eadaa2 !important;
padding: 20px !important;
}
.ik-footnotes-content ol.footnotes {
margin: 0 !important;
padding-left: 20px !important;
}
.ik-footnotes-content ol.footnotes li {
font-size: 14px !important;
line-height: 1.6 !important;
color: #475569 !important;
margin-bottom: 12px !important;
}
.ik-footnotes-content ol.footnotes li:last-child {
margin-bottom: 0 !important;
}
/* Dark Theme overrides for Footnotes Accordion */
[data-theme="dark"] .ik-footnotes-header {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme="dark"] .ik-footnotes-header:hover {
background: #334155 !important;
border-color: #cbd034 !important;
}
[data-theme="dark"] .ik-footnotes-title {
color: #f1f5f9 !important;
}
[data-theme="dark"] .ik-footnotes-chevron {
color: #94a3b8 !important;
}
[data-theme="dark"] .ik-footnotes-content {
background: #0f172a !important;
}
[data-theme="dark"] .ik-footnotes-header.active+.ik-footnotes-content {
border-color: #334155 !important;
}
[data-theme="dark"] .ik-footnotes-content ol.footnotes li {
color: #94a3b8 !important;
}
.ik-footnotes-book-icon {
stroke: #bac408 !important;
display: inline-flex !important;
align-items: center !important;
flex-shrink: 0 !important;
}
[data-theme="dark"] .ik-footnotes-book-icon {
stroke: var(--ik-accent, #cbd034) !important;
}
/* Custom scroll offset for footnote targets to improve readability when scrolling back up */
*[id^="identifier_"],
.footnote-ref,
.footnote-link {
scroll-margin-top: 150px;
}
/* Scroll to Top Button */
.ik-scroll-to-top {
position: fixed;
bottom: 80px;
right: 30px;
width: 54px;
height: 54px;
background-color: #cbd034;
color: #1e293b;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
z-index: 99999;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ik-scroll-to-top.ik-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Align with floating menu wrap on mobile by default */
@media (max-width: 600px) {
.ik-scroll-to-top {
right: 28px;
bottom: 80px;
}
}
/* When the floating quick menu is present, position the scroll-to-top button above it */
.ik-scroll-to-top.has-floating-menu {
bottom: 105px;
right: 33px;
/* Centered with the 60px wide trigger at right: 30px */
}
@media (max-width: 600px) {
.ik-scroll-to-top.has-floating-menu {
bottom: 95px;
right: 23px;
/* Centered with the 60px wide trigger at right: 20px */
}
}
.ik-scroll-to-top:hover {
background-color: #b5ba2c;
/* slightly darker green-yellow */
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(203, 208, 52, 0.4);
}
.ik-scroll-to-top:active {
transform: translateY(-2px);
}
.ik-scroll-to-top svg {
transition: transform 0.3s ease;
}
.ik-scroll-to-top:hover svg {
transform: translateY(-2px);
}
[data-theme="dark"] .ik-scroll-to-top {
background-color: #cbd034;
color: #06060c;
}
[data-theme="dark"] .ik-scroll-to-top:hover {
background-color: #b5ba2c;
box-shadow: 0 6px 20px rgba(203, 208, 52, 0.4);
}
/* ==========================================
Quran Module Styles (വിശുദ്ധ ഖുർആൻ)
========================================== */
.ik-quran-wrapper {
width: 100%;
margin: 0;
font-family: var(--ik-quran-font);
color: #1e293b;
background: #f8fafc;
transition: all 0.3s ease;
}
[data-theme="dark"] .ik-quran-wrapper {
background: #06060c;
color: #cbd5e1;
}
/* Header Banner styling */
.ik-quran-header {
position: relative;
z-index: 100;
padding: 60px 20px 40px 20px;
background: linear-gradient(135deg, #065f46 0%, #022c22 100%);
text-align: center;
color: #ffffff;
overflow: visible;
}
.ik-quran-header-bg-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
.ik-quran-header-content {
position: relative;
z-index: 2;
max-width: 650px;
margin: 0 auto;
}
.ik-quran-arabic-title {
font-family: var(--ik-font-arabic);
font-size: 42px;
font-weight: 700;
margin: 0 0 5px 0;
color: #fcd34d;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.ik-quran-malayalam-subtitle {
font-size: 16px;
font-weight: 500;
opacity: 0.9;
margin: 0 0 25px 0;
letter-spacing: 0.5px;
}
/* Search bar styling */
.ik-quran-search-bar-container {
position: relative;
z-index: 1200;
margin-bottom: 20px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.ik-quran-search-bar-container:focus-within {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.4);
box-shadow: 0 8px 32px rgba(252, 211, 77, 0.25);
}
.ik-quran-search-icon {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
color: rgba(255, 255, 255, 0.7);
}
.ik-quran-search-icon svg {
width: 20px;
height: 20px;
}
.ik-quran-search-clear {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
display: none;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: color 0.2s ease;
z-index: 10;
}
.ik-quran-search-clear:hover {
color: #ffffff;
}
.ik-quran-search-clear svg {
width: 18px;
height: 18px;
}
.ik-quran-search-bar-container input {
width: 100%;
padding: 16px 50px 16px 55px !important;
background: transparent !important;
border: none !important;
outline: none !important;
color: #ffffff !important;
font-size: 16px;
font-weight: 500;
box-sizing: border-box !important;
}
.ik-quran-search-bar-container input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
/* Dropdowns / filters */
.ik-quran-filters-row {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.ik-quran-custom-select-wrapper {
position: relative;
flex: 1;
min-width: 140px;
max-width: 200px;
}
.ik-quran-custom-select-trigger {
width: 100%;
padding: 10px 32px 10px 16px;
font-size: 14px;
font-weight: 600;
color: #ffffff;
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 50px !important;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
user-select: none;
box-sizing: border-box;
}
.ik-quran-custom-select-trigger:hover {
background: rgba(255, 255, 255, 0.15) !important;
border-color: rgba(255, 255, 255, 0.3) !important;
}
.ik-quran-custom-select-arrow {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid rgba(255, 255, 255, 0.7);
pointer-events: none;
transition: transform 0.2s ease;
}
.ik-quran-custom-select-wrapper.is-open .ik-quran-custom-select-arrow {
transform: translateY(-50%) rotate(180deg);
}
.ik-quran-custom-select-options {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(-10px);
width: 260px;
z-index: 1000;
max-height: 280px;
overflow-y: auto;
border-radius: 16px;
background: #ffffff;
border: 1px solid hsla(59, 78%, 43%, 0.2);
box-shadow: 0 10px 30px rgba(120, 53, 15, 0.08);
opacity: 0;
visibility: hidden;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-sizing: border-box;
}
.ik-quran-custom-select-wrapper.is-open .ik-quran-custom-select-options {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.ik-quran-custom-select-wrapper:first-child .ik-quran-custom-select-options {
left: 0 !important;
transform: translateY(-10px) !important;
}
.ik-quran-custom-select-wrapper:first-child.is-open .ik-quran-custom-select-options {
transform: translateY(0) !important;
}
.ik-quran-custom-select-header {
padding: 12px 16px 8px 16px;
font-size: 13px;
font-weight: 700;
color: #1e293b;
border-bottom: 1px solid hsla(59, 78%, 43%, 0.2);
text-align: left;
background: rgba(159, 166, 8, 0.03);
}
.ik-quran-custom-select-option {
padding: 10px 16px;
font-size: 13px;
color: #1e293b;
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
display: flex;
align-items: center;
gap: 12px;
}
.ik-quran-custom-select-option:hover {
background: rgba(159, 166, 8, 0.06);
}
.ik-quran-option-badge {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(159, 166, 8, 0.1);
color: #9fa608;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
.ik-quran-option-details {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.ik-quran-option-title {
font-size: 13px;
font-weight: 700;
color: #1e293b;
line-height: 1.2;
}
.ik-quran-option-subtitle {
font-size: 11px;
color: #64748b;
margin-top: 2px;
line-height: 1.2;
}
/* Custom Scrollbar inside Custom Dropdown Options */
.ik-quran-custom-select-options::-webkit-scrollbar {
width: 6px;
}
.ik-quran-custom-select-options::-webkit-scrollbar-track {
background: transparent;
}
.ik-quran-custom-select-options::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
}
/* Dark Mode Overrides for Custom Select */
[data-theme="dark"] .ik-quran-custom-select-options {
background: #1e293b;
border-color: #334155;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .ik-quran-custom-select-option {
color: #cbd5e1;
}
[data-theme="dark"] .ik-quran-custom-select-option:hover {
background: rgba(186, 196, 8, 0.1);
color: #bac408;
}
[data-theme="dark"] .ik-quran-custom-select-header {
background: rgba(255, 255, 255, 0.02);
border-bottom-color: #334155;
color: #cbd5e1;
}
[data-theme="dark"] .ik-quran-option-title {
color: #cbd5e1;
}
[data-theme="dark"] .ik-quran-option-subtitle {
color: #94a3b8;
}
[data-theme="dark"] .ik-quran-option-badge {
background: rgba(186, 196, 8, 0.15);
color: #bac408;
}
[data-theme="dark"] .ik-quran-custom-select-options::-webkit-scrollbar-thumb {
background: #475569;
}
/* Custom Search Card Dropdown */
.ik-quran-custom-select-wrapper:first-child .ik-quran-custom-select-options {
max-height: none !important;
overflow-y: visible !important;
width: 300px !important;
max-width: calc(100vw - 32px) !important;
}
.ik-quran-custom-search-card {
padding: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 16px;
background: #ffffff;
border-radius: 16px;
}
.ik-quran-card-field-group {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
}
.ik-quran-card-field-label {
font-size: 13px;
font-weight: 600;
color: #64748b;
margin-bottom: 6px;
display: block;
text-align: left;
}
.ik-quran-card-select-container {
position: relative;
width: 100%;
box-sizing: border-box;
}
.ik-quran-card-select-container select {
width: 100%;
padding: 12px 36px 12px 16px !important;
font-size: 14px !important;
font-weight: 500 !important;
color: #1e293b !important;
background: #f8fafc !important;
border: 1px solid #cbd5e1 !important;
border-radius: 12px !important;
-webkit-appearance: none !important;
appearance: none !important;
cursor: pointer;
outline: none !important;
transition: border-color 0.2s ease;
box-sizing: border-box;
}
.ik-quran-card-select-container select:hover,
.ik-quran-card-select-container select:focus {
border-color: #bac408 !important;
}
.ik-quran-card-select-container select:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.ik-quran-card-select-container::after {
content: '';
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #64748b;
pointer-events: none;
}
.ik-quran-card-submit-btn {
width: 100%;
height: 44px;
padding: 12px !important;
background: #bac408 !important;
color: #ffffff !important;
border: none !important;
border-radius: 12px !important;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s ease, transform 0.1s ease;
box-sizing: border-box;
}
.ik-quran-card-submit-btn:hover {
opacity: 0.9 !important;
}
.ik-quran-card-submit-btn:active {
transform: scale(0.98);
}
.ik-quran-card-submit-btn svg {
width: 20px;
height: 20px;
stroke: #ffffff;
fill: none;
}
/* Dark Mode Support for Custom Search Card */
[data-theme="dark"] .ik-quran-custom-search-card {
background: #1e293b;
}
[data-theme="dark"] .ik-quran-card-field-label {
color: #94a3b8;
}
[data-theme="dark"] .ik-quran-card-select-container select {
background: #0f172a !important;
border-color: #334155 !important;
color: #cbd5e1 !important;
}
[data-theme="dark"] .ik-quran-card-select-container select option {
background: #1e293b;
color: #cbd5e1;
}
[data-theme="dark"] .ik-quran-card-select-container::after {
border-top-color: #94a3b8;
}
[data-theme="dark"] .ik-quran-card-select-container select:hover,
[data-theme="dark"] .ik-quran-card-select-container select:focus {
border-color: #bac408 !important;
}
/* Voice Reciter Custom Select Overrides */
.ik-quran-reciter-selector {
min-width: 140px;
max-width: 200px;
position: relative;
}
.ik-quran-reciter-selector .ik-quran-custom-select-trigger {
padding: 8px 30px 8px 16px !important;
font-size: 13px !important;
font-weight: 600 !important;
border: 1px solid #cbd5e1 !important;
background: #f8fafc !important;
color: #334155 !important;
border-radius: 50px !important;
}
.ik-quran-reciter-selector .ik-quran-custom-select-arrow {
border-top-color: #334155 !important;
}
[data-theme="dark"] .ik-quran-reciter-selector .ik-quran-custom-select-trigger {
border-color: #475569 !important;
background: #0f172a !important;
color: #cbd5e1 !important;
}
[data-theme="dark"] .ik-quran-reciter-selector .ik-quran-custom-select-arrow {
border-top-color: #cbd5e1 !important;
}
.ik-quran-reciter-selector .ik-quran-custom-select-options {
background: #ffffff !important;
border: 1px solid #cbd5e1 !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="dark"] .ik-quran-reciter-selector .ik-quran-custom-select-options {
background: #1e293b !important;
border-color: #334155 !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}
.ik-quran-reciter-selector .ik-quran-custom-select-option {
color: #334155 !important;
}
[data-theme="dark"] .ik-quran-reciter-selector .ik-quran-custom-select-option {
color: #cbd5e1 !important;
}
.ik-quran-reciter-selector .ik-quran-custom-select-option:hover {
background: #f1f5f9 !important;
color: #065f46 !important;
}
[data-theme="dark"] .ik-quran-reciter-selector .ik-quran-custom-select-option:hover {
background: #334155 !important;
color: #10b981 !important;
}
/* Surah Index */
.ik-quran-content-area {
max-width: 1200px;
margin: 0 auto;
padding: 30px 20px;
}
.ik-quran-surah-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
}
.ik-quran-surah-card {
display: flex;
align-items: center;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 16px;
cursor: pointer;
text-decoration: none !important;
color: inherit !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.01);
}
[data-theme="dark"] .ik-quran-surah-card {
background: rgba(255, 255, 255, 0.05);
border-color: #334155;
}
.ik-quran-surah-card:hover {
transform: translateY(-4px);
border-color: #C3C018;
box-shadow: 0 10px 20px rgba(195, 192, 24, 0.08);
}
[data-theme="dark"] .ik-quran-surah-card:hover {
border-color: #C3C018;
box-shadow: 0 10px 20px rgba(195, 192, 24, 0.15);
}
.ik-quran-card-num-badge {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
color: #475569;
margin-right: 15px;
flex-shrink: 0;
transition: all 0.3s ease;
}
[data-theme="dark"] .ik-quran-card-num-badge {
background: #0f172a;
color: #94a3b8;
}
.ik-quran-surah-card:hover .ik-quran-card-num-badge {
background: #d1fae5;
color: #065f46;
}
[data-theme="dark"] .ik-quran-surah-card:hover .ik-quran-card-num-badge {
background: #064e3b;
color: #34d399;
}
.ik-quran-card-details {
flex-grow: 1;
}
.ik-quran-card-title-row {
display: flex;
align-items: center;
gap: 8px;
}
.ik-quran-card-title-ml {
font-size: 14px;
font-weight: 700;
color: #0f172a;
}
[data-theme="dark"] .ik-quran-card-title-ml {
color: #f8fafc;
}
.ik-quran-card-type-tag {
font-size: 10px;
font-weight: 700;
padding: 2px 8px;
border-radius: 100px;
}
.ik-quran-card-type-tag.is-makki {
background: #d1fae5;
color: #065f46;
}
.ik-quran-card-type-tag.is-madani {
background: #dbeafe;
color: #1e40af;
}
[data-theme="dark"] .ik-quran-card-type-tag.is-makki {
background: #064e3b;
color: #a7f3d0;
}
[data-theme="dark"] .ik-quran-card-type-tag.is-madani {
background: #1e3a8a;
color: #bfdbfe;
}
.ik-quran-card-title-en {
font-size: 12px;
color: #64748b;
display: block;
margin-top: 2px;
}
[data-theme="dark"] .ik-quran-card-title-en {
color: #94a3b8;
}
.ik-quran-card-arabic-side {
text-align: right;
}
.ik-quran-card-title-ar {
font-family: var(--ik-font-arabic);
font-size: 16px;
font-weight: 700;
color: #0f172a;
display: block;
}
[data-theme="dark"] .ik-quran-card-title-ar {
color: #f8fafc;
}
.ik-quran-card-verses-count {
font-size: 11px;
color: #64748b;
display: block;
margin-top: 2px;
}
[data-theme="dark"] .ik-quran-card-verses-count {
color: #94a3b8;
}
/* Detail View Layout */
#ik-quran-surah-detail {
display: none;
opacity: 0;
transform: translateY(10px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#ik-quran-surah-detail.active {
display: block;
opacity: 1;
transform: translateY(0);
}
.ik-quran-detail-header-bar {
display: flex;
align-items: center;
background: linear-gradient(135deg, #ffffff 0%, #fafcfa 100%) !important;
border: 1px solid hsla(59, 78%, 43%, 0.15) !important;
border-radius: 20px !important;
padding: 18px 24px !important;
margin-bottom: 20px !important;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.02), 0 8px 16px -6px rgba(195, 204, 6, 0.04) !important;
}
[data-theme="dark"] .ik-quran-detail-header-bar {
background: linear-gradient(135deg, hsl(0, 0%, 9%) 0%, #172030 100%) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 16px -6px rgba(0, 0, 0, 0.2) !important;
}
/* Settings Trigger Button (Three Dots Menu) */
.ik-quran-detail-header-actions {
position: relative;
display: flex;
align-items: center;
gap: 12px;
}
.ik-quran-settings-trigger {
background: transparent !important;
border: none !important;
padding: 8px !important;
color: #64748b !important;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
outline: none !important;
transition: color 0.2s ease, background-color 0.2s ease;
box-shadow: none !important;
border-radius: 8px !important;
width: 38px !important;
height: 38px !important;
box-sizing: border-box !important;
}
.ik-quran-settings-trigger:hover {
color: #1e293b !important;
background: #c3cc06 !important;
}
.ik-quran-settings-trigger:focus,
.ik-quran-settings-trigger:active,
.ik-quran-settings-trigger.is-active {
background: transparent !important;
color: #64748b !important;
}
.ik-quran-settings-trigger:focus:hover,
.ik-quran-settings-trigger:active:hover,
.ik-quran-settings-trigger.is-active:hover {
color: #1e293b !important;
background: #c3cc06 !important;
}
[data-theme="dark"] .ik-quran-settings-trigger {
color: #cbd5e1 !important;
}
[data-theme="dark"] .ik-quran-settings-trigger:hover {
color: #1e293b !important;
background: #c3cc06 !important;
}
[data-theme="dark"] .ik-quran-settings-trigger:focus,
[data-theme="dark"] .ik-quran-settings-trigger:active,
[data-theme="dark"] .ik-quran-settings-trigger.is-active {
background: transparent !important;
color: #cbd5e1 !important;
}
[data-theme="dark"] .ik-quran-settings-trigger:focus:hover,
[data-theme="dark"] .ik-quran-settings-trigger:active:hover,
[data-theme="dark"] .ik-quran-settings-trigger.is-active:hover {
color: #1e293b !important;
background: #c3cc06 !important;
}
.ik-quran-settings-trigger svg {
width: 22px !important;
height: 22px !important;
}
/* Settings Dropdown Card */
.ik-quran-settings-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 280px;
background: #ffffff;
border: 1px solid hsla(59, 78%, 43%, 0.2);
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
z-index: 1000;
padding: 8px 0;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
box-sizing: border-box;
}
.ik-quran-settings-dropdown.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
[data-theme="dark"] .ik-quran-settings-dropdown {
background: #1e293b;
border-color: #334155;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.ik-quran-settings-item {
border-bottom: 1px solid #f1f5f9;
}
.ik-quran-settings-item:last-child {
border-bottom: none;
}
[data-theme="dark"] .ik-quran-settings-item {
border-bottom-color: #334155;
}
.ik-quran-settings-item-header {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
cursor: pointer;
transition: background 0.2s ease;
user-select: none;
}
.ik-quran-settings-item-header:hover {
background: #f8fafc;
}
[data-theme="dark"] .ik-quran-settings-item-header:hover {
background: #334155;
}
.ik-quran-settings-icon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
flex-shrink: 0;
}
[data-theme="dark"] .ik-quran-settings-icon {
color: #94a3b8;
}
.ik-quran-settings-icon svg {
width: 18px;
height: 18px;
}
.ik-quran-settings-label {
font-size: 13px;
font-weight: 600;
color: #1e293b;
}
[data-theme="dark"] .ik-quran-settings-label {
color: #cbd5e1;
}
/* Collapsible Content Area */
.ik-quran-settings-item-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
background: #fafaf9;
box-sizing: border-box;
}
[data-theme="dark"] .ik-quran-settings-item-content {
background: #0f172a;
}
/* Sub-controllers designs */
.ik-quran-font-size-control {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 12px 16px;
}
.ik-quran-font-btn {
padding: 6px 14px !important;
border: 1px solid #cbd5e1 !important;
border-radius: 8px !important;
background: #ffffff !important;
color: #1e293b !important;
font-size: 13px !important;
font-weight: 600 !important;
cursor: pointer;
transition: all 0.2s ease;
outline: none !important;
box-shadow: none !important;
touch-action: manipulation;
}
.ik-quran-font-btn:hover {
border-color: #bac408 !important;
color: #9fa608 !important;
}
[data-theme="dark"] .ik-quran-font-btn {
background: #1e293b !important;
border-color: #475569 !important;
color: #cbd5e1 !important;
}
.ik-quran-font-val {
font-size: 14px;
font-weight: 700;
color: #1e293b;
min-width: 45px;
text-align: center;
}
[data-theme="dark"] .ik-quran-font-val {
color: #cbd5e1;
}
.ik-quran-go-ayah-control {
display: flex;
gap: 8px;
padding: 12px 16px;
}
.ik-quran-go-ayah-control input {
flex: 1;
padding: 8px 12px !important;
border: 1px solid #cbd5e1 !important;
border-radius: 8px !important;
outline: none !important;
font-size: 16px !important;
box-sizing: border-box;
background: #ffffff !important;
color: #1e293b !important;
}
[data-theme="dark"] .ik-quran-go-ayah-control input {
background: #1e293b !important;
border-color: #475569 !important;
color: #cbd5e1 !important;
}
.ik-quran-go-btn {
padding: 8px 16px !important;
border: none !important;
border-radius: 8px !important;
background: #bac408 !important;
color: #ffffff !important;
font-size: 13px !important;
font-weight: 600 !important;
cursor: pointer;
transition: opacity 0.2s ease;
box-shadow: none !important;
}
.ik-quran-go-btn:hover {
opacity: 0.9 !important;
}
.ik-quran-settings-search-box {
padding: 12px 16px;
}
.ik-quran-settings-search-box input {
width: 100%;
padding: 8px 36px 8px 12px !important;
border: 1px solid #cbd5e1 !important;
border-radius: 8px !important;
outline: none !important;
font-size: 16px !important;
box-sizing: border-box;
background: #ffffff !important;
color: #1e293b !important;
}
[data-theme="dark"] .ik-quran-settings-search-box input {
background: #1e293b !important;
border-color: #475569 !important;
color: #cbd5e1 !important;
}
.ik-quran-ayah-search-clear {
position: absolute;
right: 28px;
top: 50%;
transform: translateY(-50%);
display: none;
align-items: center;
justify-content: center;
color: #64748b;
cursor: pointer;
z-index: 10;
transition: color 0.2s ease;
}
.ik-quran-ayah-search-clear:hover {
color: #0f172a;
}
[data-theme="dark"] .ik-quran-ayah-search-clear {
color: #94a3b8;
}
[data-theme="dark"] .ik-quran-ayah-search-clear:hover {
color: #ffffff;
}
.ik-quran-ayah-search-clear svg {
width: 16px;
height: 16px;
}
/* Audio Custom Select Specific placement inside card */
.ik-quran-settings-item-content .ik-quran-reciter-selector {
width: 100% !important;
max-width: none !important;
padding: 12px 16px;
box-sizing: border-box;
position: relative;
}
.ik-quran-settings-item-content .ik-quran-custom-select-options {
width: calc(100% - 32px) !important;
left: 16px !important;
transform: translateY(-5px) !important;
}
.ik-quran-settings-item-content .ik-quran-custom-select-wrapper.is-open .ik-quran-custom-select-options {
transform: translateY(0) !important;
}
/* Add tick icons support */
.ik-quran-reciter-selector .ik-quran-custom-select-option {
padding-left: 36px !important;
position: relative;
}
.ik-quran-reciter-selector .ik-quran-custom-select-option::before {
content: '✓';
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
font-weight: bold;
color: #bac408;
opacity: 0;
transition: opacity 0.2s ease;
}
.ik-quran-reciter-selector .ik-quran-custom-select-option.active::before {
opacity: 1;
}
.ik-quran-back-link {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
max-width: 38px !important;
max-height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: #ffffff !important;
border: 1px solid hsla(59, 78%, 43%, 0.15) !important;
color: #475569 !important;
text-decoration: none;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
flex-shrink: 0 !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 10px !important;
}
.ik-quran-back-link:hover {
background: #c3cc06 !important;
border-color: #c3cc06 !important;
transform: translateX(-3px) scale(1.05) !important;
color: #1e293b !important;
box-shadow: 0 4px 12px rgba(195, 204, 6, 0.25) !important;
}
[data-theme="dark"] .ik-quran-back-link {
background: #334155 !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
}
[data-theme="dark"] .ik-quran-back-link:hover {
background: #c3cc06 !important;
border-color: #c3cc06 !important;
color: #1e293b !important;
box-shadow: 0 4px 12px rgba(195, 204, 6, 0.3) !important;
}
.ik-quran-back-link svg {
width: 20px !important;
height: 20px !important;
stroke-width: 2.5 !important;
}
.ik-quran-detail-header-title {
flex-grow: 1;
margin-left: 20px !important;
}
.ik-quran-detail-header-title h2 {
font-size: 20px !important;
font-weight: 800 !important;
color: #0f172a !important;
margin: 0 !important;
letter-spacing: -0.02em !important;
font-family: var(--ik-font-primary) !important;
}
[data-theme="dark"] .ik-quran-detail-header-title h2 {
color: #f8fafc !important;
}
.ik-quran-detail-header-title p {
font-size: 12px !important;
color: #64748b !important;
margin: 4px 0 0 0 !important;
letter-spacing: 0.02em !important;
}
[data-theme="dark"] .ik-quran-detail-header-title p {
color: #94a3b8 !important;
}
/* Tab selector */
.ik-quran-tab-bar {
display: flex;
background: rgba(226, 232, 240, 0.8) !important;
backdrop-filter: blur(8px) !important;
border: 1px solid rgba(226, 232, 240, 0.5) !important;
padding: 5px !important;
border-radius: 14px !important;
margin-bottom: 25px !important;
box-shadow: none !important;
}
[data-theme="dark"] .ik-quran-tab-bar {
background: rgba(30, 41, 59, 0.8) !important;
border-color: rgba(51, 65, 85, 0.5) !important;
}
.ik-quran-tab-btn {
flex: 1;
padding: 10px 16px !important;
text-align: center;
border: none !important;
outline: none !important;
box-shadow: none !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #64748b !important;
background: transparent !important;
cursor: pointer;
border-radius: 10px !important;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
.ik-quran-tab-icon {
width: 18px !important;
height: 18px !important;
stroke: currentColor !important;
fill: none !important;
flex-shrink: 0 !important;
display: inline-block !important;
}
[data-theme="dark"] .ik-quran-tab-btn {
color: #94a3b8 !important;
}
.ik-quran-tab-btn:hover {
color: #1e293b !important;
background: rgba(195, 204, 6, 0.08) !important;
}
[data-theme="dark"] .ik-quran-tab-btn:hover {
color: #f8fafc !important;
background: rgba(195, 204, 6, 0.12) !important;
}
.ik-quran-tab-btn.active {
background: #c3cc06 !important;
color: #1e293b !important;
box-shadow: 0 4px 12px rgba(195, 204, 6, 0.2) !important;
font-weight: 700 !important;
}
[data-theme="dark"] .ik-quran-tab-btn.active {
background: #c3cc06 !important;
color: #1e293b !important;
box-shadow: 0 4px 12px rgba(195, 204, 6, 0.3) !important;
}
/* Accordion Surah Select Bar */
.ik-quran-surah-accordion {
background: #fdfdf8;
border: 2px solid hsla(59, 78%, 43%, 0.2);
/* border-left: 4px solid #9fa608; */
border-radius: 12px;
margin-bottom: 25px;
box-shadow: 0 4px 12px rgba(120, 53, 15, 0.02);
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="dark"] .ik-quran-surah-accordion {
background: #1c1d15;
border-color: #3b3a1d;
border-left-color: #bac408;
box-shadow: none;
}
.ik-quran-surah-accordion-header {
display: flex;
align-items: center;
padding: 14px 20px;
color: #000;
font-weight: 700;
font-size: 15px;
cursor: pointer;
user-select: none;
transition: background-color 0.2s ease;
}
.ik-quran-surah-accordion-header:hover {
background-color: rgba(159, 166, 8, 0.03);
}
[data-theme="dark"] .ik-quran-surah-accordion-header {
color: #fef08a;
}
[data-theme="dark"] .ik-quran-surah-accordion-header:hover {
background-color: rgba(186, 196, 8, 0.03);
}
.ik-quran-surah-accordion-header svg {
width: 20px;
height: 20px;
margin-right: 10px;
flex-shrink: 0;
color: #9fa608;
}
[data-theme="dark"] .ik-quran-surah-accordion-header svg {
color: #bac408;
}
.ik-quran-accordion-arrow {
margin-left: auto;
display: flex;
align-items: center;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: #78350f;
}
[data-theme="dark"] .ik-quran-accordion-arrow {
color: #fef08a;
}
.ik-quran-surah-accordion.is-open .ik-quran-accordion-arrow {
transform: rotate(180deg);
}
/* Accordion body and contents */
.ik-quran-surah-accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ik-quran-accordion-content {
padding: 24px 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border-top: 1px solid rgba(235, 216, 160, 0.4);
}
[data-theme="dark"] .ik-quran-accordion-content {
border-top-color: rgba(59, 58, 29, 0.4);
}
.ik-quran-accordion-ar-title {
font-family: var(--ik-font-arabic);
font-size: 36px;
font-weight: 700;
margin: 0 0 8px 0;
color: #065f46;
line-height: 1.2;
}
[data-theme="dark"] .ik-quran-accordion-ar-title {
color: #10b981;
}
.ik-quran-accordion-en-title {
font-family: var(--ik-quran-font);
font-size: 14px;
font-weight: 500;
color: #64748b;
margin: 0 0 16px 0;
text-transform: uppercase;
letter-spacing: 1px;
}
[data-theme="dark"] .ik-quran-accordion-en-title {
color: #94a3b8;
}
.ik-quran-accordion-meta-row {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 20px;
}
.ik-quran-accordion-pill {
display: inline-block;
padding: 4px 12px;
border-radius: 12px;
font-family: var(--ik-quran-font);
font-size: 12px;
font-weight: 600;
border: 1px solid #10b981;
background: #e6fcf5;
color: #065f46;
}
[data-theme="dark"] .ik-quran-accordion-pill {
background: #064e3b;
color: #a7f3d0;
border-color: #10b981;
}
.ik-quran-accordion-ayahs-count {
font-family: var(--ik-quran-font);
font-size: 13px;
font-weight: 500;
color: #475569;
}
[data-theme="dark"] .ik-quran-accordion-ayahs-count {
color: #cbd5e1;
}
.ik-quran-accordion-desc {
font-size: 14px;
line-height: 1.6;
color: #475569;
margin: 0;
max-width: 600px;
}
[data-theme="dark"] .ik-quran-accordion-desc {
color: #cbd5e1;
}
/* Verses List / Meaning view cards */
.ik-quran-bismillah-heading {
text-align: center;
font-family: var(--ik-font-arabic);
font-size: 28px;
margin: 30px 0;
color: #0f172a;
}
.ik-quran-bismillah-ml {
font-size: 18px !important;
}
[data-theme="dark"] .ik-quran-bismillah-heading {
color: #f8fafc;
}
.ik-quran-ayah-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 24px;
margin-bottom: 20px;
transition: all 0.3s ease;
}
[data-theme="dark"] .ik-quran-ayah-card {
background: rgba(255, 255, 255, 0.05);
border-color: #334155;
}
.ik-quran-ayah-card:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}
.ik-quran-ayah-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
border-bottom: 1px solid #f1f5f9;
padding-bottom: 12px;
}
[data-theme="dark"] .ik-quran-ayah-header {
border-color: #334155;
}
.ik-quran-ayah-num-left {
display: flex;
align-items: center;
gap: 12px;
}
.ik-quran-ayah-number-badge {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
max-width: 28px !important;
max-height: 28px !important;
flex-shrink: 0 !important;
aspect-ratio: 1 / 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: #c3cc06;
color: #000;
font-weight: 700;
font-size: 12px;
border-radius: 50% !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
line-height: 1 !important;
}
[data-theme="dark"] .ik-quran-ayah-number-badge {
background: #c3cc06;
color: #000000;
}
/* Read / complete checkbox */
.ik-quran-read-check {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
max-width: 20px !important;
max-height: 20px !important;
flex-shrink: 0 !important;
aspect-ratio: 1 / 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: 1.5px solid #cbd5e1 !important;
/* light grey border */
border-radius: 50% !important;
/* Circle checkbox */
color: #94a3b8 !important;
/* light grey check */
cursor: pointer;
transition: all 0.2s ease;
box-shadow: none !important;
outline: none !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
line-height: 1 !important;
-webkit-appearance: none !important;
appearance: none !important;
}
[data-theme="dark"] .ik-quran-read-check {
border-color: #475569 !important;
color: #64748b !important;
}
.ik-quran-read-check:hover {
border-color: #065f46 !important;
color: #065f46 !important;
}
[data-theme="dark"] .ik-quran-read-check:hover {
border-color: #10b981 !important;
color: #10b981 !important;
}
.ik-quran-read-check.checked {
background: #f9fbd0 !important;
border-color: #c3cc06 !important;
color: #c3cc06 !important;
}
[data-theme="dark"] .ik-quran-read-check.checked {
background: #2e3001 !important;
border-color: #c3cc06 !important;
color: #c3cc06 !important;
}
.ik-quran-read-check svg {
width: 14px !important;
height: 14px !important;
}
/* Action Toolbar Wrapper */
.ik-quran-ayah-actions-wrapper {
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
.ik-quran-ayah-actions {
display: flex;
gap: 6px;
opacity: 1 !important;
pointer-events: auto !important;
transform: none !important;
}
.ik-quran-trigger-menu-btn {
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
border-radius: 8px !important;
color: #475569 !important;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: none !important;
outline: none !important;
padding: 0 !important;
margin: 0 !important;
}
.ik-quran-trigger-menu-btn:hover {
background: #c3cc06 !important;
color: #1e293b !important;
}
.ik-quran-trigger-menu-btn:focus,
.ik-quran-trigger-menu-btn:active,
.ik-quran-trigger-menu-btn.is-active {
background: transparent !important;
color: #475569 !important;
}
.ik-quran-trigger-menu-btn:focus:hover,
.ik-quran-trigger-menu-btn:active:hover,
.ik-quran-trigger-menu-btn.is-active:hover {
background: #c3cc06 !important;
color: #1e293b !important;
}
[data-theme="dark"] .ik-quran-trigger-menu-btn {
color: #94a3b8 !important;
}
[data-theme="dark"] .ik-quran-trigger-menu-btn:hover {
background: #c3cc06 !important;
color: #1e293b !important;
}
[data-theme="dark"] .ik-quran-trigger-menu-btn:focus,
[data-theme="dark"] .ik-quran-trigger-menu-btn:active,
[data-theme="dark"] .ik-quran-trigger-menu-btn.is-active {
background: transparent !important;
color: #94a3b8 !important;
}
[data-theme="dark"] .ik-quran-trigger-menu-btn:focus:hover,
[data-theme="dark"] .ik-quran-trigger-menu-btn:active:hover,
[data-theme="dark"] .ik-quran-trigger-menu-btn.is-active:hover {
background: #c3cc06 !important;
color: #1e293b !important;
}
.ik-quran-trigger-menu-btn svg {
width: 18px !important;
height: 18px !important;
display: block !important;
margin: 0 auto !important;
}
/* Slide Drawer border-less action buttons */
.ik-quran-ayah-action-btn {
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
color: hsl(0 0% 45%) !important;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: none !important;
outline: none !important;
border-radius: 8px !important;
padding: 0 !important;
margin: 0 !important;
touch-action: manipulation !important;
}
[data-theme="dark"] .ik-quran-ayah-action-btn {
color: #94a3b8 !important;
}
.ik-quran-ayah-action-btn:hover,
.ik-quran-ayah-action-btn:focus,
.ik-quran-ayah-action-btn:active,
.ik-quran-ayah-action-btn:focus-visible,
.ik-quran-ayah-action-btn:focus-within {
background: rgba(148, 163, 184, 0.1) !important;
color: #065f46 !important;
opacity: 1 !important;
}
[data-theme="dark"] .ik-quran-ayah-action-btn:hover,
[data-theme="dark"] .ik-quran-ayah-action-btn:focus,
[data-theme="dark"] .ik-quran-ayah-action-btn:active,
[data-theme="dark"] .ik-quran-ayah-action-btn:focus-visible,
[data-theme="dark"] .ik-quran-ayah-action-btn:focus-within {
background: rgba(255, 255, 255, 0.08) !important;
color: #34d399 !important;
opacity: 1 !important;
}
.ik-quran-ayah-action-btn svg {
width: 18px !important;
height: 18px !important;
display: block !important;
margin: 0 auto !important;
}
/* Highlighted bookmark active */
.ik-quran-ayah-action-btn.js-ik-bookmark-ayah.active {
color: #c3cc06 !important;
/* Rose highlight */
}
.ik-quran-ayah-action-btn.js-ik-bookmark-ayah.active svg {
fill: #c3cc06 !important;
}
[data-theme="dark"] .ik-quran-ayah-action-btn.js-ik-bookmark-ayah.active {
color: #c3cc06 !important;
}
[data-theme="dark"] .ik-quran-ayah-action-btn.js-ik-bookmark-ayah.active svg {
fill: #c3cc06 !important;
}
/* Highlighted playing status */
.ik-quran-ayah-action-btn.js-ik-play-ayah.playing {
color: #065f46 !important;
}
[data-theme="dark"] .ik-quran-ayah-action-btn.js-ik-play-ayah.playing {
color: #10b981 !important;
}
/* Text styling */
.ik-quran-ayah-body {
display: flex;
flex-direction: column;
gap: 20px;
}
.ik-quran-ayah-arabic {
font-family: var(--ik-font-arabic);
font-size: 28px;
line-height: 2.2;
text-align: right;
direction: rtl;
color: #0f172a;
margin: 0;
}
[data-theme="dark"] .ik-quran-ayah-arabic {
color: #f8fafc;
}
.ik-quran-ayah-translation {
font-size: 16px;
line-height: 1.6 !important;
color: #475569;
margin: 0;
}
[data-theme="dark"] .ik-quran-ayah-translation {
color: #cbd5e1;
}
/* Playing Ayah Highlighting */
.ik-quran-ayah-card.ik-playing-ayah {
border-color: #bec61833 !important;
box-shadow: 0 0 15px rgba(195, 204, 6, 0.15) !important;
background: #fbfbf4 !important;
}
[data-theme="dark"] .ik-quran-ayah-card.ik-playing-ayah {
border-color: #c3cc06 !important;
box-shadow: 0 0 15px rgba(195, 204, 6, 0.2) !important;
background: #1a1b14 !important;
}
.ik-quran-ayah-card.ik-playing-ayah .js-ik-play-ayah {
background: #c3cc06 !important;
color: #1e293b !important;
border-radius: 8px !important;
}
[data-theme="dark"] .ik-quran-ayah-card.ik-playing-ayah .js-ik-play-ayah {
background: #c3cc06 !important;
color: #1e293b !important;
border-radius: 8px !important;
}
/* Pulsing effect during jump scroll highlight */
.ik-highlight-pulse {
animation: ikPulseHighlight 2s infinite;
}
@keyframes ikPulseHighlight {
0% {
border-color: hsla(59, 78%, 43%, 0.2);
box-shadow: 0 0 0 0px rgba(188, 198, 24, 0.2);
}
70% {
border-color: #9fa608;
box-shadow: 0 0 0 10px rgba(159, 166, 8, 0);
}
100% {
border-color: hsla(59, 78%, 43%, 0.2);
box-shadow: 0 0 0 0px rgba(188, 198, 24, 0);
}
}
/* Tab panes */
.ik-quran-tab-pane {
display: none;
}
.ik-quran-tab-pane.active {
display: block;
}
/* Mushaf View styling */
.ik-quran-mushaf-surah-header {
display: block;
width: 100%;
box-sizing: border-box;
margin: 0 auto 30px auto;
padding: 12px 20px;
border: 1px solid hsla(59, 78%, 43%, 0.2);
border-radius: 12px;
background: #fdfdf8;
font-family: var(--ik-font-arabic);
font-size: 28px;
font-weight: 700;
color: #1e293b;
text-align: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.01);
}
[data-theme="dark"] .ik-quran-mushaf-surah-header {
background: #1c1d15;
border-color: #3b3a1d;
color: #fef08a;
}
.ik-quran-mushaf-bismillah {
display: block;
text-align: center;
margin: 0 auto 35px auto;
font-family: var(--ik-font-arabic);
font-size: 32px;
color: #1e293b;
line-height: 2;
direction: rtl;
}
[data-theme="dark"] .ik-quran-mushaf-bismillah {
color: #f8fafc;
}
.ik-quran-mushaf-bismillah.centered-ayah {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.ik-quran-mushaf-text-box {
background: #fdfcf7;
border: 1px solid #e6dfc7;
border-radius: 24px;
padding: 40px 30px;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02);
}
[data-theme="dark"] .ik-quran-mushaf-text-box {
background: #171612;
border-color: #2b2a24;
}
.ik-quran-mushaf-paragraph {
direction: rtl;
text-align: justify;
text-justify: inter-word;
font-family: var(--ik-font-arabic);
font-size: 28px;
line-height: 2.5;
color: #1e293b;
}
[data-theme="dark"] .ik-quran-mushaf-paragraph {
color: #f1f5f9;
}
.ik-quran-mushaf-ayah-group {
display: inline;
}
.ik-quran-mushaf-ayah-group.ik-playing-mushaf-ayah .ik-quran-mushaf-word {
color: #969300 !important;
}
[data-theme="dark"] .ik-quran-mushaf-ayah-group.ik-playing-mushaf-ayah .ik-quran-mushaf-word {
color: #969300 !important;
}
.ik-quran-mushaf-word {
transition: color 0.2s ease;
color: #000000;
}
.ik-quran-mushaf-word:hover {
color: #969300;
cursor: pointer;
}
[data-theme="dark"] .ik-quran-mushaf-word:hover {
color: #C3C018;
}
.ik-quran-mushaf-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
font-family: var(--ik-quran-font);
font-size: 10px;
font-weight: 800;
color: #555555;
margin: 0 4px;
vertical-align: middle;
}
[data-theme="dark"] .ik-quran-mushaf-number {
background-image: url('data:image/svg+xml;utf8,');
color: #dddddd;
}
.ik-quran-bottom-nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #e2e8f0;
}
.ik-quran-bottom-nav.ik-nav-rtl {
flex-direction: row-reverse;
}
[data-theme="dark"] .ik-quran-bottom-nav {
border-color: #334155;
}
.ik-quran-bottom-nav-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
font-size: 13px;
font-weight: 700;
color: #475569;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
}
/* Reverse flex direction of elements inside nav buttons in RTL mode */
.ik-quran-bottom-nav.ik-nav-rtl .ik-quran-bottom-nav-btn {
flex-direction: row-reverse;
}
/* Rotate the SVG chevron arrows inside bottom nav buttons in RTL mode */
.ik-quran-bottom-nav.ik-nav-rtl .ik-quran-bottom-nav-btn svg {
transform: rotate(180deg);
}
.ik-quran-bottom-nav-btn span {
color: black;
}
[data-theme="dark"] .ik-quran-bottom-nav-btn {
background: #1e293b;
border-color: #334155;
color: #cbd5e1;
}
.ik-quran-bottom-nav-btn:hover {
border-color: #C3C018;
color: #C3C018;
background: rgba(195, 204, 6, 0.08);
}
[data-theme="dark"] .ik-quran-bottom-nav-btn:hover {
border-color: #C3C018;
color: #C3C018;
background: rgba(195, 204, 6, 0.12);
}
.ik-quran-bottom-nav-page-indicator {
font-size: 14px;
font-weight: 700;
color: #64748b;
}
[data-theme="dark"] .ik-quran-bottom-nav-page-indicator {
color: #94a3b8;
}
/* Global Floating Toast Indicator */
#ik-quran-toast {
visibility: hidden;
min-width: 250px;
background-color: #1e293b;
color: #ffffff;
text-align: center;
border-radius: 50px;
padding: 12px 24px;
position: fixed;
z-index: 100000;
left: 50%;
bottom: 30px;
transform: translateX(-50%);
font-size: 14px;
font-weight: 600;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
opacity: 0;
transition: opacity 0.3s, visibility 0.3s;
}
#ik-quran-toast.show {
visibility: visible;
opacity: 1;
}
/* Empty search state style */
.ik-quran-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px 20px;
text-align: center;
color: #94a3b8;
}
.ik-quran-empty-state svg {
width: 48px;
height: 48px;
margin-bottom: 15px;
}
.ik-quran-empty-state p {
font-size: 15px;
font-weight: 600;
margin: 0;
}
/* Mobile responsive fixes */
@media (max-width: 640px) {
.ik-quran-header {
padding: 40px 15px 30px 15px;
}
.ik-quran-arabic-title {
font-size: 32px;
}
.ik-quran-filters-row {
flex-wrap: nowrap !important;
gap: 8px;
}
.ik-quran-custom-select-wrapper {
flex: 1 1 30% !important;
min-width: 0 !important;
}
.ik-quran-custom-select-trigger {
padding: 10px 22px 10px 10px !important;
font-size: 11px !important;
}
.ik-quran-custom-select-arrow {
right: 8px !important;
}
/* Prevent mobile overflow of centered dropdown cards */
.ik-quran-custom-select-wrapper:nth-child(2) .ik-quran-custom-select-options {
left: 50% !important;
transform: translateX(-50%) translateY(-10px) !important;
}
.ik-quran-custom-select-wrapper:nth-child(2).is-open .ik-quran-custom-select-options {
transform: translateX(-50%) translateY(0) !important;
}
.ik-quran-custom-select-wrapper:nth-child(3) .ik-quran-custom-select-options {
left: auto !important;
right: 0 !important;
transform: translateY(-10px) !important;
}
.ik-quran-custom-select-wrapper:nth-child(3).is-open .ik-quran-custom-select-options {
transform: translateY(0) !important;
}
.ik-quran-surah-grid {
grid-template-columns: 1fr;
gap: 0px;
}
.ik-quran-detail-header-bar {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 12px;
}
.ik-quran-detail-header-actions {
width: auto;
flex-shrink: 0;
}
.ik-quran-reciter-selector {
max-width: none !important;
}
.ik-quran-detail-header-title {
margin-left: 8px;
padding-right: 0;
flex-grow: 1;
min-width: 0;
}
.ik-quran-detail-header-title h2 {
font-size: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ik-quran-detail-header-title p {
font-size: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ik-quran-ayah-arabic {
font-size: 24px;
line-height: 2;
}
.ik-quran-mushaf-text-box {
padding: 24px 16px;
}
.ik-quran-mushaf-paragraph {
font-size: 24px;
line-height: 2.2;
}
}
/* Scroll to Top Button */
/* Automatically hide standard WordPress theme page titles if the Quran widget is present */
body:has(.ik-quran-wrapper) .entry-title,
body:has(.ik-quran-wrapper) .page-title,
body:has(.ik-quran-wrapper) .post-title,
body:has(.ik-quran-wrapper) .elementor-page-title,
body:has(.ik-quran-wrapper) h1.entry-title,
body:has(.ik-quran-wrapper) .entry-header {
display: none !important;
}
/* Bottom Sticky Audio Player */
.ik-quran-bottom-player {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%) translateY(100px);
width: 90%;
max-width: 650px;
background: #ffffff;
border: 1px solid hsla(59, 78%, 43%, 0.2);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
z-index: 999999;
opacity: 0;
visibility: hidden;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ik-quran-bottom-player.active {
transform: translateX(-50%) translateY(0);
opacity: 1;
visibility: visible;
}
/* Push scroll-to-top button up when player is active */
.ik-quran-bottom-player.active~.ik-scroll-to-top,
.ik-quran-bottom-player.active~#ik-scroll-to-top {
bottom: 145px !important;
}
[data-theme="dark"] .ik-quran-bottom-player {
background: #1e293b;
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.ik-quran-bottom-player-inner {
padding: 16px 20px !important;
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
}
/* Controls row (unifies selectors and action icons) */
.ik-quran-player-controls-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
gap: 16px !important;
}
.ik-quran-player-reciter-wrapper {
flex: 1 !important;
min-width: 0 !important;
}
#ik-quran-player-reciter-select {
flex: 1 1 auto !important;
max-width: 280px !important;
min-width: 180px !important;
}
.ik-quran-player-range-actions-box {
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex-shrink: 0 !important;
}
#ik-quran-player-from-select,
#ik-quran-player-to-select {
width: 80px !important;
min-width: 80px !important;
max-width: 80px !important;
flex: 0 0 80px !important;
}
.ik-quran-player-select {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
border: 1px solid hsla(59, 78%, 43%, 0.2) !important;
background-color: #ffffff !important;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 10px center !important;
background-size: 14px !important;
border-radius: 12px !important;
padding: 6px 30px 6px 12px !important;
font-size: 13px !important;
color: #334155 !important;
outline: none !important;
cursor: pointer !important;
font-family: var(--ik-font-primary) !important;
font-weight: 500 !important;
box-shadow: none !important;
transition: all 0.2s ease !important;
height: auto !important;
}
.ik-quran-player-select:hover {
border-color: #c3cc06 !important;
}
[data-theme="dark"] .ik-quran-player-select {
background-color: #334155 !important;
border-color: #475569 !important;
color: #f8fafc !important;
}
[data-theme="dark"] .ik-quran-player-select:hover {
border-color: #c3cc06 !important;
}
.ik-quran-player-label {
font-size: 12px !important;
color: #64748b !important;
font-family: var(--ik-font-primary) !important;
white-space: nowrap !important;
}
[data-theme="dark"] .ik-quran-player-label {
color: #94a3b8 !important;
}
.ik-quran-player-action-group {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-shrink: 0 !important;
}
.ik-quran-player-action-btn {
width: 32px !important;
height: 32px !important;
border-radius: 8px !important;
border: none !important;
background: transparent !important;
color: #64748b !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
transition: all 0.2s ease !important;
outline: none !important;
box-shadow: none !important;
padding: 0 !important;
touch-action: manipulation !important;
}
.ik-quran-player-action-btn:hover {
background: rgba(195, 204, 6, 0.1) !important;
color: #c3cc06 !important;
}
[data-theme="dark"] .ik-quran-player-action-btn:hover {
background: rgba(195, 204, 6, 0.15) !important;
color: #c3cc06 !important;
}
.ik-quran-player-action-btn.active {
background: rgba(195, 204, 6, 0.15) !important;
color: #c3cc06 !important;
}
[data-theme="dark"] .ik-quran-player-action-btn.active {
background: rgba(195, 204, 6, 0.2) !important;
color: #c3cc06 !important;
}
.ik-quran-player-svg-icon {
width: 18px !important;
height: 18px !important;
stroke: currentColor !important;
fill: none !important;
display: block !important;
}
.repeat-mode-badge {
position: absolute !important;
bottom: -1px !important;
right: -1px !important;
font-size: 8px !important;
font-weight: 800 !important;
background: #c3cc06 !important;
color: #1e293b !important;
border-radius: 50% !important;
width: 11px !important;
height: 11px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid #ffffff !important;
}
[data-theme="dark"] .repeat-mode-badge {
border-color: #1e293b !important;
}
.ik-quran-player-action-btn.close-btn:hover {
background: #fee2e2 !important;
color: #ef4444 !important;
}
[data-theme="dark"] .ik-quran-player-action-btn.close-btn:hover {
background: #7f1d1d !important;
color: #fca5a5 !important;
}
/* Status playing & timeline row */
.ik-quran-player-status-row {
display: flex !important;
align-items: center !important;
gap: 16px !important;
width: 100% !important;
}
.ik-quran-player-nav-btn {
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
border: none !important;
background: transparent !important;
color: #64748b !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.2s ease !important;
padding: 0 !important;
margin: 0 !important;
outline: none !important;
flex-shrink: 0 !important;
box-shadow: none !important;
touch-action: manipulation !important;
}
.ik-quran-player-nav-btn svg {
width: 13px !important;
height: 13px !important;
}
.ik-quran-player-nav-btn:hover {
color: #c3cc06 !important;
background: rgba(195, 204, 6, 0.05) !important;
}
[data-theme="dark"] .ik-quran-player-nav-btn {
color: #94a3b8 !important;
}
[data-theme="dark"] .ik-quran-player-nav-btn:hover {
color: #e5ee22 !important;
background: rgba(229, 238, 34, 0.08) !important;
}
.ik-quran-player-play-btn {
width: 48px !important;
height: 48px !important;
border-radius: 50% !important;
border: none !important;
background: #fbfbf0 !important;
color: #c3cc06 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.2s ease !important;
box-shadow: 0 4px 12px rgba(195, 204, 6, 0.12) !important;
padding: 0 !important;
margin: 0 !important;
outline: none !important;
flex-shrink: 0 !important;
touch-action: manipulation !important;
}
.ik-quran-player-play-btn:hover {
transform: scale(1.05) !important;
background: #c3cc06 !important;
color: #1e293b !important;
}
[data-theme="dark"] .ik-quran-player-play-btn {
background: #2a3311 !important;
color: #c3cc06 !important;
}
[data-theme="dark"] .ik-quran-player-play-btn:hover {
background: #c3cc06 !important;
color: #1e293b !important;
}
.ik-quran-player-play-btn svg {
width: 22px !important;
height: 22px !important;
stroke: currentColor !important;
fill: none !important;
}
.ik-quran-player-play-btn svg.play-svg {
margin-left: 2px !important;
}
.ik-quran-player-info-progress {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
}
.ik-quran-player-surah-title {
font-size: 14px !important;
font-weight: 700 !important;
color: #1e293b !important;
font-family: var(--ik-font-primary) !important;
text-align: left !important;
margin: 0 !important;
line-height: 1.2 !important;
}
[data-theme="dark"] .ik-quran-player-surah-title {
color: #f8fafc !important;
}
.ik-quran-player-timeline-wrapper {
display: flex !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.ik-quran-player-time {
font-size: 11px !important;
color: #64748b !important;
font-family: var(--ik-font-inter) !important;
min-width: 30px !important;
text-align: center !important;
}
[data-theme="dark"] .ik-quran-player-time {
color: #94a3b8 !important;
}
.ik-quran-player-progress-bar {
flex: 1 !important;
-webkit-appearance: none !important;
appearance: none !important;
height: 5px !important;
border-radius: 3px !important;
background: #e2e8f0 !important;
outline: none !important;
cursor: pointer !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
}
[data-theme="dark"] .ik-quran-player-progress-bar {
background: #475569 !important;
}
.ik-quran-player-progress-bar::-webkit-slider-thumb {
-webkit-appearance: none !important;
appearance: none !important;
width: 12px !important;
height: 12px !important;
border-radius: 50% !important;
background: #c3cc06 !important;
cursor: pointer !important;
transition: transform 0.1s ease !important;
border: none !important;
}
.ik-quran-player-progress-bar::-webkit-slider-thumb:hover {
transform: scale(1.2) !important;
}
.ik-quran-player-progress-bar::-moz-range-thumb {
width: 12px !important;
height: 12px !important;
border: none !important;
border-radius: 50% !important;
background: #c3cc06 !important;
cursor: pointer !important;
transition: transform 0.1s ease !important;
}
.ik-quran-player-progress-bar::-moz-range-thumb:hover {
transform: scale(1.2) !important;
}
.ik-quran-player-handle {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 2px !important;
margin-top: 4px !important;
opacity: 0.4 !important;
}
.ik-quran-player-handle span {
width: 24px !important;
height: 2px !important;
background: #94a3b8 !important;
border-radius: 1px !important;
display: block !important;
}
/* Responsive constraints */
@media (max-width: 600px) {
.ik-quran-bottom-player {
width: 95% !important;
bottom: 10px !important;
}
.ik-quran-bottom-player-inner {
padding: 12px 14px !important;
gap: 10px !important;
}
.ik-quran-player-controls-row {
display: grid !important;
grid-template-columns: 1fr auto !important;
align-items: center !important;
gap: 10px !important;
}
.ik-quran-player-reciter-wrapper {
grid-column: 1 !important;
grid-row: 1 !important;
width: 100% !important;
}
#ik-quran-player-reciter-select {
max-width: 100% !important;
width: 100% !important;
}
#ik-quran-player-close-btn {
grid-column: 2 !important;
grid-row: 1 !important;
align-self: center !important;
justify-self: end !important;
}
.ik-quran-player-range-actions-box {
grid-column: 1 / span 2 !important;
grid-row: 2 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
gap: 6px !important;
}
#ik-quran-player-from-select,
#ik-quran-player-to-select {
width: 80px !important;
min-width: 80px !important;
max-width: 80px !important;
flex: 0 0 80px !important;
}
.ik-quran-player-select {
font-size: 11px !important;
padding: 4px 22px 4px 6px !important;
background-position: right 6px center !important;
background-size: 10px !important;
border-radius: 8px !important;
}
.ik-quran-player-label {
font-size: 11px !important;
}
.ik-quran-player-action-btn {
width: 28px !important;
height: 28px !important;
}
.ik-quran-player-svg-icon {
width: 16px !important;
height: 16px !important;
}
.ik-quran-player-play-btn {
width: 38px !important;
height: 38px !important;
}
.ik-quran-player-play-btn svg {
width: 18px !important;
height: 18px !important;
}
.ik-quran-player-surah-title {
font-size: 12px !important;
}
.ik-quran-player-time {
font-size: 10px !important;
}
}
/* =============================================
Mushaf Page-Card Layout (Book / Scroll Mode)
============================================= */
/* Sub-bar: layout toggle + size controls */
.ik-quran-mushaf-sub-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
margin-bottom: 16px;
background: transparent;
border: none;
gap: 10px;
}
/* Layout mode buttons — pill group */
.ik-quran-mushaf-layout-options {
display: flex;
align-items: center;
gap: 4px;
background: #f7f7f7;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 50px;
padding: 4px;
}
.ik-quran-mushaf-layout-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
max-width: 38px !important;
padding: 0 !important;
border: none !important;
border-radius: 50% !important;
background: transparent;
color: #555555;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.ik-quran-mushaf-layout-btn svg {
stroke: #000;
}
.ik-quran-mushaf-layout-btn:hover {
color: #c3cc06 !important;
background: rgba(195, 204, 6, 0.08) !important;
}
.ik-quran-mushaf-layout-btn.active {
background: #c3cc06 !important;
color: #1a1a1a !important;
box-shadow: 0 2px 6px rgba(195, 204, 6, 0.2) !important;
}
[data-theme="dark"] .ik-quran-mushaf-layout-options {
background: #1e293b;
border-color: #334155;
}
[data-theme="dark"] .ik-quran-mushaf-layout-btn {
color: #cbd5e1 !important;
}
[data-theme="dark"] .ik-quran-mushaf-layout-btn:hover {
color: #c3cc06 !important;
background: rgba(255, 255, 255, 0.05) !important;
}
[data-theme="dark"] .ik-quran-mushaf-layout-btn.active {
background: #c3cc06 !important;
color: #1a1a1a !important;
box-shadow: 0 2px 6px rgba(195, 204, 6, 0.25) !important;
}
/* Font size controls — matching pill group on the right */
.ik-quran-mushaf-size-controls {
display: flex !important;
align-items: center !important;
gap: 4px !important;
background: #f7f7f7 !important;
border: 1px solid rgba(0, 0, 0, 0.05) !important;
border-radius: 50px !important;
padding: 4px 8px !important;
}
.ik-quran-mushaf-size-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
max-width: 28px !important;
padding: 0 !important;
border: none !important;
border-radius: 50% !important;
background: transparent !important;
color: #555555 !important;
font-size: 16px !important;
font-weight: 500 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
line-height: 1 !important;
}
.ik-quran-mushaf-size-btn:hover {
background: rgba(195, 204, 6, 0.08) !important;
color: #c3cc06 !important;
}
.ik-quran-mushaf-size-label {
font-size: 13px !important;
color: #555555 !important;
padding: 0 4px !important;
font-weight: 500 !important;
user-select: none !important;
}
[data-theme="dark"] .ik-quran-mushaf-size-controls {
background: #1e293b;
border-color: #334155;
}
[data-theme="dark"] .ik-quran-mushaf-size-btn {
color: #cbd5e1;
}
[data-theme="dark"] .ik-quran-mushaf-size-btn:hover {
background: rgba(255, 255, 255, 0.05);
color: #c3cc06;
}
[data-theme="dark"] .ik-quran-mushaf-size-label {
color: #cbd5e1;
}
/* Mushaf Bottom Pagination Bar */
.ik-quran-mushaf-pagination {
display: none;
align-items: center;
justify-content: space-between;
width: 100%;
margin-top: 20px;
margin-bottom: 8px;
user-select: none;
direction: ltr !important;
padding: 0 4px;
box-sizing: border-box;
}
/* Sibling selectors to show/hide pagination automatically based on container class */
.ik-quran-mushaf-pages-container.layout-book~.ik-quran-mushaf-pagination {
display: flex !important;
}
.ik-quran-mushaf-pages-container.layout-scroll~.ik-quran-mushaf-pagination {
display: none !important;
}
.ik-quran-mushaf-page-nav-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
max-width: 36px !important;
padding: 0 !important;
border-radius: 50% !important;
border: 1px solid #cbd5e1 !important;
background: #ffffff !important;
color: #475569 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
.ik-quran-mushaf-page-nav-btn:hover {
background: #c3cc06 !important;
border-color: #c3cc06 !important;
color: #1a1a1a !important;
box-shadow: 0 2px 6px rgba(195, 204, 6, 0.25) !important;
}
.ik-quran-mushaf-page-indicator {
display: flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #64748b !important;
direction: ltr !important;
}
.ik-quran-mushaf-indicator-label {
color: #94a3b8 !important;
font-weight: 500 !important;
}
.ik-quran-mushaf-indicator-value {
color: #475569 !important;
font-weight: 700 !important;
}
[data-theme="dark"] .ik-quran-mushaf-page-nav-btn {
background: #1e293b !important;
border-color: #334155 !important;
color: #cbd5e1 !important;
}
[data-theme="dark"] .ik-quran-mushaf-page-nav-btn:hover {
background: #c3cc06 !important;
border-color: #c3cc06 !important;
color: #1a1a1a !important;
}
[data-theme="dark"] .ik-quran-mushaf-indicator-value {
color: #cbd5e1 !important;
}
[data-theme="dark"] .ik-quran-mushaf-indicator-label {
color: #64748b !important;
}
/* Pages container */
.ik-quran-mushaf-pages-container {
position: relative;
padding: 0 4px;
}
/* Scroll mode: show all pages stacked */
.ik-quran-mushaf-pages-container.layout-scroll .ik-quran-mushaf-page-card {
display: block !important;
margin-bottom: 24px;
}
/* ── Page Card ── authentic Quran page look */
.ik-quran-mushaf-page-card {
background: #fdfcf5;
/* Double border frame: outer subtle shadow ring, inner brand-tint border */
border: 1px solid #e8e0c8;
border-radius: 12px;
overflow: hidden;
box-shadow:
0 0 0 4px #f9f7ed,
0 0 0 5px #e0d9c0,
0 4px 24px rgba(0, 0, 0, 0.07);
transition: box-shadow 0.25s;
}
.ik-quran-mushaf-page-card.active-page {
box-shadow:
0 0 0 4px #f9f7ed,
0 0 0 5px #c3cc06,
0 6px 30px rgba(195, 204, 6, 0.1);
}
[data-theme="dark"] .ik-quran-mushaf-page-card {
background: #000;
border-color: #2b2920;
box-shadow:
0 0 0 4px #1a1813,
0 0 0 5px #2e2c22,
0 4px 24px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .ik-quran-mushaf-page-card.active-page {
box-shadow:
0 0 0 4px #1a1813,
0 0 0 5px #bac40817,
0 6px 30px rgba(195, 204, 6, 0.08);
}
/* ── Page Header ── */
.ik-quran-mushaf-page-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px 9px;
border-bottom: 1px solid #e8e0c4;
background: linear-gradient(to bottom, #f5f1e0, #fdfcf5);
direction: rtl;
}
.ik-quran-mushaf-header-surah {
font-family: var(--ik-font-arabic, 'Amiri', serif);
font-size: 15px;
color: #3d3720;
font-weight: 700;
letter-spacing: 0.01em;
}
.ik-quran-mushaf-header-page {
font-size: 12px;
color: #a89860;
font-weight: 500;
font-family: var(--ik-font-arabic, 'Amiri', serif);
direction: ltr;
}
[data-theme="dark"] .ik-quran-mushaf-page-header {
background: linear-gradient(to bottom, #1a1812, #12110e);
border-color: #2b2820;
}
[data-theme="dark"] .ik-quran-mushaf-header-surah {
color: #e8dfc0;
}
[data-theme="dark"] .ik-quran-mushaf-header-page {
color: #6b5e38;
}
/* ── Page Content ── */
.ik-quran-mushaf-page-content {
padding: 24px 22px 16px;
}
/* ── Bismillah inside page ── */
.ik-quran-mushaf-page-content .ik-quran-mushaf-bismillah {
text-align: center;
font-family: var(--ik-font-arabic, 'Amiri', serif);
font-size: 26px;
line-height: 2;
color: #2d2510;
margin-bottom: 8px;
padding: 8px 16px;
background: rgba(195, 204, 6, 0.00);
border-radius: 8px;
border: 0px solid rgba(195, 204, 6, 0.15);
direction: rtl;
}
[data-theme="dark"] .ik-quran-mushaf-page-content .ik-quran-mushaf-bismillah {
color: #d4c898;
/* background: rgba(195, 204, 6, 0.05); */
border-color: rgba(195, 204, 6, 0.1);
}
/* ── Paragraph text ── override for inside page cards */
.ik-quran-mushaf-page-card .ik-quran-mushaf-paragraph {
direction: rtl;
text-align: justify;
text-justify: inter-word;
font-family: var(--ik-font-arabic, 'Amiri', serif);
font-size: 22px;
line-height: 2.6;
color: #1c1608;
margin: 0;
}
[data-theme="dark"] .ik-quran-mushaf-page-card .ik-quran-mushaf-paragraph {
color: #e2d9b8;
}
/* ── Page Footer ── */
.ik-quran-mushaf-page-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 20px 10px;
border-top: 1px solid #e8e0c4;
background: linear-gradient(to top, #f5f1e0, #fdfcf5);
direction: rtl;
}
.ik-quran-mushaf-footer-juz,
.ik-quran-mushaf-footer-surah {
font-size: 12px;
color: #a89860;
font-family: var(--ik-font-arabic, 'Amiri', serif);
}
.ik-quran-mushaf-footer-page {
font-size: 12px;
color: #a89860;
font-family: var(--ik-font-arabic, 'Amiri', serif);
direction: ltr;
font-weight: 600;
background: rgba(195, 204, 6, 0.12);
padding: 1px 9px;
border-radius: 50px;
border: 1px solid rgba(195, 204, 6, 0.25);
}
[data-theme="dark"] .ik-quran-mushaf-page-footer {
background: linear-gradient(to top, #1a1812, #12110e);
border-color: #2b2820;
}
[data-theme="dark"] .ik-quran-mushaf-footer-juz,
[data-theme="dark"] .ik-quran-mushaf-footer-surah {
color: #6b5e38;
}
[data-theme="dark"] .ik-quran-mushaf-footer-page {
color: #a89860;
background: rgba(195, 204, 6, 0.08);
border-color: rgba(195, 204, 6, 0.15);
}
/* Mobile adjustments */
@media (max-width: 640px) {
.ik-quran-mushaf-page-nav-btn {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
max-width: 32px !important;
}
.ik-quran-mushaf-sub-bar {
padding: 6px 12px;
}
.ik-quran-mushaf-page-content {
padding: 16px 14px 12px;
}
.ik-quran-mushaf-page-header {
padding: 8px 14px 7px;
}
.ik-quran-mushaf-page-footer {
padding: 7px 14px 9px;
}
.ik-quran-mushaf-page-card .ik-quran-mushaf-paragraph {
font-size: 20px;
line-height: 2.5;
}
.ik-quran-mushaf-page-content .ik-quran-mushaf-bismillah {
font-size: 22px;
}
}
/* Default: in book mode all page cards hidden until JS picks one to show */
.ik-quran-mushaf-pages-container.layout-book .ik-quran-mushaf-page-card {
display: none;
}
/* First card always visible as fallback (overridden by JS) */
.ik-quran-mushaf-pages-container.layout-book .ik-quran-mushaf-page-card:first-child {
display: block;
}
@keyframes ikPageFadeIn {
from {
opacity: 0.6;
transform: translateX(-60px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.ik-quran-mushaf-pages-container.layout-book .ik-quran-mushaf-page-card.active-page {
animation: ikPageFadeIn 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
/* ── Quran Global Search Results ── */
#ik-quran-global-search-results {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
max-height: 450px;
overflow-y: auto;
z-index: 1100;
margin-top: 10px;
padding: 16px;
box-sizing: border-box;
display: none;
text-align: left;
}
[data-theme="dark"] #ik-quran-global-search-results {
background: #1e293b;
border-color: #334155;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}
.ik-quran-search-results-count {
font-size: 13px;
font-weight: 600;
color: #64748b;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #e2e8f0;
}
[data-theme="dark"] .ik-quran-search-results-count {
color: #94a3b8;
border-color: #334155;
}
.ik-quran-global-search-card {
display: block;
padding: 10px 14px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
margin-bottom: 8px;
text-decoration: none;
color: inherit;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01);
transition: all 0.2s ease;
}
.ik-quran-global-search-card:hover {
border-color: var(--ik-accent, #cbd034);
background: #fafaf9;
}
.ik-quran-search-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
}
.ik-quran-search-card-ref {
font-size: 11.5px;
font-weight: 700;
color: var(--ik-accent, #cbd034);
}
.ik-quran-search-card-go {
display: none;
}
.ik-quran-search-card-arabic {
font-family: 'Scheherazade New', 'Amiri', serif;
font-size: 18px;
line-height: 1.4;
text-align: right;
direction: rtl;
color: #0f172a;
margin-bottom: 5px;
}
.ik-quran-search-card-translation {
font-size: 11.5px;
color: #475569;
line-height: 1.4;
background: transparent;
padding: 0;
border-left: none;
border-radius: 0;
}
/* Dark Theme Support */
[data-theme="dark"] .ik-quran-global-search-card {
background: #1e293b;
border-color: #334155;
}
[data-theme="dark"] .ik-quran-global-search-card:hover {
border-color: var(--ik-accent, #cbd034);
background: #1d2432;
}
[data-theme="dark"] .ik-quran-search-card-arabic {
color: #cbd5e1;
}
[data-theme="dark"] .ik-quran-search-card-translation {
background: transparent;
color: #94a3b8;
}
/* ── Quran Header Play Button ── */
.ik-quran-header-play-btn {
background: transparent !important;
border: none !important;
padding: 8px !important;
color: #64748b !important;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
outline: none !important;
transition: color 0.2s ease, background-color 0.2s ease;
box-shadow: none !important;
border-radius: 8px !important;
width: 38px !important;
height: 38px !important;
box-sizing: border-box !important;
touch-action: manipulation;
}
.ik-quran-header-play-btn:hover {
color: #1e293b !important;
background: #c3cc06 !important;
}
[data-theme="dark"] .ik-quran-header-play-btn {
color: #cbd5e1 !important;
}
[data-theme="dark"] .ik-quran-header-play-btn:hover {
color: #1e293b !important;
background: #c3cc06 !important;
}
/* ── Quran Local Search Results Dropdown ── */
.ik-quran-local-search-results {
display: none;
max-height: 200px;
overflow-y: auto;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 8px;
margin-top: 8px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
position: absolute;
left: 0;
right: 0;
z-index: 100;
}
[data-theme="dark"] .ik-quran-local-search-results {
background: #1e293b !important;
border-color: #475569 !important;
}
.ik-quran-local-search-card {
padding: 8px 12px;
border-bottom: 1px solid #f1f5f9;
cursor: pointer;
transition: background 0.2s ease;
text-align: left;
color: #0f172a;
}
.ik-quran-local-search-card div {
color: #C3C018;
}
.ik-quran-local-search-card:last-child {
border-bottom: none;
}
.ik-quran-local-search-card:hover {
background: #f8fafc;
}
[data-theme="dark"] .ik-quran-local-search-card {
border-bottom-color: #334155 !important;
color: #cbd5e1 !important;
}
[data-theme="dark"] .ik-quran-local-search-card:hover {
background: #334155 !important;
}
/* ── Quran Page Loader Overlay ── */
.ik-quran-page-loader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 10000;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
[data-theme="dark"] .ik-quran-page-loader {
background: rgba(15, 23, 42, 0.75);
}
.ik-quran-page-loader-spinner {
width: 48px;
height: 48px;
border: 5px solid #e2e8f0;
border-top-color: #cbd034;
border-radius: 50%;
animation: ik-spin 0.8s linear infinite;
}
[data-theme="dark"] .ik-quran-page-loader-spinner {
border-color: #334155;
border-top-color: #e5ee22;
}
@keyframes ik-spin {
to {
transform: rotate(360deg);
}
}
/* ==========================================================================
Baby Names Widget
========================================================================== */
.ik-baby-names-wrapper {
font-family: var(--ik-bn-font-en);
background: #fff;
/* border-radius: 12px; */
overflow: hidden;
}
.ik-bn-header {
background: linear-gradient(135deg, #2c3a1b 0%, #151b0d 100%);
padding: 32px 24px;
color: #fff;
border-radius: 0px 0px 24px 24px;
}
.ik-bn-header-inner {
max-width: 600px;
margin: 0 auto;
}
.ik-bn-logo-title {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}
.ik-bn-icon {
width: 48px;
height: 48px;
background: #c3d035;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #1a2311;
}
.ik-bn-subtitle {
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 4px;
}
.ik-bn-main-title {
font-size: 32px;
font-weight: 700;
color: #c3d035;
margin: 0;
font-family: var(--ik-bn-font-en) !important;
}
.ik-bn-desc {
font-size: 14px;
color: #fff;
margin-bottom: 24px;
}
.ik-bn-search {
position: relative;
display: block;
width: 100%;
}
.ik-bn-search .ik-bn-search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: #888;
pointer-events: none;
z-index: 2;
display: block !important;
}
.ik-bn-search input {
width: 100% !important;
padding: 14px 44px 14px 44px !important;
border-radius: 8px !important;
border: 1px solid #eaeaea !important;
background: #fff !important;
color: #333 !important;
font-size: 15px !important;
outline: none !important;
transition: all 0.3s;
box-sizing: border-box !important;
margin: 0 !important;
height: auto !important;
line-height: normal !important;
}
#ik-bn-search-clear {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: transparent !important;
border: none !important;
color: #ccc;
cursor: pointer;
padding: 4px !important;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
margin: 0 !important;
}
#ik-bn-search-clear:hover {
color: #fff;
}
.ik-bn-search input:focus {
background: rgba(255, 255, 255, 0.15);
border-color: #c3d035;
}
.ik-bn-controls {
padding: 24px;
border-bottom: 1px solid #eee;
}
.ik-bn-gender-toggle {
display: flex;
background: #f8f9e6;
border-radius: 12px;
padding: 4px;
margin-bottom: 24px;
}
.ik-bn-gender-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px;
border: none;
background: transparent;
font-weight: 600;
color: #8b6058;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
.ik-bn-gender-btn.active,
.ik-bn-lang-btn.active {
background: #c3d035;
color: #1a2311;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.ik-bn-lang-toggle {
display: flex;
background: #f8f9e6;
border-radius: 8px;
padding: 2px;
}
.ik-bn-lang-btn {
border: none;
background: transparent;
color: #555;
border-radius: 6px;
padding: 4px 12px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
}
.ik-bn-alphabet-label {
font-size: 11px;
font-weight: 700;
color: #666;
margin-bottom: 12px;
letter-spacing: 1px;
}
.ik-bn-alphabet-list {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 8px;
-ms-overflow-style: none;
scrollbar-width: none;
}
.ik-bn-alphabet-list::-webkit-scrollbar {
display: none;
}
.ik-bn-alphabet-letter {
width: 36px;
height: 36px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid #e5e5e5;
background: #fff;
color: #444;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
}
.ik-bn-alphabet-letter.active {
background: #c3d035;
border-color: #c3d035;
color: #1a2311;
}
.ik-bn-content {
padding: 10px 20px;
background: #fdfdfd;
}
.ik-bn-group-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
margin-top: 10px;
}
.ik-bn-group-letter {
font-family: var(--ik-bn-font-en);
font-size: 24px;
font-weight: 700;
color: #6a7413;
}
.ik-bn-group-count {
background: #f4f5e7;
color: #666;
font-size: 12px;
padding: 4px 10px;
border-radius: 12px;
}
.ik-bn-group-line {
flex: 1;
height: 1px;
background: #eee;
}
.ik-bn-cards-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 768px) {
.ik-bn-cards-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.ik-bn-cards-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.ik-bn-card {
display: flex;
padding: 10px;
background: #fff;
border: 1px solid #eaeaea;
border-radius: 12px;
margin: 0;
transition: box-shadow 0.2s;
}
.ik-bn-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
border-color: #d8e085;
}
.ik-bn-card-icon {
width: 48px;
height: 48px;
background: #f8f9e6;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ik-bn-font-en);
font-size: 20px;
font-weight: 700;
color: #4a520e;
margin-right: 16px;
flex-shrink: 0;
}
.ik-bn-card-body {
flex: 1;
}
.ik-bn-card-top {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
}
.ik-bn-card-eng {
font-size: 18px;
font-weight: 700;
color: #111;
font-family: var(--ik-bn-font-en) !important;
}
.ik-bn-card-ar {
font-size: 20px;
color: #000000;
font-family: var(--ik-bn-font-ar);
font-weight: bold;
}
.ik-bn-malayalam {
font-family: var(--ik-bn-font-ml);
font-size: 13px;
color: #555;
margin-top: 2px;
line-height: 1.2;
font-weight: 400;
}
[data-theme="dark"] .ik-bn-malayalam {
color: #fff;
}
.ik-bn-card-meanings {
font-size: 13px;
color: #666;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.ik-bn-card-meanings span.ik-bn-malayalam {
color: #666 !important;
opacity: 1 !important;
visibility: visible !important;
}
.ik-bn-card-meanings-sep {
color: #ccc;
font-size: 10px;
}
.ik-bn-floating-add {
position: fixed;
bottom: 24px;
right: 24px;
width: 56px;
height: 56px;
background: #c3d035;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #1a2311;
box-shadow: 0 4px 12px rgba(195, 208, 53, 0.4);
cursor: pointer;
z-index: 99;
transition: transform 0.2s;
}
.ik-bn-floating-add:hover {
transform: scale(1.05);
}
/* Boy Theme */
.ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-gender-toggle,
.ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-lang-toggle {
background: #e4f1fa !important;
}
.ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-lang-btn {
color: #4a749d !important;
}
.ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-lang-btn.active {
background: #6a9bc3 !important;
color: #fff !important;
}
.ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-gender-btn,
.ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-gender-btn:hover,
.ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-gender-btn:focus {
color: #4a749d !important;
background: transparent !important;
opacity: 1 !important;
}
.ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-gender-btn[data-gender="boy"].active,
.ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-gender-btn[data-gender="boy"].active:hover,
.ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-gender-btn[data-gender="boy"].active:focus {
background: #6a9bc3 !important;
color: #fff !important;
opacity: 1 !important;
}
.ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-card-icon {
background: #ebf3fa;
color: #2c5987;
}
.ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-card {
border-left: 4px solid #6a9bc3;
}
.ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-card:hover {
border-color: #6a9bc3;
}
.ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-alphabet-letter {
background: #ebf3fa;
color: #2c5987;
}
.ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-alphabet-letter.active {
background: #6a9bc3;
color: #fff;
}
.ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-group-letter {
color: #4a749d;
}
.ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-group-count {
background: #ebf3fa;
color: #4a749d;
}
/* Girl Theme */
.ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-gender-toggle,
.ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-lang-toggle {
background: #faebf1 !important;
}
.ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-lang-btn {
color: #b55e81 !important;
}
.ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-lang-btn.active {
background: #e295b2 !important;
color: #fff !important;
}
.ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-gender-btn,
.ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-gender-btn:hover,
.ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-gender-btn:focus {
color: #b55e81 !important;
background: transparent !important;
opacity: 1 !important;
}
.ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-gender-btn[data-gender="girl"].active,
.ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-gender-btn[data-gender="girl"].active:hover,
.ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-gender-btn[data-gender="girl"].active:focus {
background: #e295b2 !important;
color: #fff !important;
opacity: 1 !important;
}
.ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-card-icon {
background: #faebf1;
color: #902651;
}
.ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-card {
border-left: 4px solid #e295b2;
}
.ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-card:hover {
border-color: #e295b2;
}
.ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-alphabet-letter {
background: #faebf1;
color: #902651;
}
.ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-alphabet-letter.active {
background: #e295b2;
color: #fff;
}
.ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-group-letter {
color: #b55e81;
}
.ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-group-count {
background: #faebf1;
color: #b55e81;
}
/* ==========================================================================
Dark Theme for Baby Names Widget
========================================================================== */
[data-theme="dark"] .ik-baby-names-wrapper {
background: #111 !important;
color: #eee !important;
}
[data-theme="dark"] .ik-baby-names-wrapper .ik-bn-content,
[data-theme="dark"] .ik-baby-names-wrapper .ik-bn-controls,
[data-theme="dark"] .ik-baby-names-wrapper .ik-bn-alphabet-list {
background: #1a1a1a !important;
border-color: #333 !important;
}
/* Search Box */
[data-theme="dark"] .ik-baby-names-wrapper .ik-bn-search input {
background: #1a1a1a !important;
border-color: #333 !important;
color: #eee !important;
}
/* Base Text */
[data-theme="dark"] .ik-baby-names-wrapper .ik-bn-card-eng,
[data-theme="dark"] .ik-baby-names-wrapper .ik-bn-card-ar {
color: #fff !important;
}
[data-theme="dark"] .ik-baby-names-wrapper .ik-bn-card-meanings,
[data-theme="dark"] .ik-baby-names-wrapper .ik-bn-card-meanings span {
color: #aaa !important;
}
[data-theme="dark"] .ik-baby-names-wrapper .ik-bn-group-header .ik-bn-group-letter,
[data-theme="dark"] .ik-baby-names-wrapper .ik-bn-alphabet-label {
color: #ccc !important;
}
/* --------------------------------------------------------------------------
Dark Mode: Boy Theme (Preserving Blue)
-------------------------------------------------------------------------- */
[data-theme="dark"] .ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-card {
background: #16202a !important;
border-color: #2c5987 !important;
border-left: 4px solid #6a9bc3 !important;
}
[data-theme="dark"] .ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-card:hover {
border-color: #6a9bc3 !important;
}
[data-theme="dark"] .ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-card-icon,
[data-theme="dark"] .ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-alphabet-letter,
[data-theme="dark"] .ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-group-count {
background: #1e334a !important;
color: #9cbde0 !important;
border-color: #2c5987 !important;
}
[data-theme="dark"] .ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-alphabet-letter.active {
background: #6a9bc3 !important;
color: #fff !important;
}
[data-theme="dark"] .ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-gender-toggle,
[data-theme="dark"] .ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-lang-toggle {
background: #16202a !important;
}
[data-theme="dark"] .ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-gender-btn,
[data-theme="dark"] .ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-lang-btn {
color: #6a9bc3 !important;
}
[data-theme="dark"] .ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-gender-btn.active,
[data-theme="dark"] .ik-baby-names-wrapper.ik-bn-theme-boy .ik-bn-lang-btn.active {
background: #6a9bc3 !important;
color: #fff !important;
}
/* --------------------------------------------------------------------------
Dark Mode: Girl Theme (Preserving Pink)
-------------------------------------------------------------------------- */
[data-theme="dark"] .ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-card {
background: #2a1a20 !important;
border-color: #8b3c5a !important;
border-left: 4px solid #e295b2 !important;
}
[data-theme="dark"] .ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-card:hover {
border-color: #e295b2 !important;
}
[data-theme="dark"] .ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-card-icon,
[data-theme="dark"] .ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-alphabet-letter,
[data-theme="dark"] .ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-group-count {
background: #4a2835 !important;
color: #f1bacc !important;
border-color: #8b3c5a !important;
}
[data-theme="dark"] .ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-alphabet-letter.active {
background: #e295b2 !important;
color: #fff !important;
}
[data-theme="dark"] .ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-gender-toggle,
[data-theme="dark"] .ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-lang-toggle {
background: #2a1a20 !important;
}
[data-theme="dark"] .ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-gender-btn,
[data-theme="dark"] .ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-lang-btn {
color: #e295b2 !important;
}
[data-theme="dark"] .ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-gender-btn.active,
[data-theme="dark"] .ik-baby-names-wrapper.ik-bn-theme-girl .ik-bn-lang-btn.active {
background: #e295b2 !important;
color: #fff !important;
}
/* ==========================================================================
Kavadam QA Widget
========================================================================== */
.ik-qa-app {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: #fdfdfd;
/* border-radius: 20px; */
overflow: hidden;
position: relative;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
min-height: 500px;
}
.ik-qa-view {
display: none;
animation: ikFadeIn 0.3s ease;
}
.ik-qa-view.ik-qa-view-active {
display: block;
}
@keyframes ikFadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.ik-qa-header {
background: linear-gradient(135deg, #2c3a1b 0%, #151b0d 100%);
padding: 32px 24px;
color: #fff;
border-radius: 0 0 24px 24px;
}
.ik-qa-header-inner {
max-width: 600px;
margin: 0 auto;
}
.ik-qa-logo-title {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.ik-qa-icon {
width: 32px;
height: 32px;
background: #c3d035;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #1a2311;
}
.ik-qa-icon svg {
width: 16px;
height: 16px;
}
.ik-qa-subtitle {
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
}
.ik-qa-main-title {
font-size: 20px !important;
font-weight: 700;
color: #fff;
margin: 0 0 8px 0;
}
.ik-qa-desc {
font-size: 13px;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 24px;
}
.ik-qa-search {
position: relative;
margin-bottom: 16px;
}
.ik-qa-search .ik-qa-search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: #888;
z-index: 2;
}
.ik-qa-search input {
width: 100% !important;
padding: 14px 44px 14px 44px !important;
border-radius: 12px !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
background: rgba(255, 255, 255, 0.1) !important;
color: #fff !important;
font-size: 15px !important;
outline: none !important;
transition: all 0.3s;
box-sizing: border-box !important;
}
.ik-qa-search input:focus {
background: rgba(255, 255, 255, 0.15) !important;
border-color: #c3d035 !important;
}
.ik-qa-badges {
display: flex;
gap: 12px;
}
.ik-qa-badge {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(195, 208, 53, 0.3);
color: #fff;
font-size: 11px;
padding: 6px 12px;
border-radius: 20px;
}
.ik-qa-badge-num {
color: #c3d035;
margin-right: 4px;
}
.ik-qa-content {
padding: 24px;
max-width: 600px;
margin: 0 auto;
}
.ik-qa-section-title {
font-size: 13px;
font-weight: 700;
color: #666;
margin-bottom: 16px;
}
.ik-qa-cat-list,
.ik-qa-sub-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.ik-qa-cat-card,
.ik-qa-sub-card {
display: flex;
align-items: center;
padding: 16px;
background: #fff;
border: 1px solid #eaeaea;
border-radius: 16px;
cursor: pointer;
transition: all 0.2s;
}
.ik-qa-cat-card:hover,
.ik-qa-sub-card:hover {
border-color: #d8e085;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}
.ik-qa-cat-icon-box {
width: 48px;
height: 48px;
background: #f8f9e6;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #6a7413;
margin-right: 16px;
}
.ik-qa-cat-icon-box svg {
width: 24px;
height: 24px;
}
.ik-qa-cat-info {
flex: 1;
}
.ik-qa-cat-info h3,
.ik-qa-sub-info h3 {
font-size: 16px;
font-weight: 700;
color: #111;
margin: 0 0 4px 0;
}
.ik-qa-cat-info p,
.ik-qa-sub-info p {
font-size: 12px;
color: #888;
margin: 0;
}
.ik-qa-cat-arrow {
color: #ccc;
}
.ik-qa-back-bar {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
font-size: 14px;
font-weight: 600;
color: #c3d035;
}
.ik-qa-back-btn {
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 50%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s;
position: relative;
}
.ik-qa-back-btn svg {
display: block !important;
}
.ik-qa-back-btn:hover {
background: rgba(255, 255, 255, 0.2);
}
.ik-qa-highlight-card {
background: #f8f9e6;
border-radius: 16px;
margin-bottom: 24px;
border: 1px solid #eef2ca;
overflow: hidden;
}
.ik-qa-highlight-header {
padding: 16px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.ik-qa-highlight-header-left {
display: flex;
align-items: center;
gap: 16px;
}
.ik-qa-highlight-icon {
width: 40px;
height: 40px;
background: #c3d035;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #1a2311;
}
.ik-qa-highlight-text {
display: flex;
flex-direction: column;
justify-content: center;
}
.ik-qa-highlight-text h4 {
margin: 0;
font-size: 15px;
color: #111;
}
.ik-qa-highlight-chevron {
color: #94a3b8;
transition: transform 0.3s;
display: flex;
align-items: center;
}
.ik-qa-highlight-card.is-open .ik-qa-highlight-chevron {
transform: rotate(180deg);
}
.ik-qa-highlight-desc {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
padding: 0 16px;
opacity: 0;
}
.ik-qa-highlight-card.is-open .ik-qa-highlight-desc {
grid-template-rows: 1fr;
padding: 0 16px 16px 16px;
opacity: 1;
}
.ik-qa-highlight-desc-inner {
overflow: hidden;
}
.ik-qa-highlight-desc-inner p {
margin: 0;
font-size: 13px;
color: #666;
line-height: 1.6;
}
.ik-qa-highlight-desc-inner p:empty {
display: none;
}
.ik-qa-sub-num {
width: 40px;
height: 40px;
background: #333;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
margin-right: 16px;
}
.ik-qa-sub-info {
flex: 1;
}
.ik-qa-filters {
display: flex;
gap: 8px;
margin-bottom: 24px;
overflow-x: auto;
padding-bottom: 4px;
}
.ik-qa-filter-btn {
background: #fff;
border: 1px solid #eaeaea;
padding: 8px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
color: #666;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s;
}
.ik-qa-filter-btn.active {
background: #4a520e;
border-color: #4a520e;
color: #fff;
}
.ik-qa-q-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.ik-qa-q-card {
background: #fff;
border: 1px solid #eaeaea;
border-radius: 16px;
overflow: hidden;
}
.ik-qa-q-top {
padding: 16px;
display: flex;
gap: 16px;
align-items: flex-start;
cursor: pointer;
}
.ik-qa-q-num {
width: 32px;
height: 32px;
background: #f4f5e7;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #6a7413;
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
}
.ik-qa-q-title {
flex: 1;
margin: 0;
font-size: 14px !important;
font-weight: 600;
color: #111;
line-height: 1.4;
padding-top: 5px;
}
.ik-qa-q-toggle {
color: #c3d035;
transition: transform 0.3s;
background: #fcfdf3;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.ik-qa-q-card.expanded .ik-qa-q-toggle {
transform: rotate(180deg);
}
.ik-qa-q-answer-wrap {
display: none;
padding: 0 16px 16px 16px;
}
.ik-qa-q-card.expanded .ik-qa-q-answer-wrap {
display: block;
}
.ik-qa-q-answer {
font-size: 14px;
color: #444;
line-height: 1.6;
margin-bottom: 16px;
padding-left: 10px;
}
.ik-qa-q-ref {
margin-left: 10px;
padding: 12px;
background: #f8f9e6;
border-radius: 8px;
border-left: 4px solid #c3d035;
font-size: 12px;
color: #6a7413;
display: flex;
align-items: center;
}
.ik-qa-q-ref p,
.ik-qa-q-ref a {
margin-bottom: 0;
font-size: 12px !important;
color: #6a7413 !important;
}
/* Desktop Enhancements for Kavadam QA */
@media (min-width: 992px) {
.ik-qa-header-inner,
.ik-qa-content {
max-width: 1200px;
}
.ik-qa-header {
text-align: center;
padding: 48px 24px;
}
.ik-qa-logo-title {
justify-content: center;
}
.ik-qa-main-title {
font-size: 28px;
}
.ik-qa-search {
max-width: 600px;
margin: 0 auto 24px auto;
}
.ik-qa-badges {
justify-content: center;
}
.ik-qa-cat-list,
.ik-qa-sub-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.ik-qa-q-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
align-items: start;
}
.ik-qa-highlight-card {
max-width: 600px;
margin: 0 auto 32px auto;
}
.ik-qa-back-bar {
justify-content: center;
font-size: 16px;
}
.ik-qa-filters {
justify-content: center;
margin-bottom: 32px;
}
}
@media (max-width: 991px) and (min-width: 768px) {
.ik-qa-header-inner,
.ik-qa-content {
max-width: 800px;
}
.ik-qa-cat-list,
.ik-qa-sub-list,
.ik-qa-q-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
align-items: start;
}
}
.ik-qa-search input {
padding-right: 48px !important;
}
.ik-qa-search-clear {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
color: #ccc;
cursor: pointer;
transition: color 0.2s;
z-index: 10;
}
.ik-qa-search-clear:hover {
color: #666;
}
/* QA Widget Dark Mode */
[data-theme="dark"] .ik-qa-app {
background: #0f172a;
}
[data-theme="dark"] .ik-qa-cat-card,
[data-theme="dark"] .ik-qa-sub-card,
[data-theme="dark"] .ik-qa-q-card {
background: #1e293b;
border-color: #334155;
}
[data-theme="dark"] .ik-qa-cat-card:hover,
[data-theme="dark"] .ik-qa-sub-card:hover {
border-color: #c3d035;
background: #0f172a;
}
[data-theme="dark"] .ik-qa-cat-info h3,
[data-theme="dark"] .ik-qa-sub-info h3,
[data-theme="dark"] .ik-qa-q-title,
[data-theme="dark"] .ik-qa-highlight-text h4 {
color: #f8fafc !important;
}
[data-theme="dark"] .ik-qa-cat-info p,
[data-theme="dark"] .ik-qa-sub-info p,
[data-theme="dark"] .ik-qa-highlight-desc-inner p,
[data-theme="dark"] .ik-qa-q-answer {
color: #cbd5e1;
}
[data-theme="dark"] .ik-qa-cat-icon-box {
background: #0f172a;
color: #c3d035;
}
[data-theme="dark"] .ik-qa-highlight-card {
background: #1e293b;
border-color: #334155;
}
[data-theme="dark"] .ik-qa-q-num {
background: #334155;
color: #c3d035;
}
[data-theme="dark"] .ik-qa-q-ref {
background: #0f172a;
border-left-color: #c3d035;
color: #c3d035;
}
[data-theme="dark"] .ik-qa-filter-btn {
background: #1e293b;
border-color: #334155;
color: #cbd5e1;
}
[data-theme="dark"] .ik-qa-filter-btn.active {
background: #c3d035;
color: #1a2311;
border-color: #c3d035;
}
[data-theme="dark"] .ik-qa-q-toggle {
background: #334155;
color: #c3d035;
}
[data-theme="dark"] .ik-qa-section-title {
color: #94a3b8;
}
/* Custom Scroll Title Animation */
.ik-scroll-title {
display: inline-block !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
padding-right: 50px !important;
animation: ikScrollTitleLeft 15s linear infinite !important;
}
@keyframes ikScrollTitleLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
/* Flawless Seamless Marquee */
.ik-seamless-marquee {
display: inline-block !important;
white-space: nowrap !important;
animation: ikFlawlessScroll 8s linear infinite !important;
}
.ik-seamless-part {
display: inline-block !important;
padding-right: 50px !important;
}
@keyframes ikFlawlessScroll {
0%,
15% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.post .ik-post .wp-post-image {
width: auto !important;
max-height: none !important;
height: auto !important;
object-fit: unset !important;
}
/* filter single post */
.ik-search-nav {
position: fixed;
bottom: 18px;
left: 18px;
z-index: 9999;
background: var(--ik-bg, #ffffff);
box-shadow: var(--ik-shadow, 0 10px 30px rgba(0, 0, 0, 0.15));
border: 1px solid var(--ik-border, #e2e8f0);
padding: 8px 12px;
border-radius: 50px;
display: flex;
align-items: center;
gap: 8px;
}
.ik-search-count {
font-size: 14px;
font-weight: 500;
color: var(--ik-text-dim, #64748b);
margin-right: 4px;
}
.ik-search-nav-btn {
background: var(--ik-card-bg, #f8fafc);
border: 1px solid var(--ik-border, #e2e8f0);
border-radius: 50%;
width: 32px;
height: 32px;
cursor: pointer;
color: var(--ik-text, #1e293b);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
padding: 0;
}
.ik-search-nav-btn i {
font-size: 14px;
}
.ik-search-nav-btn:hover {
background: var(--ik-border, #e2e8f0);
}
.ik-search-nav-divider {
width: 1px;
height: 20px;
background: var(--ik-border, #e2e8f0);
margin: 0 2px;
}
.js-ik-search-clear-float {
color: var(--ik-text-dim, #64748b);
}
/* Base Styles */
.ik-hadith-container {
max-width: 900px;
margin: 0 auto;
padding: 20px;
padding-top: 0px;
font-family: 'Manjari', sans-serif !important;
color: var(--ik-text, #1e293b);
}
/* Reset and style action bar triggers */
.ik-bookmark-trigger,
.ik-read-trigger,
.ik-share-trigger {
background: transparent !important;
border: none !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
color: hsl(0 0% 45%) !important;
transition: color 0.2s !important;
opacity: 1 !important;
box-shadow: none !important;
outline: none !important;
-webkit-tap-highlight-color: transparent !important;
}
.ik-bookmark-trigger:hover,
.ik-read-trigger:hover,
.ik-share-trigger:hover {
color: rgb(203, 208, 52) !important;
background: transparent !important;
}
.ik-bookmark-trigger:focus,
.ik-read-trigger:focus,
.ik-share-trigger:focus,
.ik-bookmark-trigger:focus-visible,
.ik-read-trigger:focus-visible,
.ik-share-trigger:focus-visible {
color: hsl(0 0% 45%) !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
}
.ik-bookmark-trigger.active,
.ik-read-trigger.active,
.ik-bookmark-trigger.active:focus,
.ik-read-trigger.active:focus,
.ik-bookmark-trigger.active:focus-visible,
.ik-read-trigger.active:focus-visible {
color: rgb(203, 208, 52) !important;
}
.ik-hadith-breadcrumbs a {
color: #6b7280 !important;
transition: color 0.2s;
}
.ik-hadith-breadcrumbs a:hover {
color: #111827 !important;
}
.ik-hadith-bc-wrap {
position: relative;
margin-bottom: 24px;
}
.ik-hadith-breadcrumbs {
display: flex;
align-items: center;
flex-wrap: nowrap;
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 8px;
margin: 0;
padding-top: 0;
padding-bottom: 12px;
font-size: 14px;
color: #6b7280;
width: 100%;
}
.ik-hadith-breadcrumbs::-webkit-scrollbar {
display: none;
}
.ik-hadith-breadcrumbs .ik-breadcrumb-current,
.ik-hadith-breadcrumbs a.ik-breadcrumb-current {
color: #111827 !important;
font-weight: 600;
display: inline-block;
}
.ik-breadcrumb-link {
color: #6b7280 !important;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color 0.2s;
}
.ik-breadcrumb-link svg {
margin-top: -5px;
}
.ik-breadcrumb-link:hover {
color: #111827 !important;
}
.ik-breadcrumb-separator {
font-size: 10px;
color: #d1d5db;
display: inline-block;
}
.ik-hadith-header-wrapper {
position: relative;
text-align: center;
margin-bottom: 40px;
display: flex;
justify-content: center;
align-items: flex-start;
}
.ik-hadith-header-content {
display: flex;
flex-direction: column;
align-items: center;
margin-top: -15x;
}
.ik-hadith-search-btn {
position: absolute;
right: 0;
top: 0;
width: 44px;
height: 44px;
border-radius: 50%;
background: #fbfbf6;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--ik-accent, #cbd034);
transition: all 0.3s ease;
}
.ik-hadith-search-btn:hover {
background: var(--ik-accent, #cbd034);
color: #fff;
}
.ik-hadith-main-title {
font-size: 36px !important;
font-weight: 700;
margin: 20px 0 10px 0;
color: var(--ik-text, #1e293b);
}
@media (max-width: 768px) {
.ik-hadith-breadcrumbs {
padding-top: 5px;
padding-left: 5px;
}
.ik-breadcrumb-current {
font-size: 14px !important;
}
.ik-hadith-main-title {
font-size: 28px !important;
padding: 0 52px;
box-sizing: border-box;
margin-top: 6px;
}
.ik-hadith-header-wrapper {
padding-right: 0;
}
.ik-hadith-header-content {
width: 100%;
}
.ik-hadith-detail-content {
padding: 10px !important;
}
.ik-hadith-detail-card {
margin-left: 10px !important;
margin-right: 10px !important;
}
}
.ik-hadith-title-line {
width: 60px;
height: 4px;
background-color: var(--ik-accent, #cbd034);
margin: 0 auto 15px auto;
border-radius: 2px;
}
.ik-hadith-subtitle {
color: #64748b;
font-size: 16px;
margin: 15px 0 0 0;
}
.ik-hadith-intro-box {
background: #fbfbf6;
border-radius: 12px;
border: 1px solid #e6e8b3;
margin-bottom: 30px;
overflow: hidden;
}
.ik-hadith-intro-trigger {
width: 100%;
background: transparent !important;
border: none;
padding: 18px 20px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
font-family: inherit;
font-weight: 700;
color: #1e293b;
font-size: 16px;
}
.ik-hadith-intro-trigger:hover,
.ik-hadith-intro-trigger:active,
.ik-hadith-intro-trigger:focus {
background: transparent !important;
box-shadow: none !important;
outline: none !important;
color: #1e293b !important;
}
.ik-hadith-intro-trigger-left {
display: flex;
align-items: center;
gap: 12px;
}
.ik-hadith-intro-chevron {
color: #94a3b8;
transition: transform 0.3s;
display: flex;
align-items: center;
}
.ik-hadith-intro-trigger[aria-expanded="true"] .ik-hadith-intro-chevron {
transform: rotate(180deg);
}
.ik-hadith-intro-content {
padding: 0 20px 20px 20px;
color: #475569;
line-height: 1.8;
font-size: 15px;
display: none;
}
.ik-hadith-list {
display: flex;
flex-direction: column;
gap: 0px;
}
.ik-list-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 15px;
background: #fafafa;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
margin-bottom: 8px;
}
.ik-list-item:hover {
transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.ik-list-item-left {
display: flex;
align-items: center;
gap: 15px;
}
.ik-list-number {
width: 32px;
height: 32px;
background: #f4f3db;
color: #a3a826;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
}
.ik-list-content h3 {
margin: 0 0 5px 0;
font-size: 18px;
font-weight: 700;
font-family: 'Manjari', sans-serif;
color: #1e293b;
}
.ik-list-content p {
margin: 0;
font-size: 14px;
color: #64748b;
}
.ik-list-chevron {
color: #94a3b8;
}
/* Hadith Detail View */
.ik-hadith-detail-card {
background: #ffffff;
border-radius: 12px;
border: 1px solid #e6e8b3;
overflow: hidden;
margin-bottom: 20px;
}
.ik-hadith-detail-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 20px;
background: #fbfbf6;
border-bottom: 1px solid #e6e8b3;
}
.ik-hadith-badge {
background: #cbd034;
color: #000;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.ik-hadith-detail-content {
padding: 30px;
}
.ik-hadith-detail-title {
font-family: 'Manjari', sans-serif !important;
font-size: 24px;
font-weight: 700;
margin: 0 0 25px 0;
color: #1e293b;
}
.ik-hadith-arabic {
font-family: 'Scheherazade New', 'Amiri', serif;
font-size: 18px;
line-height: 2;
text-align: right;
direction: rtl;
margin-bottom: 25px;
color: #0f172a;
}
.ik-hadith-malayalam {
font-family: 'Manjari', sans-serif !important;
font-size: 16px;
line-height: 1.8;
margin-bottom: 25px;
color: #334155;
}
.ik-hadith-primary-info {
font-size: 14px;
color: #64748b;
margin-bottom: 25px;
line-height: 1.0;
}
.ik-hadith-more-info {
border-top: 0px solid #e2e8f0;
padding-top: 0px;
}
.ik-hadith-more-trigger {
background: transparent !important;
border: none !important;
outline: none !important;
padding: 0px 0;
font-weight: 600;
font-size: 15px;
color: #1e293b;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
text-align: left;
}
.ik-hadith-more-trigger:hover,
.ik-hadith-more-trigger:active,
.ik-hadith-more-trigger:focus {
background: transparent !important;
outline: none !important;
box-shadow: none !important;
}
.ik-hadith-more-trigger .ik-hadith-more-chevron {
transition: transform 0.3s ease;
color: #94a3b8;
}
.ik-hadith-more-trigger[aria-expanded="true"] .ik-hadith-more-chevron {
transform: rotate(180deg);
}
.ik-hadith-more-content {
padding-top: 15px;
border-top: 1px solid #e2e8f0;
}
.ik-hadith-more-section {
margin-bottom: 20px;
}
.ik-hadith-more-section h5 {
font-size: 15px;
font-weight: 700;
margin: 0 0 8px 0;
color: #1e293b;
}
.ik-hadith-more-text {
font-size: 15px;
color: #475569;
line-height: 1.6;
}
/* Hadith card action button hover box matching Quran style */
.ik-hadith-card-actions button {
background: transparent !important;
border: none !important;
width: 32px !important;
height: 32px !important;
border-radius: 8px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
padding: 0 !important;
}
@media (hover: hover) {
.ik-hadith-card-actions button:hover {
background-color: rgba(148, 163, 184, 0.1) !important;
}
[data-theme="dark"] .ik-hadith-card-actions button:hover {
background-color: rgba(255, 255, 255, 0.08) !important;
}
}
/* Dark Mode */
[data-theme="dark"] .ik-list-item,
.ik-hadith-search-btn {
background: #1e293b;
border-color: #334155;
color: #f8fafc;
}
[data-theme="dark"] .ik-hadith-intro-box {
background: hsl(0, 0%, 9%);
}
[data-theme="dark"] .ik-hadith-card-actions {
background: #1e293b !important;
}
[data-theme="dark"] .ik-list-item:hover {
background: #0f172a;
}
[data-theme="dark"] .ik-list-content h3 {
color: #f8fafc;
}
[data-theme="dark"] .ik-list-number {
background: #334155;
color: var(--ik-accent);
}
[data-theme="dark"] .ik-hadith-detail-card {
background: #0f172a;
border-color: #334155;
}
[data-theme="dark"] .ik-hadith-detail-header {
background: #1e293b;
border-color: #334155;
}
[data-theme="dark"] .ik-hadith-arabic {
color: #f8fafc;
}
[data-theme="dark"] .ik-hadith-malayalam,
[data-theme="dark"] .ik-hadith-primary-info,
[data-theme="dark"] .ik-hadith-more-text {
color: #cbd5e1;
}
[data-theme="dark"] .ik-hadith-main-title,
[data-theme="dark"] .ik-hadith-detail-title,
[data-theme="dark"] .ik-hadith-more-trigger,
[data-theme="dark"] .ik-hadith-more-section h5 {
color: #f8fafc !important;
}
[data-theme="dark"] .ik-breadcrumb-current {
color: #f8fafc;
}
@keyframes ik-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Page Loader */
#ik-hadith-loader {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(255, 255, 255, 0.92);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.ik-loader-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #94a3b8;
animation: ik-dot-bounce 1.2s ease-in-out infinite;
}
.ik-loader-dot:nth-child(1) {
animation-delay: 0s;
background: #cbd034;
}
.ik-loader-dot:nth-child(2) {
animation-delay: 0.2s;
background: #94a3b8;
}
.ik-loader-dot:nth-child(3) {
animation-delay: 0.4s;
background: #cbd5e1;
}
@keyframes ik-dot-bounce {
0%,
80%,
100% {
transform: translateY(0);
opacity: 0.6;
}
40% {
transform: translateY(-12px);
opacity: 1;
}
}
/* Hadith Search Modal item styles */
.ik-hadith-search-item {
display: block;
padding: 18px;
border-radius: 14px;
border: 1px solid #e2e8f0;
margin-bottom: 14px;
text-decoration: none;
color: inherit;
background: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ik-hadith-search-item:hover {
border-color: var(--ik-accent, #cbd034);
background: #ffffff;
transform: translateY(-3px);
box-shadow: 0 10px 20px -5px rgba(195, 204, 6, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.ik-hadith-search-item h4 {
margin: 0 0 8px 0;
font-size: 17px;
font-weight: 700;
color: #0f172a;
line-height: 1.4;
}
.ik-hadith-search-item .ik-search-meta {
font-size: 13px;
color: #64748b;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #f1f5f9;
}
.ik-hadith-search-item .ik-search-badge {
padding: 3px 8px;
background: #f1f5f9;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ik-hadith-search-item .ik-search-snippet {
font-size: 13.5px;
color: #475569;
line-height: 1.6;
margin: 8px 0 0 0;
font-style: italic;
background: #fafaf9;
padding: 10px 14px;
border-radius: 8px;
border-left: 3px solid var(--ik-accent, #cbd034);
}
/* Dark Theme Support for Modals */
[data-theme="dark"] #ik-hadith-search-modal .ik-modal-container,
[data-theme="dark"] #ik-hadith-detail-modal .ik-modal-container,
[data-theme="dark"] #ik-quran-modal .ik-modal-container {
background: #1e293b !important;
border-color: #334155 !important;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] #ik-hadith-search-modal .ik-modal-container>div:first-child,
[data-theme="dark"] #ik-hadith-detail-modal .ik-modal-container>div:first-child,
[data-theme="dark"] #ik-quran-modal .ik-modal-container>div:first-child {
background: #1e293b !important;
border-bottom-color: #334155 !important;
}
[data-theme="dark"] #ik-quran-modal #ik-qm-arabic,
[data-theme="dark"] #ik-quran-modal #ik-qm-malayalam {
color: #f8fafc !important;
}
[data-theme="dark"] #ik-quran-modal .ik-modal-container>div:last-child {
background: #1e293b !important;
border-top-color: #334155 !important;
}
[data-theme="dark"] #ik-quran-modal-close {
color: #cbd5e1 !important;
}
[data-theme="dark"] #ik-hadith-search-modal h3 {
color: #f8fafc !important;
}
[data-theme="dark"] #ik-hadith-search-modal #ik-hadith-search-close {
background: #334155 !important;
color: #cbd5e1 !important;
}
[data-theme="dark"] #ik-hadith-search-modal input {
background: #0f172a !important;
border-color: #334155 !important;
color: #f8fafc !important;
}
[data-theme="dark"] #ik-hadith-search-modal input:focus {
border-color: var(--ik-accent, #cbd034) !important;
box-shadow: 0 0 0 4px rgba(195, 204, 6, 0.25) !important;
}
[data-theme="dark"] #ik-hadith-search-modal #ik-hadith-search-results {
background: #0f172a !important;
}
[data-theme="dark"] .ik-hadith-search-item {
background: #1e293b !important;
border-color: #334155 !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .ik-hadith-search-item:hover {
border-color: var(--ik-accent, #cbd034) !important;
background: #1e293b !important;
box-shadow: 0 10px 20px -5px rgba(195, 204, 6, 0.2) !important;
}
[data-theme="dark"] .ik-hadith-search-item h4 {
color: #f8fafc !important;
}
[data-theme="dark"] .ik-hadith-search-item .ik-search-meta {
color: #94a3b8 !important;
border-top-color: #334155 !important;
}
[data-theme="dark"] .ik-hadith-search-item .ik-search-badge {
background: #334155 !important;
color: #cbd5e1 !important;
}
[data-theme="dark"] .ik-hadith-search-item .ik-search-snippet {
color: #cbd5e1 !important;
background: #0f172a !important;
border-left-color: var(--ik-accent, #cbd034) !important;
}
/* --- DUA STYLES --- */
.ik-dua-widget-wrapper {
max-width: 900px;
margin: 0 auto;
padding: 20px;
padding-top: 0px;
font-family: 'Manjari', sans-serif !important;
color: var(--ik-text, #1e293b);
}
/* ── Supplications Breadcrumbs ── */
.ik-dua-bc-wrap {
position: relative;
margin-bottom: 24px;
}
.ik-dua-breadcrumbs {
display: flex;
align-items: center;
flex-wrap: nowrap;
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 8px;
margin: 0;
padding-top: 0;
padding-bottom: 12px;
font-size: 14px;
color: #6b7280;
width: 100%;
}
.ik-dua-breadcrumbs::-webkit-scrollbar {
display: none;
}
.ik-dua-breadcrumbs a,
.ik-dua-breadcrumb-link {
color: #6b7280 !important;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color 0.2s;
}
.ik-dua-breadcrumb-link svg {
margin-top: -5px;
}
.ik-dua-breadcrumbs a:hover,
.ik-dua-breadcrumb-link:hover {
color: #111827 !important;
}
.ik-dua-breadcrumbs-separator {
color: #d1d5db;
font-size: 10px;
display: inline-block;
}
.ik-dua-breadcrumbs-current {
color: #111827;
font-weight: 600;
display: inline-block;
}
[data-theme="dark"] .ik-dua-breadcrumbs-current {
color: #f8fafc;
}
/* ── Header Section ── */
.ik-dua-header {
text-align: center;
margin-bottom: 40px;
}
.ik-dua-title-main {
font-size: 36px;
font-weight: 700;
color: var(--ik-text, #1e293b);
margin: 0 0 10px 0;
position: relative;
display: inline-block;
padding-bottom: 12px;
}
/* Bottom accent line matching brand style */
.ik-dua-title-main::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background-color: var(--ik-accent, #cbd034);
border-radius: 2px;
}
.ik-dua-subtitle {
font-size: 16px;
color: #64748b;
margin: 15px 0 0 0;
}
/* ── Introduction Dropdown ── */
.ik-dua-intro-container {
margin-bottom: 30px;
background: #fbfbf6;
border-radius: 12px;
border: 1px solid #e6e8b3;
overflow: hidden;
}
.ik-dua-intro-trigger {
display: flex;
align-items: center;
justify-content: space-between;
background-color: transparent;
border: none;
border-radius: 0;
padding: 18px 20px;
cursor: pointer;
transition: all 0.2s ease;
}
.ik-dua-intro-trigger:hover {
background-color: transparent;
}
.ik-dua-intro-label-wrapper {
display: flex;
align-items: center;
gap: 12px;
font-weight: 700;
color: #1e293b;
}
.ik-dua-intro-content {
display: none;
background-color: transparent;
border: none;
padding: 0 20px 20px 20px;
font-size: 15px;
color: #475569;
line-height: 1.8;
box-shadow: none;
}
.ik-dua-intro-container.is-open .ik-dua-intro-trigger {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.ik-dua-intro-container.is-open .ik-dua-intro-content {
display: block;
}
.ik-dua-intro-arrow {
transition: transform 0.2s ease;
color: #94a3b8;
}
.ik-dua-intro-container.is-open .ik-dua-intro-arrow {
transform: rotate(180deg);
}
/* ── Category Grid ── */
.ik-dua-category-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 20px;
}
.ik-dua-category-card {
background: #ffffff;
/* border: 1px solid #e2e8f0; */
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
cursor: pointer;
text-decoration: none;
color: inherit;
}
.ik-dua-category-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.1), 0 8px 8px -5px rgba(0, 0, 0, 0.04);
}
.ik-dua-category-banner {
height: 110px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Islamic Dome Grid Backdrop Pattern */
.ik-dua-category-banner::before {
content: '';
position: absolute;
inset: 0;
background-image: url('data:image/svg+xml;utf8,');
background-size: 50px 50px;
background-repeat: repeat;
}
/* Centered Dome Outline Icon */
.ik-dua-category-icon {
color: rgba(255, 255, 255, 0.85);
z-index: 1;
opacity: 0.35;
}
.ik-dua-category-info {
padding: 10px 20px;
text-align: center;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
min-height: 15px;
box-sizing: border-box;
}
.ik-dua-category-title {
font-size: 14px !important;
font-weight: 800 !important;
color: #1e293b;
margin: 0;
font-family: 'Manjari', sans-serif !important;
line-height: 1.5;
}
/* ── Dua Detail List ── */
.ik-dua-category-header-row {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
}
.ik-dua-category-back-btn {
display: inline-flex;
align-items: center;
gap: 8px;
color: #64748b;
text-decoration: none;
font-size: 14px;
font-weight: 600;
margin-bottom: 20px;
transition: color 0.2s ease;
cursor: pointer;
align-self: flex-start;
}
.ik-dua-category-back-btn:hover {
color: #1e293b;
}
.ik-dua-active-category-title {
font-size: 32px;
font-weight: 700;
color: #000000ff;
margin: 0 0 8px 0;
text-align: center;
font-family: 'Manjari', sans-serif !important;
}
.ik-dua-title-line {
width: 60px;
height: 4px;
background-color: var(--ik-accent, #cbd034);
margin: 0 auto 15px auto;
border-radius: 2px;
}
.ik-dua-active-subtitle {
color: #64748b;
font-size: 16px;
margin: 0 0 15px 0;
text-align: center;
}
.ik-dua-count-meta {
font-size: 14px;
color: #64748b;
font-weight: 500;
}
/* ── Supplication Cards ── */
.ik-dua-list-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.ik-dua-card {
background: #ffffff;
border-radius: 12px;
border: 1px solid #e6e8b3;
overflow: hidden;
box-shadow: none;
transition: all 0.3s ease;
}
.ik-dua-card:hover {
/* background-color: #fbfbf6; */
/* transform: translateY(-2px); */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.ik-dua-card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 30px 10px 30px;
background: transparent;
border-bottom: none;
margin-bottom: 0;
}
.ik-dua-card-title {
font-size: 18px !important;
font-weight: 700;
color: #1e293b;
margin: 0;
line-height: 1.4;
font-family: 'Manjari', sans-serif !important;
}
.ik-dua-play-btn {
background: transparent;
border: none;
display: flex;
align-items: center;
justify-content: center;
color: var(--ik-accent, #cbd034);
cursor: pointer;
transition: all 0.2s ease;
padding: 0;
flex-shrink: 0;
}
.ik-dua-play-btn:hover {
color: #1e293b;
}
.ik-dua-play-btn.playing {
color: var(--ik-accent, #cbd034);
}
.ik-dua-card-body {
padding: 10px 30px 5px 30px;
}
.ik-dua-card-actions {
display: flex;
align-items: center;
gap: 4px;
position: relative;
}
.ik-dua-action-btn {
background: transparent !important;
border: none !important;
width: 32px !important;
height: 32px !important;
border-radius: 8px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: hsl(0 0% 45%) !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
padding: 0 !important;
box-shadow: none !important;
outline: none !important;
opacity: 1 !important;
}
.ik-dua-action-btn:hover {
color: rgb(203, 208, 52) !important;
background-color: transparent !important;
}
.ik-dua-action-btn:focus,
.ik-dua-action-btn:focus-visible {
color: hsl(0 0% 45%) !important;
background-color: transparent !important;
box-shadow: none !important;
outline: none !important;
}
.ik-dua-card-arabic {
font-family: 'Scheherazade New', 'Amiri', serif;
font-size: 26px;
line-height: 2.2;
text-align: right;
direction: rtl;
color: #0f172a;
margin: 0 0 10px 0;
word-wrap: break-word;
}
.ik-dua-card-translation-ml {
font-family: 'Manjari', sans-serif !important;
font-size: 16px;
color: #334155;
line-height: 1.8;
margin-bottom: 25px;
}
.ik-dua-card-translation-en {
font-family: 'Manjari', sans-serif !important;
font-size: 14.5px;
color: #475569;
line-height: 1.7;
font-style: italic;
border-left: 3px solid #cbd5e1;
padding-left: 14px;
margin-bottom: 25px;
}
.ik-dua-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #f1f5f9;
padding-top: 5px;
margin-top: 15px;
margin-left: -30px;
margin-right: -30px;
padding-left: 30px;
padding-right: 30px;
}
.ik-dua-card-reference {
font-size: 14px;
color: #64748b;
font-weight: 500;
}
/* Bookmark Button color states matching Hadith */
.ik-dua-action-btn.js-ik-bookmark-dua.active,
.ik-dua-action-btn.js-ik-read-dua.active,
.ik-dua-action-btn.js-ik-bookmark-dua.active:focus,
.ik-dua-action-btn.js-ik-read-dua.active:focus,
.ik-dua-action-btn.js-ik-bookmark-dua.active:focus-visible,
.ik-dua-action-btn.js-ik-read-dua.active:focus-visible {
color: rgb(203, 208, 52) !important;
background-color: transparent !important;
}
.ik-dua-action-btn.js-ik-bookmark-dua.active svg {
fill: currentColor !important;
}
/* ── Dark Theme overrides ── */
[data-theme="dark"] .ik-dua-title-main {
color: #f8fafc;
}
[data-theme="dark"] .ik-dua-subtitle {
color: #94a3b8;
}
[data-theme="dark"] .ik-dua-intro-container {
background: #1e293b;
border-color: #334155;
}
[data-theme="dark"] .ik-dua-intro-label-wrapper {
color: #f8fafc;
}
[data-theme="dark"] .ik-dua-intro-content {
color: #cbd5e1;
}
[data-theme="dark"] .ik-dua-category-card {
background: #1e293b;
border-color: #334155;
}
[data-theme="dark"] .ik-dua-category-info {
background: #1e293b;
}
[data-theme="dark"] .ik-dua-category-title {
color: #f8fafc;
}
[data-theme="dark"] .ik-dua-category-back-btn {
color: #94a3b8;
}
[data-theme="dark"] .ik-dua-category-back-btn:hover {
color: #f8fafc;
}
[data-theme="dark"] .ik-dua-card {
background: #0f172a;
border-color: #334155;
}
[data-theme="dark"] .ik-dua-card:hover {
background-color: #1e293b;
}
[data-theme="dark"] .ik-dua-card-title {
color: #f8fafc;
}
[data-theme="dark"] .ik-dua-card-header {
background: transparent;
border-bottom: none;
}
[data-theme="dark"] .ik-dua-action-btn {
color: #94a3b8 !important;
background: transparent !important;
}
[data-theme="dark"] .ik-dua-action-btn:hover {
color: rgb(203, 208, 52) !important;
background-color: transparent !important;
}
[data-theme="dark"] .ik-dua-action-btn:focus,
[data-theme="dark"] .ik-dua-action-btn:focus-visible {
color: #94a3b8 !important;
background-color: transparent !important;
}
[data-theme="dark"] .ik-dua-action-btn.js-ik-bookmark-dua.active,
[data-theme="dark"] .ik-dua-action-btn.js-ik-read-dua.active {
color: rgb(203, 208, 52) !important;
}
[data-theme="dark"] .ik-dua-action-btn.js-ik-bookmark-dua.active:focus,
[data-theme="dark"] .ik-dua-action-btn.js-ik-read-dua.active:focus,
[data-theme="dark"] .ik-dua-action-btn.js-ik-bookmark-dua.active:focus-visible,
[data-theme="dark"] .ik-dua-action-btn.js-ik-read-dua.active:focus-visible {
color: rgb(203, 208, 52) !important;
background-color: transparent !important;
}
[data-theme="dark"] .ik-dua-card-arabic {
color: #f8fafc;
}
[data-theme="dark"] .ik-dua-card-translation-ml {
color: #cbd5e1;
}
[data-theme="dark"] .ik-dua-card-translation-en {
color: #94a3b8;
border-color: #475569;
}
[data-theme="dark"] .ik-dua-card-reference {
color: #64748b;
}
/* ── Responsive Styling ── */
@media (max-width: 768px) {
.ik-dua-category-grid {
/* grid-template-columns: 1fr; */
gap: 16px;
}
.ik-dua-title-main {
font-size: 28px;
}
.ik-dua-active-category-title {
font-size: 24px;
}
.ik-dua-card-body {
padding: 0px 10px 10px 10px;
padding-bottom: 5px;
}
.ik-dua-card-header {
padding: 20px 10px 0px 10px;
}
.ik-dua-card-footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
.ik-dua-card-arabic {
font-size: 24px;
line-height: 2.0;
}
}
[data-theme="dark"] .elementor-30 .elementor-element.elementor-element-3da2152 .elementor-social-icon i {
color: #ffffff;
}