/*
 * Marketplace application design system
 * A visual layer only: semantic data, URLs, forms and server behaviour stay intact.
 */
:root {
    --app-ink: #ffffff;
    --app-muted: #94a3b8;
    --app-line: #2e2c40;
    --app-bg: #252534;
    --app-surface: #1e1d2c;
    --app-surface-solid: #1e1d2c;
    --app-primary: var(--primary-color, #1073c0);
    --app-primary-strong: #0d63a5;
    --app-primary-soft: rgba(16, 115, 192, 0.15);
    --app-blue: #38bdf8;
    --app-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --app-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.3);
    --app-shadow-md: 0 20px 45px rgba(0, 0, 0, 0.4);
    --app-radius-xs: 12px;
    --app-radius-sm: 18px;
    --app-radius: 24px;
    --app-radius-lg: 32px;
    --app-ease: cubic-bezier(.2, .8, .2, 1);
}

html { background: var(--app-bg); scroll-behavior: smooth; }
body.marketplace-app {
    background:
        radial-gradient(900px 560px at 100% -50px, rgba(92, 195, 179, .13), transparent 64%),
        radial-gradient(700px 520px at -8% 42%, rgba(77, 137, 246, .07), transparent 65%), var(--app-bg);
    color: var(--app-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.marketplace-app::before {
    content: ''; position: fixed; z-index: -1; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(20, 39, 46, .018) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 39, 46, .018) 1px, transparent 1px);
    background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 75%);
}
.container { max-width: 1360px; padding-inline: clamp(16px, 3vw, 42px); }
.app-main { min-height: calc(100vh - 280px); padding-block: 28px 60px; }

