/*
 Theme Name:   PrimeBeing
 Theme URI:    https://primebeing.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Joshua Peterson
 Author URI:   https://primebeing.io/
 Template:     bricks
 Version:      1.0
 Text Domain:  primebeing
*/

/************************************************ General */ 
/**** General -> Fix Scroll-to Height */ 
html {
  
  scroll-margin-top: var(--space-2xl);
  font-size: 100% !important;
  
}

/**** General -> Fix body height */
body {

  min-height: 100dvh;

}

/**** General -> Logo -> Light */
.cf-theme-light .pb_logo_light,
.cf-theme-light .pb_founder_sig_light,
.cf-theme-light .pb_image_light {
  
  display: none;
  
}

/**** General -> Logo -> Dark */
.cf-theme-dark .pb_logo_dark, 
.cf-theme-dark .pb_founder_sig_dark,
.cf-theme-dark .pb_image_dark{
  
  display: none; 
  
}

/************************************************ Fluent Community Template - Scroll Fix */ 
 @media only screen and (max-width: 767px) {
   .feeds_main.fcom_theme_full.fcom_wp_content {
     overflow-y: scroll !important;
   }
}

/************************************************ Fluent CRM Unsubscribe Page */ 
/**** Fluent CRM Unsubscribe Page -> Heading */
.fluentcrm_un_form_wrapper h4 {
	
	margin-bottom: 20px;
	
}

/**** Fluent CRM Unsubscribe Page -> Form */
.fluentcrm_un_form_wrapper form {
	
	margin-top: 20px;
	
}

/**** Fluent CRM Unsubscribe Page -> Form -> Last Child (Submit Button) */
.fluentcrm_un_form_wrapper form .fc_field:last-child,
.fluentcrm_un_form_wrapper form .fluentcrm_form_item:last-child {
	
	margin-bottom: 0px;
	
}

/**** Fluent CRM Unsubscribe Page -> Form -> Input */
form.fc_public_form .fc_field #fc_name_prefix, 
form.fc_public_form .fc_field .fc_input_control {
  
  padding: 2px 10px;

}

/**** Fluent CRM Unsubscribe Page -> Form -> Disbaled Input */
.fluentcrm_unsubscribe_wrapper .fluentcrm_form_item .fluentcrm_form_control {
  
  background-color: #d1d1d1;
  border-radius: 5px;
  cursor: not-allowed;
  
}

/**** Fluent Community -> Button */
form.fc_public_form #fluentcrm_preferences_submit,
#fluentcrm_preferences_submit, 
#fluentcrm_unsubscribe_submit {
  
  background-color: var(--primary);
  
}

/**** Fluent Community -> Button:hover */
form.fc_public_form #fluentcrm_preferences_submit:hover,
#fluentcrm_preferences_submit:hover, 
#fluentcrm_unsubscribe_submit:hover{
  
  background-color: var(--secondary);
  
}


/**** General -> mobile menu icon fix */
.header__menu.brxe-nav-menu.show-mobile-menu .bricks-mobile-menu-toggle {
  
  display: block !important;
  
}

/**** General -> Header menu -> Active link fix */ 
.pill-tabs__menu-item.tab-title.brx-open .brxe-text-basic {
  
  color: var(--primary);
  
}

/**** General -> List -> Lead Qualification */ 
.pb_lead_qualification_list.brxe-list .icon {
  
  margin-top: var(--space-5xs);
  
}

/**** General -> Pricing Table */ 
.table-wrapper {
  
  overflow-x: scroll;
  overflow-y: hidden;
  height: min-content;
  
}

/**** General -> Slide-in CTA */ 
.pb_sliding_header[position="open"] {
  
  transform: translateY(0) !important;
  
}

/**** General -> Checkout From -> Title */ 
.pb_checkout_form_title {
  
  font-size: var(--text-m);
  font-weight: 700; 
  margin-bottom: var(--space-s); 
  
}

/**** General -> Checkout From -> Title */ 
.pb_checkout_form_title_no_margin {
  
  font-size: var(--text-m);
  font-weight: 700; 
  margin-bottom: 2px; 
  
}

/**** General -> Checkout From -> Sub Title */ 
.pb_checkout_form_sub_title {
  
  font-size: var(--text-xs);
  font-weight: 700; 
  margin-bottom: var(--space-s); 
  color: var(--secondary);
  text-transform: uppercase;
  
}
/************************************************ Forms (PaymMattic) */  

