/* ============================
   FULL PAGE BACKGROUND (from GF CSS)
   Applies only on pages that contain Form 3 or Form 4
   ============================ */

/* 1) Put the gradient on the actual page canvas */
html:has(#gform_wrapper_3),
html:has(#gform_wrapper_4),
body:has(#gform_wrapper_3),
body:has(#gform_wrapper_4) {
  min-height: 100%;
  background:
    radial-gradient(1200px at 50% -200px, #f5f7fa 0%, #e6eff9 45%, #cfdff2 70%, #a9c4e8 100%),
    linear-gradient(180deg, #f5f7fa, #a9c4e8) !important;
  background-attachment: fixed;
}

/* 2) Make common theme wrappers transparent so the background shows */
body:has(#gform_wrapper_3) #page,
body:has(#gform_wrapper_4) #page,
body:has(#gform_wrapper_3) .site,
body:has(#gform_wrapper_4) .site,
body:has(#gform_wrapper_3) #content,
body:has(#gform_wrapper_4) #content,
body:has(#gform_wrapper_3) .site-content,
body:has(#gform_wrapper_4) .site-content,
body:has(#gform_wrapper_3) .entry-content,
body:has(#gform_wrapper_4) .entry-content {
  background: transparent !important;
}

/* 3) Ensure the content area doesn't end early */
body:has(#gform_wrapper_3) .entry-content,
body:has(#gform_wrapper_4) .entry-content {
  min-height: 100vh;
  padding: 40px 0;
}


/* ============================
   PCie x IE — Gravity Forms (ID 3 & 4)
   Student-Friendly, Clean & Simple
   ============================ */

/* Floating glass card */
#gform_wrapper_3,
#gform_wrapper_4 {
  max-width: 820px;
  margin: 40px auto 60px;
  padding: 32px 42px 42px;

  background:
    linear-gradient(180deg, #a9c4e8 0%, #cfdff2 30%, #e6eff9 60%, #f5f7fa 100%);
  background-color: rgba(255,255,255,0.6);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 22px;

  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.25);
  color: #0b2c5f;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  /* Override Gravity Forms CSS custom properties that control text color */
  --gf-ctrl-choice-color: #0b2c5f !important;
  --gf-ctrl-color: #0b2c5f !important;
  --gf-ctrl-select-color: #0b2c5f !important;
  --gf-color-in: #0b2c5f !important;
  --gf-color-out: #0b2c5f !important;
  --gf-ctrl-border-color: rgba(31,111,214,0.25) !important;
  --gf-ctrl-bg-color: #ffffff !important;
  --gf-ctrl-select-bg-color: #ffffff !important;
}


/* ============================
   FORM TITLE
   ============================ */

#gform_wrapper_3 .gform_heading,
#gform_wrapper_4 .gform_heading {
  display: block;
  margin-top: 0;
  margin-bottom: 28px !important;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  text-align: center;
  height: auto !important;
  overflow: visible !important;
  position: relative;
  max-width: 740px;
}

/* Hide the default title */
#gform_wrapper_3 .gform_heading h2,
#gform_wrapper_4 .gform_heading h2,
#gform_wrapper_3 .gform_heading .gform_title,
#gform_wrapper_4 .gform_heading .gform_title {
  display: none !important;
}

/* Custom title via pseudo-element — different per form */
#gform_wrapper_3 .gform_heading::before {
  content: "Build Your Custom PC";
  display: block;
  margin-bottom: 18px;
  padding: 6px 0;

  font-size: 2.5rem !important;
  font-weight: 900 !important;
  font-style: normal !important;
  letter-spacing: 0.6px;
  line-height: 1.1;
  text-align: center;

  background: linear-gradient(135deg, #1f6fd6, #0b2c5f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#gform_wrapper_4 .gform_heading::before {
  content: "Help Me Build My Custom PC";
  display: block;
  margin-bottom: 18px;
  padding: 6px 0;

  font-size: 2.5rem !important;
  font-weight: 900 !important;
  font-style: normal !important;
  letter-spacing: 0.6px;
  line-height: 1.1;
  text-align: center;

  background: linear-gradient(135deg, #1f6fd6, #0b2c5f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* Form width */
#gform_wrapper_3 .gform_body,
#gform_wrapper_4 .gform_body {
  max-width: 740px;
  margin: 0 auto;
}


/* ============================
   SECTION HEADERS
   ============================ */

#gform_wrapper_3 .gsection,
#gform_wrapper_4 .gsection {
  display: block !important;
  width: 100%;
  max-width: 740px;
  margin: 32px auto 14px;
  padding: 0;
  background: none;
  box-shadow: none;
  border: none;
}

#gform_wrapper_3 .gsection_title,
#gform_wrapper_4 .gsection_title {
  display: inline-block;
  padding: 14px 30px;
  background: linear-gradient(135deg, #1f6fd6, #0b2c5f);
  border-radius: 25px;

  color: #ffffff;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: 0.6px;
  text-transform: uppercase;

  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}


/* ============================
   LABELS
   ============================ */

#gform_wrapper_3 .gfield_label,
#gform_wrapper_4 .gfield_label,
#gform_wrapper_3 legend,
#gform_wrapper_4 legend {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 6px;
  color: #0b2c5f;
  -webkit-text-fill-color: #0b2c5f;
}

/* Radio & checkbox choice labels — force consistent across forms */
#gform_wrapper_3 .gfield_radio label,
#gform_wrapper_4 .gfield_radio label,
#gform_wrapper_3 .gfield_checkbox label,
#gform_wrapper_4 .gfield_checkbox label,
#gform_wrapper_3 .gchoice label,
#gform_wrapper_4 .gchoice label {
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: #0b2c5f !important;
  -webkit-text-fill-color: #0b2c5f !important;
}

/* Field group labels (e.g. "Compact Build Fee") */
#gform_wrapper_3 .gfield_label,
#gform_wrapper_4 .gfield_label,
#gform_wrapper_3 .gfield legend,
#gform_wrapper_4 .gfield legend,
#gform_wrapper_3 .gfield_label_before_complex,
#gform_wrapper_4 .gfield_label_before_complex {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #0b2c5f !important;
  -webkit-text-fill-color: #0b2c5f !important;
}

/* "(Required)" text */
#gform_wrapper_3 .gfield_required,
#gform_wrapper_4 .gfield_required {
  color: #c0392b !important;
  -webkit-text-fill-color: #c0392b !important;
  font-size: 0.85rem !important;
}


/* ============================
   INPUTS
   ============================ */

#gform_wrapper_3 input[type="text"],
#gform_wrapper_4 input[type="text"],
#gform_wrapper_3 input[type="email"],
#gform_wrapper_4 input[type="email"],
#gform_wrapper_3 input[type="tel"],
#gform_wrapper_4 input[type="tel"],
#gform_wrapper_3 input[type="number"],
#gform_wrapper_4 input[type="number"],
#gform_wrapper_3 select,
#gform_wrapper_4 select,
#gform_wrapper_3 textarea,
#gform_wrapper_4 textarea {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  border-radius: 14px;
  background: rgba(255,255,255,0.95);
  color: #0b2c5f;
  -webkit-text-fill-color: #0b2c5f;
  border: 1px solid rgba(31,111,214,0.25);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}


/* ============================
   SELECT DROPDOWN MASTER FIX
   
   The root cause: Gravity Forms' theme framework uses
   -webkit-text-fill-color (which overrides CSS color in Chrome/Safari)
   and CSS custom properties like --gf-ctrl-color to set text colors.
   
   Our color: #0b2c5f rules were being overridden by GF setting
   -webkit-text-fill-color to white/transparent. The fix is to
   explicitly set -webkit-text-fill-color on every select rule.
   ============================ */

/* Primary select fix — high specificity */
body body #gform_wrapper_3 .gform_body .gform_fields .gfield select,
body body #gform_wrapper_4 .gform_body .gform_fields .gfield select {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-left: 16px !important;
  padding-right: 40px !important;
  color: #0b2c5f !important;
  -webkit-text-fill-color: #0b2c5f !important;
  background-color: #ffffff !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230b2c5f' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
  font-size: 1rem !important;
}

/* Style the dropdown options themselves */
#gform_wrapper_3 select option,
#gform_wrapper_4 select option {
  color: #0b2c5f;
  -webkit-text-fill-color: #0b2c5f;
  background-color: #ffffff;
}

/* Placeholder/default option (greyed out) */
#gform_wrapper_3 select option[value=""],
#gform_wrapper_4 select option[value=""],
#gform_wrapper_3 select option:disabled,
#gform_wrapper_4 select option:disabled {
  color: #8a96a6;
  -webkit-text-fill-color: #8a96a6;
}

/* Nuclear option — triple body specificity + every possible selector */
body body body #gform_wrapper_3 select,
body body body #gform_wrapper_4 select,
body body body #gform_wrapper_3 .gform_body select,
body body body #gform_wrapper_4 .gform_body select,
body body body #gform_wrapper_3 .gform_body .gform_fields .gfield select,
body body body #gform_wrapper_4 .gform_body .gform_fields .gfield select,
body body body #gform_wrapper_3 select.gfield_select,
body body body #gform_wrapper_4 select.gfield_select {
  height: auto !important;
  min-height: 48px !important;
  padding: 10px 40px 10px 16px !important;
  line-height: 1.4 !important;
  color: #0b2c5f !important;
  -webkit-text-fill-color: #0b2c5f !important;
  background-color: #ffffff !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230b2c5f' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  font-size: 1rem !important;
  overflow: visible !important;
}


/* Focus state */
#gform_wrapper_3 input:focus,
#gform_wrapper_4 input:focus,
#gform_wrapper_3 select:focus,
#gform_wrapper_4 select:focus,
#gform_wrapper_3 textarea:focus,
#gform_wrapper_4 textarea:focus {
  outline: none;
  border-color: rgba(31,111,214,0.9);
  box-shadow: 0 0 0 4px rgba(31,111,214,0.25), 0 14px 30px rgba(0,0,0,0.3);
}


/* ============================
   FIELD SPACING
   ============================ */

#gform_wrapper_3 .gfield,
#gform_wrapper_4 .gfield {
  margin-bottom: 22px;
}


/* ============================
   DESCRIPTIONS
   ============================ */

#gform_wrapper_3 .gfield_description,
#gform_wrapper_4 .gfield_description {
  color: #6f7a8a !important;
  -webkit-text-fill-color: #6f7a8a !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
}


