/*
Theme Name: 2C Child
Theme URI: https://www.2cdevgroup.com/
Author: 2C Dev Group
Author URI: https://www.2cdevgroup.com/
Description: 2C Child is the child theme for 2C, a modern multipurpose WordPress theme.
Template: 2c_original
Version: 1.0
Text Domain: 2c-child
*/

/* TWO-COLUMN FLEX: NO OUTER GAP, ONLY MIDDLE MARGIN */
.woocommerce-checkout .col2-set {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important; /* align items to left edge */
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* COLUMN BASE STYLES */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  flex: 1 1 0 !important;              /* equal width */
  min-width: 0 !important;
  background-color: #ecebe7 !important;
  padding: 20px !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  margin: 0 !important;                /* reset any default margins */
}

/* ONLY add 10px on the inside edges */
.woocommerce-checkout .col2-set .col-1 {
  margin-right: 10px !important;
}
.woocommerce-checkout .col2-set .col-2 {
  margin-left: 10px !important;
}

@media (max-width: 1100px) {
  /* 1) Stack columns */
  .woocommerce-checkout .col2-set {
    flex-wrap: wrap !important;
  }

  /* 2) Make each column full-width and kill the 10px margins */
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* === Shrink checkout field labels to 0.8rem to prevent wrapping === */
.woocommerce-checkout .form-row label {
  font-size: 0.8rem !important;
  line-height: 1.7 !important;
}

/* === PERSONAL (ADDITIONAL) FIELDS === */
#personal_address_first_name_field,
#personal_address_last_name_field,
#personal_address_phone_field,
#personal_birthdate_field,
#personal_address_street_address_field,
#personal_address_appartment_field,
#personal_address_city_field,
#personal_address_state_field,
#personal_address_zip_field,
#billing_email_field,
#personal_ssn_field {
  width: 48% !important;
  box-sizing: border-box !important;
  display: inline-block !important;
  vertical-align: top !important;
}

#personal_address_first_name_field,
#personal_address_phone_field,
#personal_address_street_address_field,
#personal_address_city_field,
#personal_address_zip_field,
#personal_ssn_field {
  float: left !important;
  margin-right: 4% !important;
  clear: both !important;
}

#personal_address_last_name_field,
#personal_birthdate_field,
#personal_address_appartment_field,
#personal_address_state_field,
#billing_email_field {
  float: right !important;
  margin-right: 0 !important;
}

/* === Petra Attendance Radios Side-by-Side === */
#personal_previous_attendance_field {
  width: 48% !important;
  float: right !important;
  margin-right: 0 !important;
  clear: none !important;
  box-sizing: border-box !important;
}

#personal_previous_attendance_field .woocommerce-input-wrapper {
  display: flex !important;
  gap: 20px;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}

#personal_previous_attendance_field input[type="radio"],
#personal_previous_attendance_field label.radio {
  margin: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

#personal_previous_attendance_field label.radio {
  margin-right: 20px !important;
}

#personal_previous_attendance_field label.radio[style] {
  display: inline-block !important;
  margin-right: 20px !important;
}

/* === BUSINESS (BILLING) FIELDS === */
#billing_phone_field,
#billing_address_1_field,
#billing_address_2_field,
#billing_city_field,
#billing_state_field,
#billing_postcode_field {
  width: 48% !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  vertical-align: top !important;
}

#billing_phone_field,
#billing_address_2_field,
#billing_state_field {
  float: left !important;
  margin-right: 4% !important;
  clear: both !important;
}

#billing_address_1_field,
#billing_city_field,
#billing_postcode_field {
  float: right !important;
  margin-right: 0 !important;
  clear: none !important;
}

/* Force City field to behave */
#billing_city_field,
#billing_city_field.form-row,
#billing_city_field.form-row-last {
  width: 48% !important;
  float: right !important;
  margin-right: 0 !important;
  clear: none !important;
  display: inline-block !important;
}
#billing_city_field input {
  width: 100% !important;
}

/* Override WooCommerce stacking rules */
#billing_address_1_field.form-row,
#billing_postcode_field.form-row,
#billing_address_1_field.form-row-last,
#billing_postcode_field.form-row-last {
  width: 48% !important;
  float: right !important;
  margin-right: 0 !important;
  clear: none !important;
  display: inline-block !important;
}

/* Reset select2 wrappers (like state) */
.select2-container {
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure inputs/selects don't inherit 100% widths */
.woocommerce-billing-fields .form-row input,
.woocommerce-billing-fields .form-row select,
.woocommerce-additional-fields__field-wrapper .form-row input {
  width: 100% !important;
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  background-color: #ecebe7 !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  width: calc(50% - 1%) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  border-radius: 6px !important;
}

/* Create Margins for Your Courses Headline */
#order_review_heading {
  margin-top: 40px !important;
  margin-bottom: 20px !important;
  line-height: 1.4 !important;
}

/* Background for Payment Form */
#payment {
  background-color: #ecebe7 !important;
  padding: 30px !important;
  margin-top: 30px !important;
  border-radius: 6px !important;
}

@media (max-width: 575px) {
  /*
   * ===================================================================
   * HIGH-SPECIFICITY OVERRIDE FOR CHECKOUT FIELD PLUGINS
   * ===================================================================
  */

/* Part 1: Break out of flex on the two column wrappers */
  .woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout #customer_details .woocommerce-additional-fields__field-wrapper {
    display: block !important;
  }

 /* Part 2: Force every form-row in #customer_details to full width */
  body.woocommerce-checkout form #customer_details .form-row {
    /* --- Sizing --- */
    width: 100% !important;
    max-width: 100% !important; /* Critical for overriding flex constraints */
    box-sizing: border-box !important;

    /* --- Disable Flex & Float --- */
    display: block !important; /* The most important rule */
    float: none !important;
    flex: none !important; /* Explicitly disable flex item properties */
    
    /* --- Spacing --- */
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

 /* Part 3: Stretch every input/select/dropdown to fill its row, except radios and checkboxes */
.woocommerce-checkout .form-row .woocommerce-input-wrapper,
  .woocommerce-checkout .form-row input:not([type="radio"]):not([type="checkbox"]), /* <-- THE FIX IS HERE */
  .woocommerce-checkout .form-row select,
  .woocommerce-checkout .form-row textarea,
  .woocommerce-checkout .form-row .select2-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 575px) {
  /* Allow radios to size naturally again */
  .woocommerce-checkout form.checkout .form-row input[type="radio"] {
    width: auto !important;
    max-width: none !important;
  }

  /* Tweak the wrapper so buttons & labels wrap nicely */
  #personal_previous_attendance_field .woocommerce-input-wrapper {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
}