.wpf_form_wrapper {
  
  font-family: "Inter";
  
}

.wpf_form_group.wpf_item_recurring_payment_item {

  margin-bottom: 0px !important; 
  
}

/**** Forms (PaymMattic) -> Input Colour */ 
.wpf_form_wrapper form .wpf_form_group .wpf_form_control {
  
  background-color: var(--bg-input);
  border-radius: var(--radius-s);
  border: 1px solid var(--border-primary);
  
}

/**** Forms (PaymMattic) -> Input Colour Placeholder */ 
.wpf_form_wrapper form .wpf_form_group .wpf_form_control::placeholder {
  
  color: var(--grey-scale);
  
}

.wpf_form_group.wpf_item_stripe_card_element> {
  
  margin-top: var(--space-m);
  
}

/**** Forms (PaymMattic) -> Submit Button */ 
.wpf_submit_button {
  
  background-color: transparent; 
  
}

/**** Forms (PaymMattic) -> Input Colour */ 
.wpf_form_wrapper form.wpf_form .wpf_form_submissions {
  
  margin-bottom: 0px;
  
}

/**** Forms (PaymMattic) -> Stripe Box Shadow */ 
.wpf_strip_default_style .StripeElement {
  
  box-shadow: none !important;
  
}

/**** Forms (PaymMattic) -> Coupon Code Remove Icon */ 
ul.wpf_coupon_responses span.error-clear {
    color: var(--text-body) !important;
    border: 1px solid var(--text-body) !important;
    border-radius: 100% !important;
    padding: 0px 0px !important;
    display: inline-block;
    width: 23px;
    line-height: 100%;
    text-align: center;
    aspect-ratio: 1;
    padding-left: 1.5px !important;
}

/**** Forms (PaymMattic) -> Coupon Code Button */ 
.wpf_form_wrapper form.wpf_form .wpf_form_group .wpf_form_item_group .wpf_input-group-append .wpf_input-group-text.wpf_coupon_action, .wpf_form_wrapper form.wpf_form .wpf_form_group .wpf_form_item_group .wpf_input-group-prepend .wpf_input-group-text.wpf_coupon_action {
    background-color: var(--primary-20);
    border-color: var(--border-primary);
    border-right-color: var(--border-primary);
    color: var(--primary);
    border-left: none !important;
    font-weight: 600;
    transition: ease all 0.3s;
}

.wpf_form_wrapper form.wpf_form .wpf_form_group .wpf_form_item_group .wpf_input-group-append .wpf_input-group-text.wpf_coupon_action:hover, .wpf_form_wrapper form.wpf_form .wpf_form_group .wpf_form_item_group .wpf_input-group-prepend .wpf_input-group-text.wpf_coupon_action:hover {
  background-color: var(--primary-30);
}

/************************************************ Forms */  

/**** Forms -> Default button */ 
.brxe-brf-pro-forms .bricks-button {
  
  color: #fff !important;  
  border-radius: var(--radius-s) !important;
  margin-top: var(--space-s);
  
}

/**** Forms -> Default button:hover */ 
.brxe-brf-pro-forms .bricks-button:hover {
  
  background: var(--primary-d-1) !important;
  transform: translateY(-0.1rem) !important;
  
} 

/**** Forms -> Remove default padding */ 
.bricks-is-frontend .brxe-brf-pro-forms .form-group:not(.submit-button-wrapper):not(.brf-steps) {

  padding: 0;

}

/**** Forms -> Card option columns -> Width*/ 
.ss_form__field__option__wrapper .options-wrapper .ss_form__field__option label {

  width: 100%;

}

/**** Forms -> Card option columns -> Two columns */ 
.ss_form__field__option__wrapper__col__2 .options-wrapper {

  grid-template-columns: 1fr 1fr;
  display: grid !important;

}

/**** Forms -> Card option columns -> Three columns */ 
.ss_form__field__option__wrapper__col__3 .options-wrapper {

grid-template-columns: 1fr 1fr 1fr;
display: grid !important;

}

/**** Forms -> Card option columns -> Four columns */ 
.ss_form__field__option__wrapper__col__4 .options-wrapper {

grid-template-columns: repeat(4,1fr);
display: grid !important;

}

