/* ==========================
   FORMULÁRIO DE RECLAMAÇÃO
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f5f5f5;
}

/* =========BODY========== */
body {
  background: #ecebeb;
  color: #222;
  overflow-x: hidden;
}

body.dark-mode {
  background: #0f0f0f;
  color: white;
}

body.dark-mode section {
  background: #111;
}

body.dark-mode .card,
body.dark-mode .sobre-box,
body.dark-mode .diferencial-item {
  background: #1b1b1b;
  color: white;
}

body.dark-mode p {
  color: #ccc;
}

body.dark-mode .servicos {
  background: #111;
}

/* NAVBAR */

nav {
  width: 100%;
  padding: 25px 8%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  position: fixed;
  top: 0;
  left: 0;

  z-index: 1000;

  background: rgba(212, 161, 94, 0.25);
  backdrop-filter: blur(12x);
  -webkit-backdrop-filter: blur(12px);
  transition: 0.4s;
}

body.dark-mode nav {
  width: 100%;
  padding: 25px 8%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  position: fixed;
  top: 0;
  left: 0;

  z-index: 1000;

  background: rgba(16, 35, 74, 0.25);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition: 0.4s;
}

.logo {
  color: white;
  font-size: 28px;
  font-weight: 700;
}

.logo span {
  color: #10234a;
}

/* MOBILE */
@media (max-width: 768px) {
  .logo {
    font-size: 18px;
  }
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 20px;
}

.nav-links a {
  color: white;
  text-decoration: none;
  transition: 0.3s;
}

.nav-links a:hover {
  color: #10234a;
}

body.dark-mode .nav-links a {
  color: white;
  text-decoration: none;
  transition: 0.3s;
}

body.dark-mode .nav-links a:hover {
  color: #d4a15e;
}

/* MENU MOBILE */

.menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  z-index: 1001;
}

.menu-btn span {
  width: 28px;
  height: 3px;
  background: white;
  border-radius: 5px;
}

/* =========DARK MODE========== */
.dark-btn {
  width: 45px;
  height: 45px;

  border: none;
  border-radius: 50%;

  background: rgba(212, 161, 94, 0.2);
  color: white;

  cursor: pointer;

  font-size: 18px;

  backdrop-filter: blur(10px);

  transition: 0.3s;
}

.dark-btn:hover {
  transform: scale(1.1);
  background: rgba(212, 161, 94, 0.35);
}

.formulariodereclamacao{
    padding:80px 5%;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
}

.formulariodereclamacao .container{
    width:100%;
    max-width:900px;
    background:#fff;
    padding:40px;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.formulariodereclamacao h1{
    color:#0d2e67;
    margin-bottom:30px;
    font-size:2rem;
}

.formulariodereclamacao form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.formulariodereclamacao .campo{
    display:flex;
    flex-direction:column;
}

.formulariodereclamacao .campo.full{
    grid-column:1/-1;
}

.formulariodereclamacao .campo label{
    margin-bottom:8px;
    font-weight:600;
    color:#333;
}

.formulariodereclamacao .campo input,
.formulariodereclamacao .campo select,
.formulariodereclamacao .campo textarea{
    width:100%;
    padding:14px;
    border:1px solid #ddd;
    border-radius:12px;
    font-size:15px;
    outline:none;
    transition:.3s;
}

.formulariodereclamacao .campo input:focus,
.formulariodereclamacao .campo select:focus,
.formulariodereclamacao .campo textarea:focus{
    border-color:#d4a15e;
    box-shadow:0 0 0 3px rgba(212,161,94,.15);
}

.formulariodereclamacao textarea{
    resize:vertical;
}

.formulariodereclamacao button{
    grid-column:1/-1;
    padding:16px;
    border:none;
    border-radius:12px;
    background:#d4a15e;
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.formulariodereclamacao button:hover{
    background:#c18f4f;
    transform:translateY(-2px);
}

/* ==========================
   DARK MODE - FORMULÁRIO
========================== */

body.dark-mode{
    background:#0f172a;
    color:#fff;
}

body.dark-mode .formulariodereclamacao .container{
    background:#1e293b;
    box-shadow:0 15px 35px rgba(0,0,0,.3);
}

body.dark-mode .formulariodereclamacao h1{
    color:#d4a15e;
}

body.dark-mode .campo label{
    color:#f1f5f9;
}

body.dark-mode .campo input,
body.dark-mode .campo select,
body.dark-mode .campo textarea{
    background:#334155;
    border:1px solid #475569;
    color:#fff;
}

body.dark-mode .campo input::placeholder,
body.dark-mode .campo textarea::placeholder{
    color:#94a3b8;
}

body.dark-mode .campo input:focus,
body.dark-mode .campo select:focus,
body.dark-mode .campo textarea:focus{
    border-color:#d4a15e;
    box-shadow:0 0 0 3px rgba(212,161,94,.25);
}

body.dark-mode .formulariodereclamacao button{
    background:#d4a15e;
    color:#fff;
}

body.dark-mode .formulariodereclamacao button:hover{
    background:#c18f4f;
}

body.dark-mode #status{
    color:#fff;
}

@media(max-width:768px){

    .formulariodereclamacao{
        padding:40px 20px;
    }

    .formulariodereclamacao .container{
        padding:25px;
    }

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

    .formulariodereclamacao .campo.full{
        grid-column:auto;
    }
}