﻿
body {
    background-color: #f8f9fa;
    color: #333;
}

h3, h4 {
    font-weight: 700;
}

/* =======================
   MAIN CARD STYLING
======================= */
.card {
    border: none;
    border-radius: 1rem;
    background-color: #fff;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 31, 63, 0.08);
    margin-bottom: 2rem;
}

.card-header {
    background-color: #001F3F !important;
    color: white !important;
    font-weight: 700;
    border-bottom: none;
    padding: 1.25rem 1.5rem;
}

    .card-header h3 {
        color: white !important;
        font-size: 1.5rem;
    }

    .card-header i {
        font-size: 1.3rem;
        margin-right: 0.5rem;
    }

.card-body.p-0 {
    padding: 0 !important;
}

/* =======================
   POLICY SECTIONS
======================= */
.policy-section {
    border-bottom: 1px solid #e9ecef;
}

    .policy-section:last-child {
        border-bottom: none;
    }

.policy-header {
    background-color: #0dcaf0 !important;
    color: white !important;
    padding: 1rem 1.5rem;
}

    .policy-header h4 {
        color: white !important;
        font-size: 1.15rem;
        font-weight: 600;
    }

    .policy-header i {
        font-size: 1.1rem;
        margin-right: 0.5rem;
    }

.policy-content {
    padding: 1.5rem 2rem;
}

    .policy-content p {
        color: #333;
        font-size: 1rem;
        line-height: 1.6;
    }

    .policy-content ul {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

        .policy-content ul li {
            padding: 0.75rem 0;
            padding-left: 2rem;
            position: relative;
            font-size: 1rem;
            line-height: 1.6;
            color: #333;
        }

            .policy-content ul li::before {
                content: "✓";
                position: absolute;
                left: 0;
                top: 0.75rem;
                color: #0dcaf0;
                font-weight: bold;
                font-size: 1.2rem;
            }

            .policy-content ul li:not(:last-child) {
                border-bottom: 1px solid #f0f0f0;
            }

/* =======================
   BUTTONS
======================= */
.btn {
    border-radius: 0.6rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

    .btn.btn-secondary.btn-sm {
        background-color: #001F3F;
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 8px 14px;
        font-size: 0.9rem;
    }

        .btn.btn-secondary.btn-sm:hover {
            background-color: #003366;
            transform: scale(1.03);
        }

        .btn.btn-secondary.btn-sm i {
            font-size: 1rem;
        }

/* =======================
   ICONS
======================= */
.bi {
    vertical-align: middle;
}

/* =======================
   RESPONSIVE DESIGN
======================= */
@media (max-width: 768px) {
    .card-header {
        padding: 1rem 1.25rem;
    }

        .card-header h3 {
            font-size: 1.3rem;
        }

    .policy-header {
        padding: 0.875rem 1.25rem;
    }

        .policy-header h4 {
            font-size: 1.05rem;
        }

    .policy-content {
        padding: 1.25rem 1.5rem;
    }

        .policy-content ul li {
            font-size: 0.95rem;
            padding-left: 1.75rem;
        }

            .policy-content ul li::before {
                font-size: 1.1rem;
            }
}

@media (max-width: 576px) {
    .card-header {
        padding: 0.875rem 1rem;
    }

        .card-header h3 {
            font-size: 1.15rem;
        }

        .card-header i {
            font-size: 1.1rem;
        }

    .policy-header {
        padding: 0.75rem 1rem;
    }

        .policy-header h4 {
            font-size: 1rem;
        }

        .policy-header i {
            font-size: 1rem;
        }

    .policy-content {
        padding: 1rem 1.25rem;
    }

        .policy-content ul li {
            font-size: 0.9rem;
            padding: 0.6rem 0;
            padding-left: 1.5rem;
        }

            .policy-content ul li::before {
                font-size: 1rem;
                top: 0.6rem;
            }

    .btn.btn-secondary.btn-sm {
        font-size: 0.95rem;
        padding: 10px 16px;
    }

    .d-flex.justify-content-between {
        justify-content: flex-start !important;
        margin-bottom: 1rem;
    }
}

/* =======================
   ALIGNMENT
======================= */
.d-flex.justify-content-between {
    align-items: center;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}
