/* ════════════════════════════════════════════════════════════
   HIREHUB – CONTACT PAGE CSS
════════════════════════════════════════════════════════════ */

/* ── Active nav link ────────────────────────────────────────── */
.nav-link-active {
  color:      var(--primary) !important;
  font-weight: 600 !important;
}

/* ── Hero ──────────────────────────────────────────────────── */
.contact-hero {
  background:  var(--bg-hero, #0d1117);
  padding:     70px 0 60px;
  position:    relative;
  overflow:    hidden;
}

.contact-hero-bg {
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse at 30% 60%, rgba(15,98,254,.2) 0%, transparent 55%),
              radial-gradient(ellipse at 80% 20%, rgba(255,107,53,.12) 0%, transparent 50%);
  pointer-events: none;
}

.contact-hero-icon {
  font-size:    2.8rem;
  color:        var(--primary);
  display:      inline-flex;
  align-items:  center;
  justify-content: center;
  width:        72px;
  height:       72px;
  background:   rgba(15,98,254,.15);
  border:       1px solid rgba(15,98,254,.3);
  border-radius: 20px;
  margin:       0 auto 1.25rem;
}

.contact-hero-title {
  font-family:  var(--font-display, 'Syne', sans-serif);
  font-size:    clamp(1.8rem, 4vw, 2.8rem);
  font-weight:  800;
  color:        #ffffff;
  margin-bottom: .75rem;
  letter-spacing: -.5px;
}

.contact-hero-sub {
  font-size:  1rem;
  color:      rgba(255,255,255,.6);
  max-width:  520px;
  margin:     0 auto 1.5rem;
  line-height: 1.65;
}

.contact-hero-badges {
  display:         flex;
  flex-wrap:       wrap;
  gap:             .5rem;
  justify-content: center;
}

.hero-badge-chip {
  background:    rgba(255,255,255,.08);
  border:        1px solid rgba(255,255,255,.15);
  color:         rgba(255,255,255,.75);
  border-radius: 100px;
  padding:       .35rem .9rem;
  font-size:     .8rem;
  font-weight:   500;
}

/* ── Section ────────────────────────────────────────────────── */
.contact-section {
  padding: 60px 0 80px;
  background: var(--bg);
}

/* ── Contact Card ────────────────────────────────────────────── */
.contact-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: 20px;
  overflow:      hidden;
  box-shadow:    var(--shadow);
}

.contact-card-header {
  padding:       1.75rem 2rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background:    var(--surface);
}

.contact-card-title {
  font-family:   var(--font-display, 'Syne', sans-serif);
  font-size:     1.35rem;
  font-weight:   700;
  color:         var(--text-primary);
  margin-bottom: .35rem;
}

.contact-card-sub {
  font-size:   .9rem;
  color:       var(--text-secondary);
  margin:      0;
}

.contact-card form {
  padding: 1.75rem 2rem 2rem;
}

/* ── Form fields ─────────────────────────────────────────────── */
.field-label {
  display:     block;
  font-weight: 600;
  font-size:   .83rem;
  color:       var(--text-primary);
  margin-bottom: .4rem;
}

