/* Nav Selectors */
.c-desktop-menu__item--contact, .c-footer__item--contact {
  font-weight:700;
}
.c-mobile-menu__item--contact {
  background:var(--fire);
  font-weight:700;
}
.c-mobile-menu__item--contact .c-mobile-menu__icon {
  color:var(--white);
}

/* Background Image */
.c-contact { 
  background-image: url('https://cdn.fbhl.dev/insurance/images/contact-us.png');
  background-size: cover;
  background-position: 75%;
  color:var(--white);
  padding-block:var(--space-xl);
}

/* Contact Section Layout */
.c-contact__content {
  display:grid;
  grid-template-columns: 2fr 3fr;
  grid-column-gap: var(--space-xl);
  grid-row-gap: var(--space-s);
  grid-template-areas:
    "header  form" 
    "locations  form";
  justify-items: right;
}

/* Header Styling */
.c-contact__header {
  grid-area: header;
  text-align: right;
}

/* Locations Section */
.c-contact__locations {
  grid-area: locations;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap:var(--space-m);
}

.c-contact__location {
  width:min(100%, 325px);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr repeat(4,auto);
  grid-row-gap: var(--space-3xs);
  justify-items: center;
  align-items: center;
  background-color:var(--white);
  padding: var(--space-m);
  color: var(--black);
}

.c-contact__phone {
  color: var(--fire); 
  font-weight: 700;
}

/* Form Section */

.c-contact__form {
  position:relative;
  grid-area: form;
  width: 100%;
  max-width:850px;
  overflow-x:auto;
  margin:0 auto;
  position:relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);

  background-image: 
	
  /* Shadows */ 
  linear-gradient(to right, white, white),
  linear-gradient(to right, white, white),
  
  /* Shadow covers */ 
  linear-gradient(to right, rgba(0,0,0,.25), rgba(255,255,255,0)),
  linear-gradient(to left, rgba(0,0,0,.25), rgba(255,255,255,0));   

  background-position: left center, right center, left center, right center;
	background-repeat: no-repeat;
	background-color: white;
	background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
	
	/* Opera doesn't support this in the shorthand */
	background-attachment: local, local, scroll, scroll;

  /* test thoroughly */
  height:max-content;
}

.c-contact-form__form {
  padding: var(--space-m);
  xbackground:var(--white);
  xborder-radius: var(--space-xs);
  xbox-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
  /* set min-height to form step1 height */
  xmin-height: 700px; 
  height: auto;
  width: 100%;
  /* mobile width min for overflow */
  min-width:450px;
}

.c-contact-form__step {
  position: relative;
  width: 100%;
  top:0;
  left:0;
}

.c-contact-form__label {
  display: flex;
  flex-direction: column;
  font-weight: 700;
  /* 1.2rem */
  font-size: var(--step-0);
  color:var(--black);
}

.c-contact-form__input,
.c-contact-form__textarea, 
#c-contact-form__select {
  /* 1.5rem */
  font-size: var(--step-1);
  margin-top: var(--space-xs);
  background: transparent;
  border: none;
  border-bottom: 3px solid var(--pine);
}

.c-contact-form__input:focus,
.c-contact-form__textarea:focus,
#c-contact-form__select:focus {
  outline: none;
  border-bottom: 4px solid var(--corporate-green);
}

.c-contact-form__textarea {
  height: 100px;
  resize: none;
}

/* Additional Styling */

.c-contact-form__input--checkbox {
  height: 1.2rem;
  width: 1.2rem;
  margin: 0;
  cursor: pointer;
}

.c-contact-form__grid {
  display: grid;
  grid-template-columns: 60% 35%;
  column-gap: 5%;
  xalign-items: flex-end;
}

.c-contact-form__checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:var(--space-xs);
  row-gap: var(--space-3xs); /* or even 4px for tighter layout */
  padding-top:var(--space-3xs);
}

.c-contact-form__label--checklist {
  margin:0;
  background-color: var(--corporate-green);
  color: white;
  font-size: var(--step--1); /* Smaller font */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2xs); /* Smaller padding */
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.c-contact-form__label--home { grid-column: 1; grid-row: 1; } /* Homeowners */
.c-contact-form__label--business { grid-column: 1; grid-row: 2; } /* Business */
.c-contact-form__label--car { grid-column: 2; grid-row: 1; } /* Car */
.c-contact-form__label--life { grid-column: 2; grid-row: 2; } /* Life */

.c-contact-form__label--consent {
  display: flex;
  flex-direction: row;
  border-radius: 5px;
  font-size: var(--step-0);
  justify-content: space-between;
  align-items: center;
}

.c-contact-form__input--consent {
  margin-right:var(--space-s);
}

.c-contact-form__row {
  display: flex;
  xjustify-content: flex-end;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  margin-top: var(--space-l);
}

#c-contact-form__button--next {
  margin-left:auto;
}

.c-contact-form__buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-l);
}
#c-contact-form__button--back {
  background-color:var(--black);
  color:var(--white);
  outline:2px solid rgba(6,7,6,0);
}

@media (hover:hover) {
  #c-contact-form__button--back:hover {
    background-color:var(--white);
    color:var(--black);
    outline-color:rgba(6,7,6,1);
  }
}

.c-contact_swipe-icon {
  display:none;
}

@media (max-width: 768px) {

  .c-contact__form {
    width: 100%;
    margin: 0 auto;
    padding: var(--space-s);
    box-sizing: border-box;
  }

  .c-contact__form__form input[type="text"],
  .c-contact__form__form input[type="email"],
  .c-contact__form__textarea {
    width: 100%;
    box-sizing: border-box;
  }
  .c-contact-form__form {
    width: 100%;
    align-items: center;
    display: block;
    justify-content: center;
  }
}

@media (max-width: 500px) {
  .c-contact__form {
    padding-inline:0;
    -webkit-overflow-scrolling: touch;
    border-radius: 0;
  }
  .c-contact_swipe-icon {
    display:block;
    position:relative;
    width:min(100%, 50px);
    height:auto;
    margin:0 auto calc( -1 * var(--space-s) );
  }
  .c-contact__container {
    padding:var(--space-s);
  }
}

@media (max-width: 1024px) {
  .c-contact__header {
    text-align:center;
  }

  .c-contact__content {
    display: flex;
    flex-direction: column;
    gap:var(--space-m);
    padding-inline:0;
  }

  .c-contact__locations {
    justify-content: center;
    text-align: center;
  }
}

#c-contact-form-dialog {
  position:absolute;
  width:100%;
  height:100%;
  background:rgba(255,255,255,.95);
  color:var(--black);
  border-radius: var(--space-xs);
  border:none;
  z-index:99;
}
.c-contact-form-dialog__flex {
  position: relative;
  display:flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
}