/* 
Theme Name: topwebsites 
Theme URI: https://themarketingdepartment.com.au/
Description: Child theme for the Divi
Author: Jo Clarke 
Author URI: https://topwebsites.com.au/
Template: Divi       
Version: 0.1.0 
*/

/* ==========================================================================
   The Marketing Department — Gravity Forms "Request a Quote" styling
   Works with Gravity Forms 2.5+ (Orbital / Framework theme and legacy).
   Paste into: Appearance → Customize → Additional CSS
   (or your child theme's style.css).

   Scope: applies to ALL Gravity Forms on the site.
   To limit it to one form, replace every ".gform_wrapper.gform_wrapper"
   with "#gform_wrapper_X" (X = your form ID).
   ========================================================================== */

/* If your theme already loads these fonts, you can delete this line. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --tmd-navy-deep:  #12203A;
  --tmd-navy:       #1B2A44;
  /* --tmd-paper:      #F6F3EC; */
  --tmd-paper:      #eeeeee;
  /* --tmd-paper-dim:  #ECE7DA; */
  --tmd-paper-dim:      #eeeeee;      
  --tmd-charcoal:   #2A2A28;
  --tmd-brass:      #B8935F;
  --tmd-teal:       #3E6B63;
  --tmd-line:       rgba(18,32,58,0.14);
  --tmd-error:      #B3402A;
  --gf-local-bg-color: red;
}
body .gform-theme{
    --gf-local-bg-color: red;
}
/* ---------- Card wrapper ---------- */
.gform_wrapper.gform_wrapper{
  background:#fff;
  border:1px solid var(--tmd-line);
  border-radius:4px;
  overflow:hidden;
  max-width:100%;
  margin:0 auto;
  padding: 0;
  font-family:'Inter',sans-serif;
  color:var(--tmd-charcoal);
  -webkit-font-smoothing:antialiased;
}
.gform_wrapper.gform_confirmation_wrapper{
  padding: 50px 0;
}
/* ---------- Heading / intro ---------- */
.gform_wrapper.gform_wrapper .gform_heading{
  padding:40px 40px 0;
  margin:0;
}
.gform_wrapper.gform_wrapper .gform_title{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:clamp(26px,4vw,34px);
  letter-spacing:-0.01em;
  color:var(--tmd-navy-deep);
  margin:0 0 12px;
}
.gform_wrapper.gform_wrapper .gform_description{
  font-size:15px;
  line-height:1.6;
  color:#4a463f;
  max-width:560px;
  margin:0;
}
.gform_wrapper.gform_wrapper .gform_required_legend{
  font-size:12px;
  color:#8a8578;
  margin:14px 0 0;
}

/* ---------- Body / grid ---------- */
.gform_wrapper.gform_wrapper .gform_body{
  padding:32px 40px 40px;
}
.gform_wrapper.gform_wrapper .gform_fields{
  column-gap:22px;
  row-gap:22px;
  grid-column-gap:22px;
  grid-row-gap:22px;
}

/* ---------- Section headings (look like the <legend> in the HTML) ---------- */
.gform_wrapper.gform_wrapper .gfield--type-section,
.gform_wrapper.gform_wrapper .gsection{
  border:none;
  border-bottom:1px solid var(--tmd-line);
  padding:0 0 14px;
  margin:0;
}
.gform_wrapper.gform_wrapper .gfield--type-section:not(:first-child){
  margin-top:14px;
}
.gform_wrapper.gform_wrapper .gsection_title{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--tmd-brass);
  margin:0;
  padding:0;
}

/* ---------- Labels ---------- */
.gform_wrapper.gform_wrapper .gfield_label,
.gform_wrapper.gform_wrapper legend.gfield_label{
  font-family:'Inter',sans-serif;
  font-size:13.5px;
  font-weight:600;
  color:var(--tmd-navy-deep);
  margin:0 0 8px;
  padding:0;
}
.gform_wrapper.gform_wrapper .gfield_required,
.gform_wrapper.gform_wrapper .gfield_required .gfield_required_asterisk{
  color:var(--tmd-brass);
  font-size:12px;
  font-weight:600;
}
.gform_wrapper.gform_wrapper .gfield_description{
  font-size:12px;
  color:#8a8578;
  padding:6px 0 0;
  margin:0;
}

