/* Styles for resources/views/web/pages/help-center.blade.php (moved from inline <style>) */
    :root {
        --help-primary: #5C27FE;
        --help-primary-light: #7B4FFF;
        --help-primary-dark: #4A1FD4;
        --help-accent: #00BFFF;
        --help-bg: #F9FAFB;
        --help-text-main: #1F2937;
        --help-text-muted: #6B7280;
        --help-border: #E5E7EB;
        --help-white: #FFFFFF;
        --help-radius: 12px;
        --help-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Hero Section */
    .help-hero {
        background: radial-gradient(circle at 80% 20%, #1e1b4b 0%, #0f172a 100%);
        padding: 60px 0 50px;
        position: relative;
        color: #ffffff;
    }
    [dir="rtl"] .help-hero {
        background: radial-gradient(circle at 20% 20%, #1e1b4b 0%, #0f172a 100%);
    }
    .help-hero h1 {
        font-size: clamp(2.2rem, 4vw, 3rem);
        font-weight: 800;
        margin-bottom: 8px;
        background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .help-hero .hero-subtitle {
        font-size: 16.5px;
        font-weight: 600;
        color: var(--help-accent);
        margin-bottom: 14px;
    }
    .help-hero p.preamble-text {
        font-size: 14.5px;
        line-height: 1.8;
        color: #cbd5e1;
        margin-bottom: 12px;
    }

    /* Main Section Layout */
    .help-layout-section {
        background-color: var(--help-bg);
        padding: 50px 0 70px;
    }

    /* Section Cards */
    .help-card {
        background: var(--help-white);
        border: 1px solid var(--help-border);
        border-radius: var(--help-radius);
        padding: 30px;
        margin-bottom: 28px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
        transition: var(--help-transition);
    }
    .help-card:hover {
        box-shadow: 0 10px 25px rgba(92, 39, 254, 0.06);
    }
    .help-section-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--help-border);
    }
    .help-section-icon {
        width: 40px;
        height: 40px;
        background: rgba(92, 39, 254, 0.08);
        color: var(--help-primary);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
    }
    .help-section-header h2 {
        font-size: 18px;
        font-weight: 700;
        color: var(--help-text-main);
        margin: 0;
    }
    .help-card p {
        font-size: 14.5px;
        line-height: 1.8;
        color: var(--help-text-main);
        margin-bottom: 14px;
    }

    /* Sub-Services Grid */
    .services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 20px;
        margin-top: 16px;
    }
    .service-box {
        background: #F9FAFB;
        border: 1px solid var(--help-border);
        border-radius: 10px;
        padding: 20px;
        transition: var(--help-transition);
    }
    .service-box:hover {
        background: var(--help-white);
        border-color: var(--help-primary-light);
        box-shadow: 0 6px 15px rgba(92, 39, 254, 0.05);
    }
    .service-box-title {
        font-size: 15.5px;
        font-weight: 700;
        color: var(--help-primary-dark);
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .service-box-title i {
        color: var(--help-primary);
        font-size: 18px;
    }
    .service-box ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .service-box ul li {
        position: relative;
        padding-right: 20px;
        margin-bottom: 8px;
        font-size: 13.5px;
        line-height: 1.6;
        color: var(--help-text-main);
    }
    [dir="ltr"] .service-box ul li {
        padding-right: 0;
        padding-left: 20px;
    }
    .service-box ul li::before {
        content: "•";
        position: absolute;
        right: 6px;
        top: -1px;
        color: var(--help-primary);
        font-weight: bold;
        font-size: 16px;
    }
    [dir="ltr"] .service-box ul li::before {
        right: auto;
        left: 6px;
    }

    /* Timeline Process Steps */
    .guide-steps-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
        margin-top: 16px;
    }
    .guide-step-card {
        background: #F8F9FF;
        border: 1px solid rgba(92, 39, 254, 0.12);
        border-radius: 10px;
        padding: 22px;
    }
    .guide-step-card h3 {
        font-size: 16px;
        font-weight: 700;
        color: var(--help-primary-dark);
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .guide-ol {
        padding-right: 20px;
        margin: 0;
    }
    [dir="ltr"] .guide-ol {
        padding-right: 0;
        padding-left: 20px;
    }
    .guide-ol li {
        font-size: 14px;
        line-height: 1.7;
        color: var(--help-text-main);
        margin-bottom: 8px;
    }

    /* Audience Grid */
    .audience-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 16px;
        margin-top: 16px;
    }
    .audience-item {
        background: #F9FAFB;
        border: 1px solid var(--help-border);
        border-radius: 10px;
        padding: 18px;
        transition: var(--help-transition);
    }
    .audience-item:hover {
        background: var(--help-white);
        border-color: var(--help-primary-light);
    }
    .audience-item h4 {
        font-size: 15px;
        font-weight: 700;
        color: var(--help-text-main);
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .audience-item h4 i {
        color: var(--help-primary);
        font-size: 18px;
    }
    .audience-item p {
        font-size: 13.5px;
        line-height: 1.65;
        color: var(--help-text-muted);
        margin: 0;
    }

    /* Standard Bullet List */
    .help-bullet-list {
        list-style: none;
        padding: 0;
        margin: 12px 0 16px;
    }
    .help-bullet-list li {
        position: relative;
        padding-right: 22px;
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 1.7;
        color: var(--help-text-main);
    }
    [dir="ltr"] .help-bullet-list li {
        padding-right: 0;
        padding-left: 22px;
    }
    .help-bullet-list li::before {
        content: "•";
        position: absolute;
        right: 6px;
        top: -1px;
        color: var(--help-primary);
        font-weight: bold;
        font-size: 16px;
    }
    [dir="ltr"] .help-bullet-list li::before {
        right: auto;
        left: 6px;
    }

    /* Reports & Complaints Grid */
    .reports-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        margin-top: 16px;
    }
    .reports-box {
        background: #FFFDF5;
        border: 1px solid #FCD34D;
        border-radius: 10px;
        padding: 20px;
    }
    .reports-box.complaints {
        background: #FEF2F2;
        border-color: #FCA5A5;
    }
    .reports-box h4 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .reports-box h4 i {
        font-size: 18px;
    }

    /* Contact Channels Cards */
    .channels-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
        margin-top: 16px;
    }
    .channel-card {
        background: #F9FAFB;
        border: 1px solid var(--help-border);
        border-radius: 10px;
        padding: 18px;
        text-align: center;
        transition: var(--help-transition);
    }
    .channel-card:hover {
        background: var(--help-white);
        border-color: var(--help-primary-light);
        box-shadow: 0 6px 15px rgba(92, 39, 254, 0.06);
    }
    .channel-icon {
        width: 44px;
        height: 44px;
        background: rgba(92, 39, 254, 0.08);
        color: var(--help-primary);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        margin: 0 auto 10px;
    }
    .channel-card h4 {
        font-size: 15px;
        font-weight: 700;
        color: var(--help-text-main);
        margin-bottom: 6px;
    }
    .channel-card p {
        font-size: 13px;
        line-height: 1.6;
        color: var(--help-text-muted);
        margin: 0;
    }

    /* Final Need Help Callout Box */
    .help-cta-box {
        background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%);
        border-radius: var(--help-radius);
        padding: 40px 30px;
        color: #ffffff;
        text-align: center;
        margin-top: 30px;
    }
    .help-cta-box h3 {
        font-size: 22px;
        font-weight: 800;
        margin-bottom: 10px;
        color: #ffffff;
    }
    .help-cta-box .sub-brand {
        font-size: 16px;
        font-weight: 600;
        color: var(--help-accent);
        margin-bottom: 12px;
    }
    .help-cta-box p {
        font-size: 14.5px;
        color: #cbd5e1;
        margin-bottom: 24px;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.8;
    }
    .btn-help-contact {
        background: var(--help-primary);
        color: #ffffff;
        padding: 12px 28px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 14.5px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: var(--help-transition);
    }
    .btn-help-contact:hover {
        background: var(--help-primary-light);
        color: #ffffff;
        box-shadow: 0 6px 18px rgba(92, 39, 254, 0.4);
    }

    @media (max-width: 768px) {
        .help-hero {
            padding: 40px 0;
            text-align: center;
        }
        .help-card {
            padding: 20px;
        }
    }