/* =========================================================
   Hobetus - Lead Manager — Frontend Form CSS
   ========================================================= */

:root{
  --cpp-brand:        #333333;
  --cpp-btn-bg:       #0099dd;
  --cpp-btn-txt:      #ffffff;
  --cpp-accent:       #0099dd;
  --cpp-text:         #333333;
  --cpp-muted:        #5b5b6b;
  --cpp-border:       #dcdcdc;
  --cpp-bg:           #ffffff;
  --cpp-soft:         #F9F9F9;
  --cpp-radius:       4px;
  --cpp-shadow:       0 4px 12px rgba(0, 0, 0, .07);
  --cpp-font:         'Arial', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Kill-switch mensajes legacy */
html body .cpp-card .cpp-success,
html body .cpp-card #cppSuccess,
html body .cpp-card.cpp-success-state .cpp-success,
html body .cpp-card.cpp-success-state #cppSuccess,
html body .cpp-success,
html body #cppSuccess {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -99999px !important;
}

/* ===== Wrapper ===== */
.cpp-form-wrapper{
  padding:16px;
  border-radius:var(--cpp-radius);
}

/* ===== Card ===== */
.cpp-card{
  width:100%;
  max-width:560px;
  margin:0 auto;
  background:var(--cpp-bg);
  color:var(--cpp-text);
  border-radius:var(--cpp-radius);
  box-shadow:var(--cpp-shadow);
  padding:28px 26px 24px;
  position:relative;
  font-family:var(--cpp-font);
  line-height:1.5;
}

/* ===== Two-column grid ===== */
.cpp-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 14px;
}
.cpp-grid .cpp-field{
  margin:0;
}
.cpp-grid .cpp-field--full{
  grid-column:1 / -1;
}

/* ===== Fields ===== */
.cpp-field{
  margin-bottom:12px;
}
.cpp-field > label{
  font-family:var(--cpp-font);
  font-size:12px;
  font-weight:600;
  margin-bottom:4px;
  display:block;
  color:#333333;
}
.cpp-field > label span{
  color:#ff0000;
  margin-left:2px;
}

.cpp-field input[type="text"],
.cpp-field input[type="email"],
.cpp-field input[type="tel"],
.cpp-field select,
.cpp-field textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #dcdcdc;
  border-radius:var(--cpp-radius);
  font-family:var(--cpp-font);
  font-size:13px;
  color:var(--cpp-text);
  background:var(--cpp-bg);
  outline:none;
  box-sizing:border-box;
  transition:border-color .2s, box-shadow .2s;
}
.cpp-field input::placeholder,
.cpp-field textarea::placeholder{ color:#9aa1b3; }
.cpp-field input:focus,
.cpp-field select:focus,
.cpp-field textarea:focus{
  border-color:#0099dd;
  box-shadow:0 0 0 2px rgba(0, 153, 221, .12);
}
.cpp-field textarea{
  min-height:100px;
  resize:vertical;
}

/* Suppress browser default red validation outlines on inputs */
.cpp-field input:invalid:not(:focus):not(:placeholder-shown),
.cpp-field select:invalid:not(:focus){
  border-color:#dcdcdc;
  box-shadow:none;
}
.cpp-field input:focus:invalid,
.cpp-field select:focus:invalid{
  border-color:#0099dd;
  box-shadow:0 0 0 2px rgba(0, 153, 221, .12);
}

/* ===== File inputs ===== */
.cpp-field input[type="file"]{
  width:100%;
  padding:8px 0;
  font-size:13px;
  color:var(--cpp-text);
}
.cpp-field input[type="file"]::file-selector-button{
  padding:6px 14px;
  border:1px solid #dcdcdc;
  border-radius:var(--cpp-radius);
  background:var(--cpp-soft);
  color:var(--cpp-text);
  font-size:12px;
  cursor:pointer;
  transition:background .2s;
  margin-right:8px;
}
.cpp-field input[type="file"]::file-selector-button:hover{
  background:#e8e8e8;
}
.cpp-help{
  font-size:11px;
  color:#888;
  margin:3px 0 0;
}

/* ===== Honeypot ===== */
.cpp-hp{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

/* ===== Error ===== */
.cpp-error{
  display:none;
  margin-top:10px;
  padding:10px 12px;
  border-radius:var(--cpp-radius);
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  text-align:center;
  background:rgba(255, 90, 42, .08);
  border:1px solid rgba(255, 90, 42, .35);
  color:#c43d11;
  grid-column:1 / -1;
}

/* ===== Submit button ===== */
.cpp-submit{
  display:inline-block;
  min-width:160px;
  appearance:none;
  border:none;
  border-radius:var(--cpp-radius);
  padding:12px 26px;
  font-family:var(--cpp-font);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  background:#0099dd !important;
  color:#ffffff !important;
  box-sizing:border-box;
  transition:transform .2s ease;
}
form#cppForm,
form#cppJobForm{
  text-align:center;
}
form#cppForm .cpp-field,
form#cppJobForm .cpp-field,
form#cppForm .cpp-error,
form#cppJobForm .cpp-error{
  text-align:left;
}
.cpp-submit:hover:not(:disabled){
  transform:scale(1.04);
  background:#0099dd !important;
  color:#ffffff !important;
}
.cpp-submit:disabled,
.cpp-submit.is-loading{
  opacity:.7;
  cursor:not-allowed;
  transform:none;
}

