/* ========================= */
/* style.css - Black & Gold Unified (Fixed Version) */
/* ========================= */

/* استيراد خط عربي فخم (Cairo) */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;500;700;900&display=swap');

:root{
    /* Blue / Silver / Black theme */
    --bg-top: #021026; /* deep navy */
    --bg-bottom: #000000; /* black */
    --glass-bg: rgba(230,240,250,0.03); /* soft silver-blue glass */
    --glass-border: rgba(200,210,220,0.06); /* subtle silver border */
    --gold: #4DA6FF; /* primary accent (blue) — kept var name for compatibility */
    --muted: #C0C6CC; /* silver text */
    --card-shadow: 0 6px 22px rgba(0,0,0,0.55);
    --sidebar-w: 280px;
}

/* Join status glow styling */
.join-status.glow {
    position: relative;
    overflow: visible;
    box-shadow: 0 6px 30px rgba(77,166,255,0.07), 0 0 0 6px rgba(77,166,255,0.02) inset;
    border-color: rgba(77,166,255,0.12);
}
.join-status.glow::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 12px;
    background: radial-gradient(ellipse at center, rgba(77,166,255,0.12), rgba(77,166,255,0.03) 40%, transparent 60%);
    filter: blur(12px);
    z-index: 0;
    pointer-events: none;
    opacity: 0.9;
}
.join-status.glow > * { position: relative; z-index: 1; }
.join-status.glow .joiners-highlight {
    display:inline-block;
    padding:6px 10px;
    border-radius:8px;
    background: linear-gradient(90deg, rgba(77,166,255,0.06), rgba(77,200,255,0.04));
    box-shadow: 0 6px 20px rgba(77,166,255,0.08);
}
.join-status.glow.pulse::before { animation: pulseGlow 2.6s ease-in-out infinite; }
@keyframes pulseGlow { 0% { opacity:0.7; transform: scale(0.98);} 50% { opacity:1; transform: scale(1.02);} 100% { opacity:0.7; transform: scale(0.98);} }


/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Floating CTA removed per request */

/* Decorative 'B' logo marks - visual accents */
.logo-mark {
    position: absolute;
    font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    color: rgba(77,166,255,0.12);
    pointer-events: none;
    user-select: none;
    transform: translateZ(0);
    mix-blend-mode: screen;
}
.logo-mark--large {
    font-size: 140px;
    right: 20px;
    top: 20px;
    opacity: 0.12;
    font-weight: 900;
    line-height: 1;
}
.logo-mark--hero {
    font-size: 110px;
    left: 10px;
    bottom: 10px;
    opacity: 0.08;
    font-weight: 900;
}
.logo-mark--footer {
    font-size: 48px;
    right: 48px;
    bottom: 120px;
    opacity: 0.14;
    font-weight: 800;
}

@media (max-width: 900px) {
    .logo-mark--large { font-size: 90px; right: 12px; top: 8px; }
    .logo-mark--hero { font-size: 72px; left: 6px; bottom: 6px; }
    .logo-mark--footer { font-size: 36px; right: 20px; bottom: 110px; }
}

/* Utility: prevent JS/CSS tilt/transform on marked elements */
.no-tilt {
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
    will-change: auto !important;
}


