/* Contact Form 7 - Maurice styling */

/* ========================================
   VARIABLES CSS - GUÍA DE ESTILO MAURICE
======================================== */
:root {
  /* Tipografía */
  --maurice-font-h1-family: 'Fraunces', serif;
  --maurice-font-h1-size: 107px;
  --maurice-font-h1-weight: 600;
  
  --maurice-font-h2-family: 'Fraunces', serif;
  --maurice-font-h2-size: 53px;
  --maurice-font-h2-weight: 600;
  
  --maurice-font-h3-family: 'Outfit', sans-serif;
  --maurice-font-h3-size: 32px;
  --maurice-font-h3-weight: 600;
  
  --maurice-font-paragraph-family: 'Outfit', sans-serif;
  --maurice-font-paragraph-size: 20px;
  --maurice-font-paragraph-weight: 400;
  
  --maurice-font-paragraph-bold-family: 'Outfit', sans-serif;
  --maurice-font-paragraph-bold-size: 20px;
  --maurice-font-paragraph-bold-weight: 600;
  
  --maurice-font-button-family: 'Outfit', sans-serif;
  --maurice-font-button-size: 20px;
  --maurice-font-button-weight: 600;
  
  /* Colores */
  --maurice-color-orange: #fc805a;
  --maurice-color-gray: #a0a0a0;
  --maurice-color-gray-light: #f2f2f2;
  --maurice-color-gray-very-light: #f9f8f7;
  --maurice-color-beige: #f0ece6;
  --maurice-color-beige-light: #f4f3f2;
  --maurice-color-black: #000000;
  --maurice-color-white: #ffffff;
  --maurice-color-grey: #f5f5f5;
  /* Bordes */
  --maurice-border-button: 50px;
}

.wpcf7.maurice-form {
    --field-radius: var(--maurice-border-button) !important;
  --field-border: 3px solid var(--maurice-color-gray-light) !important; /* gris claro */
  --field-bg: var(--maurice-color-white) !important;
  --field-text: var(--maurice-color-black) !important;
  --placeholder: var(--maurice-color-black) !important;
  --accent: var(--maurice-color-orange) !important; /* naranja */
  --gray: var(--maurice-color-gray) !important; /* gris */
  --gray-light: var(--maurice-color-gray-very-light) !important; /* gris muy claro */
  --beige: var(--maurice-color-beige) !important; /* footer */
  --beige-light: var(--maurice-color-beige-light) !important;
}

.wpcf7.maurice-form .wpcf7-form {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px !important;
}

/* CF7 envuelve cada campo en <p> e inserta un <br> al inicio */
.wpcf7.maurice-form .wpcf7-form > p { margin: 0 !important; }
.wpcf7.maurice-form .wpcf7-form > p > br { display: none !important; }

/* Two columns on desktop for first row */
.wpcf7.maurice-form .field-half { grid-column: span 1 !important; }
.wpcf7.maurice-form .field-full { grid-column: 1 / -1 !important; }

.wpcf7.maurice-form input[type="text"],
.wpcf7.maurice-form input[type="email"],
.wpcf7.maurice-form input[type="tel"],
.wpcf7.maurice-form textarea {
  width: 100% !important;
  background: var(--field-bg) !important;
  border: var(--field-border) !important;
  border-radius: var(--field-radius) !important;
  padding: 16px 20px !important;
  font-family: var(--maurice-font-paragraph-family) !important;
  font-size: var(--maurice-font-paragraph-size) !important; /* párrafo 20 */
  color: var(--field-text) !important;
  outline: none !important;
  transition: box-shadow .2s ease !important;
}

.wpcf7.maurice-form textarea { min-height: 190px !important; }

.wpcf7.maurice-form input::placeholder,
.wpcf7.maurice-form textarea::placeholder { color: var(--placeholder) !important; }
/* Compatibilidad cross-browser */
.wpcf7.maurice-form input::-webkit-input-placeholder,
.wpcf7.maurice-form textarea::-webkit-input-placeholder { color: var(--placeholder) !important; }
.wpcf7.maurice-form input:-ms-input-placeholder,
.wpcf7.maurice-form textarea:-ms-input-placeholder { color: var(--placeholder) !important; }

/* Checkbox styling */
.wpcf7.maurice-form .wpcf7-list-item { margin: 0 !important; }
.wpcf7.maurice-form input[type="checkbox"] {
  width: 18px !important; 
  height: 18px !important; 
  border-radius: 4px !important; 
  border: 2px solid var(--maurice-color-black) !important;
  appearance: none; 
  margin-right: 10px;
}
.wpcf7.maurice-form input[type="checkbox"]:checked { background: var(--maurice-color-black) !important; }

/* Checkbox label - mismo tamaño que placeholders (20px) */
.wpcf7.maurice-form .wpcf7-list-item-label {
  font-family: var(--maurice-font-paragraph-family) !important;
  font-size: var(--maurice-font-paragraph-size) !important;
  font-weight: 400 !important;
  color: var(--field-text) !important;
}

.wpcf7.maurice-form .checkbox-row { grid-column: 1 / -1 !important; }

.wpcf7.maurice-form .submit-row { grid-column: 1 / -1 !important; }
.wpcf7.maurice-form input[type="submit"] {
  width: 100% !important;
  background: var(--maurice-color-orange) !important;
  color: var(--maurice-color-black);
  font-weight: 600 !important; /* semibold */
  font-family: var(--maurice-font-button-family) !important;
  font-size: 20px !important; /* botones 20 */
  border: 3px solid var(--maurice-color-orange) !important; /* borde 3px */
  border-radius: var(--maurice-border-button) !important;
  padding: 16px 20px;
  cursor: pointer !important;
}

@media (max-width: 768px) {
  .wpcf7.maurice-form .wpcf7-form { grid-template-columns: 1fr !important; gap: 14px !important ; }
  .wpcf7.maurice-form .field-half { grid-column: 1 / -1 !important; }
}