@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
@charset "utf-8";

/* CSS Document */
#pf-user-form {
  box-sizing: border-box;
}
#pf-user-form .form-element-half, #pf-user-form .form-element-full, #pf-user-form .form-element-third {
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  float: none;
}
#pf-user-form h2 {
  text-align: center;
  font-size: 30px;
}
#pf-user-form .required_notice {
  padding: 1%;
  font-size: 12px;
  max-width: 700px;
  margin: 0 auto 25px auto;
}
#pf-user-form .error {
  color: #CC0000;
  font-size: 12px;
  margin: 4px;
  font-style: italic;
  /*width:200px;*/
}
#pf-user-form .success {
  color: #009900;
  font-size: 12px;
  margin: 4px;
  font-style: italic;
  /*width:200px;*/
}
#pf-user-form label {
  text-align: left;
  max-width: 700px;
  color: #222;
  font-family: "Outfit", sans-serif;
  font-size: 15px;
  box-sizing: border-box;
}
#pf-user-form label input, #pf-user-form label textarea, #pf-user-form label select {
  font-family: "Outfit", sans-serif;
  border: 1px solid #CCCCCC;
  margin-top: 4px;
  background: #FFFFFF !important;
  font-size: 15px;
  color: #222;
  border-radius: 5px;
  box-sizing: border-box;
  width: 100% !important;
  padding: 0px 0px 0px 20px;
}
#pf-user-form label input:placeholder, #pf-user-form label textarea:placeholder, #pf-user-form label select:placeholder {
  font-family: "Outfit", sans-serif;
  color: #CCCCCC;
}
#pf-user-form label input:focus, #pf-user-form label textarea:focus, #pf-user-form label select:focus {
  font-family: "Outfit", sans-serif;
  border: 1px solid #CCCCCC;
  color: #222222;
  box-shadow: none !important;
}
#pf-user-form label input.pf_date, #pf-user-form label input.pf_nbadult, #pf-user-form label input.pf_nbkids, #pf-user-form label textarea.pf_date, #pf-user-form label textarea.pf_nbadult, #pf-user-form label textarea.pf_nbkids, #pf-user-form label select.pf_date, #pf-user-form label select.pf_nbadult, #pf-user-form label select.pf_nbkids {
  width: 100% !important;
  max-width: 100% !important;
}
#pf-user-form label input:not([type=radio]), #pf-user-form label select {
  height: 50px;
}
#pf-user-form label textarea {
  height: 150px;
  padding:10px;
}
#pf-user-form .cpt-wrap {
  display: flex;
  justify-content: center;
  max-width: 700px;
  margin: 20px auto;
}
@media (min-width: 768px) {
  #pf-user-form .cpt-wrap {
    justify-content: start;
  }
}
#pf-user-form .cpt-wrap #wrap {
  background: #EEE;
  width: 300px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border-radius: 5px;
  padding-bottom: 20px;
  vertical-align: middle;
  float: none !important;
}
#pf-user-form label .radioWrapper{
  display: inline-block;
  width: 20px;
}
#pf-user-form label .radioWrapper input{
  vertical-align: middle;
}
#pf-user-form label .valueWrapper{
  display: block;
  margin-left:10px;
  padding-top:10px;
  font-weight: normal;
}
#pf-user-form .radiosHold label{
  width:100%;
  max-height: 100%;
  display:flex;
}

@media (min-width: 768px) {
  #pf-user-form .cpt-wrap #wrap {
    margin: 0px 20px 0px 0px;
  }
}
#pf-user-form .cpt-wrap #wrap input {
  color: #222222;
  background: #FFFFFF;
  height: 50px !important;
  width: 215px;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  padding-left: 20px;
}


#pf-user-form .cpt-wrap #wrap img#captcha {
  margin: 0px auto 20px auto;
}
#pf-user-form .cpt-wrap #wrap img#refresh {
  float: none !important;
  height: 25px !important;
  margin-top: 18px !important;
  margin-left: 2px !important;
  mix-blend-mode: multiply;
}
#pf-user-form a.pf-send-quote {
  height: 50px;
  color: #FFFFFF;
  border-radius: 25px;
  background: var(--var_css-primary-color);
  text-transform: none;
}
#pf-user-form .gb_clear {
  display: none;
}
#ui-datepicker-div {
  background: #FFF;
  background-image: none !important;
  border: 1px solid #CCC;
}
#ui-datepicker-div .ui-datepicker-header {
  background: #FFF;
}
#ui-datepicker-div .ui-datepicker-calendar thead {
  background: #FFF;
  font-family: "Outfit", sans-serif;
}
#ui-datepicker-div .ui-datepicker-calendar tbody tr td a.ui-state-default {
  font-family: "Outfit", sans-serif;
  background-image: none !important;
  color: #222;
  text-align: center;
  background: #EEE;
  border: none !important;
  border-radius: 3px;
  box-sizing: border-box;
  width: 40px;
}
#ui-datepicker-div .ui-datepicker-calendar tbody tr td a.ui-state-default.ui-state-active {
  background: #222;
  color: #EEE;
}

#wrap{
	border:solid #CCCCCC 1px;
	/*width:203px*/;
	-webkit-border-radius: 5px;
	float:left;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding:3px;
	margin-top:15px;
	background-color:#EEEEEE;
} 

#mail_code{
	width:90% !important;
}

.error{ 
	color:#CC0000; 
	font-size:12px; 
	margin:4px; 
	font-style:italic; 
	/*width:200px;*/
} 

.success{ 
	color:#009900; 
	font-size:12px; 
	margin:4px; 
	font-style:italic; 
	/*width:200px;*/
} 

img#refresh{
	float:left;
	margin-top:30px;
	margin-left:4px;
	cursor:pointer;
}
.select-wrapper {
  position: relative;
  display: inline-block;
}

/* On masque la flèche native et on prévoit l’espace pour la nôtre */
.select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem; /* espace pour le chevron */
  background-color: #fff; /* ajuste si thème sombre */
}

/* Chevron custom (ton SVG en data URI) */
.select-wrapper::after {
  content: "";
  position: absolute;
  right: 20px;
  top: calc(50% + 10px);
  width: 12px;
  height: 7px;
  transform: translateY(-50%);
  pointer-events: none;

  /* ton SVG */
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'><path id='Path' d='M1.251,0,0,1.306,4.5,6,0,10.694,1.251,12,7,6Z' transform='translate(12 0) rotate(90)' fill='%23999'/></svg>") no-repeat center;
}


.select-wrapper .form-select {
  padding-right: 2rem;
}


@media (prefers-color-scheme: dark) {
  .select-wrapper select { background-color: #111; color: #eee; }
  .select-wrapper::after { filter: brightness(0.8); }
}