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

@layer base {
    html { font-family: 'Poppins', system-ui, sans-serif; }
    *, *::before, *::after { box-sizing: border-box; }
}

@layer components {

    /* ── Badges ─────────────────────────────────────────────────────────── */
    .badge {
        @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold tracking-widest uppercase;
    }
    .badge-green {
        background: rgba(37,184,126,0.12);
        color: #25b87e;
        border: 1px solid rgba(37,184,126,0.3);
    }
    .badge-navy {
        background: rgba(30,58,95,0.08);
        color: #1e3a5f;
        border: 1px solid rgba(30,58,95,0.2);
    }

    /* ── Typography ─────────────────────────────────────────────────────── */
    .display-xl {
        @apply font-extrabold leading-tight;
        font-size: clamp(2.25rem, 5vw, 3.75rem);
        color: #1e3a5f;
    }
    .display-lg {
        @apply font-extrabold leading-tight;
        font-size: clamp(1.875rem, 4vw, 3rem);
        color: #1e3a5f;
    }
    .display-md {
        @apply font-bold leading-tight;
        font-size: clamp(1.5rem, 3vw, 2.25rem);
        color: #1e3a5f;
    }
    .text-gradient-green {
        background: linear-gradient(135deg, #25b87e 0%, #1a9e6b 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* ── Cards ──────────────────────────────────────────────────────────── */
    .card-premium {
        @apply bg-white rounded-2xl;
        border: 1px solid #e2e8f0;
        box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    }
    .testimonial-card {
        @apply bg-white rounded-2xl;
        border: 1px solid #e2e8f0;
        box-shadow: 0 2px 12px rgba(0,0,0,0.05);
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .testimonial-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    }

    /* ── Inputs ─────────────────────────────────────────────────────────── */
    .input-premium {
        @apply w-full rounded-xl text-sm outline-none transition-all duration-200;
        padding: 0.75rem 1rem;
        border: 1.5px solid #e2e8f0;
        color: #1e3a5f;
        font-family: 'Poppins', sans-serif;
        background: #fff;
    }
    .input-premium:focus {
        border-color: #25b87e;
        box-shadow: 0 0 0 3px rgba(37,184,126,0.1);
    }
    .input-premium::placeholder { color: #94a3b8; }

    /* ── Buttons ────────────────────────────────────────────────────────── */
    .btn-primary {
        @apply inline-flex items-center justify-center font-semibold rounded-xl transition-all duration-200 cursor-pointer;
        background: #25b87e;
        color: #fff;
        padding: 0.625rem 1.5rem;
        font-size: 0.875rem;
        font-family: 'Poppins', sans-serif;
        text-decoration: none;
        border: none;
    }
    .btn-primary:hover {
        background: #1fa06d;
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(37,184,126,0.35);
    }
    .btn-primary:active { transform: translateY(0); }
    .btn-primary:disabled { opacity: 0.65; cursor: not-allowed; transform: none; box-shadow: none; }

    .btn-secondary {
        @apply inline-flex items-center justify-center font-semibold rounded-xl transition-all duration-200 cursor-pointer;
        background: transparent;
        color: #1e3a5f;
        padding: 0.625rem 1.5rem;
        font-size: 0.875rem;
        font-family: 'Poppins', sans-serif;
        text-decoration: none;
        border: 1.5px solid #d1d9e6;
    }
    .btn-secondary:hover {
        border-color: #1e3a5f;
        background: rgba(30,58,95,0.04);
        transform: translateY(-1px);
    }

    .btn-whatsapp {
        @apply inline-flex items-center justify-center gap-2 font-semibold rounded-xl transition-all duration-200 cursor-pointer;
        background: #25D366;
        color: #fff;
        padding: 0.625rem 1.5rem;
        font-size: 0.875rem;
        font-family: 'Poppins', sans-serif;
        text-decoration: none;
        border: none;
    }
    .btn-whatsapp:hover {
        background: #1eb858;
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(37,211,102,0.35);
    }

    /* ── Stars ──────────────────────────────────────────────────────────── */
    .stars { color: #f59e0b; }

    /* ── Scroll reveal ──────────────────────────────────────────────────── */
    .reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }
    .reveal-right {
        opacity: 0;
        transform: translateX(32px);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .reveal-right.visible {
        opacity: 1;
        transform: translateX(0);
    }
    .reveal-left {
        opacity: 0;
        transform: translateX(-32px);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .reveal-left.visible {
        opacity: 1;
        transform: translateX(0);
    }

    /* ── Dashboard widget ───────────────────────────────────────────────── */
    .dashboard-widget {
        @apply bg-white;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 24px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);
    }

    /* ── Service card ───────────────────────────────────────────────────── */
    .service-card {
        @apply rounded-2xl;
        border: 1px solid #e2e8f0;
        box-shadow: 0 2px 12px rgba(0,0,0,0.05);
        transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    }
    .service-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 30px rgba(0,0,0,0.1);
        border-color: rgba(37,184,126,0.3);
    }

    /* ── Progress bar ───────────────────────────────────────────────────── */
    .progress-bar {
        @apply w-full rounded-full overflow-hidden;
        height: 6px;
        background: #f1f5f9;
    }
    .progress-fill {
        height: 100%;
        border-radius: 9999px;
        transition: width 1s ease;
    }

    /* ── Float animations ───────────────────────────────────────────────── */
    .animate-float      { animation: float      3s ease-in-out infinite; }
    .animate-float-slow { animation: float-slow 5s ease-in-out infinite; }

    /* ── Marquee ────────────────────────────────────────────────────────── */
    .marquee-track {
        @apply flex;
        width: max-content;
        animation: marquee 30s linear infinite;
    }
    .marquee-track:hover { animation-play-state: paused; }

    /* ── Admin tables ────────────────────────────────────────────────── */
    .adm-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
    .adm-table thead th {
        padding: 0.625rem 1rem; font-size: 0.75rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.05em;
        color: #94a3b8; background: #f8fafc;
        border-bottom: 1px solid #f1f5f9; text-align: left;
    }
    .adm-table tbody tr { border-bottom: 1px solid #f8fafc; transition: background 0.1s; }
    .adm-table tbody tr:hover { background: #f8fafc; }
    .adm-table tbody td { padding: 0.75rem 1rem; vertical-align: middle; }
    .adm-table tbody tr:last-child { border-bottom: none; }

    /* ── Smooth scrollbar ─────────────────────────────────────────────── */
    * { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
    *::-webkit-scrollbar { width: 6px; height: 6px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
    *::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

    /* ── Timeline (About page) ────────────────────────────────────────── */
    .timeline-line {
        width: 2px;
        background: linear-gradient(to bottom, transparent, #25b87e 8%, #e2e8f0 85%, transparent);
    }
    .section-divider {
        height: 1px;
        background: linear-gradient(to right, transparent, #e2e8f0 20%, #e2e8f0 80%, transparent);
        margin: 0 0 3.5rem;
    }

    /* ── Public nav links ─────────────────────────────────────────────── */
    .pub-nav-link {
        display: inline-block;
        padding: 0.4375rem 0.875rem;
        font-size: 0.875rem;
        font-weight: 500;
        border-radius: 8px;
        text-decoration: none;
        transition: color 0.15s, background 0.15s;
        color: #374151;
        background: transparent;
        white-space: nowrap;
    }
    .pub-nav-link:hover { color: #25b87e; background: rgba(37,184,126,0.07); }
    .pub-nav-link.active { color: #25b87e; background: rgba(37,184,126,0.08); }

    .pub-nav-link-mobile {
        display: block;
        padding: 0.75rem 1rem;
        border-radius: 10px;
        font-size: 0.9rem;
        font-weight: 500;
        text-decoration: none;
        color: #374151;
        transition: background 0.15s, color 0.15s;
    }
    .pub-nav-link-mobile:hover { background: rgba(37,184,126,0.07); color: #25b87e; }
    .pub-nav-link-mobile.active { color: #25b87e; background: rgba(37,184,126,0.08); }

    /* ── Reading progress bar ─────────────────────────────────────────── */
    .reading-progress {
        position: fixed;
        top: 0;
        left: 0;
        height: 3px;
        width: 0%;
        background: linear-gradient(90deg, #25b87e 0%, #1a9b68 100%);
        z-index: 60;
        transition: width 0.08s linear;
        pointer-events: none;
    }

    /* ── Blog share sidebar ───────────────────────────────────────────── */
    .share-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        border: 1px solid #e2e8f0;
        background: #fff;
        color: #64748b;
        text-decoration: none;
        transition: all 0.15s;
        cursor: pointer;
    }
    .share-btn:hover { border-color: #25b87e; color: #25b87e; background: rgba(37,184,126,0.06); transform: translateY(-1px); }

    /* ── Client portal page header ────────────────────────────────────── */
    .cli-page-title { font-size: 1.375rem; font-weight: 700; color: #1e3a5f; margin: 0; }
    .cli-page-subtitle { font-size: 0.875rem; color: #64748b; margin: 0.25rem 0 0; }
    .cli-card { background: #fff; border-radius: 14px; border: 1px solid #e2e8f0; }
}

/* ── Keyframes (outside layer so they're always emitted) ─────────────────── */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}
@keyframes float-slow {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}