/**
 * Service Content Sections CSS
 * File: /assets/css/service-content.css
 * Version: 1.2
 *
 * CHANGELOG:
 * v1.2 - Remove unneeded !important, RGBA fallbacks, use html prefix for specificity
 * v1.1 - Fix step card contrast, bigger step numbers, connector arrow, max-width container
 * v1.0 - Styles for 7 jasa digital content sections (FAQ accordion, step cards, testimoni, WA button)
 *
 * USAGE: Loaded by /p/index.php only for digital_service products
 * SCOPE: All selectors prefixed with .svc- to avoid conflicts
 */

/* ==========================================
   SECTION WRAPPER
   ========================================== */
.svc-section {
    animation: svcFadeInUp 0.5s ease-out both;
}

/* v1.1: Section max-width for readability on wide screens */
.svc-section > h3 {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

@keyframes svcFadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   TRUST BADGES (3-pill grid, v1.1 bigger)
   ========================================== */
.svc-trust-badges .grid > div {
    min-height: 110px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ==========================================
   CARA KERJA (3-step cards, v1.2)
   HTML has bg-white — no need to force override
   ========================================== */
.svc-step-card {
    transition: transform 0.2s ease, box-shadow 0.25s ease;
    min-height: 160px;
}

/* v1.2: Use html prefix to beat Tailwind hover specificity without !important */
html .svc-step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -6px rgba(59, 130, 246, 0.18);
    border-color: rgb(147, 197, 253);
}

.svc-step-num {
    /* Stronger shadow for step number prominence */
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35);
    position: relative;
    z-index: 2;
}

/* v1.1: Connector arrow between steps (desktop only) */
.svc-step-connector {
    pointer-events: none;
}

.svc-step-connector i {
    filter: drop-shadow(0 2px 4px rgba(59, 130, 246, 0.2));
}

/* ==========================================
   PREVIEW HASIL & TESTIMONI
   ========================================== */
.svc-preview-img img,
.svc-testi-card img {
    transition: transform 0.3s ease;
}

.svc-preview-img:hover img,
.svc-testi-card:hover img {
    transform: scale(1.04);
}

/* ==========================================
   FAQ ACCORDION (vanilla JS toggle)
   ========================================== */
.svc-faq-list {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.svc-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.svc-faq-item.open .svc-faq-a {
    max-height: 600px;
}

.svc-faq-chevron {
    transition: transform 0.3s ease;
}

.svc-faq-item.open .svc-faq-chevron {
    transform: rotate(180deg);
}

.svc-faq-item.open .svc-faq-q {
    background-color: rgba(59, 130, 246, 0.05);
}

/* ==========================================
   WA "TANYA ADMIN" BUTTON (bottom of form)
   ========================================== */
.svc-wa-btn {
    position: relative;
    overflow: hidden;
}

.svc-wa-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px rgba(37, 211, 102, 0.4);
}

.svc-wa-btn:active {
    transform: translateY(0);
}

/* Subtle pulse on WA icon to draw attention */
.svc-wa-btn .bi-whatsapp {
    animation: svcWaPulse 2.5s ease-in-out infinite;
}

@keyframes svcWaPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

/* ==========================================
   MOBILE OPTIMIZATIONS (<640px)
   ========================================== */
@media (max-width: 639px) {
    .svc-section {
        margin-bottom: 1.5rem;
    }

    .svc-section h3 {
        font-size: 1.125rem;
    }

    .svc-trust-badges .grid > div {
        min-height: 92px;
        padding: 0.75rem;
    }

    .svc-step-card {
        min-height: auto;
        padding: 1rem;
    }

    .svc-step-num {
        width: 3rem;
        height: 3rem;
        font-size: 1.25rem;
    }

    .svc-testi-card img {
        height: 9rem;
    }

    .svc-faq-q {
        padding: 0.75rem 1rem;
    }

    .svc-wa-btn {
        font-size: 0.875rem;
    }
}

/* ==========================================
   DARK MODE REFINEMENTS (v1.2)
   html prefix boosts specificity → beats Tailwind without !important
   Hex fallback precedes RGBA (for ancient browsers)
   ========================================== */
@media (prefers-color-scheme: dark) {
    html .svc-step-card {
        background-color: #1e293b;
        background-color: rgba(30, 41, 59, 0.9);
        border-color: #3b82f6;
        border-color: rgba(59, 130, 246, 0.3);
    }

    html .svc-step-card .text-gray-900 {
        color: rgb(243, 244, 246);
    }

    html .svc-step-card .text-gray-600 {
        color: rgb(209, 213, 219);
    }
}