/* ---------- Text-like inputs ---------- */
.gform_wrapper.gform_wrapper input[type="text"],
.gform_wrapper.gform_wrapper input[type="email"],
.gform_wrapper.gform_wrapper input[type="tel"],
.gform_wrapper.gform_wrapper input[type="number"],
.gform_wrapper.gform_wrapper input[type="url"],
.gform_wrapper.gform_wrapper input.datepicker,
.gform_wrapper.gform_wrapper select,
.gform_wrapper.gform_wrapper textarea{
  width:100%;
  font-family:'Inter',sans-serif;
  font-size:14.5px;
  color:var(--tmd-charcoal);
  background-color:var(--tmd-paper);
  border:1px solid var(--tmd-line);
  border-radius:7px;
  padding:14px;
  line-height:1.1;
  box-shadow:none;
  transition:border-color .15s ease, background-color .15s ease;
  height: auto;
}
.gform_wrapper.gform_wrapper input::placeholder,
.gform_wrapper.gform_wrapper textarea::placeholder{
  color:#606266;
  opacity:1;
}
.gform_wrapper.gform_wrapper input[type="text"]:hover,
.gform_wrapper.gform_wrapper input[type="email"]:hover,
.gform_wrapper.gform_wrapper input[type="tel"]:hover,
.gform_wrapper.gform_wrapper input[type="number"]:hover,
.gform_wrapper.gform_wrapper input.datepicker:hover,
.gform_wrapper.gform_wrapper select:hover,
.gform_wrapper.gform_wrapper textarea:hover{
  border-color:#606266;
}
.gform_wrapper.gform_wrapper input[type="text"]:focus,
.gform_wrapper.gform_wrapper input[type="email"]:focus,
.gform_wrapper.gform_wrapper input[type="tel"]:focus,
.gform_wrapper.gform_wrapper input[type="number"]:focus,
.gform_wrapper.gform_wrapper input.datepicker:focus,
.gform_wrapper.gform_wrapper select:focus,
.gform_wrapper.gform_wrapper textarea:focus{
  background-color:#fff;
  border-color:var(--tmd-brass);
  outline:2px solid var(--tmd-brass);
  outline-offset:2px;
  box-shadow:none;
}
.gform_wrapper.gform_wrapper textarea{
  min-height:110px;
  resize:vertical;
}

/* Select arrow */
.gform_wrapper.gform_wrapper select{
  -webkit-appearance:none;
  appearance:none;
  padding-right:34px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" stroke="%2312203A" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:12px 8px;
}