/* Body - الوضع الافتراضي (Dark) */
body {
    font-family: 'Cairo', sans-serif;
    background: radial-gradient(1200px 600px at 10% 10%, rgba(10,30,60,0.6), transparent 10%),
                radial-gradient(800px 400px at 90% 80%, rgba(8,12,22,0.45), transparent 8%),
                linear-gradient(180deg,var(--bg-top),var(--bg-bottom));
    color: var(--gold);
    line-height: 1.7;
    padding: 28px;
    direction: rtl;
    text-align: right;
    transition: background 0.6s ease, color 0.6s ease;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* subtle moving light to mimic liquid glass glow */
body::before{
    content: '';
    position: absolute;
    inset: -30% -20% auto -20%;
    height: 60%;
    background: radial-gradient(600px 200px at 20% 10%, rgba(77,166,255,0.06), transparent 20%),
                radial-gradient(500px 200px at 80% 80%, rgba(30,80,140,0.03), transparent 18%);
    filter: blur(8px) saturate(105%);
    transform: translateX(-6%);
    animation: none; /* disabled by default to improve speed */
}

/* Fix for Android/mobile: remove transforms on large decorative elements so
   fixed-position elements (sidebar, floating CTA) stay anchored to viewport.
   This avoids cases where transformed ancestors create a containing block
   and make fixed elements appear centered. */
@media (max-width: 1024px) {
    body::before, header, main, nav, footer, .logo-mark, .logo-mark--large, .logo-mark--hero, .logo-mark--footer {
        transform: none !important;
        -webkit-transform: none !important;
    }
}

/* Main nav styling (top-level) */
nav ul {
    list-style: none;
    display: flex;
    gap: 18px;
    padding: 10px 20px;
    /* stronger blue-tinted glass and glow for higher contrast */
    background: linear-gradient(180deg, rgba(2,24,56,0.88), rgba(3,30,70,0.82));
    backdrop-filter: blur(6px) saturate(120%);
    border: 1px solid rgba(77,166,255,0.08);
    border-radius: 14px;
    box-shadow: var(--card-shadow), 0 10px 30px rgba(30,90,180,0.18), 0 0 30px 4px rgba(77,166,255,0.12);
    align-items: center;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

nav ul li a {
    color: var(--muted);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 10px;
    transition: color .18s ease, background .18s ease, transform .12s ease;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

nav ul li a:hover {
    color: #ffffff;
    background: rgba(255,255,255,0.04);
    transform: translateY(-2px);
}

nav ul li a.active, nav ul li a:focus {
    color: var(--gold);
    background: rgba(255,255,255,0.04);
    box-shadow: 0 6px 14px rgba(0,0,0,0.45), 0 0 10px rgba(77,166,255,0.14);
}

@media (max-width: 720px) {
    nav ul {
        gap: 12px;
        padding: 8px 12px;
    }
    nav ul li a {
        padding: 6px 10px;
        font-size: 14px;
    }
    nav ul::-webkit-scrollbar { display: none; }
}

/* Main Sections */
main {
    max-width: 1000px;
    margin: 30px auto;
    padding: 10px;
}

/* تنسيق عام لأي سكشن أو كارد */
.section, .card, .country, .product-item, main section {
    background: var(--glass-bg);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    padding: 18px;
    margin-bottom: 20px;
    color: var(--gold);
    transition: box-shadow 0.22s ease; /* avoid heavy transform transitions */
    border: 1px solid var(--glass-border);
    /* lighter blur for better perf */
    backdrop-filter: blur(6px) saturate(110%);
}

.section:hover, .card:hover {
    /* subtle hover only changes shadow to avoid layout/paint cost */
    box-shadow: 0 12px 28px rgba(0,0,0,0.55);
}

/* عناوين الأقسام */
h2 {
    margin-bottom: 15px;
    font-size: 1.6rem;
    font-weight: 800;
    border-right: 4px solid var(--gold);
    padding-right: 10px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}

/* الزر */
button {
    background: linear-gradient(135deg, var(--gold), #1f6fb4);
    color: #000;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    font-family: 'Cairo', sans-serif;
    font-size: 1rem;
    margin-top: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(77,166,255,0.35);
}

/* Footer */
footer {
    text-align: center;
    margin-top: 40px;
    font-size: 0.9rem;
    color: var(--gold);
    opacity: 0.9;
    border-top: 1px solid rgba(255,255,255,0.04);
    padding-top: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}

/* Sidebar removed: CSS for .sidebar and .sidebar-toggle-btn removed per request. */
/* The language toggle button styles remain defined elsewhere; header controls keep appearance. */


/* Exclusive agents container & header */
.exclusive-agents {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.05));
    border: 1px solid rgba(255,255,255,0.04);
    padding: 14px;
    border-radius: 12px;
    margin-top: 18px;
}
.exclusive-header{
    display:flex;
    align-items:center;
    gap:12px;
    padding-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,0.02);
    margin-bottom:12px;
}
.exclusive-icon{
    width:48px;
    height:48px;
    min-width:48px;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background: linear-gradient(180deg,#4DA6FF,#2B74D1);
    color:#fff;
    box-shadow: 0 8px 24px rgba(43,116,209,0.18);
}
.exclusive-title{ font-weight:900; color:var(--gold); font-size:1.05rem; }

@media (max-width:720px){
    .exclusive-header { gap:10px; }
    .exclusive-icon { width:40px; height:40px; min-width:40px; }
}

/* Agent card styles */
.agents-list{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.agent-card{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04));
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform .18s ease, box-shadow .18s ease;
}
.agent-card:hover{ transform: translateY(-6px); box-shadow: 0 14px 36px rgba(0,0,0,0.55); }
.agent-card .card-top{ display:flex; gap:10px; align-items:center; }
.agent-card .card-logo{ width:64px; height:64px; min-width:64px; border-radius:8px; overflow:hidden; background:rgba(255,255,255,0.03); display:flex; align-items:center; justify-content:center; }
.agent-card .card-logo img{ width:100%; height:100%; object-fit:contain; }
.agent-card .card-title{ font-weight:800; color:var(--gold); font-size:1rem; }
.agent-card .card-phone{ color:var(--muted); font-size:0.95rem; }
.agent-card .card-products{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.agent-card .card-products img{ width:72px; height:52px; object-fit:cover; border-radius:6px; border:1px solid rgba(255,255,255,0.03); }
.agent-card .card-actions{ display:flex; gap:8px; margin-top:8px; }
.call-btn{ padding:8px 12px; border-radius:8px; display:inline-flex; gap:8px; align-items:center; text-decoration:none; color:#fff; font-weight:700; }
.call-btn.wa-btn{ background: linear-gradient(180deg,#25D366,#128C7E); }
.call-btn.call-btn{ background: linear-gradient(180deg,#3A9DFF,#1071C8); }

@media (max-width:520px){
    .agent-card .card-logo{ width:54px; height:54px; min-width:54px; }
    .agent-card .card-products img{ width:64px; height:48px; }
}

/* Agent verification badge */
.agent-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:8px;
    background: rgba(77,166,255,0.06);
    border: 1px solid rgba(77,166,255,0.10);
    color: var(--gold);
    padding: 6px 10px;
    border-radius: 999px;
    font-weight:700;
    font-size:0.92rem;
}
.agent-badge .badge-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    background: linear-gradient(180deg,#4DA6FF,#2B74D1);
    color:#fff;
    border-radius:6px;
    font-weight:900;
}
.agent-badge .badge-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    border-radius:6px;
}
.agent-badge .badge-text{ color:var(--gold); font-weight:700; }

@media (max-width:520px){
    .agent-badge{ font-size:0.86rem; padding:6px 8px; }
    .agent-badge .badge-icon{ width:22px; height:22px; }
}

.filter-section label { color: var(--muted); font-weight: 700; }

/* Agent detail grid (used by renderAgent) */
.agent-grid{
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 18px;
    align-items: start;
    padding: 18px;
}
.agent-grid .logos{ display:flex; flex-direction:column; gap:12px; align-items:center; }
.agent-grid .logos img{ width:120px; height:120px; object-fit:contain; border-radius:10px; background: rgba(255,255,255,0.02); padding:8px; }
.agent-grid .info h2{ font-size:1.4rem; color:var(--gold); margin-bottom:6px; }
.agent-grid dl{ display:block; margin-top:6px; }
.agent-grid dl dt{ color:var(--muted); font-weight:800; margin-top:8px; }
.agent-grid dl dd{ color:var(--gold); margin:6px 0 0 0; }
.agent-phone-row{ display:inline-flex; gap:10px; align-items:center; }

/* ==========================
   Animated market arrows (decorative background)
   ==========================
   Small, low-opacity arrows that float up/down like stock indicators.
   Decorative only: pointer-events:none and aria-hidden recommended in HTML.
*/
.market-arrows{
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.market-arrows .arrow{
    position: absolute;
    font-size: 48px;
    opacity: 0.08;
    line-height: 1;
    transform-origin: center;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.45));
}
.market-arrows .arrow.up{ color: #25D366; animation: arrowUp 8s linear infinite; }
.market-arrows .arrow.down{ color: #ff6b6b; animation: arrowDown 9s linear infinite; }

@keyframes arrowUp{
    0%   { transform: translateY(60vh) scale(0.9); opacity: 0; }
    8%   { opacity: 0.06; }
    50%  { transform: translateY(-10vh) scale(1.05); opacity: 0.12; }
    100% { transform: translateY(-60vh) scale(0.95); opacity: 0; }
}
@keyframes arrowDown{
    0%   { transform: translateY(-60vh) scale(0.9); opacity: 0; }
    8%   { opacity: 0.06; }
    50%  { transform: translateY(10vh) scale(1.05); opacity: 0.12; }
    100% { transform: translateY(60vh) scale(0.95); opacity: 0; }
}

/* Ensure main content renders above the decorative layer */
header, main, footer, .card, .section { position: relative; z-index: 1; }

@media (max-width: 720px){
    .market-arrows .arrow{ font-size: 28px; opacity: 0.06; }
}

/* SVG market-graph styling (sharper, image-like lines) */
.market-graph{ position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.14; }
.market-graph svg{ width: 100%; height: 100%; display:block; }
.market-graph .line{ fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; filter: drop-shadow(0 8px 14px rgba(0,0,0,0.6)); }
.market-graph .line.up{ stroke: #8EE69A; stroke-width: 3.2; stroke-opacity: 0.95; }
.market-graph .line.down{ stroke: #FF8B8B; stroke-width: 2.8; stroke-opacity: 0.9; }
.market-graph .pulse{ animation: graphPulse 3.2s ease-in-out infinite; }
@keyframes graphPulse{ 0%{ opacity:0.08; transform: translateY(0);}50%{ opacity:0.18; transform: translateY(-3px);}100%{ opacity:0.08; transform: translateY(0);} }

/* Draw animation using stroke-dashoffset */
.market-graph .line{ stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: drawLine 6s linear infinite; }
@keyframes drawLine{ 0%{ stroke-dashoffset: 1000; } 50%{ stroke-dashoffset: 300; } 100%{ stroke-dashoffset: 1000; } }

/* Keep content above decorative graph */
header, main, footer, .card, .section { position: relative; z-index: 1; }
.agent-phone-row a{ color:var(--gold); font-weight:800; text-decoration:none; background:transparent; }
.agent-phone-row a.agent-wa{ background: linear-gradient(180deg,#25D366,#128C7E); color:#fff; padding:6px 8px; border-radius:8px; font-weight:700; }
.agent-actions{ margin-top:12px; display:flex; gap:10px; }
.agent-products .products-grid{ gap:12px; }

@media (max-width:720px){
    .agent-grid{ grid-template-columns: 1fr; }
    .agent-grid .logos{ flex-direction:row; justify-content:flex-start; }
    .agent-grid .logos img{ width:84px; height:84px; }
}

/* Filter section layout: keep select and search separate and responsive */
.filter-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.filter-section .filter-select {
    min-width: 200px;
    max-width: 340px;
    padding: 8px 12px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04));
    border: 1px solid rgba(255,255,255,0.04);
    color: var(--gold);
    font-weight: 700;
    -webkit-appearance: none;
    appearance: none;
}

/* Ensure dropdown list matches dark theme so options are readable */
.filter-select {
    color: var(--gold);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04));
}
.filter-select option{
    background: linear-gradient(180deg, rgba(2,16,38,0.98), rgba(6,10,18,0.95));
    color: var(--muted);
}
.filter-select option:checked,
.filter-select option:active{
    background: linear-gradient(180deg, rgba(77,166,255,0.14), rgba(43,116,209,0.12));
    color: #fff;
}
.filter-select:focus{
    box-shadow: 0 10px 30px rgba(77,166,255,0.08);
    border-color: rgba(77,166,255,0.28);
}

/* Hide native dropdown arrow on some browsers to keep consistent look */
.filter-select::-ms-expand{ display:none; }
.filter-section .filter-select:focus {
    outline: none;
    box-shadow: 0 10px 30px rgba(77,166,255,0.08);
    border-color: rgba(77,166,255,0.28);
}
.filter-section .search-wrapper {
    margin-inline-start: 8px; /* logical margin works with RTL */
}

@media (max-width: 720px) {
    .filter-section {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .filter-section .filter-select,
    .filter-section .search-box {
        width: 100%;
        max-width: none;
    }
    .search-box { justify-content: flex-end; }
}

/* Search input */
.search-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}
.search-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04));
    border: 1px solid rgba(255,255,255,0.04);
    padding: 6px 10px;
    border-radius: 999px;
    min-width: 240px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.search-box .search-icon { width:18px; height:18px; flex: none; display:block; }
.search-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--gold);
    font-weight: 700;
    padding: 6px 8px;
    direction: rtl;
    text-align: right;
    width: 220px;
    font-size: 0.98rem;
}
.search-input::placeholder { color: rgba(192,198,204,0.6); font-weight: 400; }
.search-box:focus-within { box-shadow: 0 10px 30px rgba(0,0,0,0.6); border-color: rgba(77,166,255,0.45); }
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

@media (max-width: 720px) {
    .search-box { min-width: 140px; }
    .search-input { width: 120px; }
}

@media (max-width: 720px) {
    .filter-section { padding: 14px; }
    .filter-select { min-width: 160px; padding-right: 40px; }
}

/* تظليل الخلفية عند الفتح (Overlay) */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Center popup (success/error) */
.overlay.center-popup-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
}

.center-popup {
    position: relative;
    width: min(560px, 92vw);
    border-radius: 14px;
    padding: 18px 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    border: 1px solid rgba(77,166,255,0.18);
    box-shadow: var(--card-shadow), 0 0 22px rgba(77,166,255,0.18);
    color: var(--muted);
    z-index: 1999;
    overflow: hidden;
}

.center-popup::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 18px;
    background: radial-gradient(ellipse at center, rgba(77,166,255,0.14), rgba(77,166,255,0.04) 45%, transparent 70%);
    filter: blur(14px);
    pointer-events: none;
    opacity: 0.95;
}

