/* ========================================================
   Styles extracted from contact.blade.php
   ======================================================== */

:root {
        --primary-color: {{ $site_color->primary_color ?? '#F2336E' }};
        --secondary-color: {{ $site_color->secondary_color ?? '#6c757d' }};
        --text-color: {{ $site_color->text_color ?? '#212529' }};
        --btn-color: {{ $site_color->button_color ?? '#F2336E' }};
        --btn-text-color: {{ $site_color->button_text_color ?? '#ffffff' }};
        --btn-hover: {{ $site_color->btn_hover ?? '#0b5ed7' }};
    }
 
    /* ---------- Section ---------- */
    .contact-section {
        background: #ffffff !important;
        color: var(--text-color);
    }
 
    /* ---------- Heading (centered) ---------- */
    .contact-section .contact-heading {
        max-width: 640px;
        margin: 0 auto 2rem;
        text-align: center !important;
    }
    .contact-section .contact-heading .account-title {
        display: block !important;
        width: 100% !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        border: 0 !important;
        text-align: center !important;
        color: var(--primary-color) !important;
        font-weight: 800;
        font-size: clamp(24px, 4vw, 36px);
    }
    .contact-section .contact-heading .account-title::before { display: none !important; }
    .contact-section .contact-heading .account-title::after {
        content: "";
        display: block;
        position: static;
        transform: none;
        width: 60px;
        height: 3px;
        margin: 10px auto 0;
        border-radius: 3px;
        background: var(--primary-color);
    }
    .contact-section .contact-heading .contact-subtitle {
        margin: 0 auto !important;
        text-align: center !important;
        color: var(--secondary-color);
        font-size: 16px;
    }
 
    /* ---------- Cards ---------- */
    .contact-card-custom {
        height: 100%;
        background: #ffffff;
        border: 1px solid #e5e7eb !important;
        border-radius: 12px !important;
        box-shadow: none !important;
        transition: border-color .2s ease, transform .2s ease;
    }
    .contact-card-custom:hover {
        border-color: var(--primary-color) !important;
        transform: translateY(-3px);
    }
    .contact-icon {
        width: 56px;
        height: 56px;
        margin: 0 auto 12px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-color);
        color: var(--btn-text-color);
    }
    .contact-icon svg { width: 24px; height: 24px; stroke: currentColor; }
    .contact-icon .fab { font-size: 24px; }
    .contact-card-custom h5 {
        color: var(--primary-color) !important;
        font-weight: 700;
        margin-bottom: 6px;
    }
    .contact-card-custom strong {
        color: var(--text-color) !important;
        font-weight: 500;
        word-break: break-word;
    }
 
    /* Theme styles tel:/wa.me links with their own background (that caused the
       dark/green corners). Higher specificity + !important resets it. */
    .contact-section a.contact-link[href],
    .contact-section a.contact-link[href]:hover,
    .contact-section a.contact-link[href]:focus,
    .contact-section a.contact-link[href]:active,
    .contact-section a.contact-link[href]:visited,
    .contact-section div.contact-link {
        display: block !important;
        position: static !important;
        height: 100% !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 12px !important;
        overflow: hidden;
        outline: none !important;
        box-shadow: none !important;
        background: none !important;
        background-color: transparent !important;
        color: inherit !important;
        text-decoration: none !important;
    }
 
    /* ---------- Social ---------- */
    .social-wrap { text-align: center; margin-top: 2.5rem; }
    .social-wrap h5 { color: var(--primary-color); font-weight: 700; margin-bottom: 16px; }
    .social-links {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .contact-section .social-links a.social_link[href],
    .contact-section .social-links a.social_link[href]:visited {
        width: 46px !important;
        height: 46px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        background: #ffffff !important;
        border: 1px solid #d1d5db !important;
        color: var(--primary-color) !important;
        text-decoration: none !important;
        box-shadow: none !important;
        transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
    }
    .contact-section .social-links a.social_link[href]:hover {
        background: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
        color: var(--btn-text-color) !important;
        transform: translateY(-3px);
    }
    .contact-section .social-links a.social_link i { color: inherit !important; }
 
    /* ---------- Shopping CTA ---------- */
    .shop-cta {
        margin-top: 2.5rem;
        padding: 32px 20px;
        text-align: center;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 14px;
    }
    .shop-cta h4 { color: var(--primary-color); font-weight: 800; margin-bottom: 8px; }
    .shop-cta p { color: var(--secondary-color); margin: 0 auto 20px; max-width: 520px; }
    .shop-btn,
    .shop-btn:visited {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 32px;
        border-radius: 50px;
        background: var(--btn-color);
        color: var(--btn-text-color) !important;
        font-weight: 600;
        font-size: 16px;
        text-decoration: none !important;
        transition: background-color .25s ease, transform .25s ease;
    }
    .shop-btn:hover {
        background: var(--btn-hover);
        color: var(--btn-text-color) !important;
        transform: translateY(-2px);
    }
    .shop-btn svg { width: 18px; height: 18px; stroke: currentColor; }
 
    /* ---------- Menu ---------- */
    .menu-btn {
        background: var(--primary-color);
        color: var(--btn-text-color);
        padding: 6px 15px;
        border-radius: 5px;
        display: inline-block;
    }
    .menu-btn:hover { background: var(--btn-hover); color: var(--btn-text-color); }
 
    /* ---------- Mobile (compact) ---------- */
    @media (max-width: 575.98px) {
        .contact-section { padding-top: 14px !important; padding-bottom: 14px !important; }
        .contact-section .contact-heading { margin-bottom: 1rem; }
        .contact-section .contact-heading .account-title { font-size: 22px; margin-bottom: 4px !important; }
        .contact-section .contact-heading .account-title::after { width: 44px; height: 3px; margin-top: 6px; }
        .contact-section .contact-heading .contact-subtitle { font-size: 13px; line-height: 1.4; }
 
        .contact-section .contact-row { margin-left: -5px; margin-right: -5px; }
        .contact-section .contact-row > [class*="col-"] { padding-left: 5px; padding-right: 5px; margin-bottom: 10px !important; }
 
        .contact-card-custom { padding: 12px 8px !important; border-radius: 10px !important; }
        .contact-icon { width: 40px; height: 40px; margin-bottom: 8px; }
        .contact-icon svg { width: 18px; height: 18px; }
        .contact-icon .fab { font-size: 18px; }
        .contact-card-custom h5 { font-size: 14px; margin-bottom: 3px !important; }
        .contact-card-custom strong { font-size: 12px; line-height: 1.35; display: block; }
 
        .social-wrap { margin-top: 14px; }
        .social-wrap h5 { font-size: 15px; margin-bottom: 10px; }
        .social-links { gap: 8px; }
        .contact-section .social-links a.social_link[href] { width: 38px !important; height: 38px !important; font-size: 15px; }
 
        .shop-cta { margin-top: 16px; padding: 18px 14px; border-radius: 12px; }
        .shop-cta h4 { font-size: 17px; margin-bottom: 4px; }
        .shop-cta p { font-size: 13px; margin-bottom: 12px; }
        .shop-btn { padding: 10px 24px; font-size: 14px; }
    }