/* /public/front/css/contact.css */

/* Header */
.contact-header {
  background: var(--gradient);
  color: #fff;
  padding: 6rem 0 4rem;
  position: relative;
}
.page-header.contact-header::after { display: none; }

/* Container */
.contact-container {
  margin-top: -3rem;
  position: relative;
  z-index: 5;
}

/* Success banner */
.success-banner {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  padding: 0.9rem 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 10px 25px -8px rgba(0,0,0,.08);
}
.success-banner i { font-size: 1.1rem; }

/* Grid */
.contact-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
}

/* Cards */
.contact-card,
.info-card {
  background: #fff;
  border: 1px solid var(--gray);
  border-radius: 16px;
  box-shadow: 0 10px 25px -10px rgba(0,0,0,.12);
  overflow: hidden;
}

.contact-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.25rem;
  background: var(--dark);
  color: #fff;
}
.contact-card .header-title {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.contact-card .header-title i { color: var(--primary); font-size: 1.25rem; }
.update-badge { color: var(--success); font-size: .9rem; display: inline-flex; gap: .4rem; align-items:center; }

/* Form */
.contact-form { padding: 1.25rem; }
.form-row { display: grid; gap: 1rem; margin-bottom: 1rem; }
.form-row.two { grid-template-columns: 1fr 1fr; }
.form-field label {
  display: block; margin-bottom: .45rem; font-weight: 600; color: var(--dark);
}
.input-with-icon {
  position: relative;
  display: flex; align-items: center;
}
.input-with-icon i {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--secondary);
}
.input-with-icon.textarea i { top: 1rem; transform: none; }

.input-control {
  width: 100%;
  border: 1px solid var(--gray);
  border-radius: 12px;
  padding: .9rem .9rem .9rem 2.3rem;
  outline: none;
  transition: border .2s, box-shadow .2s, background .2s;
  background: #f8fafc;
}
.input-control.textarea {
  min-height: 160px;
  resize: vertical;
  padding-left: 2.3rem;
}
.input-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .15);
  background: #fff;
}

.form-actions { display: flex; justify-content: flex-end; margin-top: .25rem; }
.btn.btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--primary); color: #fff; border: 0;
  padding: .85rem 1.15rem; border-radius: 12px; cursor: pointer;
}
.btn.btn-primary:hover { filter: brightness(0.95); }

/* Info card */
.info-card { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.info-block {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .6rem .2rem;
}
.info-block i { color: var(--primary); font-size: 1.25rem; }
.info-title { font-weight: 700; color: var(--dark); }
.info-text { color: var(--secondary); }

.divider { height: 1px; background: var(--gray); margin: .25rem 0; }
.contact-meta { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.contact-meta li { color: var(--secondary); display: flex; align-items: center; gap: .6rem; }
.contact-meta i { color: var(--primary); }

/* Responsive */
@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr; }
  .form-row.two { grid-template-columns: 1fr; }
}