/**
 * Custom Design Settings
 * Generated: 2026-01-28 23:57:52
 * Do not edit manually - changes will be overwritten
 */

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

:root {
    /* Primary Colors (Forest) */
    --forest-light: #428177;
    --forest-medium: #054239;
    --forest-dark: #002623;

    /* Secondary Colors (Wheat) */
    --wheat-light: #edebe0;
    --wheat-medium: #b9a779;
    --wheat-dark: #988561;

    /* Accent Colors (Umber) */
    --umber-light: #6b1f2a;
    --umber-medium: #4a151e;
    --umber-dark: #260f14;

    /* Neutral Colors */
    --charcoal-white: #ffffff;
    --charcoal-grey: #3d3a3b;
    --charcoal-black: #161616;

    /* Semantic Colors */
    --color-primary: var(--forest-light);
    --color-primary-dark: var(--forest-medium);
    --color-primary-darker: var(--forest-dark);
    --color-secondary: var(--wheat-medium);
    --color-secondary-light: var(--wheat-light);
    --color-background: var(--wheat-light);
    --color-surface: var(--charcoal-white);
    --color-text: var(--charcoal-black);
    --color-text-muted: var(--charcoal-grey);

    /* Typography */
    --font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
    --font-family-heading: 'Cairo', 'IBM Plex Sans Arabic', sans-serif;
    --font-size-base: 16px;
    --font-size-heading: 18px;
    --line-height: 1.7;

    /* Layout */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 100px;
    --spacing-unit: 16px;
    --card-padding: 20px;
    --section-margin: 30px;
    --container-width: 1180px;
    --sidebar-width: 300px;

    /* Animations */
    --transition-fast: 0.3s ease;
    --transition-normal: 0.45s ease;

    /* Buttons */
    --btn-primary-bg: #428177;
    --btn-primary-hover: #054239;
    --btn-secondary-bg: #b9a779;
    --btn-secondary-hover: #988561;
    --btn-radius: 6px;

    /* Links */
    --link-color: #428177;
    --link-hover: #054239;
}

/* ========== BASE STYLES ========== */
html { font-size: var(--font-size-base); }
body {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height) !important;
    background-color: var(--color-background) !important;
    color: var(--color-text) !important;
}

.container { max-width: var(--container-width) !important; }

/* ========== TYPOGRAPHY ========== */
h1, h2, h3, h4, h5, h6, .card-head, .card-title, .panel-title {
    font-family: var(--font-family-heading) !important;
    color: var(--forest-dark) !important;
}
.card-head { font-size: var(--font-size-heading) !important; }

/* ========== LINKS ========== */
a { color: var(--link-color); transition: color var(--transition-fast); }
a:hover { color: var(--link-hover) !important; }

/* ========== LAYOUT ========== */
.side { width: var(--sidebar-width) !important; }
.main { width: calc(100% - var(--sidebar-width) - var(--spacing-unit)) !important; }
@media (max-width: 991px) {
    .side, .main { width: 100% !important; }
}

/* ========== HEADER ========== */
.header { background: linear-gradient(135deg, var(--forest-dark) 0%, var(--forest-medium) 100%) !important; }
.header { height: 60px !important; box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important; }
.header, .header a, .header .nav-item { color: #ffffff !important; }

/* ========== BANNER ========== */
.banner { min-height: 300px !important; }
.banner::before { background: rgba(0,0,0,0.4) !important; }
.banner, .banner h1, .banner h2, .banner .title { color: #ffffff !important; }

/* ========== HERO BANNER ========== */
.hero-banner { background: linear-gradient(135deg, var(--forest-dark) 0%, var(--forest-medium) 100%) !important; }
.hero-title, .hero-subtitle, .stat-number, .stat-label { color: #ffffff !important; }
.search-submit-btn { background: linear-gradient(135deg, var(--forest-light) 0%, var(--forest-medium) 100%) !important; }
.search-submit-btn:hover { background: linear-gradient(135deg, var(--forest-medium) 0%, var(--forest-dark) 100%) !important; }
.filter-btn.active { background: linear-gradient(135deg, var(--forest-light) 0%, var(--forest-medium) 100%) !important; }
.quick-link:hover { background: linear-gradient(135deg, var(--forest-light) 0%, var(--forest-medium) 100%) !important; }
.search-input-advanced:focus { border-color: var(--forest-light) !important; box-shadow: 0 0 0 4px rgba(66, 129, 119, 0.15) !important; }

/* ========== DIRECTORY CARDS ========== */
.main-directories { background: linear-gradient(135deg, var(--forest-dark) 0%, var(--forest-medium) 100%) !important; }
.bots-card .directory-icon { background: linear-gradient(135deg, #667eea, #764ba2) !important; }
.channels-card .directory-icon { background: linear-gradient(135deg, #0088cc, #00a0dc) !important; }
.whatsapp-card .directory-icon { background: linear-gradient(135deg, #25d366, #128c7e) !important; }

/* ========== CARDS ========== */
.card {
    background: #ffffff !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
    margin-bottom: var(--section-margin) !important;
}
.card-body { padding: var(--card-padding) !important; }
.card-head { background: linear-gradient(135deg, var(--forest-light) 0%, var(--forest-medium) 100%) !important; color: #fff !important; }

/* ========== BUTTONS ========== */
.btn, .oz-btn {
    border-radius: var(--btn-radius) !important;
    transition: all var(--transition-fast) !important;
}
.btn-primary, .btn-success, .oz-btn.oz-bg-green, .oz-btn.oz-bg-blue {
    background: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-bg) !important;
}
.btn-primary:hover, .btn-success:hover, .oz-btn.oz-bg-green:hover, .oz-btn.oz-bg-blue:hover {
    background: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-hover) !important;
}
.btn-secondary, .oz-btn.oz-bg-yellow {
    background: var(--btn-secondary-bg) !important;
    border-color: var(--btn-secondary-bg) !important;
}
.btn-secondary:hover, .oz-btn.oz-bg-yellow:hover {
    background: var(--btn-secondary-hover) !important;
}

/* ========== FOOTER ========== */
.footer {
    background: #002623 !important;
    color: #edebe0 !important;
}
.footer a { color: #edebe0 !important; opacity: 0.8; }
.footer a:hover { opacity: 1; }

/* ========== SELECTION ========== */
::selection { background: var(--forest-light) !important; color: #fff !important; }
::-moz-selection { background: var(--forest-light) !important; color: #fff !important; }

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--wheat-light); }
::-webkit-scrollbar-thumb { background: var(--forest-light); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--forest-medium); }