/* ==========================================================================
   Website Templates Page Specific Styles - Modern SaaS Redesign
   Isolated CSS - Preserves existing project architecture & global CSS
   ========================================================================== */

/* ── Entrance Animation ─────────────────────────────────────────────────── */
@keyframes fadeInUpTemplate {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wt-animate-card {
    opacity: 0;
    animation: fadeInUpTemplate 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--card-index, 0) * 0.035s);
}

@media (prefers-reduced-motion: reduce) {
    .wt-animate-card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── Card Clickable Wrapper ────────────────────────────────────────────── */
.wt-card-wrapper {
    display: block;
    text-decoration: none !important;
    color: inherit !important;
    height: 100%;
    outline: none;
    border-radius: 1.25rem;
}

.wt-card-wrapper:focus-visible .wt-card {
    outline: 3px solid #0d6efd;
    outline-offset: 4px;
}

/* ── Premium SaaS Card Base ────────────────────────────────────────────── */
.wt-card {
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 1.25rem !important;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1),
                box-shadow 0.35s cubic-bezier(0.165, 0.84, 0.44, 1),
                border-color 0.35s ease;
    cursor: pointer;
}

.wt-card-wrapper:hover .wt-card,
.wt-card-wrapper:focus-visible .wt-card {
    transform: translateY(-8px) scale(1.012);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08) !important;
}

/* ── Top Accent Gradient Bar ────────────────────────────────────────────── */
.wt-card-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--wt-theme-gradient, linear-gradient(90deg, #0d6efd, #00d2ff));
    transition: height 0.3s ease, opacity 0.3s ease;
}

.wt-card-wrapper:hover .wt-card-accent {
    height: 6px;
}

/* ── Circular Icon Box ─────────────────────────────────────────────────── */
.wt-icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--wt-theme-bg, rgba(13, 110, 253, 0.08));
    color: var(--wt-theme-color, #0d6efd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.35s ease,
                box-shadow 0.35s ease;
}

.wt-card-wrapper:hover .wt-icon-circle {
    transform: scale(1.15) rotate(6deg);
    box-shadow: 0 8px 20px var(--wt-theme-glow, rgba(13, 110, 253, 0.25));
}

