/* ============================================================
   PushinPay — SAC e formulários (denúncia/reembolso) no design novo.
   Carregado via @push('styles') nas views de SAC.
   ============================================================ */

/* ---- hero ---- */
.sac-hero {
  position: relative;
  overflow: hidden;
  padding: 150px 0 30px;
}
.sac-hero .hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.sac-hero .container { position: relative; z-index: 1; }
.sac-hero .eyebrow { margin-bottom: 22px; }
.sac-hero h1 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}
.sac-lede {
  color: var(--ink2);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.7;
  max-width: 720px;
  margin-bottom: 14px;
}
.sac-divider { height: 1px; background: var(--line); margin: 22px 0; max-width: 720px; }

/* ---- index: cards de canal ---- */
.sac-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 720px;
  margin-top: 38px;
}
@media (max-width: 640px) { .sac-cards { grid-template-columns: 1fr; } }
.sac-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-decoration: none;
  transition: border-color .25s, transform .25s, background .25s;
}
.sac-card:hover { border-color: rgba(77, 78, 242, .5); transform: translateY(-4px); background: rgba(77, 78, 242, .06); }
.sac-card-ic {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(77, 78, 242, .3), rgba(124, 92, 255, .18));
  border: 1px solid rgba(77, 78, 242, .35);
  font-size: 22px; color: var(--ink);
}
.sac-card-t { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 600; font-size: 20px; color: var(--ink); }
.sac-card-s { color: var(--ink2); font-size: 14px; line-height: 1.6; }
.sac-card .arrow {
  margin-top: 6px;
  color: var(--plight);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: .18em;
}

/* ---- card do formulário ---- */
.form-card {
  position: relative;
  max-width: 820px;
  margin: 38px 0 50px;
  padding: 34px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(12, 13, 34, .6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
@media (max-width: 640px) { .form-card { padding: 22px; } }

.sac-form { display: flex; flex-direction: column; gap: 20px; }
.fld-row { display: flex; gap: 18px; }
@media (max-width: 640px) { .fld-row { flex-direction: column; gap: 20px; } }
.fld-group { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.fld-label { color: var(--ink); font-size: 14px; font-weight: 500; }
.fld-label .opt {
  color: var(--ink3); font-size: 10.5px;
  font-family: "JetBrains Mono", monospace; letter-spacing: .1em;
  text-transform: uppercase; margin-left: 6px;
}
.fld-label .req { color: var(--mag); }
.fld-hint { color: var(--ink3); font-size: 12px; line-height: 1.5; }

.fld {
  width: 100%;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  color: var(--ink);
  font-size: 15px;
  font-family: "Inter", system-ui, sans-serif;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.fld::placeholder { color: var(--ink3); }
.fld:focus { border-color: rgba(77, 78, 242, .7); box-shadow: 0 0 0 3px rgba(77, 78, 242, .15); }
textarea.fld { min-height: 130px; resize: vertical; }
select.fld {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b8cf9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 40px;
}
select.fld option { background: #0c0d22; color: var(--ink); }
input[type="file"].fld { padding: 10px 15px; }
input[type="file"].fld::file-selector-button {
  background: rgba(77, 78, 242, .15);
  border: 1px solid rgba(77, 78, 242, .4);
  color: var(--ink);
  border-radius: 8px; padding: 7px 13px; margin-right: 12px; cursor: pointer;
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
input[type="file"].fld::-webkit-file-upload-button {
  background: rgba(77, 78, 242, .15);
  border: 1px solid rgba(77, 78, 242, .4);
  color: var(--ink);
  border-radius: 8px; padding: 7px 13px; margin-right: 12px; cursor: pointer;
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}

.fld-error { color: #ff6b6b; font-size: 13px; }

.form-alert-ok {
  color: #34d399; font-weight: 600;
  border: 1px solid rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .08);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 22px;
}
.form-alert-err {
  color: #ff6b6b; font-weight: 600;
  border: 1px solid rgba(255, 107, 107, .35); background: rgba(255, 107, 107, .08);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 22px;
}

.sac-submit { display: flex; justify-content: flex-end; margin-top: 4px; }