/**** Forms -> Card option columns -> Medium screen */ 
@media (max-width: 768px) {
    
  .ss_form__field__option__wrapper__col__4 .options-wrapper,
  .ss_form__field__option__wrapper__col__3 .options-wrapper {
    
    grid-template-columns: repeat(2,1fr);
    
  }

}

/**** Forms -> Card option columns -> Small screen */ 
@media (max-width: 480px) {

  .ss_form__field__option__wrapper__col__2 .options-wrapper,
  .ss_form__field__option__wrapper__col__4 .options-wrapper,
  .ss_form__field__option__wrapper__col__3 .options-wrapper  {
  
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  
  }

}

/**** Forms -> Radio Buttons -> gap */ 
.ss_form__field__radio ul li {

  gap: var(--space-3xs) !important;

} 

/**** Forms -> Radio Buttons -> unchecked */ 
.ss_form__field__radio ul li input[type="radio"]:checked {
  
  background-color: var(--bg-input) !important;
  border: 1px solid var(--primary) !important;
  position: relative !important;
  
}

/**** Forms -> Radio Buttons -> Checked */ 
.ss_form__field__radio ul li input[type="radio"]:checked::after {
  
  content: '';
  width: 12px;
  height: 12px;
  background: var(--primary);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  
}

/**** Forms -> Radio Buttons -> Checkboxes -> Alignment */ 
.ss_form__field__wrapper__top-aligned .brxe-brf-pro-forms-field-checkbox input {

  margin-top: var(--space-4xs);

}

/**** Forms -> Richtext Editor -> Toolbar + Container */ 
.ss_form__field__richtext .ql-toolbar,
.ss_form__field__richtext .ql-container {

  border: 1px solid var(--border-primary) !important;

}

/**** Forms -> Richtext Editor -> Toolbar */ 
.ss_form__field__richtext .ql-toolbar {

  border-bottom: none !important;
  border-radius: var(--radius-s) var(--radius-s) 0 0 !important;

}

/**** Forms -> Richtext Editor -> Container */ 
.ss_form__field__richtext .ql-container {

  border-radius: 0 0 var(--radius-s) var(--radius-s) !important;

}

/**** Forms -> Richtext Editor -> Stroke */ 
.ss_form__field__richtext .ql-snow .ql-stroke {

  stroke: var(--text-body) !important;

}

/**** Forms -> Richtext Editor -> Text Colour */ 
.ss_form__field__richtext .ql-snow .ql-fill, 
.ql-snow .ql-stroke.ql-fill {

  stroke: var(--text-body) !important;

}

/**** Forms -> Richtext Editor -> Toolbar + Container */ 
.ss_form__field__richtext .ql-snow .ql-picker {

  color: var(--text-body) !important;

}

/**** Forms -> Richtext Editor -> Hover colour */ 
.ss_form__field__richtext .ql-snow .ql-toolbar .ql-picker-item.ql-selected, 
.ss_form__field__richtext .ql-snow .ql-toolbar .ql-picker-item:hover, 
.ss_form__field__richtext .ql-snow .ql-toolbar .ql-picker-label.ql-active, 
.ss_form__field__richtext .ql-snow .ql-toolbar .ql-picker-label:hover, 
.ss_form__field__richtext .ql-snow .ql-toolbar button.ql-active, 
.ss_form__field__richtext .ql-snow .ql-toolbar button:focus, 
.ss_form__field__richtext .ql-snow .ql-toolbar button:hover, 
.ss_form__field__richtext .ql-snow.ql-toolbar .ql-picker-item.ql-selected, 
.ss_form__field__richtext .ql-snow.ql-toolbar .ql-picker-item:hover, 
.ss_form__field__richtext .ql-snow.ql-toolbar .ql-picker-label.ql-active, 
.ss_form__field__richtext .ql-snow.ql-toolbar .ql-picker-label:hover, 
.ss_form__field__richtext .ql-snow.ql-toolbar button.ql-active, 
.ss_form__field__richtext .ql-snow.ql-toolbar button:focus, 
.ss_form__field__richtext .ql-snow.ql-toolbar button:hover {

  color: var(--primary) !important;

}

/**** Forms -> Richtext Editor -> Button hover colour */ 
.ss_form__field__richtext .ql-snow.ql-toolbar button.ql-active, 
.ss_form__field__richtext .ql-snow.ql-toolbar button:focus, 
.ss_form__field__richtext .ql-snow.ql-toolbar button:hover {

  background-color: var(--dark-10) !important;
  border-radius: var(--radius-xs) !important;

}

