/* === CUSTOM CSS === */
/* =========================
   FONDO GENERAL
   ========================= */
html,
body {
  background: #f3f3f3!important;
}

/* =========================
   CONTENEDOR PRINCIPAL
   ========================= */
form,
.cooltabs-form,
.register-form,
.participation-form,
div[class*="form-container"],
div[class*="register-form"],
div[class*="participation-form"] {
  max-width: 760px !important;   /* más ancho en desktop */
  width: 92% !important;
  margin: 24px auto !important;
  padding: 0 28px 32px !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.10) !important;
  border: 1px solid #ececec !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* =========================
   HEADER / IMAGEN SUPERIOR
   ========================= */
form img:first-of-type,
.cooltabs-form img:first-of-type,
.register-form img:first-of-type,
.participation-form img:first-of-type {
  display: block !important;
  width: calc(100% + 56px) !important;
  max-width: calc(100% + 56px) !important;
  margin-left: -28px !important;
  margin-right: -28px !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  border-radius: 20px 20px 0 0 !important;
}

/* =========================
   LABELS
   ========================= */
label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1f1f1f !important;
  margin-bottom: 7px !important;
}

/* =========================
   ESPACIADO CAMPOS
   ========================= */
.form-group,
.field,
.ct-field,
div[class*="field"],
div[class*="form-group"] {
  margin-bottom: 16px !important;
}

/* =========================
   INPUTS GENERALES
   ========================= */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"],
textarea,
select {
  width: 100% !important;
  height: 46px !important;
  padding: 0 14px !important;
  border: 1px solid #d8d8d8 !important;
  border-radius: 12px !important;
  background: #f8f6f6 !important;
  color: #222 !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

textarea {
  min-height: 100px !important;
  padding: 12px 14px !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #d60b2f !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(214, 11, 47, 0.10) !important;
}

/* =========================
   SELECT / DESPLEGABLE
   ========================= */
/* select nativo */
select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding-right: 46px !important;
  background-color: #f8f6f6 !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #888 50%),
    linear-gradient(135deg, #888 50%, transparent 50%) !important;
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px) !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
}

/* wrappers típicos que CoolTabs puede usar para selects */
.select,
.select-wrapper,
.select-container,
.custom-select,
div[class*="select"],
div[class*="dropdown"],
span[class*="select"],
span[class*="dropdown"] {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* si el campo visible del select es otro */
.select *,
.select-wrapper *,
.select-container *,
.custom-select *,
div[class*="select"] *,
div[class*="dropdown"] * {
  border-radius: 12px !important;
}

/* flecha lateral gris que se ve cuadrada */
select + span,
select + div,
div[class*="select"] span,
div[class*="dropdown"] span,
div[class*="select"] div,
div[class*="dropdown"] div {
  border-radius: 12px !important;
}

/* =========================
   SUBIDA DE IMAGEN
   ========================= */
/* input file nativo */
input[type="file"] {
  width: 100% !important;
  padding: 10px !important;
  border: 1px dashed #d60b2f !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #222 !important;
  box-sizing: border-box !important;
}

/* botón visible de upload */
.upload-btn,
.file-upload-btn,
.fileUpload,
.file-upload,
button[type="button"],
div[class*="upload"] button,
div[class*="upload"],
span[class*="upload"],
label[for*="file"],
label[for*="upload"] {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* estilo visual upload */
.upload-btn,
.file-upload-btn,
.fileUpload,
.file-upload,
div[class*="upload"] button,
label[for*="file"],
label[for*="upload"] {
  background: #ffffff !important;
  color: #d60b2f !important;
  border: 1px solid #d60b2f !important;
  padding: 12px 18px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  display: inline-block !important;
}

/* si CoolTabs mete icono o span dentro */
.upload-btn *,
.file-upload-btn *,
.fileUpload *,
.file-upload *,
div[class*="upload"] *,
label[for*="file"] *,
label[for*="upload"] * {
  border-radius: 12px !important;
}

/* =========================
   BOTÓN ENVIAR
   ========================= */
button[type="submit"],
input[type="submit"],
.submit-button,
.btn-submit {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  margin-top: 20px !important;
  border: none !important;
  border-radius: 12px !important;
  background: #d60b2f !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  box-shadow: 0 8px 18px rgba(214, 11, 47, 0.20) !important;
  cursor: pointer !important;
}

button[type="submit"]:hover,
input[type="submit"]:hover,
.submit-button:hover,
.btn-submit:hover {
  background: #b80928 !important;
}

/* =========================
   PLACEHOLDERS
   ========================= */
::placeholder {
  color: #9a9a9a !important;
  opacity: 1 !important;
}

/* =========================
   DESKTOP
   ========================= */
@media (min-width: 769px) {
  form,
  .cooltabs-form,
  .register-form,
  .participation-form,
  div[class*="form-container"],
  div[class*="register-form"],
  div[class*="participation-form"] {
    max-width: 820px !important;
    padding: 0 36px 34px !important;
  }

  form img:first-of-type,
  .cooltabs-form img:first-of-type,
  .register-form img:first-of-type,
  .participation-form img:first-of-type {
    width: calc(100% + 72px) !important;
    max-width: calc(100% + 72px) !important;
    margin-left: -36px !important;
    margin-right: -36px !important;
  }
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 480px) {
  form,
  .cooltabs-form,
  .register-form,
  .participation-form,
  div[class*="form-container"],
  div[class*="register-form"],
  div[class*="participation-form"] {
    width: calc(100% - 24px) !important;
    margin: 12px auto !important;
    padding: 0 16px 22px !important;
    border-radius: 16px !important;
  }

  form img:first-of-type,
  .cooltabs-form img:first-of-type,
  .register-form img:first-of-type,
  .participation-form img:first-of-type {
    width: calc(100% + 32px) !important;
    max-width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    border-radius: 16px 16px 0 0 !important;
  }
label[for="participation_image"] {
  display: block !important;
}

div.field_wrap.js_tp_enclosing > label[for="participation_image"] {
  display: block !important;
  position: relative !important;
  margin-bottom: 18px !important;
  line-height: 1.4 !important;
}

div.field_wrap.js_tp_enclosing > label[for="participation_image"]::after {
  content: "Recuerda que en la imagen deben verse el ticket de compra y el producto promocional con el sticker promocional.";
  display: block !important;
  margin-top: 6px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  color: #666666 !important;
  text-transform: none !important;
  white-space: normal !important;
}
}