/* ============================================================
   contact.css — أنماط صفحة تواصل معنا

   المحتويات:
   1. Page Hero — مستعار من about.css
   2. Contact Info Cards — بطاقات معلومات التواصل
   3. Contact Main — الفورم والجانب الجانبي
   4. Form Elements — حقول الفورم
   5. Checkboxes & Radios — خانات الاختيار
   6. Form States — حالات الفورم
   7. Contact Side — الجانب الجانبي
   8. Map — الخريطة
   9. Responsive — الجوال
============================================================ */


/* ============================================================
   1. Page Hero — نفس about.css تماماً
============================================================ */
#page-hero {
  position:   relative;
  min-height: 52vh;
  margin-top: var(--nav-height);
  background: var(--bg-card);
  overflow:   hidden;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
  padding:         60px 48px 80px;
}

.page-hero-grid {
  position: absolute;
  inset:    0;
  background-image:
    linear-gradient(rgba(26, 92, 58, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 92, 58, 0.06) 1px, transparent 1px);
  background-size: 52px 52px;
  z-index: 0;
}

#page-hero::after {
  content:  '';
  position: absolute;
  bottom:   0; right: 0; left: 0;
  height:   200px;
  background: linear-gradient(to bottom, transparent, var(--bg-dark));
  z-index: 1;
  pointer-events: none;
}

.page-hero-content {
  position:  relative;
  z-index:   2;
  max-width: 680px;
}

.page-hero-eyebrow {
  display:       flex;
  align-items:   center;
  gap:           10px;
  margin-bottom: 20px;
  animation:     fade-up 0.7s ease both;
}

.page-hero-eyebrow span:last-child {
  font-size: var(--fs-xs); letter-spacing: 4px;
  color: var(--color-gold); text-transform: uppercase;
}

.page-hero-title {
  font-family:   var(--font-display);
  font-size:     clamp(40px, 5vw, 72px);
  font-weight:   300;
  line-height:   1.05;
  margin-bottom: 20px;
  animation:     fade-up 0.7s 0.1s ease both;
}

.page-hero-desc {
  font-size: var(--fs-base); color: var(--text-muted);
  line-height: 1.8; font-weight: 300; max-width: 560px;
  animation: fade-up 0.7s 0.2s ease both;
}

.page-hero-deco {
  position:    absolute;
  top:         50%;
  left:        48px;
  transform:   translateY(-50%);
  font-family: var(--font-display);
  font-size:   clamp(80px, 12vw, 160px);
  font-weight: 300;
  color:       rgba(201, 168, 76, 0.04);
  white-space: nowrap;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}

.breadcrumb {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 32px;
  animation: fade-up 0.6s ease both;
}

.breadcrumb a {
  font-size: var(--fs-xs); color: var(--text-muted);
  letter-spacing: 1px; transition: color 0.2s ease;
}
.breadcrumb a:hover { color: var(--color-gold); }
.breadcrumb-sep { font-size: var(--fs-xs); color: var(--text-faint); }
.breadcrumb span:last-child {
  font-size: var(--fs-xs); color: var(--color-gold); letter-spacing: 1px;
}


/* ============================================================
   2. Contact Info Cards — بطاقات التواصل الأربع
============================================================ */
#contact-info {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   2px;
  background:            var(--bg-dark);
}

.contact-info-card {
  padding:    36px 28px;
  background: var(--bg-card);
  border:     0.5px solid var(--bg-mid);
  transition: background 0.3s ease;
  position:   relative;
  overflow:   hidden;
}

.contact-info-card:hover {
  background: var(--bg-card);
}