/**** Forms -> Richtext Editor -> Tooltip */ 
.ss_form__field__richtext .ql-snow .ql-tooltip {

  background-color: var(--bg-surface) !important;
  border-radius: var(--radius-xs) !important;
  color: var(--text-body) !important;
  font-size: var(--text-m) !important;
  border: 1px solid var(--border-primary) !important;
  box-shadow: var(--shadow-s) !important;
  
}

/**** Forms -> Richtext Editor -> Links */ 
.ss_form__field__richtext .ql-snow .ql-editor a,
.ss_form__field__richtext .ql-snow .ql-tooltip a {

  color: var(--primary) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

/**** Forms -> Richtext Editor -> Add link container */ 
.ss_form__field__richtext .ql-snow .ql-tooltip.ql-editing input[type=text] {

  width: auto !important;

}

/**** Forms -> Richtext Editor -> tool layout */ 
.ql-toolbar.ql-snow .ql-formats {

  display: inline-flex !important;
  gap: var(--space-4xs) !important;

}

/**** Forms -> Richtext Editor -> Text format conatiner */ 
.ss_form__field__richtext .ql-snow .ql-picker-options {

  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-primary) !important;
  border-radius: 0 var(--radius-xs) var(--radius-xs) var(--radius-xs) !important;
  z-index: 2 !important;
  box-shadow: var(--shadow-s) !important;

}

/**** Forms -> Richtext Editor -> Text format conatiner -> text option */ 
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {

  border: 1px solid transparent !important; 
  border-bottom: 1px solid var(--border-primary) !important; 
  background-color: var(--bg-surface) !important;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0 !important;

}

/**** Forms -> Colour Picker -> Container */ 
.clr-picker.clr-pill {

  background-color: var(--bg-surface);
  box-shadow: var(--shadow-s);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-s);

}

/**** Forms -> Colour Picker -> Radius */ 
.clr-picker.clr-pill .clr-gradient {

  border-radius: var(--radius-s) 0 0 var(--radius-s);

}

/**** Forms -> Date Picker -> Container */ 
body .flatpickr-calendar {
  
  background-color: var(--bg-surface);
  color: var(--text-body);
  box-shadow: var(--shadow-s)
  
}

/**** Forms -> Date Picker -> ArrowTop */ 
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowTop:before {
  
  border-bottom-color: var(--bg-surface) !important;
  
}

/**** Forms -> Date Picker -> ArrowBottom */ 
.flatpickr-calendar.arrowBottom:after, 
.flatpickr-calendar.arrowBottom:before {
  
  border-top-color: var(--bg-surface) !important;
  
}

/**** Forms -> Date Picker (with icon) -> Fix for border-radius */ 
.brxe-brf-pro-forms-field-date.ss_form__field_with_icon input.flatpickr {

  border-radius: 0 var(--radius-s) var(--radius-s) 0!important;

}

/**** Forms -> Date Picker -> Date hover colour */ 
.flatpickr-day.inRange, 
.flatpickr-day.nextMonthDay.inRange, 
.flatpickr-day.nextMonthDay.today.inRange, 
.flatpickr-day.nextMonthDay:focus, 
.flatpickr-day.nextMonthDay:hover, 
.flatpickr-day.prevMonthDay.inRange, 
.flatpickr-day.prevMonthDay.today.inRange, 
.flatpickr-day.prevMonthDay:focus, 
.flatpickr-day.prevMonthDay:hover, 
.flatpickr-day.today.inRange, 
.flatpickr-day:focus, 
.flatpickr-day:hover {
  
  background-color: var(--primary-40) !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  fiont-weight: 700 !important;
  
}

/**** Forms -> Date Picker -> Selected date */ 
.flatpickr-day.endRange, 
.flatpickr-day.endRange.inRange, 
.flatpickr-day.endRange.nextMonthDay, 
.flatpickr-day.endRange.prevMonthDay, 
.flatpickr-day.endRange:focus, 
.flatpickr-day.endRange:hover, 
.flatpickr-day.selected, 
.flatpickr-day.selected.inRange, 
.flatpickr-day.selected.nextMonthDay, 
.flatpickr-day.selected.prevMonthDay, 
.flatpickr-day.selected:focus, 
.flatpickr-day.selected:hover, 
.flatpickr-day.startRange, 
.flatpickr-day.startRange.inRange, 
.flatpickr-day.startRange.nextMonthDay, 
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.startRange:focus,
.flatpickr-day.startRange:hover {
  
  background-color: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
  fiont-weight: 700 !important;
  
}