.center-popup > * { position: relative; z-index: 1; }
.center-popup.pulse::before { animation: pulseGlow 2.6s ease-in-out infinite; }

.center-popup[data-type="error"] {
    border-color: rgba(255, 107, 107, 0.25);
    box-shadow: var(--card-shadow), 0 0 22px rgba(255, 107, 107, 0.12);
}

.center-popup[data-type="error"]::before {
    background: radial-gradient(ellipse at center, rgba(255, 107, 107, 0.12), rgba(255, 107, 107, 0.035) 45%, transparent 70%);
}

.center-popup__title {
    text-align: center;
    font-weight: 900;
    color: var(--gold);
    margin-bottom: 8px;
    font-size: 1.2rem;
}

.center-popup__msg {
    text-align: center;
    color: #ffffff;
    line-height: 1.9;
}

.center-popup__actions {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.center-popup__btn {
    background: rgba(255,255,255,0.04);
    color: var(--muted);
    border: 1px solid rgba(77,166,255,0.14);
    padding: 8px 16px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 800;
}

.center-popup__btn:hover {
    box-shadow: 0 12px 28px rgba(0,0,0,0.55);
    border-color: rgba(77,166,255,0.3);
}

.hover-icons .icons-grid {
    display: block;
}
.hover-icons .icons-grid {
    display: block; /* default: stacked */
}

.hover-icons .icon-single {
    margin-bottom: 18px;
}

.hover-icons .icon-single .icon-card {
    width: 100%;
}

/* link wrapper for icon cards */
.icon-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.icon-link:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(77,166,255,0.08);
    border-radius: 10px;
}

