@font-face {
  font-family: 'Editorial New Medium Italic';
  src: url('fonts/editorialnew-mediumitalic-webfont.woff2') format('woff2'),
    url('fonts/editorialnew-mediumitalic-webfont.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

:root {
  --primary-color: #2C241B;
  /* Dark Roast */
  --secondary-color: #D4A373;
  /* Gold/Latte */
  /* --background-color: #F8F5F2; -- Replaced by body bg color */
  --background-color: #F8F5F2;
  /* Cream Light */
  --surface-color: #FFFFFF;
  --text-color: #333333;
  --text-muted: #666666;
  --border-color: #E0E0E0;
  --input-bg: #FAFAFA;
  --success-color: #4CAF50;
  --error-color: #F44336;
  --border-radius: 8px;
  --spacing-unit: 16px;
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --heading-font: 'Editorial New Medium Italic', serif;
  /* New variable for headings */
}

.logo {
  margin-bottom: 50px;
  margin-top: 50px;
}

.text-muted {
  color: #888;
  font-weight: 300;
  font-size: 0.85em;
}

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

body {
  font-family: var(--font-family);
  background-color: #6d8645;
  /* Updated background color */
  color: var(--text-color);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding: 20px;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  background-color: var(--surface-color);
  padding: 30px;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Header */
header {
  margin-bottom: 30px;
  padding-bottom: 20px;
}

h1 {
  font-family: var(--heading-font);
  font-weight: 500;
  font-style: italic;
  /* Applied custom font settings */
  font-size: 2rem;
  /* Increased size slightly for better visibility */
  color: var(--primary-color);
  margin-bottom: 15px;
  /* Increased margin */
}

.intro-text {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 15px;
}

.company-info {
  font-size: 0.85rem;
  color: #FFFFFF;
  /* White text */
  background: #000000;
  /* Black background */
  padding: 15px;
  border-radius: var(--border-radius);
}

/* Divider after company info (this is handled by section headers usually, but user asked for "line that divides the box with Consumer data") 
   Actually, the user said "la linea que divide la caja que contiene los datos de la empresa con los Datos del Consumidor".
   Currently the header has a bottom border. The company info is inside the header. 
   So I should target the separation between header and the first section.
   The header has: border-bottom: 2px solid var(--secondary-color);
   I will change this to the requested green.
*/
.company-info strong {
  color: #FFFFFF;
  /* White */
}

.company-info a {
  color: #FFFFFF;
  text-decoration: underline;
}

/* Form Sections */
section {
  margin-bottom: 30px;
}

h2 {
  font-family: var(--heading-font);
  font-weight: 500;
  font-style: italic;
  /* Applied custom font settings */
  font-size: 1.5rem;
  /* Increased size */
  margin-bottom: 20px;
  color: var(--primary-color);
  display: flex;
  align-items: center;
}

h2::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: #6d8645;
  margin-left: 15px;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--text-color);
}

label.required::after {
  content: " *";
  color: var(--error-color);
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  font-size: 1rem;
  font-family: inherit;
  border: 0px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: #f6f5f3;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
  /* Removes default dropdown arrow */
}

/* Custom Select styling */
select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

.form-control:focus {
  outline: none;
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 3px rgba(212, 163, 115, 0.2);
}

.form-control.disabled {
  background-color: #f0f0f0;
  cursor: not-allowed;
  opacity: 0.7;
}

input[type="date"] {
  color: var(--text-muted);
}

textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

/* Radio and Checkbox */
.radio-group {
  display: flex;
  gap: 20px;
  margin-top: 5px;
}

.radio-item,
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--primary-color);
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Footer & Button */
.disclaimer {
  font-size: 0.8rem;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  padding: 15px;
  border-radius: var(--border-radius);
  background: var(--input-bg);
  margin-bottom: 25px;
}

.disclaimer ul {
  padding-left: 20px;
  margin-top: 10px;
}

.btn-submit {
  width: 100%;
  padding: 16px;
  background-color: #000000;
  /* Black button */
  color: #fff;
  border: none;
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-submit:hover {
  background-color: #333333;
  /* Darker grey on hover */
}

.btn-submit:active {
  transform: scale(0.98);
}

/* Responsive Grid for Desktop */
@media (min-width: 768px) {
  .row {
    display: flex;
    gap: 20px;
  }

  .col {
    flex: 1;
  }
}

/* Info Box for Store Address */
.info-box {
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--secondary-color);
  padding: 15px;
  border-radius: var(--border-radius);
  margin-top: 10px;
}

.info-box strong {
  color: var(--primary-color);
  display: block;
  margin-bottom: 5px;
}

.info-box p {
  margin: 0;
  color: var(--text-color);
  font-size: 0.9rem;
}

/* Guardian Section Heading */
h3 {
  font-size: 1.1rem;
  margin-bottom: 15px;
  margin-top: 10px;
  color: var(--primary-color);
  font-weight: 600;
}

/* Utility Classes */
.hidden {
  display: none;
}