.req { color: #e53e3e; }

.field-wrap {
  display:       flex;
  align-items:   center;
  background:    var(--bg);
  border:        1.5px solid var(--border);
  border-radius: 10px;
  padding:       0 .9rem;
  gap:           .5rem;
  transition:    border-color .2s, box-shadow .2s;
}

.field-wrap:focus-within {
  border-color: var(--primary);
  box-shadow:   0 0 0 3px rgba(15,98,254,.1);
}

.field-icon {
  color:      var(--text-muted);
  font-size:  .95rem;
  flex-shrink: 0;
}

.field-input {
  border:      none;
  outline:     none;
  background:  transparent;
  width:       100%;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size:   .9rem;
  color:       var(--text-primary);
  padding:     .7rem 0;
}

.field-input::placeholder { color: var(--text-muted); }

.field-select {
  cursor:            pointer;
  appearance:        none;
  -webkit-appearance: none;
  background-color:  transparent;
  color:             var(--text-primary);
}

[data-theme="dark"] .field-select {
  color: #e6edf3;
}

/* Option fallback (works best in Firefox; Chrome uses OS colors) */
.field-select option {
  background: #ffffff;
  color:      #161616;
}

[data-theme="dark"] .field-select option {
  background: #1e2530;
  color:      #e6edf3;
}

/* ── Dark mode: all form controls ──────────────────────────── */
[data-theme="dark"] .field-wrap {
  background:   #1e2530;
  border-color: #30363d;
}

[data-theme="dark"] .field-wrap:focus-within {
  border-color: var(--primary);
}

[data-theme="dark"] .field-input {
  color: #e6edf3;
}

[data-theme="dark"] .field-input::placeholder { color: #6e7681; }

[data-theme="dark"] .field-icon { color: #6e7681; }

[data-theme="dark"] .field-textarea {
  background:   #1e2530;
  border-color: #30363d;
  color:        #e6edf3;
}

[data-theme="dark"] .field-textarea::placeholder { color: #6e7681; }

[data-theme="dark"] .field-label  { color: #e6edf3; }
[data-theme="dark"] .field-hint   { color: #6e7681; }

/* ── Dark mode: cards ───────────────────────────────────────── */
[data-theme="dark"] .contact-card         { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .contact-card-header  { background: #21262d; border-color: #30363d; }
[data-theme="dark"] .contact-card-title   { color: #e6edf3; }
[data-theme="dark"] .contact-card-sub     { color: #8b949e; }
[data-theme="dark"] .info-card            { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .why-card             { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .packages-card        { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .pkg-item             { background: #21262d; border-color: #30363d; }
[data-theme="dark"] .pkg-featured         { background: rgba(15,98,254,.15) !important; border-color: rgba(15,98,254,.3) !important; }
[data-theme="dark"] .pkg-sponsored        { background: rgba(255,107,53,.12) !important; border-color: rgba(255,107,53,.25) !important; }
[data-theme="dark"] .why-title,
[data-theme="dark"] .packages-title,
[data-theme="dark"] .info-title           { color: #e6edf3; }
[data-theme="dark"] .why-list li          { color: #8b949e; }
[data-theme="dark"] .pkg-name             { color: #e6edf3; }
[data-theme="dark"] .pkg-desc,
[data-theme="dark"] .pkg-note,
[data-theme="dark"] .info-text            { color: #8b949e; }

.field-textarea {
  border:        1.5px solid var(--border);
  border-radius: 10px;
  padding:       .75rem .9rem;
  width:         100%;
  background:    var(--bg);
  font-family:   var(--font-body, 'DM Sans', sans-serif);
  font-size:     .9rem;
  color:         var(--text-primary);
  resize:        vertical;
  min-height:    140px;
  outline:       none;
  transition:    border-color .2s, box-shadow .2s;
  line-height:   1.65;
}

.field-textarea::placeholder { color: var(--text-muted); }

.field-textarea:focus {
  border-color: var(--primary);
  box-shadow:   0 0 0 3px rgba(15,98,254,.1);
}

.field-hint {
  text-align: right;
  font-size:  .75rem;
  color:      var(--text-muted);
  margin-top: .35rem;
}

/* ── Alert ───────────────────────────────────────────────────── */
.contact-alert {
  padding:       .85rem 1rem;
  border-radius: 10px;
  font-size:     .88rem;
  font-weight:   500;
  margin-bottom: 1.25rem;
  display:       flex;
  align-items:   center;
}

.contact-alert-error {
  background:   #fef2f2;
  border:       1px solid #fecaca;
  color:        #991b1b;
}

.contact-alert-success {
  background:   #f0fdf4;
  border:       1px solid #bbf7d0;
  color:        #166534;
}

[data-theme="dark"] .contact-alert-error  { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.25); color: #fca5a5; }
[data-theme="dark"] .contact-alert-success { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.25); color: #86efac; }

/* ── Submit button ───────────────────────────────────────────── */
.btn-submit {
  background:    var(--primary);
  color:         white;
  border:        none;
  border-radius: 12px;
  padding:       .85rem 1.5rem;
  font-family:   var(--font-body, 'DM Sans', sans-serif);
  font-weight:   700;
  font-size:     .95rem;
  cursor:        pointer;
  transition:    all .22s;
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  width:         100%;
  letter-spacing: .2px;
}

.btn-submit:hover:not(:disabled) {
  background:  var(--primary-hover, #0353e9);
  transform:   translateY(-1px);
  box-shadow:  0 6px 20px rgba(15,98,254,.3);
}

.btn-submit:disabled {
  opacity: .7;
  cursor:  not-allowed;
}

/* ── Sidebar Cards ────────────────────────────────────────────── */
.info-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: 14px;
  padding:       1.25rem;
  display:       flex;
  align-items:   flex-start;
  gap:           1rem;
  box-shadow:    var(--shadow);
}

.info-icon-wrap {
  width:         44px;
  height:        44px;
  border-radius: 12px;
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  font-size:     1.2rem;
  flex-shrink:   0;
}

.info-primary {
  background: rgba(15,98,254,.12);
  color:      var(--primary);
  border:     1px solid rgba(15,98,254,.2);
}

.info-title {
  font-family:  var(--font-display, 'Syne', sans-serif);
  font-size:    1rem;
  font-weight:  700;
  margin-bottom: .3rem;
  color:        var(--text-primary);
}

.info-text {
  font-size:   .875rem;
  color:       var(--text-secondary);
  margin:      0;
  line-height: 1.55;
}

/* ── Why card ────────────────────────────────────────────────── */
.why-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: 14px;
  padding:       1.5rem;
  box-shadow:    var(--shadow);
}

.why-title {
  font-family:   var(--font-display, 'Syne', sans-serif);
  font-size:     1rem;
  font-weight:   700;
  color:         var(--text-primary);
  margin-bottom: 1.1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}

.why-list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        .7rem;
}

.why-list li {
  display:    flex;
  align-items: flex-start;
  gap:        .65rem;
  font-size:  .875rem;
  color:      var(--text-secondary);
  line-height: 1.5;
}

.why-icon {
  color:      var(--primary);
  font-size:  1rem;
  flex-shrink: 0;
  margin-top: .1rem;
}

/* ── Packages card ───────────────────────────────────────────── */
.packages-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: 14px;
  padding:       1.5rem;
  box-shadow:    var(--shadow);
}

.packages-title {
  font-family:   var(--font-display, 'Syne', sans-serif);
  font-size:     1rem;
  font-weight:   700;
  color:         var(--text-primary);
  margin-bottom: 1.1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}

.pkg-item {
  padding:       .85rem;
  border-radius: 10px;
  background:    var(--surface);
  border:        1px solid var(--border);
  margin-bottom: .6rem;
  transition:    all .2s;
}

.pkg-item:last-of-type { margin-bottom: 0; }

.pkg-item:hover {
  border-color: var(--primary);
  transform:    translateX(2px);
}

.pkg-featured {
  background:  var(--primary-light, #e8f0fe);
  border-color: rgba(15,98,254,.2);
}

.pkg-sponsored {
  background:  rgba(255,107,53,.06);
  border-color: rgba(255,107,53,.2);
}

[data-theme="dark"] .pkg-featured  { background: rgba(15,98,254,.12); }
[data-theme="dark"] .pkg-sponsored { background: rgba(255,107,53,.1); }

.pkg-name {
  font-weight: 600;
  font-size:   .88rem;
  color:       var(--text-primary);
}

.pkg-price {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-weight: 700;
  font-size:   .95rem;
  color:       var(--primary);
}

.pkg-price.free { color: var(--success, #198754); }

.pkg-price small {
  font-size:   .72rem;
  font-weight: 400;
  color:       var(--text-muted);
}

.pkg-desc {
  display:   block;
  font-size: .78rem;
  color:     var(--text-muted);
  margin-top: .25rem;
}

.pkg-note {
  font-size:  .78rem;
  color:      var(--text-muted);
  margin-top: .85rem;
  margin-bottom: 0;
}

/* ── Success Modal ───────────────────────────────────────────── */
.success-modal {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: 20px;
  box-shadow:    var(--shadow-lg, 0 10px 40px rgba(0,0,0,.15));
}

.success-icon {
  font-size: 3.5rem;
  color:     #16a34a;
  line-height: 1;
}

.success-title {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size:   1.4rem;
  font-weight: 800;
  color:       var(--text-primary);
  margin-bottom: .5rem;
}

.success-text {
  font-size:   .9rem;
  color:       var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.btn-success-ok {
  background:    var(--primary);
  color:         white;
  border:        none;
  border-radius: 10px;
  padding:       .65rem 2rem;
  font-weight:   700;
  font-size:     .9rem;
  cursor:        pointer;
  transition:    background .2s;
  width:         100%;
}

.btn-success-ok:hover { background: var(--primary-hover, #0353e9); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .contact-hero    { padding: 50px 0 45px; }
  .contact-section { padding: 40px 0 60px; }
  .contact-card form { padding: 1.25rem; }
  .contact-card-header { padding: 1.25rem; }
  .contact-hero-badges { gap: .35rem; }
  .hero-badge-chip { font-size: .75rem; padding: .3rem .7rem; }
}