/* Distributed layout: spread icons horizontally with big gaps */
.hover-icons.icons-distributed .icons-grid {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: stretch;
}

.hover-icons.icons-distributed .icon-single {
    width: 23%;
    margin-bottom: 0;
}

/* Scattered layout */
.hover-icons.icons-scattered {
    position: relative;
    min-height: 260px;
}

.hover-icons.icons-scattered .icons-grid { 
    display: block;
}

.hover-icons.icons-scattered .icon-single {
    position: absolute;
    width: 180px;
}

.hover-icons.icons-scattered .pos-1 { top: 18px; right: 18px; }
.hover-icons.icons-scattered .pos-2 { top: 18px; left: 18px; }
.hover-icons.icons-scattered .pos-3 { bottom: 18px; right: 18px; }
.hover-icons.icons-scattered .pos-4 { bottom: 18px; left: 18px; }

.icon-card {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.03);
    padding: 18px 14px 12px 14px;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    overflow: visible;
    transition: box-shadow 0.18s ease;
}

.icon-card:hover,
.icon-card:focus-within {
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.icon-card .icon {
    font-size: 2.2rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.icon-card .icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.icon-card .icon-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.status-panel {
    position: absolute;
    right: 12px;
    left: 12px;
    top: 100%;
    background: #0b0b0b;
    color: var(--gold);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    transform-origin: top center;
    transform: translateY(-6px) scaleY(0.98);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.26s cubic-bezier(.2,.9,.2,1);
}

.icon-card:hover .status-panel,
.icon-card:focus-within .status-panel,
.icon-card:focus .status-panel {
    transform: translateY(0) scaleY(1);
    opacity: 1;
    max-height: 200px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.status-panel p {
    font-size: 0.95rem;
    margin: 6px 0;
}

@media (max-width: 900px) {
    .hover-icons .icon-single {
        margin-bottom: 14px;
    }
}

@media (max-width: 480px) {
    .hover-icons .icon-single {
        margin-bottom: 12px;
    }
}

.header-info {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 10px;
}

/* Header layout and controls */
header {
    position: relative;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

header .logo {
    width: 140px;
    height: auto;
    display: block;
    margin: 6px auto;
    opacity: 0.95;
}

/* make the header buttons consistent and anchored to top-right */
.header-controls {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    gap: 10px;
    z-index: 2500;
}

.header-controls .sidebar-toggle-btn,
.header-controls .language-toggle-btn {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0,0,0,0.6) !important;
    border: 2px solid rgba(77,166,255,0.15) !important;
    color: var(--gold) !important;
}

@media (max-width: 600px) {
    header .logo { width: 100px; }
    .header-controls { top: 12px; right: 12px; }
    .header-controls .sidebar-toggle-btn, .header-controls .language-toggle-btn { width: 40px !important; height: 40px !important; }
}

@media (min-width: 900px) {
    header {
        padding-top: 70px;
    }
}

.footer-logo {
    width: 40px;
    height: auto;
    vertical-align: middle;
    margin-right: 10px;
}

.sidebar-logo {
    width: 50px;
    height: auto;
    display: block;
    margin: 0 auto 10px;
}

.center-logo {
    text-align: center;
    margin: 20px 0;
}

.center-logo img {
    width: 100px;
    height: auto;
    opacity: 0.8;
}

.products-grid {

/* ========== Responsive utilities & breakpoint fixes ========== */
/* Normalize base font size for better scaling on small devices */
html { font-size: 16px; }
@media (max-width: 900px) { html { font-size: 15px; } }
@media (max-width: 720px) { html { font-size: 14px; } }
@media (max-width: 420px) { html { font-size: 13px; } }

/* Make images and media scale */
img, video, canvas { max-width: 100%; height: auto; display: block; }

/* Section padding adjustments for small screens */
.section { padding: 24px 18px; }
@media (max-width: 720px) { .section { padding: 18px 12px; } }

/* Header controls: ensure they stay anchored and don't overflow */
.header-controls { right: 12px; top: 12px; }
.header-controls .sidebar-toggle-btn, .header-controls .language-toggle-btn { width:44px !important; height:44px !important; }

/* Sidebar removed: responsive sidebar width settings removed. */

/* Floating CTA references removed per request */

/* Prevent transformed ancestors from creating containing blocks for fixed elements on problematic Android browsers.
   Remove/neutralize transforms on large decorative elements at small sizes. */
@media (max-width: 1024px) {
    /* Neutralize transforms on structural/large decorative elements so fixed elements
       (sidebar, floating CTA) remain anchored to the viewport in Android browsers */
    header, main, nav, footer, .container, .logo-mark, .logo-mark--large, .logo-mark--hero, .logo-mark--footer {
        transform: none !important;
        -webkit-transform: none !important;
        backface-visibility: hidden !important;
    }
    body::before { transform: none !important; -webkit-transform: none !important; }
}

/* Utility: center content container and cap width */
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* Accessibility: ensure overlays receive focusable elements order */
.overlay { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* End responsive utilities */

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.product-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(77,166,255,0.2);
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    transition: transform 0.3s ease;
}

.product-item:hover {
    transform: scale(1.05);
    border-color: var(--gold);
}

.product-item img {
    width: 100%;
    max-width: 150px;
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
}

.product-item h3 {
    color: var(--gold);
    margin-bottom: 8px;
}

.product-item p {
    color: #ccc;
    font-size: 0.9rem;
}

/* Retail grid & product card styles */
.retail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.product-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 12px;
    padding: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.product-img-wrapper {
    width: 100%;
    padding-top: 66%; /* 3:2 aspect ratio */
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0,0,0,0.25);
    cursor: pointer;
}

.product-img-wrapper img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-details {
    padding: 12px 6px 6px 6px;
    color: var(--muted);
}

.product-details h3 {
    color: var(--gold);
    margin: 0 0 8px 0;
    font-size: 1.05rem;
}

.whatsapp-btn {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    /* تم التعديل للأزرق */
    background: linear-gradient(180deg, #4DA6FF, #2B74D1);
    color: #fff;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    margin-top: 8px;
    box-shadow: 0 4px 15px rgba(77, 166, 255, 0.3); /* ظل أزرق خفيف */
}

.whatsapp-btn svg { width: 18px; height: 18px; }

@media (max-width: 520px) {
    .retail-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
    .product-img-wrapper { padding-top: 70%; }
}

/* Wholesale-style gallery (GLOBAL - used by retail.html too) */
.wholesale-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 30px;
    padding: 0 10px;
    direction: rtl !important;
}

.wholesale-grid .product-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(77, 166, 255, 0.15);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.wholesale-grid .product-card:hover {
    transform: translateY(-5px);
    border-color: var(--gold);
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.wholesale-grid .product-img-wrapper {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    overflow: hidden;
    border-bottom: none; 
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wholesale-grid .product-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.wholesale-grid .product-card:hover .product-img-wrapper img {
    transform: scale(1.1);
}

.wholesale-grid .product-details {
    padding: 20px;
    text-align: center;
}

.wholesale-grid .product-details h3 {
    color: var(--gold);
    font-size: 1.4rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.wholesale-grid .product-details p {
    color: #ccc;
    font-size: 0.95rem;
}

.wholesale-grid .whatsapp-btn { margin-top: 12px; }
.wholesale-grid .whatsapp-btn svg { width: 20px; height: 20px; flex: 0 0 20px; }
.wholesale-grid .product-img-wrapper svg { width: auto !important; max-width: 100% !important; height: auto !important; display: block; }

/* Modal styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    animation: zoom 0.6s;
}

@keyframes zoom {
    from {transform: scale(0)}
    to {transform: scale(1)}
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

.sidebar-toggle-btn, .language-toggle-btn {
    width: 45px !important;    
    height: 45px !important;   
    padding: 0 !important;     
    border-radius: 50% !important; 
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: unset !important; 
    line-height: 0 !important;
}

.language-toggle-btn {
    top: 40px !important;
    right: 100px !important; 
    left: auto !important;
}

/* === Agent page improvements === */
.agents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.agent-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(77,166,255,0.06);
    padding: 14px;
    border-radius: 12px;
    text-align: center;
    color: var(--muted);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.agent-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.5);
    border-color: rgba(77,166,255,0.18);
    color: #fff;
}

/* === Trust bar: Quality certifications marquee === */
.trust-bar {
    max-width: 1000px;
    margin: 10px auto 18px;
}

.trust-bar__title {
    text-align: center;
    color: var(--gold);
    margin-bottom: 8px;
}

.trust-bar__subtitle {
    text-align: center;
    color: var(--muted);
    max-width: 820px;
    margin: 0 auto 14px;
    line-height: 1.8;
}

.cert-marquee {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.02);
    padding: 12px;
}

.cert-marquee__track {
    display: flex;
    width: max-content;
    gap: 18px;
    animation: certScroll 18s linear infinite;
    will-change: transform;
}

.cert-marquee__group {
    list-style: none;
    display: flex;
    gap: 18px;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
    align-items: center;
}

.cert-marquee__item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.04);
}

.cert-marquee__item img {
    height: 44px;
    width: auto;
    display: block;
    opacity: 0.95;
}

@keyframes certScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .cert-marquee__track { animation: none; transform: none; }
}