/* ===== Add language button (text link style) ===== */
.cpp-add-lang-btn{
  background:none !important;
  border:none !important;
  color:#0099dd !important;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  padding:3px 0;
  font-family:var(--cpp-font);
  text-decoration:underline;
  text-underline-offset:2px;
  transition:opacity .2s;
  box-shadow:none !important;
  outline:none;
}
.cpp-add-lang-btn:hover{
  opacity:.7;
  color:#0099dd !important;
}

/* Language rows inside the grid */
.cpp-lang-row{
  display:flex;
  gap:6px;
  align-items:center;
  margin-bottom:3px;
}
.cpp-lang-row select{
  flex:1;
}
.cpp-remove-lang{
  background:none;
  border:none;
  color:#999;
  cursor:pointer;
  font-size:16px;
  line-height:1;
  padding:4px;
  transition:opacity .2s;
}
.cpp-remove-lang:hover{
  opacity:.7;
  color:#666;
}

/* ===== Positions ===== */
.cpp-positions-grid{
  display:grid;
  gap:10px;
}
.cpp-position-row{
  padding:10px 12px;
  background:#f9f9f9;
  border-radius:4px;
  border:1px solid #eee;
}
.cpp-position-row input{
  width:100%;
  padding:7px 10px;
  border:1px solid #dcdcdc;
  border-radius:4px;
  box-sizing:border-box;
  font-size:13px;
}
.cpp-position-row input:focus{
  border-color:#0099dd;
  box-shadow:0 0 0 2px rgba(0, 153, 221, .12);
  outline:none;
}
.cpp-position-label{
  font-size:12px;
  font-weight:600;
  color:#333;
  margin-bottom:5px;
  display:block;
}

/* Suppress any Elementor / theme red on form elements */
.cpp-card input,
.cpp-card select,
.cpp-card textarea,
.cpp-card button,
.cpp-card .elementor-field,
.cpp-card .elementor-button{
  border-color:#dcdcdc !important;
  color:#333333 !important;
  background:#ffffff !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

/* ===== CV grid (two columns) ===== */
.cpp-cv-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 14px;
  margin-top:8px;
}
.cpp-cv-grid .cpp-field{
  margin:0;
}

/* ===== Responsive ===== */
@media (max-width:600px){
  .cpp-card{
    padding:20px 16px 18px;
    max-width:100%;
  }
  .cpp-grid,
  .cpp-cv-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .cpp-submit{ font-size:13px; padding:10px 16px; min-width:140px; }
}