/**

 * Contact Us Page Styles

 * Extracted from contact-us.blade.php embedded <style> block (P1 - Frontend Audit)

 * Date: 2025-12-14

 * 

 * Purpose: Contact form and info box styles

 * Used in: guest/pages/contact-us.blade.php

 */



/* ====================

   CSS Variables (Override design-tokens for page-specific colors)

   ==================== */



/* ====================

   Contact Section Layout

   ==================== */



.contact-section {

    background: var(--contact-background-color);



    @media (max-width: 575.98px) {

        padding: var(--spacing-10) 0;

    }

}



/* ====================

   Contact Header

   ==================== */



.contact-header {

    text-align: center;

    max-width: 40rem;

    margin-inline: auto;



    @media (max-width: 575.98px) {

        margin-bottom: var(--spacing-10);

    }

}



.contact-header h1 {

    font-weight: 700;

    color: var(--contact-text-color);

    margin-bottom: var(--spacing-4);



    @media (max-width: 575.98px) {

        font-size: 1.75rem;

    }

}



.contact-header p {

    color: var(--text-secondary);



    @media (max-width: 767.98px) {

        font-size: 1rem;

    }

}



/* ====================

   Contact Form Wrapper

   ==================== */



.contact-form-wrapper {

    background: var(--color-white, white);

    border-radius: 15px;

    padding: var(--spacing-10);

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);



    @media (max-width: 767.98px) {

        padding: var(--spacing-8) var(--spacing-5);

    }

}



/* ====================

   Contact Info Box (Page-specific scoping)

   ==================== */



.contact-page .contact-info-box {

    background: var(--color-white, white);

    border-radius: 15px;

    padding: var(--spacing-10);

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);

    height: 100%;



    @media (max-width: 767.98px) {

        padding: var(--spacing-8) var(--spacing-5);

    }

}



.contact-page .contact-info-box h2 {

    font-weight: 600;

    color: var(--contact-text-color);



    @media (max-width: 575.98px) {

        font-size: 1.5rem;

        margin-bottom: var(--spacing-5);

    }

}



.contact-page .contact-info-item {

    display: flex;

    align-items: flex-start;



    @media (max-width: 575.98px) {

        margin-bottom: var(--spacing-5);

    }

}



.contact-page .contact-info-item i {

    margin-top: var(--spacing-1);

    color: var(--contact-primary-color);



    @media (max-width: 575.98px) {

        font-size: 20px;

        margin-right: var(--spacing-3);

    }

}



.contact-page .contact-info-item div h3 {

    font-size: 1rem;

    margin-bottom: var(--spacing-1);

    font-weight: 600;

    color: var(--contact-text-color);

}



.contact-page .contact-info-item div p {

    margin: 0;

    font-size: 0.95rem;

    color: var(--text-secondary);

}



/* ====================

   Form Elements

   ==================== */



.contact-page .form-group label {

    font-weight: 600;

    color: var(--contact-text-color);

    margin-bottom: var(--spacing-2);

}



.contact-page .form-control {

    border: 2px solid var(--color-neutral-200);

    border-radius: 8px;

    padding: var(--spacing-3) var(--spacing-4);

    transition: all 0.3s;

}



.contact-page .form-control:focus {

    border-color: var(--contact-primary-color);

    box-shadow: 0 0 0 0.2rem rgba(49, 162, 201, 0.15);

}



/* ====================

   Security Fields

   ==================== */



/* Honeypot (invisible anti-bot field) */

.hp-field {

    position: absolute;

    left: -9999px;

    width: 1px;

    height: 1px;

}



/* ====================

   reCAPTCHA Styling

   ==================== */



.g-recaptcha {

    transform-origin: 0 0;



    @media (max-width: 767.98px) {

        transform: scale(0.77);

    }

}



/* ── Contact Page: Social Links & Divider (R2 — inline styles removed) ── */

.contact-divider {

    border-color: var(--color-migration-border-100);

}



.contact-follow-title {

    color: var(--text-color);

}



.contact-social-link {

    font-size: 1.5rem;

    color: var(--primary-color);

    transition: opacity 0.2s ease;

}



.contact-social-link:hover {

    opacity: 0.75;

}