/* ============================
   ERRORS
   ============================ */

#gform_wrapper_3 .gfield_error input,
#gform_wrapper_4 .gfield_error input,
#gform_wrapper_3 .gfield_error select,
#gform_wrapper_4 .gfield_error select,
#gform_wrapper_3 .gfield_error textarea,
#gform_wrapper_4 .gfield_error textarea {
  border-color: rgba(220,60,60,0.8);
  box-shadow: 0 0 0 4px rgba(220,60,60,0.25);
}


/* ============================
   SUBMIT BUTTON
   ============================ */

#gform_wrapper_3 .gform_footer input[type="submit"],
#gform_wrapper_4 .gform_footer input[type="submit"] {
  display: block;
  margin: 24px auto 0;
  padding: 18px 56px;
  border-radius: 16px;
  border: none;

  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: 0.4px;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  cursor: pointer;

  background: linear-gradient(135deg, #1f6fd6, #0b2c5f);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

#gform_wrapper_3 .gform_footer input[type="submit"]:hover,
#gform_wrapper_4 .gform_footer input[type="submit"]:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 24px 52px rgba(0,0,0,0.6);
  filter: brightness(1.08);
}


/* ============================
   TWO-COLUMN LAYOUT
   ============================ */

#gform_wrapper_3 .gform_fields,
#gform_wrapper_4 .gform_fields {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

