/* ===== Box Components ===== */

/* === HIGHLIGHT BOX === */
.highlight-box {
    background: var(--color-bg-elevated-2);
    padding: var(--spacing-2xl) var(--spacing-xl);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    margin: var(--spacing-3xl) 0;
}

.highlight-box .text-lead,
.highlight-box p {
    color: var(--color-text-light);
}

@media (max-width: 767px) {
    .highlight-box {
        padding: var(--spacing-xl) var(--spacing-lg);
        margin: var(--spacing-2xl) 0;
    }
}

/* === INFO BOX === */
.info-box {
    background: var(--color-bg-elevated-2);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-primary);
    border: 1px solid var(--color-border-light);
    border-left: 4px solid var(--color-primary);
    margin: var(--spacing-lg) 0;
}

.info-box p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted-light);
    margin-bottom: var(--spacing-sm);
}

.info-box p:last-child {
    margin-bottom: 0;
}

/* === WARNING BOX === */
.warning-box {
    background: var(--color-bg-elevated-2);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-warning);
    border: 1px solid var(--color-border-light);
    border-left: 4px solid var(--color-warning);
    margin: var(--spacing-lg) 0;
}

.warning-box p {
    color: var(--color-text-muted-light);
    margin-bottom: var(--spacing-sm);
}

.warning-box p:last-child {
    margin-bottom: 0;
}

/* === SUCCESS BOX === */
.success-box {
    background: var(--color-bg-elevated-2);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-success);
    border: 1px solid var(--color-border-light);
    border-left: 4px solid var(--color-success);
    margin: var(--spacing-lg) 0;
}

.success-box p {
    color: var(--color-text-muted-light);
    margin-bottom: var(--spacing-sm);
}

.success-box p:last-child {
    margin-bottom: 0;
}

/* === ERROR BOX === */
.error-box {
    background: var(--color-bg-elevated-2);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-error);
    border: 1px solid var(--color-border-light);
    border-left: 4px solid var(--color-error);
    margin: var(--spacing-lg) 0;
}

.error-box p {
    color: var(--color-text-muted-light);
    margin-bottom: var(--spacing-sm);
}

.error-box p:last-child {
    margin-bottom: 0;
}

/* === CONTENT SECTION === */
/* Reusable content section wrapper with proper spacing */
.content-section {
    padding: var(--spacing-4xl) 0;
}

.content-section p {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-lg);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-light);
}

.content-section p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .content-section {
        padding: var(--spacing-3xl) 0;
    }

    .content-section p {
        font-size: var(--font-size-base);
    }
}

/* Background variants for content sections */
.bg-elevated {
    background-color: var(--color-bg-elevated);
}

.bg-dark {
    background-color: var(--color-bg-primary);
}

.bg-darker {
    background-color: var(--color-bg-dark);
}