/* Styles for resources/views/resources/views/frontend/pages/contact.blade.php — moved out of the view's inline <style> blocks. */

    /*
     | The page used to open with <div class="rtl-content" dir="rtl"> and a
     | `.rtl-content *` rule forcing direction:rtl and text-align:right on every
     | descendant with !important.
     |
     | On /en/contact that produced an English page inside an RTL context:
     | <html> said dir="ltr" while the heading, the body copy and every form
     | label computed direction:rtl and text-align:right. Measured before the
     | fix — h1Dir "rtl", h1Align "right", labelAlign "right" — on a document
     | whose own dir was "ltr".
     |
     | The layout already sets dir on <html> per locale and the design system is
     | built on logical properties (ms/me, ps/pe, start/end), which resolve per
     | direction on their own. The two .me-2 / .ms-2 overrides were re-flipping
     | margins that were already logical, so they broke the very direction they
     | were meant to fix.
     */
    /* Contact Page Styles */
    .contact-hero {
        background: var(--theme-header-gradient, linear-gradient(115deg, #252529 0%, rgb(var(--colors-primary-800)) 55%, rgb(var(--colors-primary-900)) 100%));
        color: white;
        padding: 4rem 0;
        margin-bottom: 3rem;
        position: relative;
    }

    .contact-hero::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: rgb(var(--colors-secondary-500));
    }

    .contact-card {
        background: white;
        border-radius: 12px;
        padding: 2.5rem;
        box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        height: 100%;
        position: relative;
        overflow: hidden;
        border: 1px solid rgb(217 226 220);
    }

    .contact-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: rgb(var(--colors-secondary-500));
    }

    .contact-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 10px 28px rgba(0,0,0,0.12);
        border-color: rgb(var(--colors-primary-700));
    }

    .branch-icon {
        width: 80px;
        height: 80px;
        background: rgb(var(--colors-primary-700));
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
        color: #fff;
        font-size: 2rem;
        box-shadow: 0 4px 16px rgb(var(--colors-primary-700) / 0.24);
    }

    .contact-icon {
        width: 70px;
        height: 70px;
        background: rgb(var(--colors-primary-700));
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        color: white;
        font-size: 1.5rem;
        box-shadow: 0 4px 16px rgb(var(--colors-primary-700) / 0.24);
        flex-shrink: 0;
    }

    .branch-card {
        background: white;
        border-radius: 12px;
        padding: 2.5rem;
        box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        height: 100%;
        position: relative;
        overflow: hidden;
        border: 1px solid rgb(217 226 220);
    }

    .branch-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 10px 28px rgba(0,0,0,0.12);
        border-color: rgb(var(--colors-primary-700));
    }

    .branch-card.marka {
        background: linear-gradient(135deg, rgb(var(--colors-primary-50)) 0%, #fff 100%);
    }

    .branch-card.khalda {
        background: linear-gradient(135deg, rgb(var(--colors-neutral-50)) 0%, #fff 100%);
    }

    /* .form-control / .form-control:focus / .form-label are gone: the form is
       built from x-form-field + x-sfui.input/select/textarea, so those class
       names no longer appear in this page's markup. Each had been declared
       twice. */

.map-container {
        height: 300px;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    }

.info-item {
        display: block;
        margin-bottom: 1.5rem;
        padding: 1.5rem;
        border-radius: 12px;
        transition: all 0.3s ease;
        background: rgb(var(--colors-neutral-50));
        border: 1px solid rgb(var(--colors-neutral-200));
    }

    .info-item:hover {
        background-color: rgb(var(--colors-primary-50));
    }

    .info-item h6 {
        font-size: 1rem;
        line-height: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .info-item p {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .section-title {
        color: rgb(var(--colors-neutral-900));
        font-weight: 700;
        position: relative;
        margin-bottom: 2.5rem;
        font-size: 2rem;
        text-align: center;
    }

    .section-title::after {
        content: "";
        position: absolute;
        bottom: -15px;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 4px;
        background: rgb(var(--colors-secondary-500));
        border-radius: 2px;
    }

@keyframes pulse {
        0% { transform: scale(1) rotate(0deg); }
        100% { transform: scale(1.1) rotate(180deg); }
    }

    /* إصلاح مشكلة RTL للخرائط */
    .map-container iframe {
        direction: ltr !important;
    }

    /* The hero row used to be pinned to min-height:400px with its content
       vertically centred. The heading, lead and breadcrumb measure about
       164px, so the other 236px was empty — 118px of it stacked above the
       heading, on top of the section's own 64px padding. That put the first
       words of the page 182px below the header, while every other page on
       the site starts them at 48px.

       The row now sizes to its content and the section's 4rem padding sets
       the rhythm, same as everywhere else. */

    @media (max-width: 768px) {
        .contact-hero {
            padding: 2rem 0;
        }

        .map-container {
            height: 250px;
        }

        .branch-card, .contact-card {
            padding: 1.5rem;
        }

        .section-title {
            font-size: 1.5rem;
        }

}