.agent-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: radial-gradient(circle at 30% 30%, rgba(77,166,255,0.12), rgba(0,0,0,0.2));
    color: var(--gold);
    margin: 6px auto 12px;
    box-shadow: inset 0 -6px 12px rgba(0,0,0,0.25), 0 6px 18px rgba(0,0,0,0.45);
}

.agent-name {
    font-weight: 800;
    color: var(--gold);
    margin-bottom: 6px;
    font-size: 1.05rem;
}

.agent-location, .agent-phone {
    color: var(--muted);
    font-size: 0.95rem;
    margin-bottom: 8px;
}

.contact-btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 22px;
    background: linear-gradient(90deg,#25D366,#128C7E);
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(18,140,126,0.22);
    font-weight: 700;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.contact-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(18,140,126,0.28);
    opacity: 0.98;
}

.no-agents {
    color: var(--muted);
    padding: 12px;
    text-align: center;
}

.join-cta {
    background: linear-gradient(180deg, rgba(77,166,255,0.06), rgba(0,0,0,0.02));
    border: 1px solid rgba(77,166,255,0.08);
    padding: 18px;
    border-radius: 12px;
    margin-bottom: 18px;
}

.join-cta a {
    background: transparent;
    border: 2px solid var(--gold);
    color: var(--gold);
    padding: 10px 26px;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 800;
}

