/* 
╔════════════════════════════════════════════════════════════════════╗
║  ROOTED VITALITY, INC.                                             ║
║  File: styles/report-concern-widget.css                            ║
║  Purpose: Report Concern Widget styling (universal footer)         ║
║  Holistic Wellness · Modern Connection Platform                    ║
║  rootedvitality.health | 2025                                         ║
╚════════════════════════════════════════════════════════════════════╝

TABLE OF CONTENTS
  1. REPORT CONCERN FOOTER LINK
  2. MODAL STYLING (DELEGATED)
  3. FORM STYLING (DELEGATED)
  4. RESPONSIVE DESIGN
*/

/* ============================================================
   1. REPORT CONCERN FOOTER LINK
   ============================================================ */

.report-concern-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    background: transparent;
    border-top: none;
    margin-top: 60px;
}

.report-concern-link {
    background: none;
    border: none;
    color: var(--text-accent);
    padding: 0;
    border-radius: 0;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: underline;
}

.report-concern-link:hover {
    background: none;
    color: #4a8b62;
    box-shadow: none;
    text-decoration: underline;
}

.report-concern-link:active {
    transform: none;
    opacity: 0.7;
}

/* ============================================================
   2. MODAL STYLING (DELEGATED)
   ============================================================ */

/* Note: All modal overlay, centering, and backdrop styling 
   is handled by .modal-overlay and .modal-overlay.active in modal-system.css */

/* Modal Form - Deferred to Universal Form Styling */

#report-concern-form {
    padding: 2rem;
}

/* ============================================================
   3. FORM STYLING (DELEGATED)
   ============================================================ */

/* Form Groups - Use Universal form-group from modal-system.css */

/* Form Actions - Use Universal form-actions and btn-modal from modal-system.css */

#report-concern-form {
    padding: 2rem;
}

/* ============================================================
   4. RESPONSIVE DESIGN
   ============================================================ */

/* Responsive design handled by universal modal-system.css */

/* Dark mode support handled by universal modal-system.css */







/* FORCE: Black text in dark mode for maximum readability */

/* Dark mode - Remove any background boxes from footer buttons */
@media (prefers-color-scheme: dark) {
    .report-concern-footer {
        background: transparent !important;
        border-top: none !important;
    }

    .report-concern-link {
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #fbf7ec !important;
        padding: 0 !important;
    }

    .report-concern-link:hover {
        background: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        color: #ffffff !important;
    }

    .report-concern-link:active {
        background: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        color: #ffffff !important;
    }

    .report-concern-link:focus {
        background: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        outline: none !important;
    }
}