/*==========================================================
    CONTACT PAGE
    هماهنگ با Neuray Design System
    وابسته به: variables.css, responsive.css, buttons.css
==========================================================*/

/* ============================================
   Hero
   ============================================ */
.contact-hero{
    position:relative;
    padding:calc(var(--header-height) + var(--space-xl)) 0 var(--space-2xl);
    text-align:center;
    background:linear-gradient(180deg,var(--surface-faint),var(--background));
}

.contact-hero__eyebrow{
    display:inline-block;
    font-family:var(--font-body);
    font-size:var(--font-size-tag);
    font-weight:700;
    color:var(--secondary);
    letter-spacing:.02em;
    margin-bottom:var(--space-2xs);
}

.contact-hero__title{
    font-family:var(--font-heading);
    font-weight:var(--title-weight);
    color:var(--text);
    font-size:var(--h2-title-size);
}

.contact-hero__subtitle{
    max-width:576px;
    margin:var(--space-2xs) auto 0;
    font-family:var(--font-body);
    font-size:1.05rem;
    line-height:1.9;
    color:var(--text-light);
}

/* ============================================
   Quick Contact Bar — عنصر شیشه‌ای شناور
   ============================================ */
.contact-quickbar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-md);
    margin-top:var(--space-lg);
    padding:var(--space-2xs) var(--space-md);
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-xl);
    backdrop-filter:blur(var(--blur-sm));
    box-shadow:var(--shadow-md);
}

.contact-quickbar__item{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:inherit;
}

.contact-quickbar__icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    flex-shrink:0;
    border-radius:var(--radius-round);
    background:rgba(var(--primary-rgb),.08);
    color:var(--primary);
}

.contact-quickbar__icon svg{
    width:20px;
    height:20px;
}

.contact-quickbar__text{
    display:flex;
    flex-direction:column;
    text-align:right;
    font-family:var(--font-body);
}

.contact-quickbar__text strong{
    font-family:var(--font-body);
    font-size:.92rem;
    color:var(--text);
}

.contact-quickbar__text small{
    font-size:.78rem;
    color:var(--text-muted);
}

.contact-quickbar__divider{
    width:1px;
    height:36px;
    background:var(--border);
}

.contact-form__honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* ============================================
   Contact Reason Cards
   ============================================ */
.contact-reasons{
    padding:var(--section-space) 0 var(--space-lg);
}

.contact-reasons__grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--gap-container);
}

.contact-reason-card{
    padding:var(--space-lg) var(--space-md);
    border-radius:var(--radius-lg);
    background:var(--background);
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    text-align:center;
    transition:var(--transition);
}

.contact-reason-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
    border-color:transparent;
}

.contact-reason-card__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    margin-bottom:var(--space-2xs);
    border-radius:var(--radius-lg);
    background:rgba(var(--primary-rgb),.08);
    color:var(--primary);
}

.contact-reason-card__icon svg{
    width:26px;
    height:26px;
}

.contact-reason-card h3{
    font-family:var(--font-heading);
    font-weight:var(--heading-weight);
    color:var(--text);
    font-size:1.1rem;
    margin-bottom:8px;
}

.contact-reason-card p{
    font-family:var(--font-body);
    color:var(--text-light);
    line-height:1.85;
    font-size:.92rem;
}

/* ============================================
   Form Section — دو ستونه (اطلاعات + فرم)
   ============================================ */
.contact-form-section{
    padding:var(--section-space) 0;
    background:var(--surface);
}

.contact-form-section__layout{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:var(--gap-container);
    align-items:start;
}

/* --- Info Panel --- */
.contact-info-panel{
    padding:var(--space-md);
    border-radius:var(--radius-lg);
    background:var(--background);
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    position:sticky;
    top:calc(var(--header-height) + var(--space-2xs));
    font-family:var(--font-body);
}

.contact-info-panel__title{
    font-family:var(--font-heading);
    font-weight:var(--heading-weight);
    color:var(--text);
    font-size:1.1rem;
    margin-bottom:var(--space-xs);
}

.contact-info-panel__item{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding-block:var(--space-2xs);
    border-top:1px solid var(--border);
}

.contact-info-panel__item:first-of-type{
    border-top:none;
}

.contact-info-panel__label{
    font-size:.75rem;
    color:var(--text-muted);
}

.contact-info-panel__value{
    font-family:var(--font-body);
    font-size:.92rem;
    color:var(--text);
}

.contact-info-panel__note{
    margin-top:var(--space-sm);
    padding-top:var(--space-sm);
    border-top:1px solid var(--border);
    font-size:.8rem;
    line-height:1.8;
    color:var(--text-muted);
}

.contact-info-panel__note a{
    color:var(--secondary);
    font-weight:700;
    text-decoration:none;
}

/* --- Form --- */
.contact-form-wrapper__title{
    font-family:var(--font-heading);
    font-weight:var(--heading-weight);
    color:var(--text);
    font-size:1.3rem;
    margin-bottom:var(--space-sm);
}

.contact-form__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-xs) var(--space-sm);
}

.contact-form__field{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:var(--space-xs);
}

.contact-form__field--full{
    grid-column:1 / -1;
}

.contact-form__field label{
    font-family:var(--font-body);
    font-weight:700;
    font-size:.85rem;
    color:var(--text);
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea{
    width:100%;
    font-family:var(--font-body);
    font-size:.95rem;
    color:var(--text);
    background:var(--surface-faint);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:14px 16px;
    transition:var(--transition);
}

.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus{
    outline:none;
    border-color:var(--accent-strong);
    box-shadow:0 0 0 3px rgba(var(--accent-strong-rgb),.15);
    background:var(--background);
}

.contact-form__field textarea{
    min-height:150px;
    resize:vertical;
}

.contact-form button[type="submit"]{
    margin-top:var(--space-2xs);
}

/* ============================================
   Company About
   ============================================ */
.company-about{
    padding:var(--space-2xl) 0;
    text-align:center;
}

.company-about__mark{
    display:inline-block;
    width:44px;
    height:3px;
    border-radius:var(--radius-round);
    background:var(--accent-strong);
    margin-bottom:var(--space-xs);
}

.company-about h2{
    font-family:var(--font-heading);
    font-weight:var(--heading-weight);
    color:var(--text);
    font-size:1.5rem;
    margin-bottom:var(--space-2xs);
}

.company-about p{
    max-width:768px;
    margin:auto;
    font-family:var(--font-body);
    line-height:1.9;
    color:var(--text-light);
}

/* ============================================
   Responsive
   ============================================ */

/* تبلت ≤992px */
@media (max-width:992px){
    .contact-reasons__grid{
        grid-template-columns:1fr;
        gap:var(--gap-md);
    }

    .contact-form-section__layout{
        grid-template-columns:1fr;
    }

    .contact-info-panel{
        position:static;
    }
}

/* موبایل landscape ≤768px */
@media (max-width:768px){
    .contact-quickbar{
        flex-direction:column;
        align-items:stretch;
        gap:var(--space-2xs);
    }

    .contact-quickbar__divider{
        display:none;
    }

    .contact-form__grid{
        grid-template-columns:1fr;
    }
}

/* موبایل ≤576px */
@media (max-width:576px){
    .contact-hero{
        padding-bottom:var(--space-section-sm);
    }

    .contact-reason-card{
        padding:var(--space-md) var(--space-sm);
    }
}