@media (max-width: 700px) {
    .agent-avatar { width: 60px; height: 60px; font-size: 1.6rem; }
    .agent-card { padding: 12px; }
}
/* Make a smart-card show its status-details permanently when it has the `open` class */
.smart-card.open .status-details {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto;
}
.smart-card.open {
    border-color: rgba(77,166,255,0.45);
    box-shadow: 0 14px 40px rgba(77,166,255,0.18), 0 0 30px rgba(77,166,255,0.12);
}

/* Split layout: top half shows icon + title, bottom half shows details */
.smart-card.split {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0; /* we'll manage padding inside halves */
    min-height: 240px;
}
.smart-card.split .card-top {
    height: 50%;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse; /* place icon on the right */
    gap: 12px;
}
.smart-card.split .card-head {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* title aligned to the right */
    text-align: right;
    padding-left: 12px;
}
.smart-card.split .card-icon {
    font-size: 3.6rem;
    line-height: 1;
    filter: drop-shadow(0 0 10px rgba(77,166,255,0.25));
}
.smart-card.split .card-brief { opacity: 0.95; margin-top: 6px; font-weight:700; }

/* convert absolute details to bottom block in split mode */
.smart-card.split .status-details {
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 50%;
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(180deg, rgba(2,16,38,0.9), rgba(2,16,38,0.85));
    border-top: 1px solid rgba(77,166,255,0.06);
}

