@tailwind base;
@tailwind components;
@tailwind utilities;

/* =============================================================
   ZLHOST DESIGN SYSTEM — Custom Styles
   ============================================================= */

@layer base {
    html {
        scroll-behavior: smooth;
    }

    html[dir="rtl"] body {
        font-family: 'Tajawal', 'Inter', system-ui, sans-serif;
    }

    html[dir="ltr"] body {
        font-family: 'Inter', 'Tajawal', system-ui, sans-serif;
    }

    body {
        @apply bg-muted text-ink antialiased;
        font-feature-settings: 'kern', 'liga', 'calt';
    }

    h1, h2, h3, h4, h5 {
        @apply text-navy-900 font-bold tracking-tight;
    }

    a { @apply transition-colors duration-200; }

    [x-cloak] { display: none !important; }

    *:focus-visible {
        @apply outline-none ring-2 ring-brand-500 ring-offset-2 ring-offset-white;
    }
}

@layer components {

    /* ---------- Buttons ---------- */
    .btn {
        @apply inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl font-semibold text-sm
               transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed select-none;
    }
    .btn-primary {
        @apply bg-green-fade text-white shadow-soft hover:shadow-cardHover hover:-translate-y-0.5;
    }
    .btn-secondary {
        @apply bg-navy-900 text-white hover:bg-navy-800 shadow-soft;
    }
    .btn-outline {
        @apply border-2 border-brand-600 text-brand-700 hover:bg-brand-50;
    }
    .btn-ghost {
        @apply text-navy-700 hover:bg-navy-50;
    }
    .btn-whatsapp {
        @apply bg-whatsapp text-white hover:bg-whatsapp-dark shadow-soft;
    }
    .btn-gold {
        @apply bg-gold-400 text-navy-900 hover:bg-gold-500 shadow-soft;
    }
    .btn-danger {
        @apply bg-red-600 text-white hover:bg-red-700 shadow-soft;
    }
    .btn-sm { @apply px-3 py-1.5 text-xs rounded-lg; }
    .btn-lg { @apply px-7 py-3.5 text-base rounded-2xl; }

    /* ---------- Cards ---------- */
    .card {
        @apply bg-white rounded-2xl shadow-card border border-border/60
               transition-all duration-300;
    }
    .card-hover {
        @apply hover:shadow-cardHover hover:-translate-y-1 hover:border-brand-200;
    }
    .card-padded { @apply p-6 md:p-7; }

    /* ---------- Forms ---------- */
    .form-label {
        @apply block text-sm font-semibold text-navy-800 mb-2;
    }
    .form-input,
    .form-textarea,
    .form-select {
        @apply w-full bg-white border border-border rounded-xl px-4 py-2.5
               text-navy-900 placeholder:text-navy-400
               focus:border-brand-500 focus:ring-2 focus:ring-brand-100
               transition-all duration-200;
    }
    .form-error {
        @apply text-sm text-red-600 mt-1.5 flex items-center gap-1;
    }
    .form-help {
        @apply text-xs text-navy-500 mt-1.5;
    }

    /* ---------- Badges ---------- */
    .badge {
        @apply inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-bold;
    }
    .badge-success { @apply bg-brand-50 text-brand-700 border border-brand-200; }
    .badge-warning { @apply bg-amber-50 text-amber-700 border border-amber-200; }
    .badge-info    { @apply bg-blue-50 text-blue-700 border border-blue-200; }
    .badge-danger  { @apply bg-red-50 text-red-700 border border-red-200; }
    .badge-neutral { @apply bg-navy-50 text-navy-700 border border-navy-200; }
    .badge-gold    { @apply bg-gold-50 text-gold-700 border border-gold-200; }

    /* ---------- Status Pills ---------- */
    .status-dot {
        @apply inline-block w-2 h-2 rounded-full ml-1 me-1;
    }

    /* ---------- Section ---------- */
    .section { @apply py-16 md:py-24; }
    .section-tight { @apply py-12 md:py-16; }
    .container-tight { @apply max-w-5xl mx-auto px-4 sm:px-6 lg:px-8; }
    .container-wide { @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8; }
    .section-title { @apply mb-8 text-center mx-auto max-w-3xl; }

    /* ---------- Mega Header ---------- */
    .nav-link {
        @apply relative inline-flex items-center gap-1 px-3 py-2 rounded-lg
               text-sm font-semibold text-navy-800 hover:text-brand-700 hover:bg-brand-50/50
               transition-colors;
    }
    .nav-link-active {
        @apply text-brand-700 bg-brand-50;
    }

    /* ---------- Homepage rebuild (compiled, no CDN) ---------- */
    .zl-header {
        @apply bg-white/95 backdrop-blur-sm sticky top-0 z-40 border-b border-border/70 shadow-soft;
    }

    .zl-logo-img {
        @apply h-11 w-auto object-contain;
    }

    .zl-home {
        @apply bg-[#f6f8fb] text-navy-900;
    }

    .zl-hero {
        @apply relative overflow-hidden bg-white border-b border-border/70;
        background:
            radial-gradient(circle at 18% 20%, rgba(22, 163, 74, 0.13), transparent 24rem),
            linear-gradient(180deg, #ffffff 0%, #f7faf9 58%, #f3f6f8 100%);
    }

    .zl-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: .55;
        background-image:
            linear-gradient(rgba(11, 31, 58, .04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(11, 31, 58, .04) 1px, transparent 1px);
        background-size: 34px 34px;
    }

    .zl-hero-visual {
        @apply relative mx-auto max-w-xl;
    }

    .zl-server-tower {
        @apply relative w-32 md:w-40 rounded-3xl bg-navy-900 p-4 shadow-cardHover border border-navy-700;
    }

    .zl-server-slot {
        @apply h-7 rounded-xl bg-navy-800 border border-navy-700 mb-2 flex items-center justify-between px-3;
    }

    .zl-device-card {
        @apply rounded-3xl bg-white shadow-cardHover border border-border/80 p-4;
    }

    .zl-trust-strip {
        @apply bg-white rounded-2xl border border-border/70 shadow-card overflow-hidden;
    }

    .zl-stat-card {
        @apply bg-white rounded-2xl border border-border/70 shadow-soft px-5 py-4 text-center;
    }

    .zl-service-column {
        @apply bg-white rounded-2xl border border-border/80 shadow-soft p-4 hover:shadow-cardHover transition-all;
    }

    .zl-service-row {
        @apply flex items-start gap-2 rounded-xl px-2.5 py-2 text-sm text-navy-700 hover:bg-brand-50 hover:text-brand-800;
    }

    .zl-check-icon {
        @apply mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-brand-50 text-brand-700;
    }

    .service-card {
        @apply bg-white rounded-2xl shadow-card border border-border/70 p-5 transition-all hover:shadow-cardHover hover:-translate-y-1;
    }

    .pricing-card {
        @apply bg-white rounded-2xl shadow-card border border-border/70 p-5 transition-all hover:shadow-cardHover hover:-translate-y-1;
    }

    /* ---------- Pixel-perfect homepage from reference ---------- */
    .zl-pixel-home {
        @apply min-h-screen bg-[#f7f9fb] text-[#152038] font-sans;
    }

    .zl-pixel-shell {
        @apply w-full max-w-[1380px] mx-auto px-4 sm:px-6 lg:px-8;
    }

    .zl-pixel-header {
        @apply bg-white border-b border-[#edf0f4] shadow-[0_2px_10px_rgba(15,23,42,0.04)] sticky top-0 z-50;
    }

    .zl-pixel-logo {
        @apply h-[3.9rem] md:h-12 w-auto object-contain;
    }

    .zl-pixel-nav {
        @apply hidden lg:flex items-center gap-2 text-[14px] font-bold text-[#1f2b3d];
    }

    .zl-pixel-nav-link {
        @apply rounded-lg px-3 py-2 hover:bg-brand-50 hover:text-brand-700;
    }

    .zl-pixel-hero {
        @apply relative overflow-hidden bg-white border-b border-[#eef2f4];
        background:
            linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,255,255,.78)),
            radial-gradient(circle at 44% 36%, rgba(22,163,74,.08), transparent 18rem);
    }

    .zl-pixel-hero::after {
        content: '';
        @apply absolute inset-0 pointer-events-none opacity-40;
        background-image:
            linear-gradient(rgba(15, 23, 42, .035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(15, 23, 42, .035) 1px, transparent 1px);
        background-size: 42px 42px;
    }

    .zl-pixel-hero-image {
        @apply w-full max-w-[650px] mx-auto object-contain drop-shadow-[0_18px_34px_rgba(15,23,42,0.16)];
    }

    .zl-pixel-kicker {
        @apply text-sm md:text-[17px] font-extrabold text-gold-500 mb-2;
    }

    .zl-pixel-title {
        @apply text-[34px] md:text-[54px] xl:text-[60px] leading-[1.12] font-black text-navy-900;
    }

    .zl-pixel-title-accent {
        @apply text-brand-700;
    }

    .zl-pixel-subtitle {
        @apply mt-4 text-[15px] md:text-[18px] leading-8 text-navy-600 max-w-2xl;
    }

    .zl-pixel-hero-features {
        @apply mt-6 grid grid-cols-2 md:grid-cols-4 gap-4 text-center;
    }

    .zl-pixel-mini-feature {
        @apply flex min-h-[72px] flex-col items-center justify-center rounded-2xl bg-white/90 border border-[#e8edf2] px-4 py-3 shadow-soft text-xs font-bold text-navy-700;
    }

    .zl-pixel-stats {
        @apply -mt-6 relative z-10 grid grid-cols-2 md:grid-cols-5 overflow-hidden rounded-2xl bg-white border border-[#e8edf2] shadow-card divide-y md:divide-y-0 md:divide-x md:divide-x-reverse divide-[#edf0f4];
    }

    .zl-pixel-stat {
        @apply px-5 py-5 text-center;
    }

    .zl-pixel-section-heading {
        @apply mb-6 text-center;
    }

    .zl-pixel-section-eyebrow {
        @apply inline-flex items-center gap-2 text-xs font-black text-gold-500;
    }

    .zl-pixel-section-eyebrow::before,
    .zl-pixel-section-eyebrow::after {
        content: '';
        @apply block h-px w-8 bg-gold-400;
    }

    .zl-pixel-service-grid {
        @apply grid md:grid-cols-2 lg:grid-cols-4 gap-5;
    }

    .zl-pixel-services {
        @apply py-10;
    }

    .zl-pixel-service-col {
        @apply min-h-[250px] rounded-2xl bg-white border border-[#e8edf2] shadow-soft p-5;
    }

    .zl-pixel-service-item {
        @apply flex items-center gap-2 rounded-xl py-2 text-[14px] font-semibold text-navy-700;
    }

    .zl-pixel-icon {
        @apply inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-brand-100 bg-brand-50 text-brand-700;
    }

    .zl-pixel-plans {
        @apply grid md:grid-cols-2 lg:grid-cols-4 gap-5;
    }

    .zl-pixel-plan {
        @apply relative min-h-[320px] rounded-2xl bg-white border border-[#e8edf2] shadow-soft p-6 text-center;
    }

    .zl-pixel-plan-featured {
        @apply border-2 border-gold-300 shadow-card;
    }

    .zl-pixel-plan-ribbon {
        @apply absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-gold-400 px-3 py-1 text-[11px] font-black text-navy-950 shadow-soft;
    }

    .zl-pixel-wordpress {
        @apply rounded-3xl bg-gradient-to-br from-[#064b3a] to-[#0f6b4f] text-white p-6 md:p-8 shadow-card min-h-[255px];
    }

    .zl-pixel-solution-card {
        @apply min-h-[154px] rounded-2xl bg-white border border-[#e8edf2] shadow-soft p-5 text-center;
    }

    .zl-pixel-why-strip {
        @apply grid grid-cols-2 md:grid-cols-4 overflow-hidden rounded-2xl bg-white border border-[#e8edf2] shadow-soft divide-y md:divide-y-0 md:divide-x md:divide-x-reverse divide-[#edf0f4];
    }

    .zl-pixel-testimonial {
        @apply min-h-[205px] rounded-2xl bg-white border border-[#e8edf2] shadow-soft p-6;
    }

    .zl-pixel-avatar {
        @apply h-16 w-16 rounded-full object-cover border-4 border-white shadow-soft;
    }

    .zl-pixel-cta {
        @apply relative overflow-hidden rounded-3xl text-white shadow-card;
        background: linear-gradient(110deg, rgba(7, 19, 42, .96), rgba(5, 78, 59, .88), rgba(11, 31, 58, .94));
    }

    .zl-pixel-footer {
        @apply bg-navy-950 text-navy-200;
    }

    .zl-pixel-footer-bg {
        @apply absolute inset-0 h-full w-full object-cover opacity-35;
    }

    .zl-pixel-payment-strip {
        @apply bg-white border-t border-[#e8edf2] py-3 text-center text-xs font-bold text-navy-500;
    }

    .zl-public-hero {
        @apply relative overflow-hidden bg-white border-b border-[#eef2f4] py-12 md:py-16;
        background:
            linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,255,255,.86)),
            radial-gradient(circle at 36% 34%, rgba(22,163,74,.08), transparent 18rem);
    }

    .zl-public-hero::after {
        content: '';
        @apply absolute inset-0 pointer-events-none opacity-30;
        background-image:
            linear-gradient(rgba(15, 23, 42, .035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(15, 23, 42, .035) 1px, transparent 1px);
        background-size: 42px 42px;
    }

    .zl-public-hero-inner {
        @apply zl-pixel-shell relative z-10 text-center;
    }

    .zl-public-kicker {
        @apply inline-flex items-center gap-2 text-xs font-black text-gold-500;
    }

    .zl-public-kicker::before,
    .zl-public-kicker::after {
        content: '';
        @apply block h-px w-8 bg-gold-400;
    }

    .zl-public-title {
        @apply mt-3 text-3xl md:text-5xl font-black leading-tight text-navy-900;
    }

    .zl-public-description {
        @apply mx-auto mt-4 max-w-3xl text-base md:text-lg leading-8 text-navy-600;
    }

    .zl-public-section {
        @apply zl-pixel-shell py-10 md:py-12;
    }

    .zl-public-card {
        @apply rounded-2xl bg-white border border-[#e8edf2] shadow-soft;
    }

    .zl-pixel-footer-map {
        @apply flex items-center gap-4 rounded-2xl border border-white/10 bg-white/5 p-4 text-start;
        background-image: radial-gradient(circle at 50% 35%, rgba(18, 151, 103, .22), transparent 9rem);
    }

    .zl-pixel-footer-map-icon {
        @apply flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-brand-600 text-white;
    }

    .zl-pixel-social {
        @apply inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/10 text-white hover:bg-brand-600;
    }

    .zl-service-card-media {
        @apply flex h-full min-h-[118px] items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br from-brand-50 to-navy-50 text-brand-700;
    }

    .zl-page-hero {
        @apply relative overflow-hidden border-b border-[#e8edf2] bg-white py-14 md:py-20;
        background:
            linear-gradient(90deg, rgba(255,255,255,.97), rgba(247,249,251,.9)),
            radial-gradient(circle at 18% 24%, rgba(18,151,103,.13), transparent 22rem),
            radial-gradient(circle at 82% 72%, rgba(246,197,79,.16), transparent 18rem);
    }

    .zl-page-hero::after {
        content: '';
        @apply absolute inset-0 pointer-events-none opacity-30;
        background-image:
            linear-gradient(rgba(15, 23, 42, .035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(15, 23, 42, .035) 1px, transparent 1px);
        background-size: 42px 42px;
    }

    .zl-page-hero-grid {
        @apply zl-pixel-shell relative z-10 grid gap-10 lg:grid-cols-[1fr_.85fr] lg:items-center;
    }

    .zl-page-kicker {
        @apply inline-flex items-center gap-2 rounded-full border border-brand-100 bg-white/80 px-4 py-2 text-xs font-black text-brand-700 shadow-soft;
    }

    .zl-page-title {
        @apply mt-5 text-3xl font-black leading-tight text-navy-900 md:text-5xl;
    }

    .zl-page-description {
        @apply mt-5 max-w-3xl text-base leading-8 text-navy-600 md:text-lg;
    }

    .zl-hero-proof {
        @apply mt-6 grid gap-3 sm:grid-cols-3;
    }

    .zl-hero-proof-item {
        @apply rounded-2xl border border-[#e8edf2] bg-white/85 px-4 py-3 text-sm font-bold text-navy-700 shadow-soft;
    }

    .zl-visual-panel {
        @apply relative overflow-hidden rounded-[2rem] border border-[#dbe8e2] bg-white p-5 shadow-card;
    }

    .zl-visual-screen {
        @apply rounded-3xl border border-[#e8edf2] bg-gradient-to-br from-navy-950 via-[#0d2d40] to-brand-700 p-5 text-white shadow-soft;
    }

    .zl-visual-window {
        @apply mt-4 rounded-2xl bg-white p-4 text-navy-900 shadow-soft;
    }

    .zl-service-band {
        @apply rounded-[2rem] border border-[#e8edf2] bg-white p-5 md:p-7 shadow-soft;
    }

    .zl-feature-card {
        @apply rounded-2xl border border-[#e8edf2] bg-white p-5 shadow-soft transition-all hover:-translate-y-1 hover:shadow-cardHover;
    }

    .zl-feature-media {
        @apply mb-4 flex h-36 items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br from-brand-50 via-white to-gold-50 text-brand-700;
    }

    .zl-process-step {
        @apply relative rounded-2xl border border-[#e8edf2] bg-white p-5 shadow-soft;
    }

    .zl-process-number {
        @apply mb-4 inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-brand-600 text-sm font-black text-white shadow-soft;
    }

    .zl-trust-card {
        @apply rounded-2xl border border-[#e8edf2] bg-white p-5 shadow-soft;
    }

    .zl-contact-panel {
        @apply rounded-[2rem] border border-[#e8edf2] bg-white p-5 md:p-8 shadow-card;
    }

    .zl-contact-channel {
        @apply rounded-2xl border border-[#e8edf2] bg-white p-5 shadow-soft transition-all hover:-translate-y-1 hover:shadow-cardHover;
    }

    /* ---------- Sidebar (Customer Dashboard) ---------- */
    .sidebar-link {
        @apply flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium
               text-navy-700 hover:bg-brand-50 hover:text-brand-700 transition-all;
    }
    .sidebar-link-active {
        @apply bg-brand-50 text-brand-700 shadow-soft border border-brand-100;
    }

    /* ---------- Tables ---------- */
    .table-zlhost {
        @apply w-full text-right text-sm;
    }
    html[dir="ltr"] .table-zlhost { @apply text-left; }
    .table-zlhost thead {
        @apply bg-navy-50/60 text-navy-700 uppercase text-xs tracking-wide;
    }
    .table-zlhost thead th { @apply px-4 py-3 font-bold; }
    .table-zlhost tbody td {
        @apply px-4 py-3.5 text-navy-800 border-t border-border/60;
    }
    .table-zlhost tbody tr:hover { @apply bg-muted/60; }

    /* ---------- Timeline ---------- */
    .timeline-item {
        @apply relative ps-8 pb-6 border-s-2 border-border;
    }
    .timeline-item::before {
        content: '';
        @apply absolute -start-2.5 top-0 w-5 h-5 rounded-full bg-white border-4 border-brand-500;
    }
    .timeline-item.is-current::before { @apply border-amber-500 animate-pulse-soft; }
    .timeline-item.is-failed::before  { @apply border-red-500; }

    /* ---------- WhatsApp FAB ---------- */
    .whatsapp-fab {
        @apply fixed bottom-6 z-50 flex items-center justify-center
               w-14 h-14 rounded-full bg-whatsapp text-white shadow-cardHover
               hover:bg-whatsapp-dark hover:scale-110 transition-all duration-300;
    }
    html[dir="rtl"] .whatsapp-fab,
    html[dir="ltr"] .whatsapp-fab { @apply right-6; }

    /* ---------- Empty state ---------- */
    .empty-state {
        @apply flex flex-col items-center justify-center text-center
               py-12 px-6 rounded-2xl bg-muted/40 border-2 border-dashed border-border;
    }

    /* ---------- Service Card hover ---------- */
    .service-icon-wrap {
        @apply inline-flex items-center justify-center w-12 h-12 rounded-xl
               bg-brand-50 text-brand-700 transition-all;
    }
    .card-hover:hover .service-icon-wrap {
        @apply bg-brand-600 text-white scale-110;
    }
}

@layer utilities {
    .pb-0 { padding-bottom: 20px; }
    @media (min-width: 768px) {
        .zl-pixel-logo { height: 6rem; }
        .zl-pixel-footer .zl-footer-logo { height: 6rem; }
    }
    .text-balance { text-wrap: balance; }
    .scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; }
    .scrollbar-thin::-webkit-scrollbar-thumb { @apply bg-navy-200 rounded-full; }

    /* RTL/LTR helpers */
    html[dir="rtl"] .rtl-flip { transform: scaleX(-1); }
}

/* Print receipts/invoices */
@media print {
    .no-print { display: none !important; }
    body { @apply bg-white; }
}