/* خط سفلي ذهبي */
.contact-info-card::after {
  content:    '';
  position:   absolute;
  bottom:     0; right: 0; left: 0;
  height:     2px;
  background: linear-gradient(to left, var(--color-gold), var(--color-green));
  transform:  scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.contact-info-card:hover::after {
  transform: scaleX(1);
}

.info-card-icon {
  font-size:     32px;
  margin-bottom: 16px;
  line-height:   1;
}

.contact-info-card h4 {
  font-family:   var(--font-arabic);
  font-size:     var(--fs-base);
  font-weight:   700;
  color:         var(--text-primary);
  margin-bottom: 8px;
}

.contact-info-card p {
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  line-height: 1.5;
}

.info-card-link {
  display:     block;
  font-size:   var(--fs-sm);
  color:       var(--color-gold);
  margin-bottom: 6px;
  transition:  color 0.2s ease;
  text-align:  left;
}

.info-card-link:hover {
  color: var(--color-gold-light);
}

.info-card-link--wa {
  color: #25D366;
}

.info-card-link--wa:hover {
  color: #1da851;
}

.info-card-sub {
  font-size:   11px !important;
  color:       var(--text-faint) !important;
  letter-spacing: 0.5px;
  margin-top:  4px;
}


/* ============================================================
   3. Contact Main — الفورم + الجانب
============================================================ */
#contact-main {
  display:     grid;
  grid-template-columns: 1fr 380px;
  gap:         var(--space-xl);
  align-items: start;
  padding:     var(--space-2xl) 48px;
  background:  var(--bg-dark);
}

.contact-form-wrapper {
  background: var(--bg-card);
  border:     0.5px solid var(--border-gold);
  padding:    var(--space-xl);
}


/* ============================================================
   4. Form Elements — حقول الفورم
============================================================ */

/* الصف المزدوج */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     var(--space-md);
}

/* المجموعة الواحدة */
.form-group {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-bottom:  var(--space-md);
}

/* الـ Label */
.form-group label {
  font-size:      var(--fs-sm);
  font-weight:    700;
  color:          var(--text-primary);
  letter-spacing: 0.5px;
}

/* حقول النص */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
  background:    var(--bg-mid);
  border:        0.5px solid var(--border-gold);
  color:         var(--text-primary);
  font-family:   var(--font-arabic);
  font-size:     var(--fs-sm);
  padding:       12px 16px;
  outline:       none;
  transition:    border-color 0.3s ease, background 0.3s ease;
  width:         100%;

  /* إزالة مظهر المتصفح الافتراضي */
  -webkit-appearance: none;
  appearance:    none;
}

/* Focus */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-gold);
  background:   var(--bg-card);
}

/* Placeholder */
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-faint);
  font-weight: 300;
}

/* Select — السهم المخصص */
.form-group select {
  cursor:              pointer;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A84C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: left 16px center;  /* RTL: السهم على اليسار */
  padding-left:        40px;
}

/* Select options */
.form-group select option {
  background: var(--bg-card);
  color:      var(--text-primary);
}

/* Textarea */
.form-group textarea {
  resize:     vertical;
  min-height: 140px;
  line-height: 1.7;
}

/* رسالة الخطأ للحقل */
.field-error {
  font-size:  11px;
  color:      #E24B4A;
  min-height: 16px;
  display:    block;
}

/* حقل به خطأ */
.form-group.has-error input,
.form-group.has-error textarea {
  border-color: #E24B4A;
}

/* حقل صحيح */
.form-group.is-valid input,
.form-group.is-valid textarea {
  border-color: #1D9E75;
}


/* ============================================================
   5. Checkboxes & Radios — خانات الاختيار
============================================================ */

/* خانات الخدمات */
.service-checkboxes {
  display:   flex;
  flex-wrap: wrap;
  gap:       12px;
}

/* خانة اختيار واحدة */
.checkbox-item {
  display:     flex;
  align-items: center;
  gap:         8px;
  cursor:      pointer;
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  transition:  color 0.2s ease;
  user-select: none;
}

.checkbox-item:hover {
  color: var(--text-primary);
}