#gform_wrapper_3 .gfield,
#gform_wrapper_4 .gfield {
  width: 100%;
}

#gform_wrapper_3 .gfield.gfield--width-half,
#gform_wrapper_4 .gfield.gfield--width-half {
  width: calc(50% - 10px);
}


/* ============================
   RESPONSIVE
   ============================ */

@media (max-width: 600px) {
  #gform_wrapper_3,
  #gform_wrapper_4 {
    margin: 20px 12px 40px;
    padding: 24px 20px 32px;
  }

  #gform_wrapper_3 .gform_heading::before,
  #gform_wrapper_4 .gform_heading::before {
    font-size: 1.8rem;
  }

  #gform_wrapper_3 .gfield.gfield--width-half,
  #gform_wrapper_4 .gfield.gfield--width-half {
    width: 100%;
  }
}

#gform_wrapper_3 select,
#gform_wrapper_4 select {
  padding-left: 12px !important;
}

#gform_wrapper_3 .gform_heading::before {
  content: "Build Your Custom PC";
  display: block;
  margin-bottom: 18px;
  padding: 6px 0;

  font-size: 2.5rem !important;
  font-weight: 900 !important;
  font-style: normal !important;
  letter-spacing: 0.6px;
  line-height: 1.1;
  text-align: center;

  background: linear-gradient(135deg, #1f6fd6, #0b2c5f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#gform_wrapper_4 .gform_heading::before {
  content: "Help Me Build My Custom PC";
  display: block;
  margin-bottom: 18px;
  padding: 6px 0;

  font-size: 2.5rem !important;
  font-weight: 900 !important;
  font-style: normal !important;
  letter-spacing: 0.6px;
  line-height: 1.1;
  text-align: center;

  background: linear-gradient(135deg, #1f6fd6, #0b2c5f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}