/*
 * Contact Page Styles - aligned with front-page aesthetics
 * @package CransysCore
 */

/* Header */
.page-contact .page-header {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: var(--white);
  padding: var(--space-20) 0 var(--space-16);
  position: relative;
  overflow: hidden;
}
.page-contact .page-header:after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-color), var(--accent-light));
}
.page-contact .page-title { color: var(--white); }
.page-contact .page-description { color: rgba(255,255,255,.9); max-width: 800px; margin: 0 auto; }

/* Main section */
.contact-section { padding: var(--space-20) 0; background: var(--white); }

/* Info cards */
.contact-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); }
.contact-info-card { display:flex; gap: var(--space-4); padding: var(--space-6); background: var(--white); border:1px solid var(--gray-200); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); transition: var(--transition-all); }
.contact-info-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2xl); }
.contact-info-icon { width:60px; height:60px; border-radius: 16px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--accent-color), var(--secondary-color)); color:#fff; font-size:1.4rem; box-shadow: 0 12px 28px rgba(245,158,11,.25); flex-shrink:0; }
.contact-info-content h3 { color: var(--primary-color); margin: 0 0 var(--space-2) 0; }
.contact-info-content p { margin: 0 0 var(--space-1) 0; color: var(--text-primary); }
.contact-info-content small { color: var(--text-muted); }

/* Two-column content */
.contact-content { display:grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-8); margin-top: var(--space-12); }

/* Form */
.contact-form { background: var(--white); border:1px solid var(--gray-200); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); padding: var(--space-8); }
.contact-form h2 { color: var(--primary-color); margin-bottom: var(--space-2); }
.contact-form .form-description { color: var(--text-secondary); margin-bottom: var(--space-6); }

.contact-form-element .form-row { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.contact-form-element .form-group { margin-bottom: var(--space-4); }
.contact-form-element label { font-weight: 600; color: var(--primary-color); margin-bottom: .5rem; display:block; }
.contact-form-element .form-control { border:2px solid var(--gray-200); border-radius: 10px; padding: .75rem 1rem; transition: var(--transition-all); }
.contact-form-element .form-control:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(245,158,11,.1); outline:none; }

.form-file { position: relative; border: 2px dashed var(--gray-200); border-radius: 12px; padding: var(--space-6); text-align:center; background: var(--bg-secondary); }
.form-file input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.file-upload-info { color: var(--text-secondary); display:flex; flex-direction:column; gap:.25rem; align-items:center; }
.file-upload-info i { color: var(--accent-color); font-size: 1.5rem; }

.form-actions { margin-top: var(--space-4); }

/* Sidebar widgets */
.contact-sidebar .contact-widget { background: var(--white); border:1px solid var(--gray-200); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); padding: var(--space-6); margin-bottom: var(--space-6); }
.contact-sidebar h3 { color: var(--primary-color); margin-bottom: var(--space-3); }
.business-hours .hours-row { display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px dashed var(--gray-200); }
.business-hours .hours-row:last-child { border-bottom:none; }
.quick-contact-item { display:flex; gap: var(--space-3); align-items:center; padding:.75rem 1rem; border:1px solid var(--gray-200); border-radius: 12px; text-decoration:none; color: var(--text-primary); transition: var(--transition-all); margin-bottom:.5rem; }
.quick-contact-item:hover { transform: translateY(-2px); border-color: var(--accent-color); box-shadow: var(--shadow-md); }
.quick-contact-icon { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--accent-color), var(--secondary-color)); color:#fff; }
.social-links-contact { display:flex; gap:.5rem; }
.social-links-contact .social-link { width:38px; height:38px; display:flex; align-items:center; justify-content:center; background: var(--bg-secondary); border-radius: 50%; color: var(--primary-color); transition:var(--transition-all); }
.social-links-contact .social-link:hover { background: var(--accent-color); color: #fff; transform: translateY(-2px); }
.emergency-contact .emergency-phone { display:inline-flex; align-items:center; gap:.5rem; color:#fff; background: var(--accent-color); padding:.5rem .75rem; border-radius: 8px; text-decoration:none; }

/* Map section */
.contact-map-section { margin-top: var(--space-16); }
.map-container { position:relative; border-radius: 20px; overflow:hidden; box-shadow: var(--shadow-xl); }
.map-info { position:absolute; right: var(--space-6); bottom: var(--space-6); background: rgba(255,255,255,.95); padding: var(--space-6); border-radius: 16px; box-shadow: var(--shadow-lg); width: min(360px, 90%); }
.map-info h3 { color: var(--primary-color); margin-top:0; }

/* FAQ */
.contact-faq-section { padding: var(--space-20) 0; background: var(--bg-secondary); }
.faq-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); }
.faq-item { background:#fff; border:1px solid var(--gray-200); border-radius: 16px; padding: var(--space-6); box-shadow: var(--shadow-lg); }
.faq-question { color: var(--primary-color); margin: 0 0 var(--space-2) 0; }
.faq-answer { color: var(--text-secondary); margin:0; }

/* Responsive */
@media (max-width: 992px){
  .contact-content { grid-template-columns: 1fr; }
  .map-info { position: static; width: 100%; margin-top: var(--space-4); }
}
@media (max-width: 576px){
  .contact-form-element .form-row { grid-template-columns: 1fr; }
}