/* إخفاء الـ checkbox الأصلي */
.checkbox-item input[type="checkbox"] {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

/* الـ checkbox المخصص */
.checkbox-custom {
  width:         18px;
  height:        18px;
  border:        0.5px solid var(--border-gold);
  background:    var(--bg-mid);
  flex-shrink:   0;
  position:      relative;
  transition:    all 0.2s ease;
}

/* عند التحديد */
.checkbox-item input:checked + .checkbox-custom {
  background:   var(--color-gold);
  border-color: var(--color-gold);
}

/* علامة ✓ */
.checkbox-item input:checked + .checkbox-custom::after {
  content:     '✓';
  position:    absolute;
  top:         50%;
  left:        50%;
  transform:   translate(-50%, -50%);
  font-size:   11px;
  color:       var(--bg-dark);
  font-weight: 700;
  line-height: 1;
}

/* Radio Buttons */
.radio-group {
  display: flex;
  gap:     var(--space-md);
  flex-wrap: wrap;
}

.radio-item {
  display:     flex;
  align-items: center;
  gap:         8px;
  cursor:      pointer;
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  transition:  color 0.2s ease;
  user-select: none;
}

.radio-item:hover {
  color: var(--text-primary);
}

.radio-item input[type="radio"] {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

.radio-custom {
  width:         18px;
  height:        18px;
  border-radius: 50%;
  border:        0.5px solid var(--border-gold);
  background:    var(--bg-mid);
  flex-shrink:   0;
  position:      relative;
  transition:    all 0.2s ease;
}

.radio-item input:checked + .radio-custom {
  border-color: var(--color-gold);
}

.radio-item input:checked + .radio-custom::after {
  content:       '';
  position:      absolute;
  top:           50%;
  left:          50%;
  transform:     translate(-50%, -50%);
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--color-gold);
}


/* ============================================================
   6. Form States — حالات الفورم
============================================================ */

/* زر الإرسال */
.form-submit {
  width:          100%;
  background:     var(--color-gold);
  color:          var(--bg-dark);
  border:         none;
  padding:        14px 32px;
  font-size:      var(--fs-base);
  font-weight:    700;
  font-family:    var(--font-arabic);
  letter-spacing: 0.5px;
  cursor:         pointer;
  transition:     background 0.3s ease, transform 0.2s ease;
  position:       relative;
  margin-top:     var(--space-sm);
}

.form-submit:hover {
  background: var(--color-gold-light);
  transform:  translateY(-2px);
}

.form-submit:active {
  transform: translateY(0);
}

/* نص التحميل — مخفي افتراضياً */
.submit-loading {
  display: none;
}

/* حالة التحميل — يُضيفها contact.js */
.form-submit.loading .submit-text    { display: none; }
.form-submit.loading .submit-loading { display: inline; }
.form-submit.loading {
  opacity: 0.7;
  cursor:  not-allowed;
}

/* رسالة النجاح — مخفية افتراضياً */
.form-success {
  display:     none;
  align-items: center;
  gap:         16px;
  margin-top:  var(--space-md);
  padding:     20px 24px;
  background:  rgba(29, 158, 117, 0.08);
  border:      0.5px solid rgba(29, 158, 117, 0.4);
  border-right: 3px solid #1D9E75;
}

.form-success.visible {
  display: flex;
}

.success-icon {
  font-size:   28px;
  color:       #1D9E75;
  font-weight: 700;
  flex-shrink: 0;
}

.form-success strong {
  display:     block;
  font-size:   var(--fs-base);
  color:       var(--text-primary);
  margin-bottom: 4px;
}

.form-success p {
  font-size: var(--fs-sm);
  color:     var(--text-muted);
}

/* رسالة خطأ عام — مخفية افتراضياً */
.form-error-msg {
  display:     none;
  align-items: center;
  gap:         12px;
  margin-top:  var(--space-md);
  padding:     16px 20px;
  background:  rgba(226, 75, 74, 0.08);
  border:      0.5px solid rgba(226, 75, 74, 0.3);
}

.form-error-msg.visible {
  display: flex;
}

.form-error-msg p {
  font-size: var(--fs-sm);
  color:     #E24B4A;
}


/* ============================================================
   7. Contact Side — الجانب الجانبي
============================================================ */
.contact-side {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-md);
  position:       sticky;
  top:            calc(var(--nav-height) + var(--space-md));
}