.smart-card.split .status-row { padding: 6px 0; }

/* Slightly reduce the brief text opacity when details are pinned */
.smart-card.open .card-brief { opacity: 0.9; }

/* ==========================
   Trust Bar / Certifications Marquee
   ========================== */

.trust-bar {
    max-width: 1000px;
    margin: 10px auto 18px;
}

.trust-bar__title {
    text-align: center;
    border: none;
    padding-right: 0;
    margin-bottom: 8px;
}

.trust-bar__subtitle {
    text-align: center;
    color: var(--muted);
    max-width: 820px;
    margin: 0 auto 14px;
    line-height: 1.8;
}

.cert-marquee {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    overflow: hidden;
    padding: 10px 0;
}

.cert-marquee__track {
    display: flex;
    width: max-content;
    align-items: center;
    will-change: transform;
    animation: certMarqueeScroll 52s linear infinite;
}

/* Pause on hover/focus for non-distracting UX */
.cert-marquee:hover .cert-marquee__track,
.cert-marquee:focus-within .cert-marquee__track {
    animation-play-state: paused;
}

/* Respect page direction automatically */
html[dir="rtl"] .cert-marquee__track {
    animation-direction: reverse;
}

.cert-marquee__group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: clamp(18px, 4vw, 44px);
    padding-inline: clamp(14px, 3vw, 26px);
    margin: 0;
    padding-block: 0;
}

.cert-marquee__item {
    list-style: none;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.04);
    background: rgba(0,0,0,0.08);
}

.cert-marquee__item img {
    height: clamp(44px, 6vw, 64px);
    width: auto;
    display: block;
    opacity: 0.95;
}

@keyframes certMarqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .cert-marquee {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cert-marquee__track {
        animation: none;
        transform: none;
    }
}