/* ---------- Radio buttons as "chips" ---------- */
.gform_wrapper.gform_wrapper .gfield_radio{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.gform_wrapper.gform_wrapper .gfield_radio .gchoice,
.gform_wrapper.gform_wrapper .gfield_radio li{
  position:relative;
  display:inline-flex;
  margin:0;
  padding:0;
}
.gform_wrapper.gform_wrapper .gfield_radio input[type="radio"]{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
  margin:0;
}
.gform_wrapper.gform_wrapper .gfield_radio label{
  display:inline-flex;
  align-items:center;
  font-family:'Inter',sans-serif;
  font-size:13.5px;
  font-weight:500;
  color:var(--tmd-charcoal);
  background:var(--tmd-paper);
  border:1px solid var(--tmd-line);
  border-radius:20px;
  padding:9px 16px;
  margin:0;
  cursor:pointer;
  transition:all .15s ease;
}
.gform_wrapper.gform_wrapper .gfield_radio label:hover{
  border-color:#c9c3b0;
}
.gform_wrapper.gform_wrapper .gfield_radio input[type="radio"]:checked + label{
  background:var(--tmd-navy-deep);
  border-color:var(--tmd-navy-deep);
  color:var(--tmd-paper);
}
.gform_wrapper.gform_wrapper .gfield_radio input[type="radio"]:focus-visible + label{
  outline:2px solid var(--tmd-brass);
  outline-offset:2px;
}

/* ---------- File upload (dashed drop area) ---------- */
.gform_wrapper.gform_wrapper .ginput_container_fileupload input[type="file"]{
  width:100%;
  font-family:'Inter',sans-serif;
  font-size:13px;
  color:var(--tmd-charcoal);
  background:var(--tmd-paper);
  border:1.5px dashed var(--tmd-line);
  border-radius:3px;
  padding:10px 22px;
  height: auto;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.gform_wrapper.gform_wrapper .ginput_container_fileupload input[type="file"]::file-selector-button {
    line-height: 1.1;
}

.gform_wrapper.gform_wrapper .ginput_container_fileupload input[type="file"]:hover{
  border-color:var(--tmd-brass);
  background:#fff;
}
.gform_wrapper.gform_wrapper .ginput_container_fileupload input[type="file"]::file-selector-button{
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:600;
  color:var(--tmd-navy-deep);
  background:#fff;
  border:1px solid var(--tmd-line);
  border-radius:2px;
  padding:8px 14px;
  margin-right:14px;
  cursor:pointer;
  transition:border-color .15s ease;
}
.gform_wrapper.gform_wrapper .ginput_container_fileupload input[type="file"]::file-selector-button:hover{
  border-color:var(--tmd-brass);
}
.gform_wrapper.gform_wrapper .gform_fileupload_rules{
  font-size:12px;
  color:#8a8578;
}

/* ---------- Validation ---------- */
.gform_wrapper.gform_wrapper .gfield_error input,
.gform_wrapper.gform_wrapper .gfield_error select,
.gform_wrapper.gform_wrapper .gfield_error textarea{
  border-color:var(--tmd-error);
}
.gform_wrapper.gform_wrapper .gfield_error{
  background:none;
  border:none;
  padding:0;
  margin:0;
}
.gform_wrapper.gform_wrapper .gfield_validation_message,
.gform_wrapper.gform_wrapper .validation_message{
  font-size:12px;
  font-weight:400;
  color:var(--tmd-error);
  background:none;
  border:none;
  padding:6px 0 0;
  margin:0;
}
.gform_wrapper.gform_wrapper .gform_validation_errors{
  margin:24px 40px 0;
  padding:14px 18px;
  background:#fbeeea;
  border:1px solid var(--tmd-error);
  border-radius:3px;
  box-shadow:none;
}
.gform_wrapper.gform_wrapper .gform_validation_errors > h2,
.gform_wrapper.gform_wrapper .gform_submission_error{
  font-family:'Inter',sans-serif;
  font-size:13.5px;
  font-weight:600;
  color:var(--tmd-error);
  margin:0;
}
.gform_wrapper.gform_wrapper .gform_validation_errors ol{
  font-size:12.5px;
  margin:8px 0 0 18px;
  padding:0;
}
.gform_wrapper.gform_wrapper .gform_validation_errors a{
  color:var(--tmd-error);
}

/* ---------- Footer + submit button ---------- */
.gform_wrapper.gform_wrapper .gform_footer,
.gform_wrapper.gform_wrapper .gform_page_footer{
  background:var(--tmd-paper-dim);
  margin:0;
  padding:26px 40px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.gform_wrapper.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper.gform_wrapper .gform_footer button,
.gform_wrapper.gform_wrapper .gform_button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:'Inter',sans-serif;
  font-size:14.5px;
  font-weight:600;
  color:var(--tmd-paper);
  background:var(--tmd-navy-deep);
  border:1px solid transparent;
  border-radius:2px;
  padding:13px 28px;
  margin:0;
  width:auto;
  cursor:pointer;
  box-shadow:none;
  text-decoration:none;
  transition:background .15s ease, transform .15s ease;
}
.gform_wrapper.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper.gform_wrapper .gform_footer button:hover,
.gform_wrapper.gform_wrapper .gform_button:hover{
  background:var(--tmd-navy);
  transform:translateY(-1px);
}
.gform_wrapper.gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.gform_wrapper.gform_wrapper .gform_button:focus-visible{
  outline:2px solid var(--tmd-brass);
  outline-offset:2px;
}
.gform_wrapper.gform_wrapper .gform_footer input[type="submit"]:disabled,
.gform_wrapper.gform_wrapper .gform_button:disabled{
  opacity:0.6;
  cursor:not-allowed;
  transform:none;
}

/* ---------- Confirmation message ("Request received") ---------- */
.gform_confirmation_wrapper{
  background:#fff;
  border:1px solid var(--tmd-line);
  border-radius:4px;
  padding:64px 40px;
  text-align:center;
  font-family:'Inter',sans-serif;
}
.gform_confirmation_wrapper .gform_confirmation_message{
  font-size:14.5px;
  line-height:1.6;
  color:#5a564d;
  max-width:400px;
  margin:0 auto;
}
.gform_confirmation_wrapper .gform_confirmation_message h3{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:26px;
  letter-spacing:-0.01em;
  color:var(--tmd-navy-deep);
  margin:0 0 12px;
}
.gform_confirmation_wrapper .gform_confirmation_message h3::before{
  content:'';
  display:block;
  width:64px;
  height:64px;
  margin:0 auto 24px;
  border:2px solid var(--tmd-teal);
  border-radius:50%;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none"><path d="M5 13l5.5 5.5L21 8" stroke="%233E6B63" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 26px 26px no-repeat;
}
body .gform_wrapper.gform_wrapper .gform_button{
    background: #2A9090 !important;
    text-transform: uppercase !important;
    padding: 15px 30px !important;
    font-size: 18px !important;
    border-radius: 7px !important;
}
/* ---------- Mobile ---------- */
@media (max-width:600px){
  .gform_wrapper.gform_wrapper .gform_heading{ padding:28px 22px 0; }
  .gform_wrapper.gform_wrapper .gform_body{ padding:24px 22px 28px; }
  .gform_wrapper.gform_wrapper .gform_validation_errors{ margin:20px 22px 0; }
  .gform_wrapper.gform_wrapper .gform_footer,
  .gform_wrapper.gform_wrapper .gform_page_footer{
    padding:22px;
    flex-direction:column;
    align-items:stretch;
  }
  .gform_wrapper.gform_wrapper .gform_footer input[type="submit"],
  .gform_wrapper.gform_wrapper .gform_button{
    width:100%;
  }
  .gform_confirmation_wrapper{ padding:44px 22px; }
}