:root {
    --ik-primary: #1a7a74;        /* oklch(58% 0.13 190) */
    --ik-primary-dark: #125a55;
    --ik-text: #262521;           /* oklch(22% 0.01 60) */
    --ik-muted: #737065;          /* oklch(50-55% 0.01 60) */
    --ik-bg: #f8f8f6;             /* oklch(97-98% 0.004-0.006 60) */
    --ik-card: #ffffff;
    --ik-border: #e5e3dc;         /* oklch(91% 0.006-0.01 60) */
    --ik-radius: 14px;
    --ik-radius-sm: 10px;

    --ik-success-bg: #dff3da;     /* oklch(93% 0.05 150) */
    --ik-success-text: #2f6b34;   /* oklch(38% 0.1 150) */
    --ik-warning-bg: #f3ead9;     /* oklch(93% 0.03 60) */
    --ik-warning-text: #6b4f1f;   /* oklch(42% 0.1 60) */
    --ik-danger-bg: #f6dede;      /* oklch(93% 0.05 25) */
    --ik-danger-text: #7a3232;    /* oklch(45% 0.15 25) */
    --ik-danger-link: #a34747;    /* oklch(55% 0.15 25) */

    --ik-sidebar-bg: #24262f;     /* oklch(20% 0.025 250) */
    --ik-sidebar-text: #d7dae2;   /* oklch(85-92% 0.006-0.008 250) */

    --ik-whatsapp: #35b56a;       /* oklch(65% 0.16 145) */
}

* { box-sizing: border-box; }

html, body {
    font-family: 'Tajawal', 'Inter', sans-serif;
    background: var(--ik-bg);
    color: var(--ik-text);
}

[dir="rtl"] body { text-align: right; }

a { color: var(--ik-primary); text-decoration: none; }
a:hover { color: var(--ik-primary-dark); }

.text-muted-ik { color: var(--ik-muted); }

.btn-ik-primary {
    background: var(--ik-primary);
    border-color: var(--ik-primary);
    color: #fff;
    border-radius: 10px;
    padding: 9px 20px;
    font-weight: 700;
}
.btn-ik-primary:hover { background: var(--ik-primary-dark); border-color: var(--ik-primary-dark); color: #fff; }

.btn-ik-outline {
    background: transparent;
    border: 1px solid var(--ik-primary);
    color: var(--ik-primary);
    border-radius: 10px;
    padding: 9px 20px;
    font-weight: 700;
}
.btn-ik-outline:hover { background: var(--ik-primary); color: #fff; }

.ik-card {
    background: var(--ik-card);
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    padding: 24px;
}

.ik-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.ik-badge-success { background: var(--ik-success-bg); color: var(--ik-success-text); }
.ik-badge-warning { background: var(--ik-warning-bg); color: var(--ik-warning-text); }
.ik-badge-danger  { background: var(--ik-danger-bg);  color: var(--ik-danger-text); }

.ik-empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--ik-muted);
}

.placeholder-img {
    background: repeating-linear-gradient(45deg, #eceae3, #eceae3 10px, #e2e0d8 10px, #e2e0d8 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ik-muted);
    font-size: .9rem;
    border-radius: var(--ik-radius);
    min-height: 180px;
}

/* ---------- Public site header ---------- */
.ik-site-header { background: #fff; border-bottom: 1px solid var(--ik-border); }
.ik-site-header .nav-link { font-weight: 500; color: var(--ik-text); }
.ik-site-header .nav-link.active { color: var(--ik-primary); font-weight: 700; }

.ik-whatsapp-float {
    position: fixed;
    bottom: 24px;
    left: 24px;
    background: var(--ik-whatsapp);
    color: #fff;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
    z-index: 1000;
}

/* ---------- Pricing cards (packages / workshops, unified style) ---------- */
.ik-pricing-card {
    background: #fff;
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    padding: 28px;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ik-pricing-card.featured { border: 2px solid var(--ik-primary); }
.ik-pricing-card .ribbon {
    position: absolute;
    top: -12px;
    right: 20px;
    background: var(--ik-primary);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 999px;
}
.ik-pricing-card .price { font-size: 2rem; font-weight: 800; color: var(--ik-primary); }
.ik-pricing-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ik-pricing-card ul li::before { content: "✓ "; color: var(--ik-primary); font-weight: 700; }

/* ---------- Portal / Admin shells ---------- */
.ik-portal-sidebar {
    width: 260px;
    background: #fff;
    border-left: 1px solid var(--ik-border);
    min-height: 100vh;
}
[dir="rtl"] .ik-portal-sidebar { border-left: none; border-right: 1px solid var(--ik-border); }

.ik-admin-sidebar {
    width: 288px;
    background: var(--ik-sidebar-bg);
    color: var(--ik-sidebar-text);
    min-height: 100vh;
}
.ik-admin-sidebar .nav-link { color: var(--ik-sidebar-text); padding: 9px 16px; border-radius: 10px; font-size: .92rem; }
.ik-admin-sidebar .nav-link.active, .ik-admin-sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.ik-admin-sidebar .nav-group-title { color: rgba(215,218,226,.55); font-size: .75rem; text-transform: uppercase; padding: 14px 16px 6px; letter-spacing: .03em; }

.ik-kpi-card { background: #fff; border: 1px solid var(--ik-border); border-radius: var(--ik-radius); padding: 20px; }
.ik-kpi-card .value { font-size: 1.8rem; font-weight: 800; }
.ik-kpi-card .delta-up { color: var(--ik-success-text); }
.ik-kpi-card .delta-down { color: var(--ik-danger-text); }

.ik-table thead th { color: var(--ik-muted); font-weight: 700; font-size: .85rem; border-bottom: 1px solid var(--ik-border); }
.ik-table td, .ik-table th { vertical-align: middle; padding: 12px; }

.ik-delete-link { color: var(--ik-danger-link); }