/* Colours 


warwicka off-white		#dcdfd6;
grey-text				#c4c6bd;
dark grey				#333;
red						#e9310e;
pink					pink;
yellow					#ffcc00;
green					#00b44e;

*/

.contact-form{
  max-width: 800px;
  margin: .5rem auto;
  padding: 0 1rem;
}

.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 2rem; /* row / column gaps */
}

.field label{
  	display: block;
  	color: #dcdfd6;
	padding: 0 0 0 10px;
  	margin-bottom: .4rem; 
}

/* Base look for inputs & textarea */
.contact-form .field input,
.contact-form .field textarea{
  width:100%;
  background-color:#333;
  color:#dcdfd6;
  font-size:1rem;
  border:none;
  border-radius:20px;
  box-sizing:border-box;
  padding:0 10px 0 20px;   /* same as your mailing list field */
}

/* Inputs get a fixed height */
.contact-form .field input{
  height:40px;
  line-height:40px;
}

/* Textarea: taller + vertical padding */
.contact-form .field textarea{
  min-height:160px;
  padding:12px 20px;       /* top/bottom padding for comfort */
  resize:vertical;
}

/* Placeholder colour */
.contact-form .field input::placeholder,
.contact-form .field textarea::placeholder{
  color:#c4c6bd;
}

/* Focus state */
.contact-form .field input:focus,
.contact-form .field textarea:focus{
  background-color:#dcdfd6;
  color:#191919;
  outline:none;
}

/* Optional: smooth transition */
.contact-form .field input,
.contact-form .field textarea{
  transition:background-color .2s, color .2s;
}




.field.full{
  grid-column: 1 / -1; /* span both columns */
}

.btn-send{
  margin-top:1.5rem;
  padding:.75rem 1.5rem;
  cursor:pointer;
  font:inherit;
}

.hp-field{
  display:none; /* honeypot */
}

.form-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:.5rem;
}

.form-footer .mailing-list-introduction{
  /*flex:1;           let the text take remaining space */
}

.form-footer .mailing-list-introduction p{ margin:0; }

.form-footer .btn-send{
  flex:0 0 auto;   /* keep button its natural width */
  margin:0;
}



   .Telephone {
      display: flex;
      flex-direction: column;
      gap: 1rem;           /* space between each person */
      max-width: 800px;
      margin: 3rem auto;
      padding: 0 1rem;
      color: #dcdfd6;
    }

    /* each name+phone pair */
    .contact {
      display: flex;
      flex-direction: column;
      gap: .7rem;          /* space between name and phone row */
    }

    /* reset all <p> margins so our gaps work predictably */
    .Telephone p {
      margin: 0;
    }

    /* hide by default */
    .obf-phone {
      display: none;
    }

    /* when JS adds .visible, show it inline-block so margins work */

    .obf-phone.visible {
      display: inline-block;
		background-color: #dcdfd6;
		color: #191919;
		font-size: 1rem;
		border: none;
		border-radius: 50px;
		padding: 0.4rem 0.8rem; 
		margin: 0;
		text-decoration: none;
    }

    .obf-phone.visible:hover{
		background-color: #00b44e;
		color: #dcdfd6;
    }

    /* make sure your phone link itself has no underline */
    .obf-phone a {
      text-decoration: none;
		color: #191919;
    }
    .obf-phone a:hover {
      text-decoration: none;
		color: #dcdfd6;
    }



/* Thank you */

.wrap{
  max-width: 800px;
  margin: 3rem auto;
  padding: 0 1rem;
	color:#dcdfd6;
}

/* Colours 


warwicka off-white		#dcdfd6;
grey-text				#c4c6bd;
dark grey				#333;
red						#e9310e;
pink					pink;
yellow					#ffcc00;
green					#00b44e;

*/

pre{
	white-space:pre-wrap;
	background:#dcdfd6;
	padding:1rem;
	border-radius:20px;
	color: #191919;
}

.status{
	margin:1rem 0;
	padding:.8rem 1rem;
	border-radius:20px;
}

.status.ok{background:#00b44e;}

.status.err{background:#e9310e;}

.note{color:#dcdfd6;margin-top:.5rem;}

.social-icons {
  display: inline-flex;
  gap: 0.5rem;
  margin-left: 1rem;
  vertical-align: middle;
}

.social-icons a {
  display: block;
  transition: transform 0.2s ease-in-out;
}

.social-icons a:hover {
  transform: scale(1.2);
}

.social-icons img {
  width: 32px;
  height: 32px;
  display: block;
	margin-bottom: 0.2rem;
}

/* Colours 


warwicka off-white		#dcdfd6;
grey-text				#c4c6bd;
dark grey				#333;
red						#e9310e;
pink					pink;
yellow					#ffcc00;
green					#00b44e;

*/

.form-txt {
	color: #dcdfd6;
}

.contact-name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.available-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.available-circle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  background-color: gray; /* fallback */
}

.available-circle.available {
  background-color: #00b44e;
}

.available-circle.unavailable {
  background-color: #e9310e;
}

.available-text {
  color: #dcdfd6;
  /*font-size: 1rem;*/
  font-weight: normal;
  text-transform: capitalize;
}


/*
.product:hover .banner.new {
  animation: scalePulse 1s ease-in-out infinite;
}
*/

/* Mobile: stack to one column */
@media (max-width: 640px){
  .form-grid{
    grid-template-columns: 1fr;
  }
  .field.full{
    grid-column: auto;
  }

}