/* Floating app bar */
.main-header.marketplace-topbar {
    position: sticky; top: 0; z-index: 1000; margin: 10px auto 0; width: min(calc(100% - 24px), 1380px);
    background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.78); border-radius: 20px;
    box-shadow: 0 8px 28px rgba(18, 33, 39, .09), inset 0 1px rgba(255,255,255,.85); backdrop-filter: blur(22px) saturate(1.35);
}
.main-header .header-container { min-height: 68px; height: 68px; padding-inline: 18px; }
.marketplace-brand .logo { gap: 10px; }
.logo-icon-badge { width: 40px; height: 40px; border-radius: 14px; background: conic-gradient(from 210deg, #0b655b, #22ad97, #8ce2c9, #0b655b); box-shadow: 0 7px 16px rgba(9, 124, 106, .22); }
.logo-title { font-size: 1.04rem; letter-spacing: -.4px; color: var(--app-ink); }
.logo-subtitle { display: none; }
.nav-list { gap: 2px; }
.nav-list > li > a:not(.btn) { padding: 9px 12px; color: var(--app-muted); border-radius: 11px; font-size: .85rem; font-weight: 750; }
.nav-list > li > a:not(.btn):hover { color: var(--app-primary-strong); background: var(--app-primary-soft); }
.nav-list .btn { min-height: 38px; padding-inline: 14px; font-size: .83rem; }
.marketplace-quick-actions a { width: 38px; height: 38px; background: rgba(242,245,246,.9); border: 1px solid transparent; border-radius: 13px; color: var(--app-ink); }
.marketplace-quick-actions a:hover { background: #fff; border-color: var(--app-line); box-shadow: var(--app-shadow-xs); transform: translateY(-1px); }
.header-shortcuts .badge { border: 2px solid #fff; background: #e8505b; }
.nav-user-profile { border-radius: 12px !important; background: #f3f6f6; }

/* System components */
a { transition: color .2s var(--app-ease), background-color .2s var(--app-ease), transform .2s var(--app-ease), box-shadow .2s var(--app-ease); }
.btn {
    min-height: 44px; padding: 10px 18px; border-radius: 14px; font-weight: 800; letter-spacing: -.15px;
    transition: transform .18s var(--app-ease), box-shadow .18s var(--app-ease), background .18s var(--app-ease);
}
.btn:active { transform: scale(.97); }
.btn-primary, .btn-success { background: linear-gradient(135deg, var(--app-primary), #0a685a); box-shadow: 0 8px 17px rgba(8, 113, 96, .20); }
.btn-primary:hover, .btn-success:hover { background: linear-gradient(135deg, #149783, #07584d); box-shadow: 0 11px 23px rgba(8, 113, 96, .26); }
.btn-outline { background: rgba(255,255,255,.8); border-color: var(--app-line); color: var(--app-ink); }
.btn-outline:hover { background: #fff; border-color: rgba(8, 113, 96, .28); box-shadow: var(--app-shadow-xs); }
.btn-danger { box-shadow: 0 8px 17px rgba(199, 48, 63, .16); }
.form-group { margin-bottom: 20px; }
.form-group label { margin-bottom: 8px; color: #39454b; font-size: .85rem; font-weight: 800; }
.form-control {
    height: 50px !important; border: 1px solid #d6dcdf; border-radius: 13px; background: rgba(255,255,255,.96); color: var(--app-ink);
    box-shadow: inset 0 1px 1px rgba(18,35,41,.025); transition: border-color .2s, box-shadow .2s, background .2s;
}
textarea.form-control { min-height: 120px !important; height: auto !important; }
.form-control:hover { border-color: #aeb9be; }
.form-control:focus { border-color: var(--app-primary); background: #fff; box-shadow: 0 0 0 4px rgba(27, 157, 136, .14); }
.alert { border: 0; border-radius: var(--app-radius-sm); padding: 14px 16px; box-shadow: var(--app-shadow-xs); }
.alert-success { background: #e8f8f2; color: #12694f; }.alert-danger { background: #fff0f1; color: #b12d42; }.alert-warning { background: #fff7e6; color: #966010; }

/* Home: the browse experience */
.marketplace-hero {
    isolation: isolate; margin: -28px auto 0; padding-block: clamp(54px, 8vw, 94px) clamp(42px, 6vw, 70px) !important;
    background: linear-gradient(122deg, #102d34 0%, #144c4b 43%, #11826f 100%) !important; border: 0 !important;
}
.marketplace-hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 12% 8%, rgba(222,255,247,.24), transparent 22%), radial-gradient(circle at 92% 90%, rgba(178,255,237,.2), transparent 28%); }
.marketplace-hero::after { content: ''; position: absolute; z-index: -1; width: 660px; height: 660px; left: -235px; bottom: -440px; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.045), 0 0 0 140px rgba(255,255,255,.035); }
.marketplace-hero h1 { font-size: clamp(2rem, 4vw, 3.4rem) !important; line-height: 1.18; letter-spacing: -1.6px; text-shadow: 0 2px 20px rgba(0,0,0,.13); }
.marketplace-hero p { max-width: 610px; margin-inline: auto !important; font-size: 1rem !important; line-height: 1.8; }
.category-rail-section { position: relative; z-index: 3; margin: -30px auto 0; padding-block: 0 28px !important; background: transparent !important; border: 0 !important; }
.category-rail-section .container { padding: 15px !important; gap: 18px !important; background: rgba(255,255,255,.76); border: 1px solid rgba(255,255,255,.9); border-radius: var(--app-radius); box-shadow: var(--app-shadow-md); backdrop-filter: blur(18px); }
.category-rail-section a { min-width: 78px !important; }.category-rail-section a > div { width: 58px !important; height: 58px !important; border-radius: 18px !important; box-shadow: none !important; }
.category-rail-section a:hover > div { transform: translateY(-4px); box-shadow: 0 9px 20px rgba(20,40,45,.13) !important; }
.marketplace-feed { padding-block: 18px 58px !important; }
.marketplace-feed > .container > div:first-child {
    padding: 18px 20px !important; border: 1px solid rgba(255,255,255,.85) !important; border-radius: var(--app-radius) !important;
    box-shadow: var(--app-shadow-sm); background: rgba(255,255,255,.72) !important; backdrop-filter: blur(14px);
}
#filter_drawer_panel { border: 0 !important; border-radius: var(--app-radius) !important; box-shadow: var(--app-shadow-sm) !important; background: rgba(255,255,255,.92) !important; }
.marketplace-card-grid { grid-template-columns: 1fr !important; gap: 12px !important; width: 100% !important; }

/* Ala Kam Compact Listing Card Architecture */
.ala-kam-listing-card,
.ad-card-enhanced, 
.marketplace-listing-card, 
.ad-card {
    position: relative; overflow: hidden;
    display: flex !important; flex-direction: row !important; align-items: center !important;
    width: 100% !important; min-height: 105px !important; padding: 10px 14px !important; gap: 14px !important;
    background: #ffffff !important; border: 1px solid rgba(226, 232, 240, 0.9) !important; border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important; cursor: pointer;
    transition: transform .2s var(--app-ease), box-shadow .2s var(--app-ease), border-color .2s var(--app-ease);
}
.ala-kam-listing-card:focus-visible, .ad-card-enhanced:focus-visible, .ad-card:focus-visible, .user-ad-card:focus-visible {
    outline: 3px solid var(--app-primary); outline-offset: 2px;
}
.ala-kam-listing-card::after, .ad-card-enhanced::after { content: ''; position: absolute; pointer-events: none; inset: 0; border: 1px solid rgba(29,141,123,.0); border-radius: inherit; transition: border-color .22s; }
.ala-kam-listing-card:hover, .ad-card-enhanced:hover, .ad-card:hover, .user-ad-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(18,33,39,0.07) !important; border-color: #cbd5e1 !important; }

/* 85x85 Compact Thumbnail Container */
.ala-kam-listing-media,
.marketplace-listing-card > div:first-child,
.ad-card-enhanced > div:first-child,
.ad-card > div:first-child { 
    width: 85px !important;
    min-width: 85px !important;
    height: 85px !important; 
    margin: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    position: relative !important;
} 
.ala-kam-listing-media img,
.marketplace-listing-card img, 
.ad-card-enhanced img, 
.ad-card img, 
.user-ad-card-img img { 
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 10px !important; 
    transition: transform .4s var(--app-ease); 
}
.ala-kam-listing-card:hover img, .ad-card-enhanced:hover img { transform: scale(1.06); }

/* Details & Typography */
.ala-kam-listing-content,
.marketplace-listing-card > div:last-child {
    padding: 0 !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
}
.ala-kam-listing-title,
.marketplace-listing-card h3 { 
    font-size: 0.95rem !important; font-weight: 800 !important; line-height: 1.35 !important; margin: 0 !important; color: #1e293b !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
.ala-kam-listing-description { font-size: 0.8rem !important; color: #64748b !important; margin: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.ala-kam-listing-price { font-size: 1.05rem !important; font-weight: 800 !important; color: var(--app-primary, #0d806f) !important; margin: 0 !important; }
.ala-kam-listing-meta { border: 0 !important; padding: 0 !important; margin-top: 2px !important; display: flex !important; gap: 12px !important; font-size: 0.76rem !important; color: #64748b !important; align-items: center !important; }
.ala-kam-listing-seller { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; color: #64748b; }
.ala-kam-seller-avatar { width: 18px; height: 18px; border-radius: 50%; background: #e2e8f0; color: #475569; display: inline-flex; align-items: center; justify-content: center; font-size: 0.6rem; }
.ala-kam-listing-actions { display: flex; gap: 6px; margin-inline-start: auto; }
.ala-kam-card-action { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #e2e8f0; background: #f8fafc; color: #64748b; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; cursor: pointer; transition: all .2s; }
.ala-kam-card-action:hover { background: #fff; border-color: var(--app-primary); color: var(--app-primary); }
.marketplace-listing-card:hover img, 
.ad-card-enhanced:hover img,
.ad-card:hover img { 
    transform: scale(1.05); 
    border-radius: 16px !important;
}
.marketplace-listing-card > div:first-child span { top: 12px !important; right: 12px !important; background: rgba(17,29,32,.62) !important; border: 1px solid rgba(255,255,255,.24); backdrop-filter: blur(12px); border-radius: 10px !important; }
.marketplace-listing-card h3 { font-size: 1rem !important; letter-spacing: -.25px; }.marketplace-listing-card h3 a:hover { color: var(--app-primary) !important; }

/* Detail, favourites, account, content and form surfaces */
.ad-detail-layout { gap: 24px; }.ad-detail-content, .user-ad-card, .notification-card, .profile-card, .settings-card, .auth-container {
    background: rgba(255,255,255,.92) !important; border: 1px solid rgba(255,255,255,.9) !important; border-radius: var(--app-radius) !important; box-shadow: var(--app-shadow-sm) !important;
}
.ad-detail-content { overflow: hidden; }.ad-gallery-mobile { background: #edf0f1; border-radius: var(--app-radius) !important; overflow: hidden !important; }.ad-gallery-mobile img { border-radius: 16px !important; object-fit: contain !important; }.ad-detail-price { color: var(--app-primary) !important; font-size: clamp(1.65rem, 3vw, 2.3rem) !important; letter-spacing: -1px; }
.sticky-contact-footer { gap: 10px; background: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.9); border-radius: var(--app-radius); box-shadow: var(--app-shadow-sm); backdrop-filter: blur(12px); }
.user-ad-card { border: 0 !important; padding: 18px; }.user-ad-card-img { border-radius: 16px; border: 0; background: #f1f5f9; }.notification-card { border: 0 !important; }
.auth-container { max-width: 510px; padding: clamp(26px, 5vw, 46px); }.auth-header { margin-bottom: 30px; }.auth-header h2 { font-size: 2rem; letter-spacing: -1px; color: var(--app-ink); }.auth-header p { color: var(--app-muted); }
.admin-login-app { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 18% 15%, rgba(64,191,166,.2), transparent 28%), radial-gradient(circle at 88% 84%, rgba(60,115,240,.12), transparent 30%), #edf3f2; }.premium-admin-login { width: min(100%, 460px); margin: 0; }.premium-admin-login .btn-primary { width: 100%; min-height: 50px; border: 0; border-radius: 13px; color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.empty-state { padding: clamp(42px, 7vw, 76px) 22px; border: 1px dashed #c8d3d6; border-radius: var(--app-radius-lg); background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(238,247,245,.7)); box-shadow: none; }
.empty-state-icon { width: 76px; height: 76px; display: grid; place-items: center; margin-inline: auto; border-radius: 24px; background: var(--app-primary-soft); color: var(--app-primary) !important; font-size: 2rem; opacity: 1; }.empty-state-title { color: var(--app-ink); font-size: 1.3rem; }.empty-state-desc { color: var(--app-muted); }
.premium-error-page > div { border: 1px solid rgba(255,255,255,.9) !important; border-radius: var(--app-radius-lg) !important; background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(245,250,250,.88)) !important; box-shadow: var(--app-shadow-md) !important; }
.premium-error-page > div > div:first-child { border-radius: 27px !important; box-shadow: 0 10px 25px rgba(210, 58, 69, .13); }

/* Chat becomes a focused app workspace */
body.chat-page .main-content { padding-block: 14px; }.chat-main-container { margin-top: 0 !important; }.chat-wrapper { border: 1px solid rgba(255,255,255,.85) !important; border-radius: var(--app-radius) !important; box-shadow: var(--app-shadow-md) !important; }.chat-sidebar { background: #fbfcfc; }.chat-header { background: rgba(255,255,255,.84) !important; backdrop-filter: blur(16px); }.chat-messages-container { background: #f5f7f8; background-image: radial-gradient(rgba(13, 89, 78, .08) 1px, transparent 1px); background-size: 20px 20px; }.conversation-item { border-radius: 15px !important; margin-inline: 7px; }.conversation-item:hover, .conversation-item.active { background: var(--app-primary-soft) !important; }.message-bubble { box-shadow: 0 2px 4px rgba(20,31,35,.05); }.chat-input-footer { background: rgba(255,255,255,.9) !important; backdrop-filter: blur(14px); }

/* Footer */
.marketplace-footer { background: #142c35; border: 0; padding-top: 58px; position: relative; overflow: hidden; }.marketplace-footer::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(142,247,218,.7), transparent); }.footer-section h3, .footer-section h4 { letter-spacing: -.3px; }.social-links a { border-radius: 13px; }.footer-bottom { margin-top: 28px; }

/* Location Badge Container Design System */
.location-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: var(--app-primary, #0d806f);
    font-size: 0.72rem;
    margin-inline-end: 5px;
    vertical-align: middle;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: background-color 0.2s var(--app-ease), border-color 0.2s var(--app-ease), transform 0.2s var(--app-ease);
}
.ad-card-enhanced:hover .location-badge-icon,
.marketplace-listing-card:hover .location-badge-icon,
.location-badge-icon:hover {
    background: #ffffff;
    border-color: var(--app-primary, #0d806f);
    transform: scale(1.08);
}

/* Motion and loading */
.page-ready .app-main > * { animation: app-enter .5s var(--app-ease) both; }.page-ready .app-main > *:nth-child(2) { animation-delay: .055s; }.page-ready .app-main > *:nth-child(3) { animation-delay: .1s; }
.is-loading { position: relative; pointer-events: none; color: transparent !important; }.is-loading::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: app-spin .65s linear infinite; }.btn-outline.is-loading::after { border-color: rgba(12,35,40,.2); border-top-color: var(--app-primary); } @keyframes app-spin { to { transform: rotate(360deg); } }
@keyframes app-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* Mobile native navigation */
@media (max-width: 900px) { .main-header.marketplace-topbar { margin-top: 6px; width: calc(100% - 12px); border-radius: 17px; }.main-header .header-container { height: 60px; min-height: 60px; }.marketplace-navigation { display: none; }.app-main { padding-top: 18px; }.marketplace-quick-actions { gap: 5px; } }
@media (max-width: 767px) {
    body.marketplace-app { background-size: auto, auto, auto; }.main-header.marketplace-topbar { position: sticky; }.logo-icon-badge { width: 36px; height: 36px; border-radius: 12px; }.logo-title { font-size: .94rem; }.marketplace-quick-actions a { width: 34px; height: 34px; border-radius: 11px; font-size: 1rem; }
    .app-main { padding-bottom: 88px; }.marketplace-hero { margin-top: -18px; padding-block: 48px 54px !important; }.marketplace-hero h1 { font-size: 2rem !important; letter-spacing: -1px; }.category-rail-section { margin-top: -28px; }.category-rail-section .container { border-radius: 20px; padding: 12px !important; gap: 13px !important; }.category-rail-section a { min-width: 65px !important; }.category-rail-section a > div { width: 50px !important; height: 50px !important; border-radius: 16px !important; }
    .marketplace-feed { padding-top: 10px !important; }.marketplace-feed > .container > div:first-child { padding: 15px !important; border-radius: 19px !important; }
    .marketplace-card-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
    .marketplace-listing-card, .ad-card-enhanced, .ad-card, .ala-kam-listing-card { border-radius: 14px !important; flex-direction: row !important; min-height: 100px !important; padding: 8px 12px !important; gap: 10px !important; }
    .marketplace-listing-card > div:first-child, .ad-card-enhanced > div:first-child, .ad-card > div:first-child, .ala-kam-listing-media { width: 85px !important; min-width: 85px !important; height: 85px !important; margin: 0 !important; border-radius: 12px !important; }
    .ala-kam-listing-title { font-size: .88rem !important; }
    .ala-kam-listing-price { font-size: .98rem !important; }
    .auth-container { border-radius: 23px !important; }.ad-detail-layout { gap: 14px; }.ad-detail-content { border-radius: 21px !important; }.sticky-contact-footer { border-radius: 20px 20px 0 0; }.chat-wrapper { border-radius: 0 !important; box-shadow: none !important; }
    .mobile-bottom-nav { height: 72px; bottom: 8px; left: 8px; right: 8px; width: auto; border: 1px solid rgba(255,255,255,.8); border-radius: 22px; box-shadow: 0 10px 30px rgba(20,31,35,.18); background: rgba(255,255,255,.9); backdrop-filter: blur(18px); }.mobile-bottom-nav .nav-item { color: #657179; }.mobile-bottom-nav .nav-item.active { color: var(--app-primary); }.mobile-bottom-nav .add-ad-nav-item { width: 52px; height: 52px; flex-basis: 52px; transform: translateY(-13px); border: 4px solid var(--app-bg); border-radius: 17px; background: linear-gradient(135deg, var(--app-primary), #0a685a); }
}

/* Compact Ala Kam listing density: a quick-scanning 85px media row. */
.ala-kam-listing-card { min-height: 100px; padding: 8px 12px; border-radius: 14px !important; }
.ala-kam-listing-card .ala-kam-listing-media { width: 85px !important; min-width: 85px !important; height: 85px !important; margin: 0 !important; border: 1px solid #e4eaec !important; border-radius: 12px !important; background: #f8fafb !important; }
.ala-kam-listing-card .ala-kam-listing-media img { border-radius: 10px !important; object-fit: contain !important; }
.ala-kam-listing-title { margin: 0 0 2px !important; font-size: .95rem !important; line-height: 1.35 !important; }
.ala-kam-listing-description { margin: 0 0 3px; font-size: .78rem; line-height: 1.35; -webkit-line-clamp: 1; }
.ala-kam-listing-price { margin: 0 0 4px !important; font-size: 1.05rem !important; line-height: 1.2; }
.ala-kam-listing-meta { gap: 10px; padding-top: 4px !important; border-top: 0 !important; font-size: .7rem !important; line-height: 1.2; }
.ala-kam-listing-seller { margin-top: 5px; font-size: .7rem; line-height: 1; }.ala-kam-seller-avatar { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #e8f4f1; color: var(--app-primary); font-size: .55rem; }
.ala-kam-listing-actions { top: 13px; right: 13px; gap: 5px; }.ala-kam-card-action { width: 29px; height: 29px; border-radius: 9px; font-size: .75rem; }
.ala-kam-featured-badge { display: none; }.ala-kam-category-badge { display: none; }
@media (max-width: 767px) {
    .ala-kam-listing-card { min-height: 100px; padding: 7px; }.ala-kam-listing-card .ala-kam-listing-media { width: 82px !important; min-width: 82px !important; height: 82px !important; margin-right: 10px !important; border-radius: 11px !important; }.ala-kam-listing-content { min-height: 82px; padding: 0 70px 0 0 !important; }.ala-kam-listing-title { font-size: .84rem !important; }.ala-kam-listing-description { font-size: .68rem; margin-bottom: 3px; }.ala-kam-listing-price { font-size: .92rem !important; margin-bottom: 4px !important; }.ala-kam-listing-meta { gap: 6px; font-size: .63rem !important; }.ala-kam-listing-seller { margin-top: 4px; font-size: .64rem; }.ala-kam-seller-avatar { width: 16px; height: 16px; font-size: .48rem; }.ala-kam-listing-actions { top: 11px; right: 10px; }.ala-kam-card-action { width: 25px; height: 25px; font-size: .66rem; }
}

/* ======================================================================
   Ala-Kam-style advertisement list rows
   This comes last to keep every viewport in the horizontal list pattern.
   ====================================================================== */
.marketplace-card-grid { display: flex !important; flex-direction: column; gap: 16px !important; }
.ala-kam-listing-card {
    direction: ltr; display: flex !important; flex-direction: row !important; align-items: stretch; min-height: 184px;
    padding: 8px; border-radius: 18px !important; overflow: hidden; cursor: pointer;
}
.ala-kam-listing-card .ala-kam-listing-media {
    position: relative; width: 244px !important; min-width: 244px !important; height: 168px !important; margin: 0 !important;
    border-radius: 14px !important; overflow: hidden !important; background: #f3f6f7 !important;
}
.ala-kam-listing-image-link { display: block; width: 100%; height: 100%; }
.ala-kam-listing-card .ala-kam-listing-media img { display: block; width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center; border-radius: 0 !important; }
.ala-kam-listing-card:hover .ala-kam-listing-media img { transform: scale(1.025); }
.ala-kam-category-badge { direction: rtl; top: 10px !important; right: 10px !important; left: auto !important; font-size: .7rem !important; }
.ala-kam-featured-badge { direction: rtl; position: absolute; z-index: 2; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 8px; color: #745000; background: rgba(255,244,201,.94); border: 1px solid rgba(238,188,54,.45); font-size: .72rem; font-weight: 800; }
.ala-kam-listing-content { direction: rtl; text-align: right; min-width: 0; padding: 8px 92px 7px 18px !important; justify-content: flex-start !important; }
.ala-kam-listing-title { margin: 0 0 7px !important; font-size: 1.08rem !important; line-height: 1.45 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.ala-kam-listing-title a { color: #1fb984 !important; }.ala-kam-listing-title a:hover { color: #168d65 !important; }
.ala-kam-listing-description { display: -webkit-box; margin: 0 0 9px; color: #6b757b; font-size: .84rem; line-height: 1.65; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ala-kam-listing-price { margin: 0 0 12px !important; color: var(--app-primary) !important; font-size: 1.18rem !important; font-weight: 850 !important; letter-spacing: -.25px; }
.ala-kam-listing-meta { justify-content: flex-start !important; gap: 16px; padding-top: 9px !important; border-top: 1px solid #edf0f1 !important; }.ala-kam-listing-meta > span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }.ala-kam-listing-meta .location-badge-icon { width: 19px; height: 19px; margin: 0; border: 0; background: transparent; color: var(--app-primary); box-shadow: none; }
.ala-kam-listing-seller { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; color: #7d878c; font-size: .78rem; }.ala-kam-listing-seller i { color: var(--app-primary); }
.ala-kam-listing-actions { direction: rtl; position: absolute; z-index: 4; top: 18px; right: 16px; display: flex; gap: 7px; }.ala-kam-card-action { width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0; border: 1px solid #e1e7e8; border-radius: 10px; background: #fff; color: #66747a; box-shadow: 0 2px 6px rgba(18,34,39,.06); cursor: pointer; transition: color .18s var(--app-ease), background .18s var(--app-ease), transform .18s var(--app-ease); }.ala-kam-card-action:hover { color: var(--app-primary); background: var(--app-primary-soft); border-color: transparent; transform: translateY(-2px); }.ala-kam-favorite-action.is-favorite { color: #d84158; background: #fff1f3; border-color: #ffd7de; }
@media (max-width: 767px) {
    /* تحسين شكل الهيدر واللوجو والشريط العلوي للموبايل */
    .main-header.ala-kam-topbar {
        height: 56px !important;
    }
    .main-header.ala-kam-topbar .header-container {
        height: 56px !important;
    }
    .ala-kam-header-actions {
        gap: 6px !important;
        align-items: center !important;
    }
    .ala-kam-nav-icon-btn, .ala-kam-nav-pill-btn, .ala-kam-user-pill {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-height: 40px !important;
        box-sizing: border-box !important;
        border-radius: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.05rem !important;
        line-height: 1 !important;
    }
    .ala-kam-nav-pill-btn span, .ala-kam-user-pill .ala-kam-user-name, .header-btn-text {
        display: none !important;
    }
    .ala-kam-nav-pill-btn .ala-kam-badge {
        display: flex !important;
        position: absolute !important;
        top: -3px !important;
        right: -3px !important;
        transform: scale(0.85);
    }
    .ala-kam-user-avatar {
        width: 26px !important;
        height: 26px !important;
        margin: 0 !important;
    }

    /* تحسين شريط البحث وصندوق الإضافة للموبايل */
    .ala-kam-search-row {
        gap: 8px !important;
        padding: 0 4px !important;
    }
    .ala-kam-search-input-group {
        height: 50px !important;
        border-radius: 12px !important;
    }
    .ala-kam-search-input {
        font-size: 0.95rem !important;
        padding: 0 14px !important;
    }
    .ala-kam-search-input::placeholder {
        font-size: 0.9rem !important;
    }
    .ala-kam-search-icon-btn {
        width: 50px !important;
        font-size: 1.05rem !important;
    }
    .ala-kam-add-ad-btn {
        height: 50px !important;
        padding: 0 16px !important;
        border-radius: 12px !important;
        font-size: 0.9rem !important;
        gap: 5px !important;
    }

    /* تحسين شريط أقسام الأيقونات للموبايل */
    .ala-kam-category-rail {
        padding: 6px 0 8px !important;
    }
    .ala-kam-cat-item {
        padding: 6px 12px !important;
        min-width: 58px !important;
        border-radius: 10px !important;
        gap: 4px !important;
    }
    .ala-kam-cat-icon {
        font-size: 1.35rem !important;
    }
    .ala-kam-cat-title {
        font-size: 0.73rem !important;
    }

    /* تحسين كروت وتغذية الإعلانات للموبايل لتكون كروت قائمة عمودية مبسطة وأنيقة للغاية */
    .marketplace-card-grid {
        gap: 12px !important;
        padding: 0 4px !important;
    }
    .ala-kam-listing-card {
        min-height: 94px !important;
        padding: 8px !important;
        border-radius: 14px !important;
        gap: 12px !important;
    }
    .ala-kam-listing-card .ala-kam-listing-media {
        width: 78px !important;
        min-width: 78px !important;
        height: 78px !important;
        border-radius: 10px !important;
    }
    .ala-kam-listing-content {
        padding: 2px 0 !important;
        min-height: 78px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }
    .ala-kam-listing-title {
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin-bottom: 2px !important;
    }
    .ala-kam-listing-description {
        font-size: 0.72rem !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
        color: #94a3b8 !important;
        -webkit-line-clamp: 1 !important;
    }
    .ala-kam-listing-price {
        font-size: 0.95rem !important;
        font-weight: 800 !important;
        margin-bottom: 0 !important;
    }
    .ala-kam-listing-meta {
        font-size: 0.65rem !important;
        gap: 8px !important;
        padding-top: 2px !important;
    }
    .ala-kam-listing-actions {
        top: 8px !important;
        right: 8px !important;
    }
    .ala-kam-card-action {
        width: 24px !important;
        height: 24px !important;
        border-radius: 6px !important;
        font-size: 0.65rem !important;
    }
    .ala-kam-listing-seller {
        font-size: 0.65rem !important;
        margin-top: 2px !important;
    }
}

/* Mobile Edge-to-Edge Centered Card Images Override */
@media (max-width: 767px) {
    .marketplace-listing-card > div:first-child,
    .ad-card-enhanced > div:first-child,
    .ad-card > div:first-child,
    .ala-kam-listing-media,
    .ala-kam-listing-card .ala-kam-listing-media,
    .user-ad-card-img {
        overflow: hidden !important;
    }
    
    .marketplace-listing-card img,
    .marketplace-listing-card > div:first-child img,
    .ad-card-enhanced img,
    .ad-card-enhanced > div:first-child img,
    .ad-card img,
    .ad-card > div:first-child img,
    .ala-kam-listing-card img,
    .ala-kam-listing-media img,
    .ala-kam-listing-card .ala-kam-listing-media img,
    .user-ad-card img,
    .user-ad-card-img img,
    .user-ad-card .user-ad-card-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
    }
}

/* ==========================================================================
   ALA KAM DARK MODE DESIGN SYSTEM (MATCHING REFERENCE SCREENSHOTS 1 & 2)
   ========================================================================== */
body.dark-ala-kam-theme {
    background-color: #252534 !important;
    color: #ffffff !important;
    font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* 1. Header Topbar (Color #1073c0) */
.main-header.ala-kam-topbar {
    background-color: #1073c0 !important;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    height: 64px;
    font-family: 'Cairo', sans-serif !important;
}
.main-header.ala-kam-topbar .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
}
.ala-kam-brand-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* Header Actions Left */
.ala-kam-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Cairo', sans-serif !important;
}
.ala-kam-nav-icon-btn {
    height: 38px;
    width: 38px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
    cursor: pointer;
}
.ala-kam-nav-icon-btn:hover {
    background: rgba(0, 0, 0, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.ala-kam-nav-pill-btn {
    height: 38px;
    min-width: 145px;
    padding: 0 14px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
    position: relative;
}
.ala-kam-nav-pill-btn:hover {
    background: rgba(0, 0, 0, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}
.ala-kam-badge {
    background: #ef4444;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    border-radius: 10px;
    padding: 1px 6px;
}

/* User Dropdown Pill */
.ala-kam-user-dropdown {
    position: relative;
}
.ala-kam-user-pill {
    height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, border-color 0.2s;
}
.ala-kam-user-pill:hover {
    background: rgba(0, 0, 0, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}
.ala-kam-user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #0284c7;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    overflow: hidden;
}
.ala-kam-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ala-kam-user-name {
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ala-kam-user-dropdown:hover .ala-kam-dropdown-menu,
.ala-kam-dropdown-menu.show {
    display: block !important;
}
.ala-kam-dropdown-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 6px;
    width: 210px;
    background: #1e1d2c !important;
    border: 1px solid #2e2c40;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.6);
    padding: 8px 0;
    z-index: 1100;
}
.user-menu-info {
    padding: 8px 16px 4px;
    display: flex;
    flex-direction: column;
}
.user-menu-title {
    color: #ffffff;
    font-weight: 800;
    font-size: 0.9rem;
}
.user-menu-subtitle {
    color: #94a3b8;
    font-size: 0.75rem;
}
.ala-kam-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: #cbd5e1;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.ala-kam-dropdown-menu a i {
    width: 18px;
    text-align: center;
    color: #38bdf8;
}
.ala-kam-dropdown-menu a:hover {
    background: #28263b !important;
    color: #ffffff;
}
.dropdown-divider {
    height: 1px;
    background: #2e2c40;
    margin: 6px 0;
}

/* 2. Ala Kam Search Bar & Add Button (Exact Reference Screenshot Match) */
.ala-kam-search-section {
    background: #252534 !important;
    padding: 16px 0;
}
.ala-kam-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    direction: rtl;
}
.ala-kam-search-form {
    flex-grow: 1;
}
.ala-kam-search-input-group {
    display: flex;
    align-items: center;
    background: #1b1a26 !important;
    border: 1px solid #2e2c40;
    border-radius: 16px;
    height: 64px;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.ala-kam-search-input {
    flex-grow: 1;
    height: 100%;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #ffffff !important;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0 22px;
    font-family: inherit;
    text-align: right;
    box-shadow: none !important;
}
.ala-kam-search-input::placeholder {
    color: #94a3b8;
    font-size: 1.05rem;
}
.ala-kam-search-icon-btn {
    width: 70px;
    height: 100%;
    background: #161521 !important;
    border: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.ala-kam-search-icon-btn:hover {
    color: #ffffff;
    background: #201f2e !important;
}

/* Gold Text "+ أضف عرض" Button */
.ala-kam-add-ad-btn {
    height: 64px;
    padding: 0 26px;
    border-radius: 16px;
    background: #1b1a26 !important;
    border: none !important;
    color: #f59e0b !important; /* Gold Amber Text */
    font-weight: 700;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}
.ala-kam-add-ad-btn i {
    color: #f59e0b !important;
    font-size: 0.9rem;
}
.ala-kam-add-ad-btn:hover {
    background: #242232 !important;
    color: #fbbf24 !important;
}

/* 3. Category Icons Rail (Matching Exact Screenshot Design) */
.ala-kam-category-rail {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    padding: 12px 0 16px;
    border-bottom: 0;
}
.ala-kam-category-scroll {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    direction: rtl;
}
.ala-kam-category-scroll::-webkit-scrollbar {
    display: none;
}
.ala-kam-cat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 14px;
    min-width: 68px;
    flex-shrink: 0;
    text-decoration: none;
    gap: 6px;
    background: transparent;
    transition: background 0.2s, transform 0.15s;
}
.ala-kam-cat-item:hover {
    background: rgba(255, 255, 255, 0.05);
}
.ala-kam-cat-item.active {
    background: #31374a !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.ala-kam-cat-icon {
    width: auto;
    height: auto;
    background: transparent !important;
    border: none !important;
    color: #38bdf8 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    line-height: 1;
}
.ala-kam-cat-title {
    font-size: 0.83rem;
    font-weight: 700;
    color: #94a3b8;
    text-align: center;
    white-space: nowrap;
    line-height: 1.2;
}
.ala-kam-cat-item.active .ala-kam-cat-title {
    color: #ffffff !important;
    font-weight: 800;
}

/* Subcategory & Brands Pill Bar */
.ala-kam-subcat-bar {
    background: #252534 !important;
    padding: 10px 0 16px;
    border-bottom: 1px solid #2e2c40;
}
.ala-kam-subcat-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.ala-kam-pill-filter {
    padding: 6px 16px;
    border-radius: 20px;
    background: #1e1d2c !important;
    border: 1px solid #2e2c40;
    color: #94a3b8;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.ala-kam-pill-filter.active, .ala-kam-pill-filter:hover {
    background: #1073c0 !important;
    border-color: #1073c0 !important;
    color: #ffffff;
}

/* 4. Horizontal Listing Feed Cards (Title Color #1fb984, Card #1e1d2c) */
.ala-kam-feed-section {
    background: #252534 !important;
    padding: 20px 0 60px;
}
.ala-kam-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.ala-kam-feed-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
}
.ala-kam-filter-btn {
    display: none !important;
}

.ala-kam-rows-feed {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ala-kam-row-card {
    background: #1e1d2c !important;
    border: 1px solid #2e2c40;
    border-radius: 16px;
    padding: 6px 18px 6px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 200px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.ala-kam-row-card:hover {
    background: #262438 !important;
    border-color: #3b3952;
}

/* Right Side: Text & Metadata */
.ala-kam-row-details {
    flex-grow: 1;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
}
.ala-kam-row-title {
    font-size: 1.08rem;
    font-weight: 800;
    margin-bottom: 8px;
    line-height: 1.4;
    font-family: 'Cairo', sans-serif !important;
}
.ala-kam-row-title a {
    color: #1fb984 !important; /* Green Title #1fb984 */
    font-weight: 800 !important;
    text-decoration: none;
    transition: color 0.15s;
}
.ala-kam-row-title a:hover {
    color: #1fb984 !important;
}
.ala-kam-row-card.is-viewed .ala-kam-row-title a,
body.light-ala-kam-theme .ala-kam-row-card.is-viewed .ala-kam-row-title a {
    color: #a78bfa !important;
}
.ala-kam-row-card.is-viewed .ala-kam-row-title a:hover,
body.light-ala-kam-theme .ala-kam-row-card.is-viewed .ala-kam-row-title a:hover {
    color: #c4b5fd !important;
}

.ala-kam-row-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.82rem;
    color: #94a3b8;
    font-family: 'Cairo', sans-serif !important;
}
.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.meta-item.seller {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.seller-avatar-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #334155;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Left Side: Thumbnail & Price Badge */
.ala-kam-row-visual {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
.ala-kam-price-badge {
    background: #172738;
    border: 1px solid #20364e;
    color: #38bdf8;
    border-radius: 20px;
    padding: 5px 14px;
    font-weight: 800;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.ala-kam-price-badge small {
    font-size: 1.12rem;
    opacity: 0.9;
}
.ala-kam-row-thumb {
    width: 198px;
    height: 198px;
    border-radius: 14px;
    overflow: hidden;
    background: #252534;
    flex-shrink: 0;
}
.ala-kam-row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pagination Dark Theme */
.ala-kam-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}
.ala-kam-page-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #1e1d2c !important;
    border: 1px solid #2e2c40;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
}
.ala-kam-page-btn.active {
    background: #1073c0 !important;
    border-color: #1073c0 !important;
}

@media (max-width: 768px) {
    .ala-kam-row-card {
        padding: 12px 14px;
        min-height: 105px;
    }
    .ala-kam-row-thumb {
        width: 85px;
        height: 85px;
    }
    .ala-kam-row-title {
        font-size: 0.92rem;
        margin-bottom: 8px;
    }
    .ala-kam-row-meta {
        gap: 10px;
        font-size: 0.75rem;
    }
    .ala-kam-price-badge {
        padding: 4px 10px;
        font-size: 0.85rem;
    }
}

/* Footer & Mobile Bottom Navbar Dark Mode */
body.dark-ala-kam-theme .main-footer {
    background-color: #1a1a28 !important;
    border-top: 1px solid #2e2c40 !important;
    color: #94a3b8 !important;
    padding-top: 40px;
    padding-bottom: 30px;
}
body.dark-ala-kam-theme .main-footer h3,
body.dark-ala-kam-theme .main-footer h4 {
    color: #ffffff !important;
}
body.dark-ala-kam-theme .main-footer a {
    color: #cbd5e1 !important;
}
body.dark-ala-kam-theme .main-footer a:hover {
    color: #38bdf8 !important;
}
body.dark-ala-kam-theme .footer-bottom {
    border-top: 1px solid #2e2c40 !important;
    color: #64748b !important;
}

body.dark-ala-kam-theme .mobile-bottom-nav {
    background-color: #1e1d2c !important;
    border-top: 1px solid #2e2c40 !important;
}
body.dark-ala-kam-theme .mobile-bottom-nav .nav-item {
    color: #94a3b8 !important;
}
body.dark-ala-kam-theme .mobile-bottom-nav .nav-item.active {
    color: #38bdf8 !important;
}

/* ==========================================================================
   ALA KAM LIGHT MODE DESIGN SYSTEM (MATCHING SECOND LIGHT SCREENSHOT)
   ========================================================================== */
body.light-ala-kam-theme,
html.light-ala-kam-theme body {
    background-color: #f3f4f6 !important;
    color: #1e293b !important;
    font-family: 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Light Header Topbar */
body.light-ala-kam-theme .main-header.ala-kam-topbar {
    background-color: #1073c0 !important;
}

/* Light Search Section */
body.light-ala-kam-theme .ala-kam-search-section,
body.light-ala-kam-theme .ala-kam-subcat-bar,
body.light-ala-kam-theme .ala-kam-feed-section {
    background-color: #f3f4f6 !important;
}

/* Light Search Input Group */
body.light-ala-kam-theme .ala-kam-search-input-group {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
body.light-ala-kam-theme .ala-kam-search-input {
    color: #1e293b !important;
}
body.light-ala-kam-theme .ala-kam-search-input::placeholder {
    color: #94a3b8 !important;
}
body.light-ala-kam-theme .ala-kam-search-icon-btn {
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    color: #64748b !important;
}
body.light-ala-kam-theme .ala-kam-search-icon-btn:hover {
    background: #f8fafc !important;
    color: #1073c0 !important;
}

/* Light Mode "+ أضف عرض" Button (Gold/Orange background like light screenshot) */
body.light-ala-kam-theme .ala-kam-add-ad-btn {
    background: #fcc068 !important;
    border: 1px solid #f3b253 !important;
    color: #1e293b !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.2);
}
body.light-ala-kam-theme .ala-kam-add-ad-btn i {
    color: #1e293b !important;
}
body.light-ala-kam-theme .ala-kam-add-ad-btn:hover {
    background: #fbbf24 !important;
    border-color: #d97706 !important;
}

/* Light Category Rail */
body.light-ala-kam-theme .ala-kam-cat-icon {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1073c0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
body.light-ala-kam-theme .ala-kam-cat-item.active .ala-kam-cat-icon {
    background: #dbeafe !important;
    border-color: #bfdbfe !important;
    color: #1073c0 !important;
}
body.light-ala-kam-theme .ala-kam-cat-title {
    color: #475569 !important;
}
body.light-ala-kam-theme .ala-kam-cat-item.active .ala-kam-cat-title {
    color: #1073c0 !important;
    font-weight: 800 !important;
}

/* Light Pills Filter */
body.light-ala-kam-theme .ala-kam-pill-filter {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
}
body.light-ala-kam-theme .ala-kam-pill-filter.active {
    background: #1073c0 !important;
    border-color: #1073c0 !important;
    color: #ffffff !important;
}

/* Light Mode Feed Row Cards */
body.light-ala-kam-theme .ala-kam-feed-title {
    color: #1e293b !important;
}
body.light-ala-kam-theme .ala-kam-filter-btn {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
}
body.light-ala-kam-theme .ala-kam-row-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
body.light-ala-kam-theme .ala-kam-row-card:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.07);
}
body.light-ala-kam-theme .ala-kam-row-title a {
    color: #1fb984 !important; /* Green title text */
}
body.light-ala-kam-theme .ala-kam-row-meta {
    color: #64748b !important;
}
body.light-ala-kam-theme .seller-avatar-icon {
    background: #e2e8f0 !important;
    color: #334155 !important;
}
body.light-ala-kam-theme .ala-kam-price-badge {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--theme-price-blue) !important;
}
body.light-ala-kam-theme .ala-kam-row-thumb {
    background: #f1f5f9 !important;
}
body.light-ala-kam-theme .ala-kam-page-btn {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}
body.light-ala-kam-theme .ala-kam-page-btn.active {
    background: #1073c0 !important;
    border-color: #1073c0 !important;
    color: #ffffff !important;
}

/* Light Dropdown Menu */
body.light-ala-kam-theme .ala-kam-dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12) !important;
}
body.light-ala-kam-theme .user-menu-title {
    color: #1e293b !important;
}
body.light-ala-kam-theme .user-menu-subtitle {
    color: #64748b !important;
}
body.light-ala-kam-theme .ala-kam-dropdown-menu a {
    color: #334155 !important;
}
body.light-ala-kam-theme .ala-kam-dropdown-menu a:hover {
    background: #f1f5f9 !important;
    color: #1073c0 !important;
}
body.light-ala-kam-theme .dropdown-divider {
    background: #e2e8f0 !important;
}

/* Light Footer & Mobile Nav */
body.light-ala-kam-theme .main-footer {
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    color: #64748b !important;
}
body.light-ala-kam-theme .main-footer h3,
body.light-ala-kam-theme .main-footer h4 {
    color: #1e293b !important;
}
body.light-ala-kam-theme .main-footer a {
    color: #475569 !important;
}
body.light-ala-kam-theme .main-footer a:hover {
    color: #1073c0 !important;
}
body.light-ala-kam-theme .footer-bottom {
    border-top: 1px solid #e2e8f0 !important;
    color: #94a3b8 !important;
}
body.light-ala-kam-theme .mobile-bottom-nav {
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
}
body.light-ala-kam-theme .mobile-bottom-nav .nav-item {
    color: #64748b !important;
}
body.light-ala-kam-theme .mobile-bottom-nav .nav-item.active {
    color: #1073c0 !important;
}

/* Notifications Text Styling - Force Pure Black Text */
.notification-card p,
.notification-card .notif-text,
.notification-card .notif-msg,
.notification-item p,
.notification-message,
.notif-content p {
    color: #000000 !important;
}

/* Fix Chat Send Button Disappearing Issue */
.chat-input-footer .send-btn,
.send-btn,
button.send-btn,
button[type="submit"].send-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    background: #1073c0 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 0 4px 12px rgba(16, 115, 192, 0.4) !important;
    transition: transform 0.15s, background 0.15s !important;
}

.chat-input-footer .send-btn:hover,
.send-btn:hover,
button.send-btn:hover,
button[type="submit"].send-btn:hover {
    background: #0d63a5 !important;
    transform: scale(1.06) !important;
}

.chat-input-footer .send-btn i,
.send-btn i,
button.send-btn i,
button[type="submit"].send-btn i {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    display: inline-block !important;
}

/* Ad View Detail Page Styling - Matching User Reference Screenshot */
.ala-kam-ad-detail-page {
    background: #252534 !important;
    padding-bottom: 60px;
}

.ala-kam-breadcrumb-bar {
    background: #1b1a26 !important;
    border-bottom: 1px solid #2e2c40;
    padding: 12px 0;
    margin-bottom: 24px;
}
.ala-kam-breadcrumb-bar .container {
    display: flex;
    align-items: center;
    gap: 15px;
    direction: rtl;
}
.ala-kam-breadcrumb-bar .back-link {
    color: #38bdf8;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    transition: background 0.15s;
    text-decoration: none;
}
.ala-kam-breadcrumb-bar .back-link:hover {
    background: rgba(255,255,255,0.12);
    color: #ffffff;
}
.ala-kam-breadcrumb-links {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #94a3b8;
}
.ala-kam-breadcrumb-links a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.15s;
}
.ala-kam-breadcrumb-links a:hover {
    color: #38bdf8;
}
.ala-kam-breadcrumb-links .divider {
    font-size: 0.75rem;
    color: #64748b;
}

.ala-kam-ad-page-container {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    direction: rtl;
}
@media (max-width: 991px) {
    .ala-kam-ad-page-container {
        grid-template-columns: 1fr;
    }
}

.ala-kam-ad-main-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 1. Header Card */
.ala-kam-ad-header-card {
    background: #1e1d2c !important;
    border: 1px solid #2e2c40;
    border-radius: 20px;
    padding: 24px 28px;
}
.ala-kam-ad-main-title {
    font-size: 1.55rem;
    font-weight: 800;
    color: #1fb984 !important; /* Green Title */
    line-height: 1.35;
    margin-bottom: 12px;
}
.ala-kam-ad-meta-row {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 0.88rem;
    color: #94a3b8;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.ala-kam-ad-meta-row .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ala-kam-ad-meta-row .meta-item.star-rating {
    color: #f59e0b;
}
.ala-kam-ad-seller-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.seller-info-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.seller-avatar-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #2e2c40;
}
.seller-name-text {
    font-weight: 700;
    color: #38bdf8;
    font-size: 0.95rem;
}
.ala-kam-follow-btn {
    background: #1073c0 !important;
    color: #ffffff !important;
    border: none;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.ala-kam-follow-btn:hover {
    background: #0d63a5 !important;
}
.ala-kam-ad-price-display {
    font-size: 1.65rem;
    font-weight: 800;
    color: #38bdf8 !important;
    margin-bottom: 14px;
}
.ala-kam-ad-price-display small {
    font-size: 0.95rem;
    font-weight: 600;
}
.ala-kam-ad-desc-text {
    color: #cbd5e1;
    font-size: 0.98rem;
    line-height: 1.8;
    white-space: pre-line;
}

/* 2. Gallery Card */
.ala-kam-ad-gallery-card {
    background: #1e1d2c !important;
    border: 1px solid #2e2c40;
    border-radius: 20px;
    padding: 16px;
    position: relative;
}
.ala-kam-ad-main-img-wrapper {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #161521;
    position: relative;
    max-height: 520px;
}
.ala-kam-ad-main-img-wrapper img {
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: contain;
    display: block;
}
.ala-kam-contact-badge-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: #1073c0 !important;
    color: #ffffff !important;
    border-radius: 12px;
    height: 44px;
    padding: 0 22px;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(16, 115, 192, 0.4);
    transition: transform 0.15s, background 0.15s;
    z-index: 10;
}
.ala-kam-contact-badge-btn:hover {
    background: #0d63a5 !important;
    transform: scale(1.03);
    color: #ffffff !important;
}

/* 3. Action Bar 4-Pill Segment */
.ala-kam-ad-actions-pill-bar {
    background: #1e1d2c !important;
    border: 1px solid #2e2c40;
    border-radius: 14px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
}
.action-pill-item {
    background: transparent;
    border: none;
    border-left: 1px solid #2e2c40;
    color: #cbd5e1;
    padding: 14px 10px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.action-pill-item:last-child {
    border-left: none;
}
.action-pill-item:hover {
    background: rgba(255,255,255,0.04);
    color: #ffffff;
}
.action-pill-item.active {
    color: #ef4444;
}

/* 4. Category Tags Bar */
.ala-kam-ad-tags-bar {
    background: #1e1d2c !important;
    border: 1px solid #2e2c40;
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ala-kam-tag-pill {
    background: #282639 !important;
    border: 1px solid #36344d;
    color: #94a3b8;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.ala-kam-tag-pill:hover {
    background: #31374a !important;
    color: #ffffff;
}

/* Sidebar Column */
.ala-kam-ad-sidebar-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ala-kam-follow-similar-card {
    background: #1e1d2c !important;
    border: 1px solid #2e2c40;
    border-radius: 16px;
    padding: 16px;
}
.ala-kam-follow-similar-btn {
    width: 100%;
    height: 48px;
    background: transparent;
    border: 1px solid #2e2c40;
    border-radius: 12px;
    color: #38bdf8;
    font-weight: 700;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.ala-kam-follow-similar-btn:hover {
    background: rgba(255,255,255,0.04);
    border-color: #38bdf8;
}

.ala-kam-similar-offers-card {
    background: #1e1d2c !important;
    border: 1px solid #2e2c40;
    border-radius: 16px;
    padding: 18px;
}
.similar-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.similar-tab-pill {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #94a3b8;
    background: #282639;
    border: 1px solid #36344d;
    cursor: pointer;
    text-decoration: none;
}
.similar-tab-pill.active {
    background: #31374a !important;
    color: #ffffff;
    border-color: #31374a;
}
.similar-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.similar-item-card {
    background: #181723 !important;
    border: 1px solid #2e2c40;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.15s, border-color 0.15s;
}
.similar-item-card:hover {
    transform: translateY(-3px);
    border-color: #38bdf8;
}
.similar-thumb {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
}
.similar-title {
    padding: 8px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* My Ads Dashboard Styling - Matching Image 1 */
.my-ads-top-tabs-bar {
    background: #1e1d2c !important;
    border-bottom: 1px solid #2e2c40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 52px;
    margin-bottom: 20px;
}

.my-ads-top-tabs-bar .tabs-right {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 100%;
}

.my-ads-top-tabs-bar .tab-item {
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 4px;
    position: relative;
    transition: color 0.15s;
}

.my-ads-top-tabs-bar .tab-item:hover {
    color: #ffffff;
}

.my-ads-top-tabs-bar .tab-item.active {
    color: #ffffff;
}

.my-ads-top-tabs-bar .tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #1073c0;
    border-radius: 3px 3px 0 0;
}

.my-ads-top-tabs-bar .tab-add-btn {
    width: 38px;
    height: 38px;
    background: #1073c0 !important;
    color: #ffffff !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    text-decoration: none;
    transition: background 0.15s;
}

.my-ads-top-tabs-bar .tab-add-btn:hover {
    background: #0d63a5 !important;
}

.my-ads-list-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.my-ad-row-card {
    background: #1e1d2c !important;
    border: 1px solid #2e2c40;
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    direction: rtl;
}

.my-ad-row-card:hover {
    background: #232235 !important;
    border-color: #38bdf8;
}

.my-ad-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.my-ad-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #a855f7 !important; /* Rich purple title matching Image 1 */
    margin: 0;
    line-height: 1.4;
}

.my-ad-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.85rem;
    color: #94a3b8;
}

.my-ad-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.seller-badge-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #3b82f6;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.my-ad-thumb-wrapper {
    position: relative;
    width: 120px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #181723;
}

.my-ad-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.my-ad-price-tag {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: rgba(16, 115, 192, 0.95);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 6px;
}

/* Owner Action Controls & Promo Cards on ad.php - Matching Image 2 */
.owner-promo-banner-card {
    background: #1e1d2c !important;
    border: 1px solid #2e2c40;
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.owner-promo-banner-text {
    font-size: 0.95rem;
    font-weight: 700;
    color: #38bdf8 !important;
}

.owner-promo-ala-kam-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #282639;
    border: 1px solid #36344d;
    color: #ffffff;
    font-weight: 800;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.owner-tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 25px;
}

@media (max-width: 768px) {
    .owner-tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.owner-tool-card {
    background: #1e1d2c !important;
    border: 1px solid #2e2c40;
    border-radius: 16px;
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
    cursor: pointer;
}

.owner-tool-card:hover {
    transform: translateY(-3px);
    border-color: #38bdf8;
    background: #232235 !important;
}

.owner-tool-icon {
    font-size: 1.8rem;
}

.owner-tool-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
}

/* Live Instant Search Dropdown */
.search-suggest-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    background: #1e1d2c !important;
    border: 1px solid #2e2c40 !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
    z-index: 99999 !important;
    display: none;
    max-height: 380px;
    overflow-y: auto;
    direction: rtl;
    padding: 8px 0;
}

.suggest-section-title {
    padding: 8px 16px 4px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.suggest-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 0.9rem;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.suggest-item:last-child {
    border-bottom: none;
}

.suggest-item:hover {
    background: #2b293d !important;
}

.suggest-cat-item {
    color: #38bdf8 !important;
}

.suggest-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.suggest-thumb-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #282639;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    flex-shrink: 0;
}

.suggest-ad-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.suggest-ad-title {
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggest-ad-meta {
    font-size: 0.8rem;
    color: #94a3b8;
}

.suggest-price {
    color: #1073c0;
    font-weight: 700;
}

.suggest-empty {
    padding: 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.88rem;
}

/* Fees Page Dark Mobile-First Styling */
.fees-page-container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 12px 60px;
    direction: rtl;
}

.fees-hero-card {
    background: linear-gradient(135deg, #1073c0 0%, #1e1d2c 100%) !important;
    border: 1px solid #2e2c40 !important;
    border-radius: 20px !important;
    padding: 24px 20px !important;
    color: #ffffff !important;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    position: relative;
    overflow: hidden;
}

.fees-card {
    background: #1e1d2c !important;
    border: 1px solid #2e2c40 !important;
    border-radius: 18px !important;
    padding: 20px !important;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

.fees-card-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff !important;
    margin-bottom: 16px;
    border-bottom: 1px solid #2e2c40;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fees-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.fees-stat-box {
    background: #1b1a26 !important;
    border: 1px solid #2e2c40 !important;
    border-radius: 14px !important;
    padding: 14px;
    text-align: center;
}

.fees-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 4px 0;
}

.fees-calc-result-box {
    background: #1b1a26 !important;
    border: 1px solid #36344d !important;
    border-radius: 14px !important;
    padding: 18px;
    text-align: center;
    margin-top: 12px;
}

.fees-bank-box {
    background: #1b1a26 !important;
    border: 1px solid #2e2c40 !important;
    border-radius: 14px !important;
    padding: 16px;
}

.fees-bank-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #94a3b8;
    margin-bottom: 8px;
}

.fees-bank-row strong {
    color: #ffffff;
    font-family: monospace;
    font-size: 1rem;
}

.fees-form-control {
    background: #1b1a26 !important;
    border: 1px solid #2e2c40 !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    height: 50px !important;
    font-size: 1rem !important;
    padding: 0 16px !important;
    width: 100%;
}

.fees-form-control:focus {
    border-color: #1073c0 !important;
    outline: none;
}

.fees-submit-btn {
    width: 100%;
    height: 50px;
    background: #1073c0 !important;
    color: #ffffff !important;
    border: none;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s;
}

.fees-submit-btn:hover {
    background: #0d63a5 !important;
}

.fees-history-item {
    background: #1b1a26 !important;
    border: 1px solid #2e2c40 !important;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

/* Notifications Page Dark Theme Styling */
.notif-page-container {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 12px 60px;
    direction: rtl;
}

.notif-header-card {
    background: #1e1d2c !important;
    border: 1px solid #2e2c40 !important;
    border-radius: 18px !important;
    padding: 20px 22px !important;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.notif-tabs-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.notif-tab-pill {
    padding: 8px 18px;
    border-radius: 12px;
    background: #1b1a26 !important;
    border: 1px solid #2e2c40 !important;
    color: #94a3b8 !important;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.notif-tab-pill:hover,
.notif-tab-pill.active {
    background: #1073c0 !important;
    color: #ffffff !important;
    border-color: #1073c0 !important;
}

.notif-card-item {
    background: #1e1d2c !important;
    border: 1px solid #2e2c40 !important;
    border-radius: 16px !important;
    padding: 16px 18px !important;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
    position: relative;
}

.notif-card-item.unread {
    border-color: #38bdf8 !important;
    background: #232236 !important;
    box-shadow: 0 4px 16px rgba(56, 189, 248, 0.15);
}

.notif-card-item.unread::before {
    content: '';
    position: absolute;
    top: 18px;
    right: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #38bdf8;
}

.notif-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.notif-icon-message {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
}

.notif-icon-success {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.notif-icon-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.notif-icon-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.notif-text-msg {
    font-weight: 700;
    font-size: 0.95rem;
    color: #ffffff !important;
    margin-bottom: 4px;
    line-height: 1.5;
}

.notif-text-time {
    font-size: 0.78rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
}

.notif-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #1b1a26 !important;
    border: 1px solid #2e2c40 !important;
    color: #94a3b8 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.notif-action-btn:hover {
    background: #282639 !important;
    color: #ffffff !important;
}

.notif-action-btn.delete-btn:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
}

/* Favorites Page Dark Theme Styling */
.favs-page-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 12px 60px;
    direction: rtl;
}

.favs-header-card {
    background: #1e1d2c !important;
    border: 1px solid #2e2c40 !important;
    border-radius: 18px !important;
    padding: 20px 22px !important;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.fav-card-item {
    background: #1e1d2c !important;
    border: 1px solid #2e2c40 !important;
    border-radius: 16px !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    position: relative;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.fav-card-item:hover {
    transform: translateY(-4px);
    border-color: #38bdf8 !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

.fav-img-wrapper {
    height: 160px;
    background: #1b1a26 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #2e2c40;
    position: relative;
}

.fav-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fav-remove-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(27, 26, 38, 0.85) !important;
    backdrop-filter: blur(8px);
    border: 1px solid #2e2c40 !important;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444 !important;
    cursor: pointer;
    z-index: 10;
    transition: all 0.15s ease;
}

.fav-remove-badge:hover {
    background: rgba(239, 68, 68, 0.25) !important;
    transform: scale(1.1);
}

.fav-card-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

.fav-card-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 8px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.fav-card-title a {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.fav-card-title a:hover {
    color: #38bdf8 !important;
}

.fav-meta-row {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 12px;
    align-items: center;
}

.fav-price-tag {
    border-top: 1px dashed #2e2c40;
    padding-top: 10px;
    font-weight: 800;
    color: #38bdf8 !important;
    font-size: 1.15rem;
    text-align: left;
}

/* Terms Page Dark Theme Styling */
.terms-page-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 12px 60px;
    direction: rtl;
}

.terms-hero-card {
    background: linear-gradient(135deg, #1073c0 0%, #1e1d2c 100%) !important;
    border: 1px solid #2e2c40 !important;
    border-radius: 20px !important;
    padding: 26px 22px !important;
    color: #ffffff !important;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    position: relative;
    overflow: hidden;
}

.terms-section-card {
    background: #1e1d2c !important;
    border: 1px solid #2e2c40 !important;
    border-radius: 18px !important;
    padding: 22px !important;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

.terms-section-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff !important;
    margin-bottom: 14px;
    border-bottom: 1px solid #2e2c40;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.terms-section-body {
    line-height: 1.8;
    font-size: 0.95rem;
    color: #cbd5e1 !important;
}

.terms-section-body p {
    margin-bottom: 12px;
}

.terms-section-body ul {
    padding-right: 20px;
    margin: 10px 0;
}

.terms-section-body li {
    margin-bottom: 8px;
}

/* Profile Page Dark Theme Mobile-First Styling */
.profile-page-container {
    max-width: 768px;
    margin: 0 auto;
    padding: 0 12px 60px;
    direction: rtl;
}

.profile-hero-card {
    background: linear-gradient(135deg, #1073c0 0%, #1e1d2c 100%) !important;
    border: 1px solid #2e2c40 !important;
    border-radius: 20px !important;
    padding: 24px 20px !important;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    position: relative;
    overflow: hidden;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 22px;
}

.profile-stat-box {
    background: #1e1d2c !important;
    border: 1px solid #2e2c40 !important;
    border-radius: 16px !important;
    padding: 14px 8px;
    text-align: center;
    text-decoration: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, border-color 0.15s ease;
    position: relative;
}

.profile-stat-box:hover {
    transform: translateY(-2px);
    border-color: #38bdf8 !important;
}

.profile-section-block {
    background: #1e1d2c !important;
    border: 1px solid #2e2c40 !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    margin-bottom: 22px;
}

.profile-section-header {
    padding: 12px 18px;
    background: #1b1a26 !important;
    border-bottom: 1px solid #2e2c40;
    font-weight: 700;
    font-size: 0.85rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-menu-item-dark {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 18px;
    text-decoration: none !important;
    color: #ffffff !important;
    border-bottom: 1px solid #2e2c40;
    transition: background 0.15s ease;
}

.profile-menu-item-dark:last-child {
    border-bottom: none;
}

.profile-menu-item-dark:hover {
    background: #2b293d !important;
}

.profile-menu-icon-dark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.profile-menu-label-dark {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.profile-menu-label-dark span {
    font-weight: 700;
    font-size: 0.95rem;
    color: #ffffff !important;
}

.profile-menu-label-dark small {
    font-size: 0.78rem;
    color: #94a3b8 !important;
    margin-top: 2px;
}

.profile-menu-badge-dark {
    background: #282639 !important;
    color: #38bdf8 !important;
    border: 1px solid #36344d;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
}

/* Force White color on notifications text items */
.notif-text-msg, 
.notif-card-item .notif-text-msg,
.notif-card-item p,
.notification-card p,
.notif-page-container p {
    color: #ffffff !important;
}

/* Global Text contrast rules for Dark & Light themes */

/* Light Theme overrides: When light-ala-kam-theme is active, force black text inside light surfaces */
.light-ala-kam-theme,
.light-ala-kam-theme body,
body.light-ala-kam-theme {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
}

/* Light Mode surfaces & text elements readability correction */
.light-ala-kam-theme .ala-kam-row-card,
.light-ala-kam-theme .notification-card,
.light-ala-kam-theme .user-ad-card,
.light-ala-kam-theme .ad-detail-content,
.light-ala-kam-theme .profile-card,
.light-ala-kam-theme .settings-card,
.light-ala-kam-theme .auth-container,
.light-ala-kam-theme .notif-card-item,
.light-ala-kam-theme .notif-header-card,
.light-ala-kam-theme .favs-header-card,
.light-ala-kam-theme .terms-section-card,
.light-ala-kam-theme .profile-stat-box,
.light-ala-kam-theme .profile-section-block,
.light-ala-kam-theme .notif-action-btn,
.light-ala-kam-theme .suggest-item,
.light-ala-kam-theme .search-suggest-dropdown {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border-color: #e5e7eb !important;
}

/* Specific text inputs and placeholders inside Light Theme */
.light-ala-kam-theme input,
.light-ala-kam-theme select,
.light-ala-kam-theme textarea,
.light-ala-kam-theme .form-control {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}
.light-ala-kam-theme .form-control::placeholder {
    color: #9ca3af !important;
}

/* Heading and body tags contrast overrides under Light Theme */
.light-ala-kam-theme h1,
.light-ala-kam-theme h2,
.light-ala-kam-theme h3,
.light-ala-kam-theme h4,
.light-ala-kam-theme h5,
.light-ala-kam-theme h6,
.light-ala-kam-theme p,
.light-ala-kam-theme span,
.light-ala-kam-theme a,
.light-ala-kam-theme li,
.light-ala-kam-theme strong,
.light-ala-kam-theme small,
.light-ala-kam-theme label {
    color: #1f2937 !important;
}

/* Preserve distinct accent colors inside Light mode */
.light-ala-kam-theme .ala-kam-brand-logo,
.light-ala-kam-theme .btn-primary {
    color: #ffffff !important; /* Keep logo white in blue header */
}
.light-ala-kam-theme .ala-kam-add-ad-btn,
.light-ala-kam-theme .ala-kam-add-ad-btn span,
.light-ala-kam-theme .ala-kam-add-ad-btn i {
    color: #d97706 !important; /* Proper amber color in light mode header */
}
.light-ala-kam-theme .ala-kam-listing-price,
.light-ala-kam-theme .ala-kam-price-badge span,
.light-ala-kam-theme .fav-price-tag {
    color: #1073c0 !important; /* High contrast price colors */
}

/* ======================================================= */

/* Dark Theme overrides: When dark-ala-kam-theme is active */
.dark-ala-kam-theme,
.dark-ala-kam-theme body,
body.dark-ala-kam-theme {
    background-color: #252534 !important;
    color: #ffffff !important;
}

.dark-ala-kam-theme .ala-kam-row-card,
.dark-ala-kam-theme .notification-card,
.dark-ala-kam-theme .user-ad-card,
.dark-ala-kam-theme .ad-detail-content,
.dark-ala-kam-theme .profile-card,
.dark-ala-kam-theme .settings-card,
.dark-ala-kam-theme .auth-container,
.dark-ala-kam-theme .notif-card-item,
.dark-ala-kam-theme .notif-header-card,
.dark-ala-kam-theme .favs-header-card,
.dark-ala-kam-theme .terms-section-card,
.dark-ala-kam-theme .profile-stat-box,
.dark-ala-kam-theme .profile-section-block,
.dark-ala-kam-theme .notif-action-btn,
.dark-ala-kam-theme .suggest-item,
.dark-ala-kam-theme .search-suggest-dropdown {
    background-color: #1e1d2c !important;
    color: #ffffff !important;
    border-color: #2e2c40 !important;
}

/* Headings and tags under Dark Theme */
.dark-ala-kam-theme h1,
.dark-ala-kam-theme h2,
.dark-ala-kam-theme h3,
.dark-ala-kam-theme h4,
.dark-ala-kam-theme h5,
.dark-ala-kam-theme h6,
.dark-ala-kam-theme p,
.dark-ala-kam-theme span,
.dark-ala-kam-theme a,
.dark-ala-kam-theme li,
.dark-ala-kam-theme strong,
.dark-ala-kam-theme label {
    color: #ffffff !important;
}

/* Specific text inputs and placeholders inside Dark Theme */
.dark-ala-kam-theme input,
.dark-ala-kam-theme select,
.dark-ala-kam-theme textarea,
.dark-ala-kam-theme .form-control {
    background-color: #1b1a26 !important;
    color: #ffffff !important;
    border-color: #2e2c40 !important;
}
.dark-ala-kam-theme .form-control::placeholder {
    color: #94a3b8 !important;
}

.dark-ala-kam-theme .ala-kam-listing-price,
.dark-ala-kam-theme .ala-kam-price-badge span,
.dark-ala-kam-theme .fav-price-tag {
    color: #38bdf8 !important;
}

.dark-ala-kam-theme .ala-kam-listing-description,
.dark-ala-kam-theme .ala-kam-listing-meta span,
.dark-ala-kam-theme .notif-text-time,
.dark-ala-kam-theme .user-menu-subtitle {
    color: #94a3b8 !important;
}

/* Hide header action text labels on mobile to avoid overcrowding */
@media (max-width: 767px) {
    .ala-kam-header-actions .header-btn-text {
        display: none !important;
    }
    .ala-kam-nav-pill-btn {
        padding: 0 !important;
        width: 34px !important;
        height: 34px !important;
        justify-content: center !important;
        border-radius: 10px !important;
    }
    .ala-kam-nav-pill-btn i {
        font-size: 0.95rem !important;
    }
    .ala-kam-user-pill {
        padding: 0 !important;
        width: 44px !important;
        height: 34px !important;
        justify-content: center !important;
        border-radius: 10px !important;
        gap: 2px !important;
    }
    .ala-kam-user-pill .fa-caret-down {
        font-size: 0.65rem !important;
    }
    .ala-kam-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        padding: 1px 4px !important;
        font-size: 0.58rem !important;
    }
}




/* Advertisement comments */
.ad-comments-card { margin-top: 22px; padding: 24px; border: 1px solid rgba(148, 163, 184, .18); border-radius: 22px; background: linear-gradient(145deg, rgba(30, 41, 59, .94), rgba(15, 23, 42, .96)); box-shadow: 0 16px 40px rgba(2, 6, 23, .16); }
.light-ala-kam-theme .ad-comments-card { background: linear-gradient(145deg, #fff, #f8fafc); border-color: #e2e8f0; }
.ad-comments-heading, .ad-comment-form-footer, .ad-comment-meta, .ad-comments-login-prompt { display: flex; align-items: center; }
.ad-comments-heading { justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.ad-comments-kicker { color: #38bdf8; font-size: .78rem; font-weight: 700; }
.ad-comments-heading h2 { margin: 4px 0 0; color: #f8fafc; font-size: 1.28rem; }
.light-ala-kam-theme .ad-comments-heading h2 { color: #1e293b; }
.ad-comments-heading h2 span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px; background: rgba(56, 189, 248, .15); color: #38bdf8; font-size: .78rem; }
.ad-comments-add-link { color: #7dd3fc; font-size: .84rem; font-weight: 700; text-decoration: none; }
.ad-comment-form { padding: 14px; border-radius: 16px; background: rgba(15, 23, 42, .55); border: 1px solid rgba(148, 163, 184, .16); }
.light-ala-kam-theme .ad-comment-form { background: #f8fafc; border-color: #e2e8f0; }
.ad-comment-form textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 82px; padding: 12px; border: 0; outline: 0; border-radius: 11px; background: rgba(51, 65, 85, .42); color: #f8fafc; font: inherit; }
.light-ala-kam-theme .ad-comment-form textarea { background: #fff; color: #1e293b; }
.ad-comment-form-footer { justify-content: space-between; gap: 12px; padding-top: 12px; color: #94a3b8; font-size: .76rem; }
.ad-comment-form-footer button { border: 0; border-radius: 10px; padding: 9px 14px; background: linear-gradient(135deg, #0ea5e9, #2563eb); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.ad-comments-login-prompt { gap: 10px; padding: 13px 15px; border-radius: 13px; background: rgba(56, 189, 248, .09); color: #cbd5e1; font-size: .88rem; }
.light-ala-kam-theme .ad-comments-login-prompt { color: #475569; }
.ad-comments-login-prompt i { color: #38bdf8; }
.ad-comments-login-prompt a { margin-right: auto; color: #38bdf8; font-weight: 700; text-decoration: none; }
.ad-comments-list { display: grid; gap: 2px; margin-top: 16px; }
.ad-comment-item { display: flex; gap: 12px; padding: 15px 2px; border-bottom: 1px solid rgba(148, 163, 184, .12); }
.ad-comment-item:last-child { border-bottom: 0; }
.ad-comment-avatar { flex: 0 0 42px; width: 42px; height: 42px; object-fit: cover; border-radius: 14px; }
.ad-comment-avatar-letter { display: grid; place-items: center; background: linear-gradient(135deg, #0ea5e9, #6366f1); color: #fff; font-weight: 800; }
.ad-comment-content { min-width: 0; flex: 1; }
.ad-comment-meta { justify-content: space-between; gap: 10px; }
.ad-comment-meta strong { color: #e2e8f0; font-size: .9rem; }
.light-ala-kam-theme .ad-comment-meta strong { color: #1e293b; }
.ad-comment-meta span { color: #94a3b8; font-size: .72rem; white-space: nowrap; }
.ad-comment-content p { margin: 7px 0 0; color: #cbd5e1; font-size: .9rem; line-height: 1.8; overflow-wrap: anywhere; }
.light-ala-kam-theme .ad-comment-content p { color: #475569; }
.ad-comments-empty { display: grid; justify-items: center; gap: 6px; padding: 32px 14px 16px; color: #94a3b8; text-align: center; }
.ad-comments-empty i { color: #38bdf8; font-size: 2rem; }
.ad-comments-empty strong { color: #cbd5e1; font-size: .95rem; }
.light-ala-kam-theme .ad-comments-empty strong { color: #334155; }
.ad-comments-empty span { font-size: .82rem; }
@media (max-width: 520px) { .ad-comments-card { padding: 18px; border-radius: 18px; } .ad-comments-heading { align-items: flex-start; } .ad-comments-add-link, .ad-comment-form-footer span { display: none; } .ad-comment-form-footer { justify-content: flex-end; } }

/* Keep advertisement-title colors above the global dark-theme link rule. */
.dark-ala-kam-theme .ala-kam-row-title a,
body.dark-ala-kam-theme .ala-kam-row-title a {
    color: #1fb984 !important;
}
.dark-ala-kam-theme .ala-kam-row-card.is-viewed .ala-kam-row-title a,
body.dark-ala-kam-theme .ala-kam-row-card.is-viewed .ala-kam-row-title a {
    color: #a78bfa !important;
}

/* ========================================================================== 
   ALA KAM BRAND IDENTITY — navy square, emerald medallion and gold trim
   ========================================================================== */
:root {
    --brand-navy: #061426;
    --brand-navy-soft: #0b1f38;
    --brand-emerald: #063d2c;
    --brand-emerald-bright: #0b6a4c;
    --brand-gold: #e4b44f;
    --brand-gold-light: #ffe39a;
    --brand-gold-line: rgba(228, 180, 79, .58);
    --app-primary: var(--brand-gold);
    --app-primary-strong: #c18a24;
    --app-primary-soft: rgba(228, 180, 79, .14);
}

html,
body.marketplace-app,
body.dark-ala-kam-theme { background-color: var(--brand-navy) !important; }
body.marketplace-app {
    background-image:
        radial-gradient(900px 520px at 100% -80px, rgba(11, 106, 76, .34), transparent 67%),
        radial-gradient(720px 500px at -8% 48%, rgba(228, 180, 79, .08), transparent 66%) !important;
}

.main-header.ala-kam-topbar {
    background: linear-gradient(115deg, #041020, #071a30 62%, #063328) !important;
    border-bottom: 1px solid var(--brand-gold-line) !important;
    box-shadow: 0 7px 24px rgba(0, 0, 0, .32), inset 0 -1px rgba(255, 227, 154, .06) !important;
}
.ala-kam-brand-logo { gap: 10px; }
.ala-kam-wordmark {
    display: inline-block;
    color: var(--site-wordmark-green, #10b981) !important;
    font-family: 'Lalezar', 'Cairo', sans-serif !important;
    font-size: 2.35rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -1.5px;
    white-space: nowrap;
    text-shadow: 0 2px 10px rgba(0,0,0,.34);
    transform: translateY(2px);
}
.ala-kam-nav-icon-btn,
.ala-kam-nav-pill-btn,
.ala-kam-user-pill {
    border-color: rgba(228, 180, 79, .32) !important;
    background: rgba(6, 61, 44, .56) !important;
}
.ala-kam-nav-icon-btn:hover,
.ala-kam-nav-pill-btn:hover,
.ala-kam-user-pill:hover { border-color: var(--brand-gold) !important; background: rgba(11, 106, 76, .78) !important; }

.marketplace-hero,
.ala-kam-search-hero {
    background: linear-gradient(125deg, #041020 0%, #062641 46%, #064a35 100%) !important;
}
.ala-kam-search-input-group:focus-within,
.form-control:focus { border-color: var(--brand-gold) !important; box-shadow: 0 0 0 4px rgba(228,180,79,.13) !important; }
.btn-primary,
.btn-success,
.ala-kam-add-ad-btn {
    color: #071426 !important;
    background: linear-gradient(135deg, var(--brand-gold-light), var(--brand-gold)) !important;
    border-color: #f0c96d !important;
    box-shadow: 0 8px 20px rgba(193,138,36,.22) !important;
}
.ala-kam-cat-icon,
.category-rail-section a > div {
    border-radius: 50% !important;
    border: 1px solid var(--brand-gold-line) !important;
    background: radial-gradient(circle at 35% 25%, #0b6a4c, var(--brand-emerald) 70%) !important;
    color: var(--brand-gold-light) !important;
}

/* Listing previews mirror the logo: a square frame with a circular image inside. */
.ala-kam-row-thumb,
.ala-kam-listing-media,
.marketplace-listing-card > div:first-child,
.ad-card-enhanced > div:first-child,
.ad-card > div:first-child,
.user-ad-card-img {
    background: linear-gradient(145deg, #061426, #0b1f38) !important;
    border: 1px solid var(--brand-gold-line) !important;
    border-radius: 18px !important;
    padding: 7px !important;
    box-sizing: border-box !important;
}
.ala-kam-row-thumb img,
.ala-kam-listing-media img,
.marketplace-listing-card > div:first-child img,
.ad-card-enhanced > div:first-child img,
.ad-card > div:first-child img,
.user-ad-card-img img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; border-radius: 50% !important;
    border: 3px solid var(--brand-gold) !important;
    background: var(--brand-emerald) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.32) !important;
}
.ala-kam-row-card,
.ad-card,
.ad-card-enhanced,
.user-ad-card {
    border-color: rgba(228,180,79,.18) !important;
    background: linear-gradient(120deg, rgba(7,22,40,.98), rgba(6,49,40,.58)) !important;
}
.ala-kam-row-card:hover,
.ad-card:hover,
.ad-card-enhanced:hover { border-color: var(--brand-gold-line) !important; }
.ala-kam-row-title a,
.dark-ala-kam-theme .ala-kam-row-title a,
body.dark-ala-kam-theme .ala-kam-row-title a { color: #e7bd61 !important; }
.ala-kam-price-badge,
.ala-kam-ad-price-display,
.my-ad-price-tag,
.fav-price-tag { color: var(--brand-gold-light) !important; }
.ala-kam-price-badge { background: rgba(6,61,44,.74) !important; border-color: var(--brand-gold-line) !important; }
.ala-kam-price-badge {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #4b9df8 !important;
    font-size: 1.05rem !important;
}


.ala-kam-price-badge .ala-kam-sar-mark,
.ala-kam-price-container .ala-kam-sar-mark {
    background: currentColor !important;
    -webkit-mask: url('../images/sar-mark.png') center / contain no-repeat !important;
    mask: url('../images/sar-mark.png') center / contain no-repeat !important;
}

.ala-kam-price-container {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--theme-price-blue) !important;
    font-weight: 800 !important;
    font-size: 1.15rem !important;
    position: static !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    direction: ltr !important;
}

/* Cleaned derivative of assets/icon/SAR.jpeg; usable on every background. */
.ala-kam-sar-mark {
    width: 1.08em; height: 1.08em; flex: 0 0 1.08em;
    background: currentColor !important;
    -webkit-mask: url('../images/sar-mark.png') center / contain no-repeat !important;
    mask: url('../images/sar-mark.png') center / contain no-repeat !important;
    vertical-align: -.15em;
    display: inline-block;
}

.ala-kam-custom-card {
    color: var(--theme-text) !important;
    background: var(--theme-surface) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: var(--app-radius, 16px) !important;
    box-shadow: var(--app-shadow-sm, 0 1px 3px rgba(0,0,0,0.05)) !important;
}

/* Detail galleries deliberately stay rectangular and uncropped. */
.ala-kam-ad-main-img-wrapper img,
.ad-gallery-mobile img,
#currentSlide,
#activeSliderImg > img,
.slider-thumb { border-radius: 12px !important; border: 0 !important; object-fit: contain !important; }

.mobile-bottom-nav {
    background: rgba(4,16,32,.96) !important;
    border-top-color: var(--brand-gold-line) !important;
}
.mobile-bottom-nav .nav-item.active,
.mobile-bottom-nav .nav-item.active i { color: var(--brand-gold-light) !important; }

@media (max-width: 767px) {
    .ala-kam-wordmark { font-size: 1.9rem; letter-spacing: 0; }
    .ala-kam-row-thumb,
    .ala-kam-listing-card .ala-kam-listing-media { padding: 5px !important; border-radius: 13px !important; }
    .ala-kam-row-thumb img,
    .ala-kam-listing-card .ala-kam-listing-media img { border-width: 2px !important; }
}

/* Refined category controls: compact logo-inspired tiles. */
.ala-kam-category-rail {
    padding: 13px 0 15px !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
.ala-kam-category-rail .container,
.ala-kam-category-rail .ala-kam-category-scroll,
body.dark-ala-kam-theme .ala-kam-category-rail,
body.light-ala-kam-theme .ala-kam-category-rail {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.ala-kam-category-scroll {
    gap: 10px !important;
    padding: 3px 2px 7px !important;
    justify-content: safe center;
}
.ala-kam-cat-item {
    min-width: 82px !important;
    width: 92px;
    min-height: 108px;
    height: auto;
    flex: 0 0 92px;
    padding: 9px 8px 8px !important;
    gap: 7px !important;
    border: 1px solid rgba(228, 180, 79, .18) !important;
    border-radius: 17px !important;
    background: linear-gradient(145deg, rgba(11,31,56,.96), rgba(4,17,33,.96)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.035), 0 5px 14px rgba(0,0,0,.17);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
.ala-kam-cat-item:hover {
    transform: translateY(-3px);
    border-color: rgba(228, 180, 79, .62) !important;
    background: linear-gradient(145deg, #0d2942, #082238) !important;
    box-shadow: 0 9px 22px rgba(0,0,0,.28), 0 0 0 1px rgba(228,180,79,.07);
}
.ala-kam-cat-icon,
.category-rail-section a > div {
    position: relative;
    isolation: isolate;
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px;
    border-radius: 14px !important;
    border: 1px solid rgba(228,180,79,.72) !important;
    background: linear-gradient(145deg, #0b2037, #041120) !important;
    color: var(--brand-gold-light) !important;
    box-shadow: inset 0 0 0 2px rgba(228,180,79,.08), 0 5px 12px rgba(0,0,0,.28) !important;
    overflow: hidden;
}
.ala-kam-cat-icon::before,
.category-rail-section a > div::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 26%, #137a58, #063d2c 68%, #022b20);
    border: 1px solid var(--brand-gold);
    box-shadow: inset 0 2px 5px rgba(255,255,255,.08), 0 3px 7px rgba(0,0,0,.32);
}
.ala-kam-cat-icon i {
    position: relative;
    z-index: 1;
    font-size: 1.22rem !important;
    color: #fff4cf !important;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.42));
}
.ala-kam-cat-title {
    display: block;
    width: 100%;
    max-width: 82px;
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: normal;
    text-overflow: clip;
    text-align: center;
    color: #c7d1db !important;
    font-size: .76rem !important;
    line-height: 1.35 !important;
}
.ala-kam-cat-item.active {
    transform: translateY(-2px);
    border-color: var(--brand-gold) !important;
    background: linear-gradient(145deg, #0a503b, #063225) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.3), 0 0 0 2px rgba(228,180,79,.12) !important;
}
.ala-kam-cat-item.active .ala-kam-cat-icon {
    border-color: var(--brand-gold-light) !important;
    box-shadow: inset 0 0 0 2px rgba(255,227,154,.16), 0 5px 15px rgba(0,0,0,.34) !important;
}
.ala-kam-cat-item.active .ala-kam-cat-title { color: var(--brand-gold-light) !important; }

@media (max-width: 767px) {
    .ala-kam-category-scroll { gap: 8px !important; }
    .ala-kam-cat-item { width: 80px; min-width: 80px !important; min-height: 98px; flex-basis: 80px; padding: 7px 6px !important; border-radius: 14px !important; }
    .ala-kam-cat-icon,
    .category-rail-section a > div { width: 46px !important; height: 46px !important; flex-basis: 46px; border-radius: 12px !important; }
    .ala-kam-cat-icon::before,
    .category-rail-section a > div::before { inset: 5px; }
    .ala-kam-cat-icon i { font-size: 1.08rem !important; }
    .ala-kam-cat-title { max-width: 70px; font-size: .7rem !important; }
}

/* ========================================================================== 
   FINAL THEME CONTRAST PASS
   Dark mode: dark backgrounds / light copy. Light mode: light backgrounds /
   dark copy. Brand green is reserved for listing titles; blue for prices.
   ========================================================================== */
body.dark-ala-kam-theme {
    --theme-page: #061426;
    --theme-surface: #0b1f38;
    --theme-surface-raised: #102943;
    --theme-text: #f7fafc;
    --theme-muted: #a9b8c8;
    --theme-border: rgba(228, 180, 79, .2);
    --theme-title-green: #31d69c;
    --theme-price-blue: #4b9df8;
}
body.light-ala-kam-theme {
    --theme-page: #f5f7f6;
    --theme-surface: #ffffff;
    --theme-surface-raised: #edf3f0;
    --theme-text: #10231d;
    --theme-muted: #5f6f69;
    --theme-border: #d8e2dd;
    --theme-title-green: #087a55;
    --theme-price-blue: #4b9df8;
}

body.dark-ala-kam-theme,
body.light-ala-kam-theme {
    background-color: var(--theme-page) !important;
    color: var(--theme-text) !important;
}
body.light-ala-kam-theme { background-image: radial-gradient(850px 500px at 100% -80px, rgba(8,122,85,.08), transparent 66%) !important; }
body.dark-ala-kam-theme { background-image: radial-gradient(900px 520px at 100% -80px, rgba(11,106,76,.34), transparent 67%), radial-gradient(720px 500px at -8% 48%, rgba(228,180,79,.08), transparent 66%) !important; }

body.dark-ala-kam-theme .ala-kam-search-section,
body.dark-ala-kam-theme .ala-kam-feed-section,
body.dark-ala-kam-theme .ala-kam-subcat-bar { background-color: var(--theme-page) !important; }
body.light-ala-kam-theme .ala-kam-search-section,
body.light-ala-kam-theme .ala-kam-feed-section,
body.light-ala-kam-theme .ala-kam-subcat-bar { background-color: var(--theme-page) !important; }

body.dark-ala-kam-theme .ala-kam-row-card,
body.dark-ala-kam-theme .ala-kam-ad-header-card,
body.dark-ala-kam-theme .ala-kam-ad-gallery-card,
body.dark-ala-kam-theme .ad-comments-card,
body.dark-ala-kam-theme .notification-card,
body.dark-ala-kam-theme .user-ad-card,
body.dark-ala-kam-theme .profile-card,
body.dark-ala-kam-theme .settings-card,
body.dark-ala-kam-theme .auth-container,
body.dark-ala-kam-theme .notif-card-item,
body.dark-ala-kam-theme .terms-section-card {
    color: var(--theme-text) !important;
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}
body.light-ala-kam-theme .ala-kam-row-card,
body.light-ala-kam-theme .ala-kam-ad-header-card,
body.light-ala-kam-theme .ala-kam-ad-gallery-card,
body.light-ala-kam-theme .ad-comments-card,
body.light-ala-kam-theme .notification-card,
body.light-ala-kam-theme .user-ad-card,
body.light-ala-kam-theme .profile-card,
body.light-ala-kam-theme .settings-card,
body.light-ala-kam-theme .auth-container,
body.light-ala-kam-theme .notif-card-item,
body.light-ala-kam-theme .terms-section-card {
    color: var(--theme-text) !important;
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    box-shadow: 0 5px 18px rgba(18,48,37,.07) !important;
}

/* Advertisement titles always use the identity green, never blue. */
body.dark-ala-kam-theme .ala-kam-row-title,
body.dark-ala-kam-theme .ala-kam-row-title a,
body.dark-ala-kam-theme .ala-kam-ad-main-title,
body.dark-ala-kam-theme .my-ad-title,
body.dark-ala-kam-theme .suggest-ad-title,
body.light-ala-kam-theme .ala-kam-row-title,
body.light-ala-kam-theme .ala-kam-row-title a,
body.light-ala-kam-theme .ala-kam-ad-main-title,
body.light-ala-kam-theme .my-ad-title,
body.light-ala-kam-theme .suggest-ad-title {
    color: var(--theme-title-green) !important;
}
body.dark-ala-kam-theme .ala-kam-row-card.is-viewed .ala-kam-row-title a,
body.light-ala-kam-theme .ala-kam-row-card.is-viewed .ala-kam-row-title a {
    color: #a78bfa !important;
    opacity: 1;
}

body.dark-ala-kam-theme .ala-kam-row-meta,
body.dark-ala-kam-theme .ala-kam-row-meta span,
body.dark-ala-kam-theme .ala-kam-ad-meta-row,
body.dark-ala-kam-theme .ala-kam-listing-description,
body.dark-ala-kam-theme .ala-kam-ad-desc-text,
body.dark-ala-kam-theme .notif-text-time,
body.light-ala-kam-theme .ala-kam-row-meta,
body.light-ala-kam-theme .ala-kam-row-meta span,
body.light-ala-kam-theme .ala-kam-ad-meta-row,
body.light-ala-kam-theme .ala-kam-listing-description,
body.light-ala-kam-theme .ala-kam-ad-desc-text,
body.light-ala-kam-theme .notif-text-time { color: var(--theme-muted) !important; }

body.dark-ala-kam-theme .ala-kam-price-badge,
body.dark-ala-kam-theme .ala-kam-price-badge span,
body.dark-ala-kam-theme .ala-kam-ad-price-display,
body.dark-ala-kam-theme .my-ad-price-tag,
body.dark-ala-kam-theme .fav-price-tag,
body.light-ala-kam-theme .ala-kam-price-badge,
body.light-ala-kam-theme .ala-kam-price-badge span,
body.light-ala-kam-theme .ala-kam-ad-price-display,
body.light-ala-kam-theme .my-ad-price-tag,
body.light-ala-kam-theme .fav-price-tag { color: var(--theme-price-blue) !important; }
body.dark-ala-kam-theme .ala-kam-sar-mark,
body.light-ala-kam-theme .ala-kam-sar-mark { color: var(--theme-price-blue) !important; }

body.light-ala-kam-theme .main-header.ala-kam-topbar {
    background: rgba(255,255,255,.96) !important;
    border-bottom-color: rgba(8,122,85,.24) !important;
    box-shadow: 0 5px 18px rgba(20,50,39,.1) !important;
}
body.light-ala-kam-theme .ala-kam-nav-icon-btn,
body.light-ala-kam-theme .ala-kam-nav-pill-btn,
body.light-ala-kam-theme .ala-kam-user-pill {
    color: #123128 !important;
    background: #edf3f0 !important;
    border-color: #cadbd3 !important;
}
body.light-ala-kam-theme .ala-kam-dropdown-menu {
    color: var(--theme-text) !important;
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}
body.light-ala-kam-theme .ala-kam-dropdown-menu a { color: var(--theme-text) !important; }
body.dark-ala-kam-theme .ala-kam-wordmark,
body.light-ala-kam-theme .ala-kam-wordmark { color: var(--site-wordmark-green, #10b981) !important; }

body.dark-ala-kam-theme input,
body.dark-ala-kam-theme select,
body.dark-ala-kam-theme textarea,
body.dark-ala-kam-theme .form-control {
    color: var(--theme-text) !important;
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}
body.light-ala-kam-theme input,
body.light-ala-kam-theme select,
body.light-ala-kam-theme textarea,
body.light-ala-kam-theme .form-control {
    color: var(--theme-text) !important;
    background: #fff !important;
    border-color: var(--theme-border) !important;
}

/* ========================================================================== 
   FINAL MOBILE-FIRST PASS — public site (320px–767px)
   ========================================================================== */
@media (max-width: 767px) {
    html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
    body.marketplace-app { width: 100%; min-width: 0; overflow-x: hidden; }
    *, *::before, *::after { box-sizing: border-box; }
    img, video, iframe, canvas { max-width: 100%; }
    .container { width: 100% !important; max-width: 100% !important; padding-inline: 12px !important; }
    .app-main, .main-content { width: 100%; min-width: 0; padding-top: 12px !important; padding-bottom: 92px !important; }

    /* Compact, touch-friendly header */
    .main-header.ala-kam-topbar {
        width: 100% !important; height: 58px !important; margin: 0 !important;
        border-radius: 0 !important; top: 0; padding: 0 !important;
    }
    .main-header.ala-kam-topbar .header-container { height: 58px !important; min-height: 58px !important; padding-inline: 12px !important; gap: 8px; }
    .marketplace-brand, .logo-area { min-width: 0; flex: 1; }
    .ala-kam-brand-logo { min-width: 0; }
    .ala-kam-wordmark { font-size: 2.15rem !important; line-height: 1 !important; letter-spacing: 0 !important; }
    .ala-kam-header-actions { gap: 5px !important; flex: 0 0 auto; }
    .ala-kam-nav-icon-btn, .ala-kam-nav-pill-btn, .ala-kam-user-pill {
        width: 38px !important; min-width: 38px !important; height: 38px !important;
        padding: 0 !important; border-radius: 11px !important; justify-content: center !important;
    }
    .ala-kam-nav-pill-btn > span:not(.ala-kam-badge), .ala-kam-user-name, .header-btn-text { display: none !important; }
    .ala-kam-nav-pill-btn.accent-reg { display: none !important; }
    .ala-kam-user-avatar { width: 24px !important; height: 24px !important; }
    .ala-kam-dropdown-menu { position: fixed !important; top: 62px !important; right: 10px !important; left: 10px !important; width: auto !important; max-height: calc(100vh - 82px); overflow-y: auto; }

    /* Search and categories */
    .ala-kam-search-section { padding: 10px 0 7px !important; }
    .ala-kam-search-row { display: grid !important; grid-template-columns: minmax(0, 1fr) 46px !important; gap: 8px !important; padding: 0 !important; }
    .ala-kam-search-form { min-width: 0; width: 100%; }
    .ala-kam-search-input-group { width: 100%; min-width: 0; height: 46px !important; border-radius: 13px !important; }
    .ala-kam-search-input { min-width: 0; width: 100%; height: 46px !important; font-size: 16px !important; padding-inline: 12px !important; }
    .ala-kam-search-icon-btn { width: 45px !important; min-width: 45px; height: 44px !important; }
    .ala-kam-add-ad-btn { width: 46px !important; min-width: 46px; height: 46px !important; padding: 0 !important; justify-content: center; border-radius: 13px !important; }
    .ala-kam-add-ad-btn span { display: none; }
    .ala-kam-category-rail { padding: 7px 0 10px !important; }
    .ala-kam-category-scroll { width: 100%; gap: 7px !important; padding: 3px 0 7px !important; justify-content: safe center; scroll-snap-type: x proximity; }
    .ala-kam-cat-item { width: 76px; min-width: 76px !important; min-height: 94px !important; flex-basis: 76px; padding: 6px 5px !important; gap: 5px !important; scroll-snap-align: start; }
    .ala-kam-cat-icon { width: 42px !important; height: 42px !important; flex-basis: 42px !important; }
    .ala-kam-cat-title { max-width: 66px; font-size: .66rem !important; white-space: normal; overflow: visible; text-overflow: clip; }
    .ala-kam-subcat-scroll { padding-bottom: 5px; }
    .ala-kam-pill-filter { min-height: 38px; display: inline-flex; align-items: center; padding-inline: 13px; }

    /* Home feed cards */
    .ala-kam-feed-section { padding: 12px 0 26px !important; }
    .ala-kam-filter-header { margin-bottom: 10px; }
    .ala-kam-feed-title { font-size: 1rem !important; }
    .ala-kam-rows-feed { gap: 9px; }
    .ala-kam-row-card {
        display: grid !important; grid-template-columns: minmax(0, 1fr) 86px !important;
        min-height: 108px !important; width: 100%; gap: 10px !important;
        padding: 10px !important; border-radius: 15px !important; align-items: center !important;
    }
    .ala-kam-row-details { min-width: 0; width: 100%; padding: 0 !important; gap: 6px; }
    .ala-kam-row-title { min-width: 0; margin: 0 0 7px !important; font-size: .9rem !important; line-height: 1.45 !important; }
    .ala-kam-row-title a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .ala-kam-row-meta { min-width: 0; display: flex; flex-wrap: wrap; gap: 5px 9px !important; font-size: .66rem !important; line-height: 1.35; }
    .ala-kam-row-meta .seller { max-width: 95px; }
    .ala-kam-row-meta .seller-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .ala-kam-row-visual { width: 86px; display: flex !important; flex-direction: column-reverse; gap: 6px !important; align-items: center; }
    .ala-kam-row-thumb { width: 82px !important; height: 82px !important; min-width: 82px; padding: 5px !important; border-radius: 13px !important; }
    .ala-kam-price-badge { max-width: 86px; font-size: .82rem !important; line-height: 1; justify-content: center; }

    /* Ad details */
    .ala-kam-breadcrumb-bar { padding: 7px 0 !important; overflow: hidden; }
    .ala-kam-breadcrumb-links { overflow-x: auto; white-space: nowrap; font-size: .72rem; }
    .ala-kam-ad-page-container { display: block !important; width: 100%; }
    .ala-kam-ad-main-col, .ala-kam-ad-sidebar-col { width: 100%; min-width: 0; gap: 11px; }
    .ala-kam-ad-header-card { padding: 16px !important; border-radius: 16px !important; }
    .ala-kam-ad-main-title { font-size: 1.22rem !important; overflow-wrap: anywhere; }
    .ala-kam-ad-meta-row { gap: 8px 13px; font-size: .76rem; margin-bottom: 12px; }
    .ala-kam-ad-seller-row { margin-bottom: 12px; }
    .seller-info-left { min-width: 0; gap: 9px; }
    .seller-name-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .ala-kam-ad-price-display { font-size: 1.35rem !important; }
    .ala-kam-ad-desc-text { font-size: .9rem; line-height: 1.75; overflow-wrap: anywhere; }
    .ala-kam-ad-gallery-card { padding: 7px !important; border-radius: 15px !important; }
    .ala-kam-ad-main-img-wrapper { min-height: 230px; max-height: 72vh; border-radius: 12px; }
    .ala-kam-ad-main-img-wrapper img { width: 100%; min-height: 230px; max-height: 72vh; object-fit: contain !important; }
    .ala-kam-contact-badge-btn { right: 10px; bottom: 10px; height: 40px; padding-inline: 14px; font-size: .82rem; }
    .ala-kam-ad-actions-pill-bar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; border-radius: 13px; }
    .action-pill-item { min-height: 46px; padding: 9px 6px; font-size: .75rem; gap: 5px; border-bottom: 1px solid #2e2c40; }
    .ala-kam-ad-tags-bar { padding: 12px; gap: 7px; }
    .ala-kam-tag-pill { padding: 7px 12px; font-size: .75rem; }
    .owner-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px; }
    .owner-tool-card { min-height: 96px; padding: 13px 7px; }

    /* Accounts, favorites, notifications and content pages */
    .auth-container { width: calc(100% - 24px) !important; margin-inline: 12px !important; padding: 22px 16px !important; border-radius: 18px !important; }
    .auth-header h2 { font-size: 1.5rem !important; }
    .profile-page-container, .favs-page-container, .terms-page-container, .notif-page-container, .my-ads-page-container { width: 100%; padding-inline: 12px !important; padding-bottom: 28px !important; }
    .profile-hero-card { padding: 17px 14px !important; gap: 12px; border-radius: 16px !important; }
    .profile-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
    .profile-stat-box { min-height: 82px; padding: 11px 6px; }
    .profile-section-block, .terms-section-card, .favs-header-card { border-radius: 15px !important; }
    .profile-menu-item-dark { min-height: 64px; padding: 11px 13px; gap: 11px; }
    .profile-menu-icon-dark { width: 38px; height: 38px; }
    .terms-hero-card, .terms-section-card { padding: 17px 15px !important; }
    .terms-section-body { font-size: .88rem; overflow-wrap: anywhere; }
    .fav-card-item { display: grid !important; grid-template-columns: 96px minmax(0, 1fr); min-height: 110px; }
    .fav-img-wrapper { width: 96px; height: 100%; min-height: 110px; border-bottom: 0; }
    .fav-card-body { min-width: 0; padding: 11px 12px; }
    .fav-card-title { font-size: .84rem; }
    .fav-meta-row { flex-wrap: wrap; gap: 5px 9px; font-size: .7rem; }
    .my-ad-row-card { padding: 10px !important; gap: 9px; min-width: 0; }
    .my-ad-info { min-width: 0; }
    .my-ad-title { font-size: .88rem !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .my-ad-meta { flex-wrap: wrap; gap: 5px 9px; font-size: .68rem; }
    .my-ad-thumb-wrapper { width: 88px; height: 76px; }
    .notification-card, .notif-card-item { padding: 13px !important; min-width: 0; }

    /* Forms and tables */
    .form-control, input, select, textarea { max-width: 100%; font-size: 16px !important; }
    form [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    .btn, button, [role="button"] { min-height: 44px; }
    .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 620px; }

    /* Footer + persistent bottom navigation */
    .marketplace-footer { padding: 30px 0 98px !important; }
    .footer-container { display: grid !important; grid-template-columns: 1fr !important; gap: 24px !important; }
    .footer-section { width: 100%; }
    .mobile-bottom-nav {
        position: fixed; z-index: 1100; left: 8px !important; right: 8px !important; bottom: max(7px, env(safe-area-inset-bottom)) !important;
        width: auto !important; height: 66px !important; padding: 5px 6px !important;
        border-radius: 18px !important; display: flex !important;
    }
    .mobile-bottom-nav .nav-item { min-width: 0; min-height: 54px; padding: 4px 2px; font-size: .63rem; gap: 3px; }
    .mobile-bottom-nav .nav-item i { font-size: 1.08rem; }
    .mobile-bottom-nav .add-ad-nav-item { width: 48px !important; height: 48px !important; flex: 0 0 48px !important; transform: translateY(-9px); }
}

@media (max-width: 360px) {
    .container { padding-inline: 9px !important; }
    .ala-kam-wordmark { font-size: 1.9rem !important; }
    .ala-kam-header-actions { gap: 3px !important; }
    .ala-kam-nav-icon-btn, .ala-kam-nav-pill-btn, .ala-kam-user-pill { width: 35px !important; min-width: 35px !important; height: 35px !important; }
    .ala-kam-row-card { grid-template-columns: minmax(0, 1fr) 76px !important; padding: 8px !important; }
    .ala-kam-row-visual { width: 76px; }
    .ala-kam-row-thumb { width: 72px !important; min-width: 72px; height: 72px !important; }
    .ala-kam-row-meta .time { display: none; }
}

/* ========================================================================== 
   POLISHED LIGHT THEME — placed last to override legacy dark declarations
   ========================================================================== */
body.light-ala-kam-theme {
    --theme-page: #f3f7f5;
    --theme-surface: #ffffff;
    --theme-surface-raised: #eaf2ee;
    --theme-text: #14241f;
    --theme-muted: #60716a;
    --theme-border: #d7e2dc;
    --theme-title-green: #087a55;
    --theme-price-blue: #176fca;
    background: radial-gradient(850px 480px at 100% -100px, rgba(8,122,85,.09), transparent 67%), var(--theme-page) !important;
    color: var(--theme-text) !important;
}
body.light-ala-kam-theme .app-main,
body.light-ala-kam-theme .main-content,
body.light-ala-kam-theme .ala-kam-search-section,
body.light-ala-kam-theme .ala-kam-category-rail,
body.light-ala-kam-theme .ala-kam-feed-section,
body.light-ala-kam-theme .ala-kam-subcat-bar { background: transparent !important; }

body.light-ala-kam-theme .main-header.ala-kam-topbar {
    background: rgba(255,255,255,.96) !important;
    border-color: #dbe7e1 !important;
    border-bottom: 1px solid #d2e1da !important;
    box-shadow: 0 5px 20px rgba(20,54,42,.09) !important;
}
body.light-ala-kam-theme .ala-kam-wordmark { color: var(--site-wordmark-green, #10b981) !important; text-shadow: none; }
body.light-ala-kam-theme .ala-kam-nav-icon-btn,
body.light-ala-kam-theme .ala-kam-nav-pill-btn,
body.light-ala-kam-theme .ala-kam-user-pill {
    color: #163d30 !important;
    background: #edf4f0 !important;
    border-color: #cddfd6 !important;
}
body.light-ala-kam-theme .ala-kam-nav-icon-btn:hover,
body.light-ala-kam-theme .ala-kam-nav-pill-btn:hover,
body.light-ala-kam-theme .ala-kam-user-pill:hover { color: #065f46 !important; background: #dfeee7 !important; border-color: #9fc8b6 !important; }
body.light-ala-kam-theme .ala-kam-dropdown-menu { background: #fff !important; border-color: var(--theme-border) !important; box-shadow: 0 16px 38px rgba(20,54,42,.14) !important; }
body.light-ala-kam-theme .ala-kam-dropdown-menu a,
body.light-ala-kam-theme .user-menu-title { color: var(--theme-text) !important; }
body.light-ala-kam-theme .ala-kam-dropdown-menu a:hover { color: #087a55 !important; background: #edf7f2 !important; }

body.light-ala-kam-theme .ala-kam-search-input-group {
    background: #fff !important; border-color: #ceddd5 !important;
    box-shadow: 0 4px 14px rgba(20,54,42,.06) !important;
}
body.light-ala-kam-theme .ala-kam-search-input { color: #172721 !important; background: transparent !important; }
body.light-ala-kam-theme .ala-kam-search-input::placeholder { color: #82918b !important; }
body.light-ala-kam-theme .ala-kam-search-icon-btn { color: #087a55 !important; background: #e7f2ec !important; }
body.light-ala-kam-theme .ala-kam-add-ad-btn,
body.light-ala-kam-theme .btn-primary,
body.light-ala-kam-theme .btn-success {
    color: #10231d !important;
    background: linear-gradient(135deg, #ffe8a8, #e4b44f) !important;
    border-color: #d5a139 !important;
}

body.light-ala-kam-theme .ala-kam-cat-item {
    color: var(--theme-text) !important;
    background: rgba(255,255,255,.9) !important;
    border-color: #d8e3dd !important;
    box-shadow: 0 4px 13px rgba(20,54,42,.06) !important;
}
body.light-ala-kam-theme .ala-kam-cat-item:hover { background: #fff !important; border-color: #8ebba7 !important; box-shadow: 0 8px 20px rgba(20,54,42,.11) !important; }
body.light-ala-kam-theme .ala-kam-cat-item.active { background: #e2f2ea !important; border-color: #b98a2f !important; box-shadow: 0 6px 17px rgba(20,90,65,.12) !important; }
body.light-ala-kam-theme .ala-kam-cat-icon {
    background: linear-gradient(145deg, #f8fbfa, #e8f0ec) !important;
    border-color: #d0a74f !important;
}
body.light-ala-kam-theme .ala-kam-cat-icon::before { background: radial-gradient(circle at 34% 26%, #15936a, #087a55 68%, #056044) !important; }
body.light-ala-kam-theme .ala-kam-cat-title { color: #42554d !important; }
body.light-ala-kam-theme .ala-kam-cat-item.active .ala-kam-cat-title { color: #075f43 !important; }
body.light-ala-kam-theme .ala-kam-pill-filter { color: #52645c !important; background: #fff !important; border-color: #d5e1db !important; }
body.light-ala-kam-theme .ala-kam-pill-filter.active,
body.light-ala-kam-theme .ala-kam-pill-filter:hover { color: #fff !important; background: #087a55 !important; border-color: #087a55 !important; }

body.light-ala-kam-theme .ala-kam-row-card,
body.light-ala-kam-theme .ad-card,
body.light-ala-kam-theme .ad-card-enhanced,
body.light-ala-kam-theme .user-ad-card,
body.light-ala-kam-theme .my-ad-row-card,
body.light-ala-kam-theme .fav-card-item,
body.light-ala-kam-theme .notification-card,
body.light-ala-kam-theme .notif-card-item,
body.light-ala-kam-theme .profile-card,
body.light-ala-kam-theme .profile-stat-box,
body.light-ala-kam-theme .profile-section-block,
body.light-ala-kam-theme .terms-section-card,
body.light-ala-kam-theme .auth-container {
    color: var(--theme-text) !important;
    background: #fff !important;
    border-color: var(--theme-border) !important;
    box-shadow: 0 5px 17px rgba(20,54,42,.065) !important;
}
body.light-ala-kam-theme .ala-kam-row-card:hover,
body.light-ala-kam-theme .ad-card:hover,
body.light-ala-kam-theme .fav-card-item:hover { border-color: #9cc8b5 !important; box-shadow: 0 10px 24px rgba(20,54,42,.11) !important; }
body.light-ala-kam-theme .ala-kam-row-thumb,
body.light-ala-kam-theme .ala-kam-listing-media,
body.light-ala-kam-theme .user-ad-card-img,
body.light-ala-kam-theme .fav-img-wrapper,
body.light-ala-kam-theme .my-ad-thumb-wrapper {
    background: linear-gradient(145deg, #f7faf8, #e8f0ec) !important;
    border-color: #d5b568 !important;
}
body.light-ala-kam-theme .ala-kam-row-title a,
body.light-ala-kam-theme .ala-kam-ad-main-title,
body.light-ala-kam-theme .my-ad-title { color: var(--theme-title-green) !important; }
body.light-ala-kam-theme .ala-kam-row-card.is-viewed .ala-kam-row-title a { color: #7c3aed !important; }
body.light-ala-kam-theme .ala-kam-row-meta,
body.light-ala-kam-theme .ala-kam-row-meta span,
body.light-ala-kam-theme .ala-kam-ad-meta-row,
body.light-ala-kam-theme .my-ad-meta,
body.light-ala-kam-theme .fav-meta-row { color: var(--theme-muted) !important; }
body.light-ala-kam-theme .ala-kam-price-badge,
body.light-ala-kam-theme .ala-kam-price-badge span,
body.light-ala-kam-theme .ala-kam-ad-price-display,
body.light-ala-kam-theme .my-ad-price-tag,
body.light-ala-kam-theme .fav-price-tag { color: var(--theme-price-blue) !important; background: transparent !important; }

body.light-ala-kam-theme .ala-kam-ad-header-card,
body.light-ala-kam-theme .ala-kam-ad-gallery-card,
body.light-ala-kam-theme .ala-kam-ad-actions-pill-bar,
body.light-ala-kam-theme .ala-kam-ad-tags-bar,
body.light-ala-kam-theme .ala-kam-follow-similar-card,
body.light-ala-kam-theme .owner-tool-card,
body.light-ala-kam-theme .owner-promo-banner-card,
body.light-ala-kam-theme .ad-comments-card {
    color: var(--theme-text) !important; background: #fff !important;
    border-color: var(--theme-border) !important; box-shadow: 0 5px 18px rgba(20,54,42,.07) !important;
}
body.light-ala-kam-theme .ala-kam-ad-main-img-wrapper { background: #edf3f0 !important; }
body.light-ala-kam-theme .ala-kam-ad-desc-text,
body.light-ala-kam-theme .terms-section-body,
body.light-ala-kam-theme .ad-comment-content p { color: #485b53 !important; }
body.light-ala-kam-theme .action-pill-item { color: #42574e !important; border-color: var(--theme-border) !important; }
body.light-ala-kam-theme .action-pill-item:hover { color: #087a55 !important; background: #edf7f2 !important; }
body.light-ala-kam-theme .ala-kam-tag-pill { color: #50625a !important; background: #edf3f0 !important; border-color: #d6e2dc !important; }

body.light-ala-kam-theme input,
body.light-ala-kam-theme select,
body.light-ala-kam-theme textarea,
body.light-ala-kam-theme .form-control {
    color: #172721 !important; background-color: #fff !important;
    border-color: #cddbd4 !important; box-shadow: none !important;
}
body.light-ala-kam-theme input:focus,
body.light-ala-kam-theme select:focus,
body.light-ala-kam-theme textarea:focus,
body.light-ala-kam-theme .form-control:focus { border-color: #17845f !important; box-shadow: 0 0 0 4px rgba(8,122,85,.12) !important; }

body.light-ala-kam-theme .mobile-bottom-nav {
    color: #53655d !important; background: rgba(255,255,255,.96) !important;
    border-color: #d4e1da !important; box-shadow: 0 10px 28px rgba(20,54,42,.14) !important;
}
body.light-ala-kam-theme .mobile-bottom-nav .nav-item { color: #65766f !important; }
body.light-ala-kam-theme .mobile-bottom-nav .nav-item.active,
body.light-ala-kam-theme .mobile-bottom-nav .nav-item.active i { color: #087a55 !important; }
body.light-ala-kam-theme .marketplace-footer { background: #e8f0ec !important; color: #263d34 !important; }
body.light-ala-kam-theme .marketplace-footer h3,
body.light-ala-kam-theme .marketplace-footer h4 { color: #075f43 !important; }
body.light-ala-kam-theme .marketplace-footer p,
body.light-ala-kam-theme .marketplace-footer a { color: #53665e !important; }
body.light-ala-kam-theme .footer-bottom { color: #607169 !important; border-color: #ceddd5 !important; }

/* Notifications center — coherent cards and correct light/dark contrast. */
.notif-page-container { width: min(100%, 820px); }
.notif-header-card { align-items: center; }
.notif-page-title { line-height: 1.35; }
.notif-page-title i { color: #31d69c !important; }
.notif-page-subtitle { line-height: 1.7; }
.notif-mark-all { min-height: 42px; padding-inline: 16px !important; }
.notif-tabs-bar { scrollbar-width: none; }
.notif-tabs-bar::-webkit-scrollbar { display: none; }
.notif-card-main { min-width: 0; }
.notif-card-main > div:last-child { min-width: 0; flex: 1; }
.notif-text-msg { overflow-wrap: anywhere; }
.notif-empty-state { box-shadow: none; }

body.dark-ala-kam-theme .notif-header-card,
body.dark-ala-kam-theme .notif-card-item,
body.dark-ala-kam-theme .notif-empty-state {
    color: #f8fafc !important; background: #0b1f38 !important;
    border-color: rgba(228,180,79,.2) !important;
}
body.dark-ala-kam-theme .notif-page-title,
body.dark-ala-kam-theme .notif-text-msg,
body.dark-ala-kam-theme .notif-card-item p,
body.dark-ala-kam-theme .notif-empty-state h3 { color: #f8fafc !important; }
body.dark-ala-kam-theme .notif-page-subtitle,
body.dark-ala-kam-theme .notif-text-time { color: #a9b8c8 !important; }
body.dark-ala-kam-theme .notif-tab-pill { color: #c8d5df !important; background: #102943 !important; border-color: #29435b !important; }
body.dark-ala-kam-theme .notif-tab-pill.active,
body.dark-ala-kam-theme .notif-tab-pill:hover { color: #071426 !important; background: #31d69c !important; border-color: #31d69c !important; }
body.dark-ala-kam-theme .notif-mark-all { color: #071426 !important; background: linear-gradient(135deg,#ffe39a,#e4b44f) !important; }
body.dark-ala-kam-theme .notif-card-item.unread { background: #102943 !important; border-color: #31d69c !important; box-shadow: 0 5px 18px rgba(49,214,156,.1) !important; }
body.dark-ala-kam-theme .notif-card-item.unread::before { background: #31d69c !important; }
body.dark-ala-kam-theme .notif-action-btn { color: #b9c7d3 !important; background: #102943 !important; border-color: #2a435a !important; }

body.light-ala-kam-theme .notif-header-card,
body.light-ala-kam-theme .notif-card-item,
body.light-ala-kam-theme .notif-empty-state {
    color: #14241f !important; background: #fff !important;
    border-color: #d7e2dc !important; box-shadow: 0 5px 17px rgba(20,54,42,.065) !important;
}
body.light-ala-kam-theme .notif-page-title,
body.light-ala-kam-theme .notif-text-msg,
body.light-ala-kam-theme .notif-card-item p,
body.light-ala-kam-theme .notif-empty-state h3 { color: #14241f !important; }
body.light-ala-kam-theme .notif-page-subtitle,
body.light-ala-kam-theme .notif-text-time { color: #60716a !important; }
body.light-ala-kam-theme .notif-tab-pill { color: #50625a !important; background: #fff !important; border-color: #d5e1db !important; }
body.light-ala-kam-theme .notif-tab-pill.active,
body.light-ala-kam-theme .notif-tab-pill:hover { color: #fff !important; background: #087a55 !important; border-color: #087a55 !important; }
body.light-ala-kam-theme .notif-mark-all { color: #fff !important; background: #087a55 !important; border-color: #087a55 !important; }
body.light-ala-kam-theme .notif-card-item.unread { background: #edf8f2 !important; border-color: #45a983 !important; box-shadow: 0 5px 17px rgba(8,122,85,.1) !important; }
body.light-ala-kam-theme .notif-card-item.unread::before { background: #087a55 !important; }
body.light-ala-kam-theme .notif-action-btn { color: #52645c !important; background: #f1f5f3 !important; border-color: #d5e1db !important; }
body.light-ala-kam-theme .notif-action-btn:hover { color: #087a55 !important; background: #e4f2eb !important; }

@media (max-width: 767px) {
    .notif-page-container { margin-top: 4px !important; padding-inline: 10px !important; }
    .notif-header-card { align-items: flex-start; padding: 16px !important; margin-bottom: 12px; border-radius: 15px !important; }
    .notif-page-title { font-size: 1.12rem !important; }
    .notif-page-subtitle { font-size: .78rem !important; }
    .notif-mark-all { width: 100%; justify-content: center; margin-top: 3px; }
    .notif-tabs-bar { gap: 6px; margin-bottom: 12px; padding-bottom: 4px; }
    .notif-tab-pill { min-height: 38px; padding: 7px 12px; font-size: .74rem; border-radius: 10px; }
    .notif-card-item { display: grid !important; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px !important; padding: 12px !important; border-radius: 14px !important; }
    .notif-card-main { gap: 9px !important; align-items: center !important; }
    .notif-icon-badge { width: 38px; height: 38px; border-radius: 11px; font-size: 1rem; }
    .notif-text-msg { margin: 0 0 5px !important; font-size: .82rem !important; line-height: 1.55; }
    .notif-text-time { font-size: .68rem; }
    .notif-card-actions { margin-right: 0 !important; gap: 4px !important; }
    .notif-action-btn { width: 34px; min-width: 34px; height: 34px; min-height: 34px !important; border-radius: 9px; }
    .notif-card-item.unread::before { top: 9px; right: 5px; width: 5px; height: 5px; }
    .notif-empty-state { padding: 40px 15px !important; border-radius: 15px !important; }
}

/* ==========================================================================
   SITE-WIDE LIGHT MODE — single authoritative layer
   ========================================================================== */
body.light-ala-kam-theme {
    --light-page: #f6f8f7;
    --light-surface: #ffffff;
    --light-surface-soft: #eef4f1;
    --light-surface-hover: #e5f1eb;
    --light-text: #17251f;
    --light-text-soft: #52635b;
    --light-text-faint: #728078;
    --light-line: #d8e2dc;
    --light-line-strong: #bfd2c8;
    --light-green: #087a55;
    --light-green-dark: #056044;
    --light-gold: #e4b44f;
    --light-price: #176fca;
    --light-danger: #c7374f;
    --light-shadow: 0 5px 18px rgba(24, 56, 44, .07);
    --light-shadow-hover: 0 10px 26px rgba(24, 56, 44, .12);
    background: radial-gradient(900px 520px at 100% -120px, rgba(8, 122, 85, .075), transparent 68%), var(--light-page) !important;
    color: var(--light-text) !important;
}

/* Page canvas and readable typography */
body.light-ala-kam-theme .app-main,
body.light-ala-kam-theme .main-content,
body.light-ala-kam-theme .page-rendered-content,
body.light-ala-kam-theme .ala-kam-search-section,
body.light-ala-kam-theme .ala-kam-category-rail,
body.light-ala-kam-theme .ala-kam-feed-section,
body.light-ala-kam-theme .ala-kam-subcat-bar,
body.light-ala-kam-theme .ala-kam-breadcrumb-bar { background-color: transparent !important; color: var(--light-text) !important; }
body.light-ala-kam-theme .ala-kam-feed-title,
body.light-ala-kam-theme .auth-header h2,
body.light-ala-kam-theme .fees-card-title,
body.light-ala-kam-theme .terms-section-title,
body.light-ala-kam-theme .profile-section-header,
body.light-ala-kam-theme .profile-menu-label-dark span,
body.light-ala-kam-theme .similar-card-header,
body.light-ala-kam-theme .modal-content h2,
body.light-ala-kam-theme .modal-content h3 { color: var(--light-text) !important; }
body.light-ala-kam-theme .auth-header p,
body.light-ala-kam-theme .profile-menu-label-dark small,
body.light-ala-kam-theme .terms-section-body,
body.light-ala-kam-theme .ala-kam-empty-state,
body.light-ala-kam-theme .empty-state,
body.light-ala-kam-theme .no-images-text { color: var(--light-text-soft) !important; }

/* Every main surface follows the same material and elevation. */
body.light-ala-kam-theme .fees-card,
body.light-ala-kam-theme .fees-stat-box,
body.light-ala-kam-theme .fees-calc-result-box,
body.light-ala-kam-theme .fees-bank-box,
body.light-ala-kam-theme .fees-history-item,
body.light-ala-kam-theme .favs-header-card,
body.light-ala-kam-theme .profile-stat-box,
body.light-ala-kam-theme .profile-section-block,
body.light-ala-kam-theme .terms-section-card,
body.light-ala-kam-theme .my-ads-top-tabs-bar,
body.light-ala-kam-theme .my-ad-row-card,
body.light-ala-kam-theme .similar-item-card,
body.light-ala-kam-theme .ala-kam-similar-offers-card,
body.light-ala-kam-theme .ala-kam-follow-similar-card,
body.light-ala-kam-theme .ala-kam-drawer-panel,
body.light-ala-kam-theme .modal-content,
body.light-ala-kam-theme .empty-state,
body.light-ala-kam-theme .ala-kam-empty-state,
body.light-ala-kam-theme .chat-wrapper,
body.light-ala-kam-theme .chat-sidebar,
body.light-ala-kam-theme .chat-content,
body.light-ala-kam-theme .chat-header,
body.light-ala-kam-theme .chat-input-footer {
    color: var(--light-text) !important;
    background: var(--light-surface) !important;
    border-color: var(--light-line) !important;
    box-shadow: var(--light-shadow) !important;
}

/* Branded hero cards remain light, with a restrained identity accent. */
body.light-ala-kam-theme .fees-hero-card,
body.light-ala-kam-theme .profile-hero-card {
    color: var(--light-text) !important;
    background: linear-gradient(135deg, #ffffff 0%, #e7f3ed 100%) !important;
    border: 1px solid var(--light-line-strong) !important;
    box-shadow: var(--light-shadow) !important;
}
body.light-ala-kam-theme .fees-hero-card h1,
body.light-ala-kam-theme .profile-hero-card h2,
body.light-ala-kam-theme .profile-hero-card strong { color: var(--light-text) !important; }
body.light-ala-kam-theme .fees-hero-card p,
body.light-ala-kam-theme .profile-hero-card p { color: var(--light-text-soft) !important; }

/* Light theme terms hero card - premium blue brand banner with white text */
body.light-ala-kam-theme .terms-hero-card {
    background: linear-gradient(135deg, #1073c0 0%, #1a3c5c 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(16, 115, 192, 0.3) !important;
    box-shadow: 0 8px 24px rgba(16, 115, 192, 0.15) !important;
}
body.light-ala-kam-theme .terms-hero-card h1 {
    color: #ffffff !important;
}
body.light-ala-kam-theme .terms-hero-card p {
    color: #ffffff !important;
}
body.light-ala-kam-theme .terms-hero-card .terms-meta-info span {
    color: rgba(255, 255, 255, 0.85) !important;
}
body.light-ala-kam-theme .terms-hero-card .terms-meta-info span i {
    color: #38bdf8 !important;
}

/* Profile, favourites and personal ads */
body.light-ala-kam-theme .profile-section-header { background: var(--light-surface-soft) !important; border-color: var(--light-line) !important; }
body.light-ala-kam-theme .profile-menu-item-dark { color: var(--light-text) !important; border-color: var(--light-line) !important; }
body.light-ala-kam-theme .profile-menu-item-dark:hover { background: var(--light-surface-hover) !important; }
body.light-ala-kam-theme .profile-menu-icon-dark,
body.light-ala-kam-theme .profile-menu-badge-dark { color: var(--light-green) !important; background: #e4f1ea !important; border-color: #c7ddd2 !important; }
body.light-ala-kam-theme .favs-header-card h2,
body.light-ala-kam-theme .favs-header-card span,
body.light-ala-kam-theme .fav-card-title,
body.light-ala-kam-theme .my-ad-row-card strong { color: var(--light-text) !important; }
body.light-ala-kam-theme .my-ads-top-tabs-bar .tab-item { color: var(--light-text-soft) !important; }
body.light-ala-kam-theme .my-ads-top-tabs-bar .tab-item:hover,
body.light-ala-kam-theme .my-ads-top-tabs-bar .tab-item.active { color: var(--light-green) !important; }
body.light-ala-kam-theme .my-ads-top-tabs-bar .tab-item.active::after { background: var(--light-green) !important; }
body.light-ala-kam-theme .my-ad-row-card:hover,
body.light-ala-kam-theme .similar-item-card:hover { background: #fbfdfc !important; border-color: #9fc6b3 !important; box-shadow: var(--light-shadow-hover) !important; }
body.light-ala-kam-theme .similar-title { color: var(--light-green) !important; }
body.light-ala-kam-theme .similar-thumb { background: var(--light-surface-soft) !important; color: var(--light-text-faint) !important; }
body.light-ala-kam-theme .similar-tab-pill { color: var(--light-text-soft) !important; background: var(--light-surface-soft) !important; border-color: var(--light-line) !important; }
body.light-ala-kam-theme .similar-tab-pill.active { color: #fff !important; background: var(--light-green) !important; border-color: var(--light-green) !important; }

/* Fees, bank details and forms */
body.light-ala-kam-theme .fees-bank-row { color: var(--light-text-soft) !important; border-color: var(--light-line) !important; }
body.light-ala-kam-theme .fees-bank-row strong,
body.light-ala-kam-theme .fees-history-item strong,
body.light-ala-kam-theme .fees-card label { color: var(--light-text) !important; }
body.light-ala-kam-theme .fees-form-control,
body.light-ala-kam-theme .ala-kam-wizard-input,
body.light-ala-kam-theme .ala-kam-wizard-input-readonly {
    color: var(--light-text) !important;
    background: #fbfdfc !important;
    border-color: var(--light-line-strong) !important;
}
body.light-ala-kam-theme .fees-form-control:focus,
body.light-ala-kam-theme .ala-kam-wizard-input:focus { border-color: var(--light-green) !important; box-shadow: 0 0 0 4px rgba(8,122,85,.11) !important; }
body.light-ala-kam-theme .fees-submit-btn,
body.light-ala-kam-theme .btn-ala-kam-blue,
body.light-ala-kam-theme .btn-ala-kam-blue-sm,
body.light-ala-kam-theme .btn-ala-kam-blue-lg,
body.light-ala-kam-theme .tab-add-btn { color: #fff !important; background: var(--light-green) !important; border-color: var(--light-green) !important; }
body.light-ala-kam-theme .fees-submit-btn:hover,
body.light-ala-kam-theme .btn-ala-kam-blue:hover,
body.light-ala-kam-theme .btn-ala-kam-blue-sm:hover,
body.light-ala-kam-theme .btn-ala-kam-blue-lg:hover { background: var(--light-green-dark) !important; }

/* Add-ad wizard */
body.light-ala-kam-theme .ala-kam-wizard-card { color: var(--light-text) !important; background: var(--light-surface) !important; border-color: var(--light-line) !important; box-shadow: var(--light-shadow-hover) !important; }
body.light-ala-kam-theme .wizard-header,
body.light-ala-kam-theme .wizard-cat-row,
body.light-ala-kam-theme .quran-verse { border-color: var(--light-line) !important; }
body.light-ala-kam-theme .wizard-cat-row:hover { background: var(--light-surface-hover) !important; }
body.light-ala-kam-theme .wizard-cat-right,
body.light-ala-kam-theme .wizard-cat-right span,
body.light-ala-kam-theme .wizard-arrow-left,
body.light-ala-kam-theme .cloud-icon,
body.light-ala-kam-theme .fee-notice-green { color: var(--light-green) !important; }
body.light-ala-kam-theme .upload-notice-pill { color: var(--light-green-dark) !important; background: #e8f4ee !important; border-color: #bdd9cb !important; }
body.light-ala-kam-theme .wizard-dropzone { color: var(--light-text) !important; background: #f8fbf9 !important; border-color: #77af93 !important; }
body.light-ala-kam-theme .wizard-dropzone:hover { background: #edf7f2 !important; }
body.light-ala-kam-theme .dropzone-or,
body.light-ala-kam-theme .dropzone-sub { color: var(--light-text-faint) !important; }
body.light-ala-kam-theme .slider { background: #aebbb5 !important; }
body.light-ala-kam-theme input:checked + .slider { background: var(--light-green) !important; }

/* Dialogs, drawers, pagination, alerts and controls */
body.light-ala-kam-theme .modal-overlay { background: rgba(15, 31, 25, .48) !important; }
body.light-ala-kam-theme .ala-kam-filter-btn,
body.light-ala-kam-theme .ala-kam-page-btn,
body.light-ala-kam-theme .notif-action-btn,
body.light-ala-kam-theme .btn-outline { color: var(--light-text-soft) !important; background: var(--light-surface) !important; border-color: var(--light-line) !important; }
body.light-ala-kam-theme .ala-kam-filter-btn:hover,
body.light-ala-kam-theme .ala-kam-page-btn:hover,
body.light-ala-kam-theme .ala-kam-page-btn.active,
body.light-ala-kam-theme .notif-action-btn:hover { color: #fff !important; background: var(--light-green) !important; border-color: var(--light-green) !important; }
body.light-ala-kam-theme .alert-success { color: #12694f !important; background: #e8f8f2 !important; border-color: #b9e2d2 !important; }
body.light-ala-kam-theme .alert-danger { color: #a92840 !important; background: #fff0f2 !important; border-color: #f0c2ca !important; }
body.light-ala-kam-theme .alert-warning { color: #86580e !important; background: #fff7e5 !important; border-color: #ecd395 !important; }
body.light-ala-kam-theme table { color: var(--light-text) !important; background: var(--light-surface) !important; }
body.light-ala-kam-theme th { color: var(--light-green-dark) !important; background: var(--light-surface-soft) !important; border-color: var(--light-line) !important; }
body.light-ala-kam-theme td { color: var(--light-text-soft) !important; border-color: var(--light-line) !important; }

/* Chat needs its own canvas because legacy chat.css is permanently dark. */
body.light-ala-kam-theme .chat-messages-container { color: var(--light-text) !important; background-color: #f4f8f6 !important; background-image: radial-gradient(rgba(8,122,85,.08) 1px, transparent 1px) !important; }
body.light-ala-kam-theme .conversation-item { color: var(--light-text) !important; border-color: var(--light-line) !important; }
body.light-ala-kam-theme .conversation-item:hover,
body.light-ala-kam-theme .conversation-item.active { background: #e4f1ea !important; }
body.light-ala-kam-theme .message-bubble:not(.sent) { color: var(--light-text) !important; background: #fff !important; border-color: var(--light-line) !important; }

/* Inline legacy dark colours on public pages must not defeat light mode. */
body.light-ala-kam-theme .profile-page-container [style*="color: #ffffff"],
body.light-ala-kam-theme .profile-page-container [style*="color:#ffffff"],
body.light-ala-kam-theme .favs-page-container [style*="color: #ffffff"],
body.light-ala-kam-theme .fees-page-container [style*="color: #ffffff"],
body.light-ala-kam-theme .terms-page-container [style*="color: #ffffff"],
body.light-ala-kam-theme .my-ads-page-container [style*="color: #ffffff"],
body.light-ala-kam-theme .notif-page-container [style*="color: #ffffff"] { color: var(--light-text) !important; }
body.light-ala-kam-theme .profile-page-container [style*="background: #1b1a26"],
body.light-ala-kam-theme .favs-page-container [style*="background: #1b1a26"],
body.light-ala-kam-theme .favs-page-container [style*="background: #1e1d2c"],
body.light-ala-kam-theme .my-ads-page-container [style*="background: #1e1d2c"],
body.light-ala-kam-theme .notif-page-container [style*="background: #1e1d2c"] { background: var(--light-surface) !important; border-color: var(--light-line) !important; color: var(--light-text-soft) !important; }

@media (max-width: 767px) {
    body.light-ala-kam-theme .fees-card,
    body.light-ala-kam-theme .fees-hero-card,
    body.light-ala-kam-theme .terms-hero-card,
    body.light-ala-kam-theme .profile-hero-card,
    body.light-ala-kam-theme .ala-kam-wizard-card { box-shadow: 0 3px 12px rgba(24,56,44,.065) !important; }
    body.light-ala-kam-theme .ala-kam-wizard-wrapper { margin-top: 14px !important; }

    /* Borderless mobile navigation, including the raised add button. */
    .mobile-bottom-nav { border: 0 !important; }
    .mobile-bottom-nav .add-ad-nav-item { border: 0 !important; }
}

/* Profile hub — clean identity card, useful stats and touch-friendly menus. */
.profile-page-container { width: min(100%, 820px); padding-inline: 16px; }
.profile-hero-card { isolation: isolate; min-height: 132px; }
.profile-hero-card::after {
    content: ""; position: absolute; z-index: -1; width: 210px; height: 210px;
    left: -75px; bottom: -125px; border: 1px solid rgba(228,180,79,.2);
    border-radius: 50%; box-shadow: 0 0 0 38px rgba(228,180,79,.035);
}
.profile-avatar-wrap { position: relative; flex: 0 0 auto; }
.profile-avatar {
    width: 78px; height: 78px; display: grid; place-items: center; object-fit: cover;
    border: 3px solid #e4b44f; border-radius: 24px; background: #102943;
    color: #31d69c; font-size: 2rem; box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
.profile-identity { flex: 1; min-width: 0; }
.profile-name { margin: 0 0 5px; overflow: hidden; color: #fff !important; font-size: 1.38rem; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.profile-contact-line { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 0 0 9px; color: #cbd5e1 !important; font-size: .82rem; overflow-wrap: anywhere; }
.profile-contact-line i { color: #31d69c !important; }
.profile-member-since { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; color: #ffe09a; background: rgba(6,20,38,.42); border: 1px solid rgba(228,180,79,.24); border-radius: 999px; font-size: .73rem; font-weight: 700; }
.profile-edit-action { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 42px; color: #ffe09a; background: rgba(6,20,38,.55); border: 1px solid rgba(228,180,79,.3); border-radius: 13px; text-decoration: none; transition: transform .18s, background .18s; }
.profile-edit-action i { color: inherit !important; }
.profile-edit-action:hover { color: #071426; background: #e4b44f; transform: translateY(-2px); }
.profile-stat-box { min-height: 94px; display: grid; place-content: center; gap: 3px; }
.profile-stat-value { font-size: 1.5rem; font-weight: 900; line-height: 1.1; }
.profile-stat-value.stat-ads { color: #4b9df8; }
.profile-stat-value.stat-active { color: #31d69c; }
.profile-stat-value.stat-favorites { color: #fb7185; }
.profile-stat-value.stat-messages { color: #c084fc; }
.profile-stat-label { color: #a9b8c8; font-size: .75rem; font-weight: 700; }
.profile-menu-list { display: flex; flex-direction: column; }
.profile-menu-item-dark { min-height: 72px; }
.profile-menu-item-dark > .fa-chevron-left { flex: 0 0 auto; }
.profile-logout-action { justify-content: center; min-height: 54px; color: #fb7185 !important; background: rgba(239,68,68,.09) !important; border: 1px solid rgba(239,68,68,.28) !important; border-radius: 16px !important; font-size: .95rem; font-weight: 800; }
.profile-logout-action:hover { background: rgba(239,68,68,.16) !important; }

body.light-ala-kam-theme .profile-avatar { color: #087a55; background: #edf5f1; border-color: #d0a74f; box-shadow: 0 7px 18px rgba(20,54,42,.12); }
body.light-ala-kam-theme .profile-name { color: var(--light-text) !important; }
body.light-ala-kam-theme .profile-contact-line { color: var(--light-text-soft) !important; }
body.light-ala-kam-theme .profile-member-since { color: #755313; background: #fff7df; border-color: #e6cc8c; }
body.light-ala-kam-theme .profile-edit-action { color: #087a55; background: #e4f1ea; border-color: #bdd7ca; }
body.light-ala-kam-theme .profile-edit-action:hover { color: #fff; background: #087a55; }
body.light-ala-kam-theme .profile-stat-label { color: var(--light-text-soft); }
body.light-ala-kam-theme .profile-stat-value.stat-ads { color: #176fca; }
body.light-ala-kam-theme .profile-stat-value.stat-active { color: #087a55; }
body.light-ala-kam-theme .profile-stat-value.stat-favorites { color: #c7374f; }
body.light-ala-kam-theme .profile-stat-value.stat-messages { color: #7c3aed; }

@media (max-width: 600px) {
    .profile-page-container { padding-inline: 10px !important; }
    .profile-hero-card { display: grid !important; grid-template-columns: 62px minmax(0,1fr) 38px; gap: 11px !important; min-height: 112px; }
    .profile-avatar { width: 62px; height: 62px; border-radius: 19px; font-size: 1.55rem; }
    .profile-edit-action { width: 38px; height: 38px; flex-basis: 38px; border-radius: 11px; }
    .profile-name { font-size: 1.08rem !important; }
    .profile-contact-line { font-size: .7rem; line-height: 1.55; }
    .profile-member-since { padding: 4px 8px; font-size: .65rem; }
    .profile-stats-grid { gap: 7px !important; }
    .profile-stat-box { min-height: 78px; padding: 9px 4px; border-radius: 13px !important; }
    .profile-stat-value { font-size: 1.2rem; }
    .profile-stat-label { font-size: .66rem; }
    .profile-menu-item-dark { min-height: 66px; padding: 11px 12px; gap: 10px; }
    .profile-menu-label-dark small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .profile-menu-badge-dark { padding-inline: 7px; font-size: .68rem; }
}


/* PWA Install Modal (Mobile Only) */
.pwa-install-modal {
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    background: var(--theme-surface, #fff);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
    padding: 24px 20px 30px;
    z-index: 99999;
    transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.pwa-install-modal.show {
    bottom: 0;
}
.pwa-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pwa-modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--theme-text);
}
.pwa-close-btn {
    background: none;
    border: none;
    color: var(--theme-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
}
.pwa-modal-body {
    display: flex;
    align-items: center;
    gap: 15px;
}
.pwa-modal-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.pwa-modal-text p {
    margin: 0;
    color: var(--theme-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}
.pwa-install-btn {
    background: linear-gradient(135deg, var(--primary-color), #0a685a);
    color: white;
    border: none;
    border-radius: 14px;
    padding: 12px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    width: 100%;
    margin-top: 5px;
}
.pwa-ios-instructions {
    display: none;
    background: var(--theme-page);
    padding: 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    color: var(--theme-text);
    text-align: center;
    line-height: 1.6;
}
.pwa-ios-instructions img, .pwa-ios-instructions i {
    vertical-align: middle;
    margin: 0 4px;
}

/* Premium Glassmorphic Empty State */
.ala-kam-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 30px;
    background: linear-gradient(135deg, rgba(30, 29, 44, 0.6), rgba(17, 16, 25, 0.8)) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 24px !important;
    margin: 40px auto !important;
    max-width: 600px !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
    position: relative;
    overflow: hidden;
    animation: fadeInUpEmpty 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.ala-kam-empty-state::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.05) 0%, transparent 70%);
    pointer-events: none;
}
.ala-kam-empty-state i {
    font-size: 4rem !important;
    color: #10b981 !important;
    background: rgba(16, 185, 129, 0.1) !important;
    width: 100px !important;
    height: 100px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    margin-bottom: 24px !important;
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.2) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
    animation: floatIcon 3s ease-in-out infinite !important;
}
.ala-kam-empty-state h3 {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    font-family: 'Cairo', sans-serif !important;
}
.ala-kam-empty-state p {
    font-size: 0.95rem !important;
    color: #94a3b8 !important;
    margin-bottom: 30px !important;
    max-width: 420px !important;
    line-height: 1.6 !important;
    font-family: 'Cairo', sans-serif !important;
}
.ala-kam-empty-state .btn-primary, .ala-kam-empty-state .btn {
    background: #10b981 !important;
    border: none !important;
    color: #1e1d2c !important;
    font-weight: 700 !important;
    padding: 12px 30px !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    font-family: 'Cairo', sans-serif !important;
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.2) !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
}
.ala-kam-empty-state .btn-primary:hover, .ala-kam-empty-state .btn:hover {
    background: #059669 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 15px 25px rgba(16, 185, 129, 0.3) !important;
}

@keyframes fadeInUpEmpty {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Light Theme overrides */
body.light-ala-kam-theme .ala-kam-empty-state {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(243, 244, 246, 0.9)) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05) !important;
}
body.light-ala-kam-theme .ala-kam-empty-state h3 {
    color: #1f2937 !important;
}
body.light-ala-kam-theme .ala-kam-empty-state p {
    color: #6b7280 !important;
}

.ad-comments-empty strong,
.ad-comments-empty span,
.similar-tab-pill {
    color: #000000 !important;
}

/* Similar offers empty state */
.similar-empty-state {
    padding: 28px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 14px;
    border: 1px dashed rgba(255, 255, 255, 0.1) !important;
}
.similar-empty-state i {
    font-size: 2rem;
    color: #4b9df8;
    margin-bottom: 4px;
}
.similar-empty-state strong {
    font-size: 0.95rem;
    color: #cbd5e1;
}
.similar-empty-state span {
    font-size: 0.8rem;
    color: #94a3b8;
}

/* Light theme overrides for similar empty state */
body.light-ala-kam-theme .similar-empty-state {
    background: rgba(0, 0, 0, 0.015) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
body.light-ala-kam-theme .similar-empty-state strong {
    color: #000000 !important;
}
body.light-ala-kam-theme .similar-empty-state span {
    color: #000000 !important;
}

/* Light theme body override for ad detail pages and all nested components */
body.light-ala-kam-theme.ad-detail-page,
body.light-ala-kam-theme.ad-detail-page .ala-kam-ad-detail-page,
body.light-ala-kam-theme.ad-detail-page .ala-kam-ad-page-container,
body.light-ala-kam-theme.ad-detail-page .ala-kam-ad-header-card,
body.light-ala-kam-theme.ad-detail-page .ala-kam-ad-gallery-card,
body.light-ala-kam-theme.ad-detail-page .ala-kam-ad-actions-pill-bar,
body.light-ala-kam-theme.ad-detail-page .ala-kam-ad-comments-section,
body.light-ala-kam-theme.ad-detail-page .ad-comment-item,
body.light-ala-kam-theme.ad-detail-page .ala-kam-similar-offers-card,
body.light-ala-kam-theme.ad-detail-page .similar-item-card,
body.light-ala-kam-theme.ad-detail-page .ala-kam-ad-specs-card,
body.light-ala-kam-theme.ad-detail-page .spec-item,
body.light-ala-kam-theme.ad-detail-page .ala-kam-safe-buy-alert {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
}

/* Specifications Card Styling */
.ala-kam-ad-specs-card {
    background: #181724;
    border: 1px solid #2e2c40;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 20px;
}
.ala-kam-ad-specs-card h3 {
    margin-top: 0;
    margin-bottom: 18px;
    font-size: 1.15rem;
    font-weight: 800;
    color: #38bdf8;
    display: flex;
    align-items: center;
    gap: 8px;
}
.spec-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}
.spec-item {
    display: flex;
    flex-direction: column;
    background: #1e1d2c;
    border: 1px solid #2e2c40;
    padding: 12px 16px;
    border-radius: 12px;
}
.spec-label {
    font-size: 0.82rem;
    color: #94a3b8;
    margin-bottom: 4px;
}
.spec-value {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
}

/* Light Theme overrides for specifications card */
body.light-ala-kam-theme .ala-kam-ad-specs-card h3 {
    color: #1073c0 !important;
}
body.light-ala-kam-theme .spec-label {
    color: #64748b !important;
}
body.light-ala-kam-theme .spec-value {
    color: #0f172a !important;
}


/* Dark theme chat content panel and empty screen styling */
body.dark-ala-kam-theme .chat-content {
    background-color: var(--theme-page) !important;
    background: var(--theme-page) !important;
}
body.dark-ala-kam-theme .chat-content h2 {
    color: var(--theme-text) !important;
}
body.dark-ala-kam-theme .chat-content p {
    color: var(--theme-muted) !important;
}

/* PWA launch experience. The overlay is activated only in standalone mode. */
.app-launch-splash[hidden] { display: none !important; }
.app-launch-splash {
    position: fixed;
    z-index: 2147483647;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    overflow: hidden;
    color: #fff4cf;
    background:
        radial-gradient(circle at 50% 44%, rgba(20, 140, 99, .34), transparent 34%),
        linear-gradient(145deg, #041020 0%, #062641 55%, #064a35 100%);
    opacity: 1;
    visibility: visible;
    transition: opacity .42s ease, visibility .42s ease;
}
.app-launch-word {
    position: relative;
    z-index: 1;
    direction: rtl;
    display: block;
    unicode-bidi: plaintext;
    white-space: nowrap;
    font-family: 'Lalezar', 'Cairo', sans-serif;
    font-size: clamp(4rem, 17vw, 7.4rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-shadow: 0 8px 30px rgba(0, 0, 0, .38);
    opacity: 0;
    transform: translateY(20px) scale(.92);
    filter: blur(5px);
    clip-path: inset(0 100% 0 0);
}
.app-launch-splash.is-playing .app-launch-word {
    animation: appLaunchConnectedWord 1.05s .1s cubic-bezier(.18,.82,.24,1) forwards;
}
.app-launch-splash.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
body.app-is-launching { overflow: hidden !important; }

@keyframes appLaunchConnectedWord {
    0% { opacity: 0; transform: translateY(20px) scale(.92); filter: blur(5px); clip-path: inset(0 100% 0 0); }
    22% { opacity: 1; }
    78% { opacity: 1; transform: translateY(-3px) scale(1.025); filter: blur(0); clip-path: inset(0 0 0 0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
    .app-launch-splash { display: none !important; }
}

/* Unified header controls: identical height and icon alignment. */
.ala-kam-header-actions {
    --header-control-size: 42px;
    align-items: center !important;
}
.ala-kam-country-selector,
.ala-kam-user-dropdown {
    height: var(--header-control-size);
    display: inline-flex !important;
    align-items: center;
}
.ala-kam-header-actions .ala-kam-nav-icon-btn,
.ala-kam-header-actions .ala-kam-nav-pill-btn,
.ala-kam-header-actions .ala-kam-user-pill {
    box-sizing: border-box;
    height: var(--header-control-size) !important;
    min-height: var(--header-control-size) !important;
    margin: 0 !important;
    line-height: 1 !important;
    align-items: center !important;
}
.ala-kam-header-actions .ala-kam-nav-icon-btn > i,
.ala-kam-header-actions .ala-kam-nav-pill-btn > i:first-child {
    width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 18px;
    font-size: 1rem !important;
    line-height: 18px !important;
}
.ala-kam-header-actions .ala-kam-user-avatar {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
}

@media (max-width: 767px) {
    .ala-kam-header-actions { --header-control-size: 38px; }
    .ala-kam-header-actions .ala-kam-nav-icon-btn > i,
    .ala-kam-header-actions .ala-kam-nav-pill-btn > i:first-child {
        width: 17px;
        height: 17px;
        flex-basis: 17px;
        font-size: .95rem !important;
        line-height: 17px !important;
    }
}

@media (max-width: 360px) {
    .ala-kam-header-actions { --header-control-size: 35px; }
}