@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
  --deep-dark: #220901;
  --bright-orange: #f6aa1c;
  --strong-orange: #bc3908;
  --dark-red: #621708;
  --beige: #f5f5dc;
  --white: #fff;
  --light-gray: #e0e0e0;
  --primary-font: "Playfair Display", serif;
  --secondary-font: "Inter", sans-serif;
}

/* ESTILOS BASE */
html {
  scroll-behavior: smooth;
  overflow-y: scroll;
}

body {
  background-color: var(--beige);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--secondary-font), sans-serif;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
}

/* HEADER CONSISTENTE */
.header {
  background-color: var(--deep-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  min-height: 80px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.header-left { padding-left: 1.5rem; }
.header-logo { width: 130px; height: auto; transition: transform 0.3s ease; }
.header-logo:hover { transform: scale(1.05); }
.header-buttons { padding-right: 1.5rem; }
.header-buttons a {
  padding: 0.75rem;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}
.header-buttons a:hover { background-color: rgba(246, 170, 28, 0.15); }
.header-icon { width: 1.5rem; height: 1.5rem; }

/* CONTEÚDO PRINCIPAL */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

/* PÁGINA DE PERFIL */
.profile-card {
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(34, 9, 1, 0.08);
  padding: 1.5rem; /* Alterado para Mobile First */
  width: 100%;
  max-width: 700px;
  margin: 0 auto 3rem auto;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
}

.profile-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 50px rgba(34, 9, 1, 0.12);
}

.profile-card h2 {
  font-family: var(--primary-font);
  font-size: 1.8rem;
  text-align: center;
  color: var(--deep-dark);
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--light-gray);
  padding-bottom: 1rem;
}

/* FORMULÁRIO DE LOGIN */
.login-form {
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 15px 50px rgba(34, 9, 1, 0.1);
  padding: 3rem 2.5rem;
  width: 100%;
  max-width: 420px;
  margin: 2rem auto;
}

.login-form h1 {
  font-family: var(--primary-font);
  font-size: 2.5rem;
  text-align: center;
  color: var(--strong-orange);
  margin-bottom: 0.5rem;
}

/* LABELS E INPUTS */
.login-label, .profile-card label {
  color: var(--deep-dark);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: block;
}

.form-input, .profile-card input {
  padding: 1rem 1.2rem;
  border: 2px solid var(--light-gray);
  border-radius: 10px;
  font-size: 1rem;
  background: var(--white);
  color: var(--deep-dark);
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 1.5rem;
}

.login-input:focus, .profile-card input:focus {
  border-color: var(--strong-orange);
  box-shadow: 0 0 0 4px rgba(188, 57, 8, 0.15);
}

/* BOTÕES */
.form-submit-button, .profile-card button {
  font-size: 1.1rem;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  padding: 1.2rem 2rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1);
  width: 100%;
  background: linear-gradient(135deg, var(--strong-orange), var(--dark-red));
  color: var(--white);
  box-shadow: 0 8px 25px rgba(188, 57, 8, 0.4);
  margin-top: 1rem;
}

.form-links {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 1rem;
  text-align: center;
}

/* LINKS DO FORMULÁRIO */
.form-link {
  font-family: var(--secondary-font);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--strong-orange);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 0.5rem;
  border-radius: 6px;
}

.form-link:hover,
.form-link:focus {
  color: var(--dark-red);
  background-color: rgba(188, 57, 8, 0.1);
  text-decoration: none;
}

.login-submit-enter:hover, .profile-card button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(98, 23, 8, 0.6);
}

/* TABELA DE PEDIDOS (Mobile First - Stacked) */
.pedidos-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--light-gray);
  border-radius: 12px;
  overflow: hidden;
  display: block; /* Adicionado para Mobile First */
}

.pedidos-table thead {
  background-color: rgba(34, 9, 1, 0.05);
  display: none; /* Adicionado para Mobile First */
}

.pedidos-table tbody {
    display: block; /* Adicionado para Mobile First */
    width: 100%;
}

.pedidos-table tr {
    display: block; /* Adicionado para Mobile First */
    width: 100%;
    margin-bottom: 1rem;
    border: 1px solid var(--light-gray);
    border-radius: 8px;
    overflow: hidden;
}

.pedidos-table th, .pedidos-table td {
  padding: 1rem 1.2rem;
  text-align: left;
  border-bottom: 1px solid var(--light-gray);
  vertical-align: middle;
}

.pedidos-table td {
    display: block; /* Adicionado para Mobile First */
    width: 100%;
    text-align: right !important; /* Adicionado para Mobile First */
    padding-left: 50%; /* Adicionado para Mobile First */
    position: relative; /* Adicionado para Mobile First */
    box-sizing: border-box; /* Garante que o padding não quebre a largura */
}

.pedidos-table tr td:last-child { 
    border-bottom: none; /* Adicionado para Mobile First */
}
.pedidos-table tbody tr:last-child td { 
    /* Esta regra do desktop não se aplica mais da mesma forma */
    border-bottom: 1px solid var(--light-gray); 
}
.pedidos-table tbody tr:last-child td:last-child {
    border-bottom: none; /* Regra correta para mobile */
}


.pedidos-table td:before {
    content: attr(data-label); /* Adicionado para Mobile First */
    position: absolute; /* Adicionado para Mobile First */
    left: 1rem; /* Adicionado para Mobile First */
    width: 45%; /* Adicionado para Mobile First */
    text-align: left; /* Adicionado para Mobile First */
    font-weight: 700; /* Adicionado para Mobile First */
    color: var(--dark-red); /* Adicionado para Mobile First */
}