/* بطاقة واتساب */
.wa-card {
  background:  var(--bg-dark);
  border:      0.5px solid #25D366;
  padding:     var(--space-md);
  display:     flex;
  flex-direction: column;
  gap:         12px;
}

.wa-card-icon {
  font-size:   32px;
  line-height: 1;
}

.wa-card h4 {
  font-family:   var(--font-arabic);
  font-size:     var(--fs-base);
  font-weight:   700;
  color:         var(--text-primary);
  margin-bottom: 4px;
}

.wa-card p {
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  line-height: 1.6;
}

.wa-btn {
  background:  #25D366;
  text-align:  center;
  font-size:   var(--fs-sm);
  padding:     12px 20px;
}

.wa-btn:hover {
  background: #1da851;
}

/* بطاقة أوقات العمل */
.hours-card {
  background: var(--bg-card);
  border:     0.5px solid var(--border-gold);
  padding:    var(--space-md);
}

.hours-list {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  list-style:     none;
}

.hours-list li {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-size:       var(--fs-sm);
  color:           var(--text-muted);
  padding-bottom:  12px;
  border-bottom:   0.5px solid var(--border-green);
}

.hours-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.hours-time {
  color:          var(--color-gold);
  font-weight:    700;
  letter-spacing: 0.5px;
  direction:      ltr;
}

.hours-closed {
  color:       #E24B4A;
  font-size:   11px;
  letter-spacing: 1px;
}

.hours-note {
  display:     flex;
  gap:         8px;
  font-size:   12px !important;
  color:       #25D366 !important;
}

/* بطاقة اللغات */
.langs-card {
  background: var(--bg-card);
  border:     0.5px solid var(--border-gold);
  padding:    var(--space-md);
}

.langs-list {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

.lang-badge {
  font-size:  12px;
  color:      var(--color-gold);
  background: rgba(201, 168, 76, 0.06);
  border:     0.5px solid var(--border-gold);
  padding:    6px 12px;
  transition: background 0.2s ease;
}

.lang-badge:hover {
  background: rgba(201, 168, 76, 0.12);
}


/* ============================================================
   8. Map — الخريطة
============================================================ */
#contact-map {
  padding:    0 48px var(--space-2xl);
  background: var(--bg-card);
}

.map-header {
  display:       flex;
  align-items:   center;
  gap:           var(--space-xl);
  margin-bottom: var(--space-lg);
}

.map-header .section-title {
  font-size: clamp(28px, 3vw, 40px);
}

.map-frame {
  height:   480px;
  border:   0.5px solid var(--border-gold);
  overflow: hidden;
  position: relative;
}

/* طبقة علوية شفافة تُزال عند النقر */
.map-frame::before {
  content:  '';
  position: absolute;
  inset:    0;
  z-index:  1;
  cursor:   pointer;
}

.map-frame:hover::before {
  display: none;
}


/* ============================================================
   9. Responsive — الجوال
============================================================ */
@media (max-width: 1024px) {

  #contact-info {
    grid-template-columns: repeat(2, 1fr);
  }

  #contact-main {
    grid-template-columns: 1fr;
  }

  .contact-side {
    position: static;
  }
}

@media (max-width: 768px) {

  #page-hero {
    padding: 48px var(--space-md) 60px;
  }

  .page-hero-deco { display: none; }

  #contact-info {
    grid-template-columns: 1fr;
    padding: var(--space-md);
    gap:     var(--space-sm);
  }

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

  #contact-main {
    padding: var(--space-xl) var(--space-md);
  }

  .contact-form-wrapper {
    padding: var(--space-md);
  }

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

  #contact-map {
    padding: 0 var(--space-md) var(--space-xl);
  }

  .map-frame {
    height: 300px;
  }

  .map-header {
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-sm);
  }

  .service-checkboxes {
    flex-direction: column;
  }
}