/**** Forms -> Date Picker -> Next/previous month arrows */ 
.flatpickr-months .flatpickr-next-month:hover svg, 
.flatpickr-months .flatpickr-prev-month:hover svg {
  
  fill: var(--primary) !important;
  
}

/**** Forms -> Date Picker -> day text */ 
.flatpickr-calendar span.flatpickr-weekday, 
.flatpickr-calendar .flatpickr-day {

  color: var(--text-body);
  font-weight: 600;

}

/**** Forms -> Date Picker -> Toolbar text colour */ 
.flatpickr-calendar .flatpickr-months .flatpickr-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month, 
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month {

  fill: var(--text-body);
  color: var(--text-body);

}

/**** Forms -> Date Picker -> Year selector arrows */ 
.flatpickr-current-month .numInputWrapper span.arrowUp:after,
.flatpickr-current-month .numInputWrapper span.arrowDown:after {

  border-bottom-color: var(--text-body) !important;
  border-top-color: var(--text-body) !important;

}

/**** Forms -> Date Picker -> Today */ 
.flatpickr-calendar .flatpickr-day.today {

  font-weight: 900;
  color: var(--primary);

}

/**** Forms -> Date Picker -> Disabled dates */ 
.flatpickr-day.flatpickr-disabled, 
.flatpickr-day.flatpickr-disabled:hover, 
.flatpickr-day.nextMonthDay, 
.flatpickr-day.notAllowed, 
.flatpickr-day.notAllowed.nextMonthDay, 
.flatpickr-day.notAllowed.prevMonthDay, 
.flatpickr-day.prevMonthDay {

  color: var(--grey-scale) !important;

}

/**** Forms -> Select -> highlighted choice background */ 
.ss_form__field__select .choices .is-highlighted {

  background-color: var(--bg-input) !important;

}

/**** Forms -> Select -> choice dropdown */
.ss_form__field__select .choices .choices__list--dropdown {

  background-color: var(--bg-input) !important;
  border: 1px solid var(--border-primary) !important;

}

/**** Forms -> Select -> choice inner */
.ss_form__field__select .choices .choices__inner {
  
  border: 1px solid var(--border-primary) !important; 
  border-radius: var(--radius-s) !important; 
  background-color: var(--bg-input) !important;
  
}

/**** Forms -> Select -> choice inner -> open */
.ss_form__field__select .choices.is-open .choices__inner {

  border-radius: var(--radius-s) var(--radius-s) 0 0 !important;

}

/**** Forms -> Select -> choice inner -> open -> flipped */
.ss_form__field__select .choices.is-open.is-flipped .choices__inner {

  border-radius: 0 0 var(--radius-s) var(--radius-s) !important;

}

/**** Forms -> Select -> choices -> headings */
.ss_form__field__select .choices .choices__heading {

  border-bottom: 1px solid var(--border-primary);
  color: var(--text-greyscale);
}

/**** Forms -> File upload -> Upload surface */
.ss_form__field__file_upload .filepond--drop-label {

  border-radius: var(--radius-s);
  border: 1px solid var(--border-primary);

}

/**** Forms -> Checkboxes -> Checked */
input[type="checkbox"]:checked {

    background-color: var(--primary) !important;
    background-image: url(https://primebeing.io/wp-content/uploads/2025/04/PB-Checkbox.svg) !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: 65% !important;
    border: 1px solid var(--primary) !important;

}

/**** Forms -> Multistep form -> Step title border raidus */ 
.brf-step {

  border-radius: var(--radius-m);
  box-shadow: 0;

}

/**** Forms -> Multistep form - step buttons 
.ss_form__field__step__button .bricks-button.prev,
.ss_form__field__step__button .bricks-button.step-progress {

  border-top-left-radius: var(--radius-s) !important;
  border-bottom-left-radius: var(--radius-s) !important;
  border-top-right-radius: var(--radius-s);
  border-bottom-right-radius: var(--radius-s);

}

*/