/* ── Soft Pill Badge ────────────────────────────────────────────────────── */
.wt-badge-saas {
    background-color: var(--wt-theme-bg, rgba(13, 110, 253, 0.08)) !important;
    color: var(--wt-theme-color, #0d6efd) !important;
    border: 1px solid var(--wt-theme-border, rgba(13, 110, 253, 0.2)) !important;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 0.45rem 0.85rem;
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.wt-card-wrapper:hover .wt-badge-saas {
    box-shadow: 0 0 14px var(--wt-theme-glow, rgba(13, 110, 253, 0.35));
    transform: translateY(-1px);
}

/* ── Typography & Content ──────────────────────────────────────────────── */
.wt-card-title {
    color: #0f172a;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: color 0.3s ease;
}

.wt-card-wrapper:hover .wt-card-title {
    color: var(--wt-theme-color, #0d6efd);
}

.wt-card-subtitle {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ── Footer Link & Arrow Action ────────────────────────────────────────── */
.wt-card-footer {
    border-top: 1px dashed rgba(0, 0, 0, 0.09) !important;
}

.wt-action-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    transition: color 0.3s ease;
}

.wt-card-wrapper:hover .wt-action-text {
    color: var(--wt-theme-color, #0d6efd);
}

.wt-arrow-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f8fafc;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.3s ease,
                color 0.3s ease;
}

.wt-card-wrapper:hover .wt-arrow-btn {
    transform: translateX(6px);
    background: var(--wt-theme-color, #0d6efd);
    color: #ffffff;
}

/* ── Category Color Themes Mapping ─────────────────────────────────────── */
/* 1. Landing Pages (Blue) */
.wt-theme-landing-pages {
    --wt-theme-color: #2563eb;
    --wt-theme-bg: rgba(37, 99, 235, 0.09);
    --wt-theme-border: rgba(37, 99, 235, 0.22);
    --wt-theme-glow: rgba(37, 99, 235, 0.3);
    --wt-theme-gradient: linear-gradient(90deg, #2563eb, #38bdf8);
}

/* 2. Portfolio (Purple) */
.wt-theme-portfolio {
    --wt-theme-color: #7c3aed;
    --wt-theme-bg: rgba(124, 58, 237, 0.09);
    --wt-theme-border: rgba(124, 58, 237, 0.22);
    --wt-theme-glow: rgba(124, 58, 237, 0.3);
    --wt-theme-gradient: linear-gradient(90deg, #7c3aed, #c084fc);
}

/* 3. Company Website (Indigo) */
.wt-theme-company-website {
    --wt-theme-color: #4f46e5;
    --wt-theme-bg: rgba(79, 70, 229, 0.09);
    --wt-theme-border: rgba(79, 70, 229, 0.22);
    --wt-theme-glow: rgba(79, 70, 229, 0.3);
    --wt-theme-gradient: linear-gradient(90deg, #4f46e5, #818cf8);
}

/* 4. SaaS (Cyan/Sky) */
.wt-theme-saas {
    --wt-theme-color: #0891b2;
    --wt-theme-bg: rgba(8, 145, 178, 0.09);
    --wt-theme-border: rgba(8, 145, 178, 0.22);
    --wt-theme-glow: rgba(8, 145, 178, 0.3);
    --wt-theme-gradient: linear-gradient(90deg, #0891b2, #06b6d4);
}

/* 5. Startup (Amber/Orange) */
.wt-theme-startup {
    --wt-theme-color: #d97706;
    --wt-theme-bg: rgba(217, 119, 6, 0.09);
    --wt-theme-border: rgba(217, 119, 6, 0.22);
    --wt-theme-glow: rgba(217, 119, 6, 0.3);
    --wt-theme-gradient: linear-gradient(90deg, #d97706, #fbbf24);
}

/* 6. Agency (Emerald) */
.wt-theme-agency {
    --wt-theme-color: #059669;
    --wt-theme-bg: rgba(5, 150, 105, 0.09);
    --wt-theme-border: rgba(5, 150, 105, 0.22);
    --wt-theme-glow: rgba(5, 150, 105, 0.3);
    --wt-theme-gradient: linear-gradient(90deg, #059669, #34d399);
}

/* 7. Restaurant (Crimson) */
.wt-theme-restaurant {
    --wt-theme-color: #dc2626;
    --wt-theme-bg: rgba(220, 38, 38, 0.09);
    --wt-theme-border: rgba(220, 38, 38, 0.22);
    --wt-theme-glow: rgba(220, 38, 38, 0.3);
    --wt-theme-gradient: linear-gradient(90deg, #dc2626, #f87171);
}

/* 8. Hospital (Teal) */
.wt-theme-hospital {
    --wt-theme-color: #0d9488;
    --wt-theme-bg: rgba(13, 148, 136, 0.09);
    --wt-theme-border: rgba(13, 148, 136, 0.22);
    --wt-theme-glow: rgba(13, 148, 136, 0.3);
    --wt-theme-gradient: linear-gradient(90deg, #0d9488, #2dd4bf);
}

/* 9. School (Blue) */
.wt-theme-school {
    --wt-theme-color: #1d4ed8;
    --wt-theme-bg: rgba(29, 78, 216, 0.09);
    --wt-theme-border: rgba(29, 78, 216, 0.22);
    --wt-theme-glow: rgba(29, 78, 216, 0.3);
    --wt-theme-gradient: linear-gradient(90deg, #1d4ed8, #60a5fa);
}

/* 10. Hotel (Gold/Bronze) */
.wt-theme-hotel {
    --wt-theme-color: #b45309;
    --wt-theme-bg: rgba(180, 83, 9, 0.09);
    --wt-theme-border: rgba(180, 83, 9, 0.22);
    --wt-theme-glow: rgba(180, 83, 9, 0.3);
    --wt-theme-gradient: linear-gradient(90deg, #b45309, #fde047);
}

/* 11. Travel (Azure) */
.wt-theme-travel {
    --wt-theme-color: #0284c7;
    --wt-theme-bg: rgba(2, 132, 199, 0.09);
    --wt-theme-border: rgba(2, 132, 199, 0.22);
    --wt-theme-glow: rgba(2, 132, 199, 0.3);
    --wt-theme-gradient: linear-gradient(90deg, #0284c7, #38bdf8);
}

/* 12. Ecommerce (Pink) */
.wt-theme-ecommerce {
    --wt-theme-color: #db2777;
    --wt-theme-bg: rgba(219, 39, 119, 0.09);
    --wt-theme-border: rgba(219, 39, 119, 0.22);
    --wt-theme-glow: rgba(219, 39, 119, 0.3);
    --wt-theme-gradient: linear-gradient(90deg, #db2777, #f472b6);
}

/* 13. Real Estate (Green) */
.wt-theme-real-estate {
    --wt-theme-color: #16a34a;
    --wt-theme-bg: rgba(22, 163, 74, 0.09);
    --wt-theme-border: rgba(22, 163, 74, 0.22);
    --wt-theme-glow: rgba(22, 163, 74, 0.3);
    --wt-theme-gradient: linear-gradient(90deg, #16a34a, #4ade80);
}

/* 14. NGO (Rose) */
.wt-theme-ngo {
    --wt-theme-color: #e11d48;
    --wt-theme-bg: rgba(225, 29, 72, 0.09);
    --wt-theme-border: rgba(225, 29, 72, 0.22);
    --wt-theme-glow: rgba(225, 29, 72, 0.3);
    --wt-theme-gradient: linear-gradient(90deg, #e11d48, #fb7185);
}

/* 15. Blog (Violet) */
.wt-theme-blog {
    --wt-theme-color: #9333ea;
    --wt-theme-bg: rgba(147, 51, 234, 0.09);
    --wt-theme-border: rgba(147, 51, 234, 0.22);
    --wt-theme-glow: rgba(147, 51, 234, 0.3);
    --wt-theme-gradient: linear-gradient(90deg, #9333ea, #e879f9);
}

/* 16. News Portal (Slate) */
.wt-theme-news-portal {
    --wt-theme-color: #334155;
    --wt-theme-bg: rgba(51, 65, 85, 0.09);
    --wt-theme-border: rgba(51, 65, 85, 0.22);
    --wt-theme-glow: rgba(51, 65, 85, 0.3);
    --wt-theme-gradient: linear-gradient(90deg, #334155, #94a3b8);
}

/* 17. Event (Electric Violet) */
.wt-theme-event {
    --wt-theme-color: #8b5cf6;
    --wt-theme-bg: rgba(139, 92, 246, 0.09);
    --wt-theme-border: rgba(139, 92, 246, 0.22);
    --wt-theme-glow: rgba(139, 92, 246, 0.3);
    --wt-theme-gradient: linear-gradient(90deg, #8b5cf6, #c084fc);
}

/* 18. Wedding (Rose Pink) */
.wt-theme-wedding {
    --wt-theme-color: #f43f5e;
    --wt-theme-bg: rgba(244, 63, 94, 0.09);
    --wt-theme-border: rgba(244, 63, 94, 0.22);
    --wt-theme-glow: rgba(244, 63, 94, 0.3);
    --wt-theme-gradient: linear-gradient(90deg, #f43f5e, #fda4af);
}

/* 19. Resume (Steel) */
.wt-theme-resume {
    --wt-theme-color: #475569;
    --wt-theme-bg: rgba(71, 85, 105, 0.09);
    --wt-theme-border: rgba(71, 85, 105, 0.22);
    --wt-theme-glow: rgba(71, 85, 105, 0.3);
    --wt-theme-gradient: linear-gradient(90deg, #475569, #cbd5e1);
}

/* 20. Coming Soon (Amber) */
.wt-theme-coming-soon {
    --wt-theme-color: #ea580c;
    --wt-theme-bg: rgba(234, 88, 12, 0.09);
    --wt-theme-border: rgba(234, 88, 12, 0.22);
    --wt-theme-glow: rgba(234, 88, 12, 0.3);
    --wt-theme-gradient: linear-gradient(90deg, #ea580c, #fb923c);
}

/* 21. Maintenance (Orange/Bronze) */
.wt-theme-maintenance {
    --wt-theme-color: #c2410c;
    --wt-theme-bg: rgba(194, 65, 12, 0.09);
    --wt-theme-border: rgba(194, 65, 12, 0.22);
    --wt-theme-glow: rgba(194, 65, 12, 0.3);
    --wt-theme-gradient: linear-gradient(90deg, #c2410c, #f97316);
}

/* 22. Admin Dashboard (Indigo/Violet) */
.wt-theme-admin-dashboard {
    --wt-theme-color: #3730a3;
    --wt-theme-bg: rgba(55, 48, 163, 0.09);
    --wt-theme-border: rgba(55, 48, 163, 0.22);
    --wt-theme-glow: rgba(55, 48, 163, 0.3);
    --wt-theme-gradient: linear-gradient(90deg, #3730a3, #818cf8);
}

/* ── Hero Banner Premium Polish ────────────────────────────────────────── */
.wt-hero-bg {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 1.5rem !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04) !important;
}

.wt-category-hero-icon {
    width: 72px;
    height: 72px;
    border-radius: 1.25rem;
    font-size: 2.25rem;
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(13, 110, 253, 0.28);
}