/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


/* Zeigt alle elemente im OffCanvas an auch wenn sie nicht im Veieport liegen. */
.brx-offcanvas-inner {
    overflow-y: scroll;
    flex-wrap: nowrap;
  }
.brxe-text h4 {
  margin-bottom: 10px;
  }

body {
  font-feature-settings: "lnum";
}

/* =========================
   Gravity Forms – Clean CI Theme
   CI: #6ca316
   ========================= */

:root{
  --gf-ci: #6ca316;
  --gf-ci-dark: #5b8d12;
  --gf-ci-soft: rgba(108, 163, 22, .14);
  --gf-text: #1f2937;
  --gf-muted: #6b7280;
  --gf-line: #e5e7eb;
  --gf-bg: #ffffff;
  --gf-error: #b42318;
  --gf-radius: 5px;
  --gf-shadow: 0 10px 25px rgba(0,0,0,.08);
}

/* Wrapper */
.gform_wrapper{
  color: var(--gf-text);
}

/* Form container optional (falls Du ein "Card"-Look willst) */
.gform_wrapper .gform_body{
  background: var(--gf-bg);
}

/* Labels */
.gform_wrapper .gfield_label,
.gform_wrapper .gfield legend{
  font-weight: 650;
  letter-spacing: .2px;
  margin-bottom: 8px;
}

/* Sub-Labels / Descriptions */
.gform_wrapper .gfield_description,
.gform_wrapper .ginput_complex label{
  color: var(--gf-muted);
  font-size: 13px;
  line-height: 1.35;
}

/* Field spacing */
.gform_wrapper .gfield{
  margin-bottom: 18px;
}

/* Inputs allgemein */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="search"],
.gform_wrapper input[type="date"],
.gform_wrapper input[type="time"],
.gform_wrapper textarea,
.gform_wrapper select{
  width: 100%;
  border: 1px solid var(--gf-line);
  background: #fff;
  color: var(--gf-text);
  border-radius: var(--gf-radius);
  padding: 20px 20px;
  font-size: 15px;
  line-height: 1.4;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

/* Placeholder */
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder{
  color: rgba(107, 114, 128, .85);
}

/* Focus */
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus{
  border-color: var(--gf-ci);
  box-shadow: 0 0 0 4px var(--gf-ci-soft);
}

/* Textarea */
.gform_wrapper textarea{
  min-height: 140px;
  resize: vertical;
}

/* Select: kleiner Pfeil optisch sauber */
.gform_wrapper select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gf-muted) 50%),
    linear-gradient(135deg, var(--gf-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

/* Checkboxes / Radios – sauberer Abstand */
.gform_wrapper .gfield_checkbox li,
.gform_wrapper .gfield_radio li{
  margin: 10px 0;
}

.gform_wrapper .gfield_checkbox label,
.gform_wrapper .gfield_radio label{
  color: var(--gf-text);
  font-weight: 500;
  cursor: pointer;
}

/* Checkboxes / Radios modern einfärben */
.gform_wrapper input[type="checkbox"],
.gform_wrapper input[type="radio"]{
  accent-color: var(--gf-ci);
  transform: translateY(1px);
}

/* Required Stern */
.gform_wrapper .gfield_required{
  color: var(--gf-ci);
  margin-left: 4px;
  font-weight: 700;
}

/* Button */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button,
.gform_wrapper .gform_page_footer input[type="button"],
.gform_wrapper .gform_page_footer input[type="submit"]{
  background: var(--gf-ci);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .18s ease, background-color .18s ease;
  box-shadow: 0 10px 22px rgba(108, 163, 22, .22);
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer button:hover,
.gform_wrapper .gform_page_footer input[type="button"]:hover,
.gform_wrapper .gform_page_footer input[type="submit"]:hover{
  background: var(--gf-ci-dark);
}

.gform_wrapper .gform_footer input[type="submit"]:active,
.gform_wrapper .gform_footer button:active,
.gform_wrapper .gform_page_footer input[type="button"]:active,
.gform_wrapper .gform_page_footer input[type="submit"]:active{
  transform: translateY(1px);
}

/* Secondary (z.B. Zurück/Next Buttons) */
.gform_wrapper .gform_page_footer input[type="button"]{
  background: #111827;
  box-shadow: 0 10px 22px rgba(17, 24, 39, .18);
}
.gform_wrapper .gform_page_footer input[type="button"]:hover{
  background: #0b1220;
}

/* Multi-Page Progressbar */
.gform_wrapper .gf_progressbar_wrapper{
  margin: 0 0 18px;
}
.gform_wrapper .gf_progressbar{
  border-radius: 999px;
  overflow: hidden;
  background: #f3f4f6;
  height: 10px;
}
.gform_wrapper .gf_progressbar_percentage{
  background: var(--gf-ci);
  height: 10px;
}

/* Validation Errors (oben) */
.gform_wrapper .validation_error,
.gform_wrapper .gform_validation_errors{
  border: 1px solid rgba(180, 35, 24, .25);
  background: rgba(180, 35, 24, .08);
  color: #7a1212;
  border-radius: var(--gf-radius);
  padding: 12px 14px;
  margin-bottom: 16px;
}

/* Field Errors */
.gform_wrapper .gfield_error .gfield_label{
  color: var(--gf-error);
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select{
  border-color: rgba(180, 35, 24, .55);
  box-shadow: 0 0 0 4px rgba(180, 35, 24, .12);
}

.gform_wrapper .validation_message,
.gform_wrapper .gfield_error .gfield_description{
  color: #7a1212;
}

/* Confirmation */
.gform_wrapper .gform_confirmation_message{
  border: 1px solid rgba(108, 163, 22, .28);
  background: rgba(108, 163, 22, .10);
  border-radius: var(--gf-radius);
  padding: 14px 16px;
  color: var(--gf-text);
}

/* Datepicker (jQuery UI, falls aktiv) */
.ui-datepicker{
  border-radius: 14px !important;
  border: 1px solid var(--gf-line) !important;
  box-shadow: var(--gf-shadow) !important;
  padding: 10px !important;
}
.ui-datepicker .ui-datepicker-header{
  border: 0 !important;
  background: transparent !important;
}
.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-highlight{
  background: var(--gf-ci) !important;
  border-color: var(--gf-ci) !important;
  color: #fff !important;
  border-radius: 10px !important;
}

/* Responsive: Mehrspaltige Felder sauber untereinander */
@media (max-width: 640px){
  .gform_wrapper .ginput_complex{
    display: block;
  }
  .gform_wrapper .ginput_complex > span{
    width: 100% !important;
    display: block;
    margin-bottom: 10px;
  }
}

.gfield_required {
  color: #6ca316 !important
}