.pedidos-table th {
  color: var(--dark-red);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pedidos-table tbody tr:nth-child(even) { background-color: rgba(246, 170, 28, 0.04); }
/* Hover removido para mobile, pois não existe. Será readicionado no media query */
.pedidos-table td { color: var(--deep-dark); font-size: 1rem; }

/* Alinhamentos de texto base para mobile (TDs) */
.pedidos-table th:nth-child(1), .pedidos-table td:nth-child(1),
.pedidos-table th:nth-child(3), .pedidos-table td:nth-child(3),
.pedidos-table th:nth-child(5), .pedidos-table td:nth-child(5) { text-align: right !important; }
.pedidos-table th:nth-child(4), .pedidos-table td:nth-child(4) { text-align: right !important; }


.sem-pedidos {
    text-align: center;
    color: var(--deep-dark);
    margin-top: 2rem;
    padding: 1rem;
    background-color: rgba(34, 9, 1, 0.03);
    border-radius: 8px;
}

/* ESQUECI A SENHA */
.forgot-password-form {
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 15px 50px rgba(34, 9, 1, 0.1);
  padding: 3rem 2.5rem;
  width: 100%;
  max-width: 450px;
  margin: 2rem auto;
  box-sizing: border-box;
  text-align: center;
}

.forgot-password-form h2 {
  font-family: var(--primary-font);
  font-size: 2.2rem;
  text-align: center;
  color: var(--strong-orange);
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.forgot-password-form p {
  font-family: var(--secondary-font);
  font-size: 1rem;
  color: var(--deep-dark);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.forgot-password-form input[type="email"] {
  padding: 1rem 1.2rem;
  border: 2px solid var(--light-gray);
  border-radius: 10px;
  font-size: 1rem;
  background: var(--white);
  color: var(--deep-dark);
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 1.5rem;
}

.forgot-password-form input[type="email"]:focus {
  border-color: var(--strong-orange);
  box-shadow: 0 0 0 4px rgba(188, 57, 8, 0.15);
}

.forgot-password-form input[type="submit"] {
  font-size: 1.1rem;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  padding: 1.2rem 2rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1);
  width: 100%;
  background: linear-gradient(135deg, var(--strong-orange), var(--dark-red));
  color: var(--white);
  box-shadow: 0 8px 25px rgba(188, 57, 8, 0.4);
  margin-top: 0.5rem;
}

.forgot-password-form input[type="submit"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(98, 23, 8, 0.6);
}

.forgot-password-message {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  color: var(--deep-dark);
}

.forgot-password-message b {
  color: var(--dark-red); 
  font-weight: 600;
}

.forgot-password-message a {
  font-family: var(--secondary-font);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--strong-orange);
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 0.5rem;
  border-radius: 6px;
  display: block; 
  margin-top: 1rem;
}

.forgot-password-message a:hover,
.forgot-password-message a:focus {
  color: var(--dark-red);
  background-color: rgba(188, 57, 8, 0.1);
  text-decoration: none;
}

/* PÁGINA DE FEEDBACK (CADASTRO) */
body.feedback-page {
  background-color: var(--beige);
  font-family: var(--secondary-font), sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1rem;
  margin: 0;
  box-sizing: border-box;
}

.feedback-card {
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 15px 50px rgba(34, 9, 1, 0.1);
  padding: 2.5rem;
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  text-align: center;
  box-sizing: border-box;
}

.feedback-card h2 {
  font-family: var(--primary-font);
  font-size: 2.2rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.feedback-message {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  color: var(--deep-dark);
}

.feedback-card h2.success-title {
  color: #2e7d32; 
}

.feedback-card h2.error-title {
  color: var(--strong-orange); 
}

.feedback-message.error {
  color: var(--dark-red);
  font-weight: 500;
}

.feedback-card a {
  font-family: var(--secondary-font);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  background: linear-gradient(135deg, var(--strong-orange), var(--dark-red));
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1);
  padding: 1.1rem 1.5rem;
  border-radius: 12px;
  display: inline-block;
  box-shadow: 0 8px 25px rgba(188, 57, 8, 0.4);
  width: 100%;
  box-sizing: border-box;
}

.feedback-card a:hover,
.feedback-card a:focus {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(98, 23, 8, 0.6);
  color: var(--white);
  text-decoration: none;
}

@media (min-width: 768px) {
    .profile-card { 
        padding: 2.5rem; 
    }
    
    .pedidos-table { 
        display: table; 
    }
    
    .pedidos-table thead { 
        display: table-header-group; 
    }
    
    .pedidos-table tbody { 
        display: table-row-group; 
    }
    
    .pedidos-table tr { 
        display: table-row; 
        margin-bottom: 0; 
        border: none; 
        border-radius: 0; 
        overflow: visible; 
    }
    
    .pedidos-table td { 
        display: table-cell; 
        width: auto; 
        text-align: left !important; 
        padding: 1rem 1.2rem; 
        position: static; 
        border-bottom: 1px solid var(--light-gray); 
    }
    
    .pedidos-table tr td:last-child { 
        border-bottom: 1px solid var(--light-gray); /* Reset mobile */
    }
    
    .pedidos-table tbody tr:last-child td { 
        border-bottom: none; /* Re-apply original rule */
    }
    
    .pedidos-table td:before { 
        display: none; 
    }
    
    .pedidos-table tbody tr:hover { 
        background-color: rgba(246, 170, 28, 0.12); 
    }
    
    /* Re-apply original text-aligns */
    .pedidos-table th:nth-child(1), .pedidos-table td:nth-child(1),
    .pedidos-table th:nth-child(3), .pedidos-table td:nth-child(3),
    .pedidos-table th:nth-child(5), .pedidos-table td:nth-child(5) { 
        text-align: center !important; 
    }
    .pedidos-table th:nth-child(4), .pedidos-table td:nth-child(4) { 
        text-align: right !important; 
    }
}