/*
Plugin Name: TBOC Corporate
Plugin URI: https://tacticalbeardownersclub.com
Description: Adds TBOC corporate design defaults to the website.
Version: 1.6.0
Author: Tactical Beard Owners Club
Author URI: https://tacticalbeardownersclub.com
*/

/**************************/
/* Third-Party CSS Extras */
/**************************/

/***********************/
/* Elementor CSS Extra */
/***********************/


/*******************/
/*** Form Fields ***/
/*******************/

/* Global Form Styling */

/* No box-shadow */
.elementor-field-group:not(.elementor-field-type-upload) .elementor-field:not(.elementor-select-wrapper):focus, 
selector .elementor-field-group .elementor-select-wrapper select:focus { box-shadow: none; }

.elementor-field-group .elementor-field-textual { color: inherit; }

/* Form Fields Placeholder Text Color */
.elementor-field-group input::placeholder,
.elementor-field-group .elementor-field-textual::placeholder {
	color: var(--tboc-color-neutral) !important;
	font-size: inherit;
}

.elementor-field-option {
    display: flex;
}

.elementor-field-subgroup.elementor-subgroup-inline .elementor-field-option {
    padding-right: 1rem !important;
}

.elementor-field-option label:hover {
    cursor: pointer;
}

.elementor-field-option label {
    font-weight: normal;
}

.elementor-mark-required .elementor-field-label:after {
    content: "*" !important;
    color: var(--tboc-color-feedback-negative) !important;
    padding-left: .125rem !important;
}

/******* Radio & Checkboxes *******/

input[type=checkbox], input[type=radio] {
    cursor: pointer;
    display: inline-block;
    margin: 0 .5rem 0 0;
    padding: 0 !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    background-color: var(--tboc-color-form-field-bg) !important;
    border-color: var(--tboc-color-neutral) !important;
    border-width: var(--tboc-border-min);
    border-radius: var(--tboc-border-radius-medium);
    outline: none;
    box-shadow: none;
    text-align: center;
    vertical-align: middle;
    -webkit-appearance: none;
    appearance: none;
}

input[type=radio] {
    border-radius: var(--tboc-border-radius-circle) !important;
}

input[type=checkbox]:hover, input[type=radio]:hover,
input[type=checkbox]:focus, input[type=radio]:focus {
    background-color: var(--tboc-color-form-field-bg-active) !important;
    border-color: var(--tboc-color-primary) !important;
    outline: none;
    box-shadow: none;
}

input[type=checkbox]:checked,
input[type=checkbox]:checked:hover {
    background-color: var(--tboc-color-primary) !important;
    border-color: var(--tboc-color-neutral) !important;
    /* Checkbox Tick Animation */
    animation: check-tick 180ms ease-in-out;
}

input[type=radio]:checked,
input[type=radio]:checked:hover  {
    background-color: var(--tboc-color-primary) !important;
    border-color:var(--tboc-color-neutral) !important;
    /* Checkbox Tick Animation */
    animation: check-tick 180ms ease-in-out;
}

input[type=checkbox]:checked::before {
    content: '.';
    color: transparent;
    display: inline-block;
    height: 12px;
    width: 16px;
    background-color: var(--tboc-color-widget-bg);
    mask-image: var(--tboc-icon-solid-check);
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center center;
    margin-top: 5px;
}

input[type=radio]:checked::before {
    float: left;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "";
    border-radius: 50%;
    width: 0.75rem;
    height: 0.75rem;
    margin: 5px;
    background-color: var(--tboc-color-widget-bg);
    line-height: 1;
    
}

input.disabled,
input.disabled:hover,
input:disabled,
input:disabled:hover,
label:has(:disabled) {
    background-color: unset;
    border-color: var(--tboc-color-neutral) !important;
    opacity: 0.5 !important;
    cursor: default !important;
}

/* Checkbox Tick Animation Keyframes */
@keyframes check-tick {
    0% {
        transform: scale(0);
    }

    90% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

/******* File Upload Fields ********/

input[type=file] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    position: relative;
}

input[type=file]::file-selector-button,
input[type=file] > input[type=button] {
  border-radius: var(--tboc-border-radius-buttons);
  padding: 0 1rem;
  height: 2.5rem;
  cursor: pointer;
  background-color: transparent;
  border: 1px solid var(--tboc-color-neutral);
  box-shadow: none;
  margin: 0 1rem 0 0;
  /*
    This is a hack to change the button label. 
    I'm hiding the default label and then 
    manually applying the width based on 
    updated icon and label.
  */
  width: 8rem;
  color: transparent;
  /*
    Firefox doesn't support the pseudo ::before 
    or ::after elements on this input field so 
    we need to use the @supports rule to enable 
    default styles fallback for Firefox.
  */
}

@supports (-moz-appearance: none) {
  input[type=file]::file-selector-button {
    color: var(--tboc-color-primary);
  }
}

input[type=file]::file-selector-button:hover,
input[type=file]::file-selector-button:active {
  background-color: var(--tboc-color-form-field-bg-active);
}

input[type=file]::before {
  position: absolute;
  pointer-events: none;
  top: .5625rem;
  left: 1.5rem;
  height: 1.25rem;
  width: 1.25rem;
  content: "";
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgRnJlZSA2LjIuMSBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIChJY29uczogQ0MgQlkgNC4wLCBGb250czogU0lMIE9GTCAxLjEsIENvZGU6IE1JVCBMaWNlbnNlKSBDb3B5cmlnaHQgMjAyMiBGb250aWNvbnMsIEluYy4gLS0+PHBhdGggZD0iTTI4OCAxMDkuM1YzNTJjMCAxNy43LTE0LjMgMzItMzIgMzJzLTMyLTE0LjMtMzItMzJWMTA5LjNsLTczLjQgNzMuNGMtMTIuNSAxMi41LTMyLjggMTIuNS00NS4zIDBzLTEyLjUtMzIuOCAwLTQ1LjNsMTI4LTEyOGMxMi41LTEyLjUgMzIuOC0xMi41IDQ1LjMgMGwxMjggMTI4YzEyLjUgMTIuNSAxMi41IDMyLjggMCA0NS4zcy0zMi44IDEyLjUtNDUuMyAwTDI4OCAxMDkuM3pNNjQgMzUySDE5MmMwIDM1LjMgMjguNyA2NCA2NCA2NHM2NC0yOC43IDY0LTY0SDQ0OGMzNS4zIDAgNjQgMjguNyA2NCA2NHYzMmMwIDM1LjMtMjguNyA2NC02NCA2NEg2NGMtMzUuMyAwLTY0LTI4LjctNjQtNjRWNDE2YzAtMzUuMyAyOC43LTY0IDY0LTY0ek00MzIgNDU2YzEzLjMgMCAyNC0xMC43IDI0LTI0cy0xMC43LTI0LTI0LTI0cy0yNCAxMC43LTI0IDI0czEwLjcgMjQgMjQgMjR6IiBmaWxsPSIjYWFhNDk3Ii8+PC9zdmc+");
  background-color: var(--tboc-color-neutral);
}

input[type=file]::after {
  position: absolute;
  pointer-events: none;
  font-weight: var(--tboc-font-weight-medium);
  top: .5rem;
  left: 3.25rem;
  color: var(--tboc-color-text-muted);
  content: "Upload";
}

input[type=file]:focus-within::file-selector-button, input[type=file]:focus::file-selector-button {
  outline: 1px solid var(--tboc-color-primary);
  outline-offset: 0;
}

/******* Select Fields *******/

select {
 padding: 0 var(--tboc-gutter-large) 0 var(--tboc-gutter-small);
    color: var(--tboc-color-neutral) !important;
    background: var(--tboc-color-form-field-bg) url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23AAA497%22%2F%3E%3C%2Fsvg%3E') no-repeat right 8px top 55%;
    border-color: var(--tboc-color-neutral);
    border-radius: var(--tboc-border-radius-medium);
    min-height: 32px;
}

select:hover{
    cursor: pointer;
}

select:hover, select:focus {
        background: var(--tboc-color-form-field-bg-active) url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23776D52%22%2F%3E%3C%2Fsvg%3E') no-repeat right 8px top 55%;
        color: inherit !important;
        border-color: var(--tboc-color-primary);
        box-shadow: none;
}

select:disabled {
    text-shadow: none;
    opacity: 0.5;
}

.select-caret-down-wrapper{
    display: none !important;
}

/*** Input Field Heights ***/

.elementor-field-textual.elementor-size-xs { padding: .25rem .5rem !important; }
.elementor-field-textual.elementor-size-sm { padding: .25rem .5rem !important; }
.elementor-field-textual.elementor-size-md { padding: .5rem .75rem !important; }
.elementor-field-textual.elementor-size-lg { padding: .75rem 1rem !important; }
.elementor-field-textual.elementor-size-xl { padding: 1rem 1.5rem !important; }

:not([type="checkbox"]):not([type="radio"]):not(textarea).elementor-size-xs { min-height: 1.5rem !important; max-height: 1.5rem !important; }
:not([type="checkbox"]):not([type="radio"]):not(textarea).elementor-size-sm { min-height: 2rem !important; max-height: 2rem !important; }
:not([type="checkbox"]):not([type="radio"]):not(textarea).elementor-size-md { min-height: 2.5rem !important; max-height: 2.5rem !important; }
:not([type="checkbox"]):not([type="radio"]):not(textarea).elementor-size-lg { min-height: 3.5rem !important; max-height: 3.5rem !important; }
:not([type="checkbox"]):not([type="radio"]):not(textarea).elementor-size-xl { min-height: 4rem !important; max-height: 4rem !important; }

textarea.elementor-size-xs { min-height: 1.5rem !important; }
textarea.elementor-size-sm { min-height: 2rem !important; }
textarea.elementor-size-md { min-height: 2.5rem !important; }
textarea.elementor-size-lg { min-height: 3.5rem !important; }
textarea.elementor-size-xl { min-height: 4rem !important; }

/* Input Font Sizes */
.elementor-size-xs { font-size: var(--tboc-font-size-xsmall) !important; }
.elementor-size-sm { font-size: var(--tboc-font-size-small) !important; }
.elementor-size-md { font-size: var(--tboc-font-size-medium) !important; }
.elementor-size-lg { font-size: var(--tboc-font-size-large) !important; }
.elementor-size-xl { font-size: var(--tboc-font-size-xlarge) !important; }

/* Select Small Padding Shift 
select.elementor-size-sm { padding: .25rem 0 .25rem .75rem !important; }
*/

/* Input File Button Height */
input[type=file].elementor-size-sm::file-selector-button, input[type=file].elementor-size-sm > input[type=button] { height: 2rem !important; width: 6.5rem !important; }
input[type=file].elementor-size-sm::before { top: .5rem; left: 1.25rem; height: 1rem; width: 1rem; }
input[type=file].elementor-size-sm::after { top: .4rem; left: 2.75rem; }

/*************************/
/*** Elementor Buttons ***/
/*************************/

/* Button Automatic Vertical Text Centering */
.elementor-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
  }

  /* Button Adjust for Icons */
  .elementor-button .elementor-button-text { line-height: 1.25; }
  .elementor-button-content-wrapper { align-items: center; }

/* Button Padding Scaling */
.elementor-button.elementor-size-xs { padding-left: calc(var(--tboc-button-padding-h) * .5) !important; padding-right: calc(var(--tboc-button-padding-h) * .5) !important; }
.elementor-button.elementor-size-sm { padding-left: calc(var(--tboc-button-padding-h) * .75) !important; padding-right: calc(var(--tboc-button-padding-h) * .75) !important; }
.elementor-button.elementor-size-md { padding-left: calc(var(--tboc-button-padding-h) * 1) !important; padding-right: calc(var(--tboc-button-padding-h) * 1) !important; }
.elementor-button.elementor-size-lg { padding-left: calc(var(--tboc-button-padding-h) * 1.25) !important; padding-right: calc(var(--tboc-button-padding-h) * 1.25) !important; }
.elementor-button.elementor-size-xl { padding-left: calc(var(--tboc-button-padding-h) * 1.5) !important; padding-right: calc(var(--tboc-button-padding-h) * 1.5) !important; }

/* Button Icon Scaling & Adjustments */
.elementor-button.elementor-size-xs .elementor-button-icon i { height: .75rem; width: .75rem; font-size: .75rem; }
.elementor-button.elementor-size-sm .elementor-button-icon i { height: 1rem; width: 1rem; font-size: 1rem; }
.elementor-button.elementor-size-md .elementor-button-icon i { height: 1.25rem; width: 1.25rem; font-size: 1.25rem; }
.elementor-button.elementor-size-lg .elementor-button-icon i { height: 1.5rem; width: 1.5rem; font-size: 1.5rem; }
.elementor-button.elementor-size-xl .elementor-button-icon i { height: 2rem; width: 2rem; font-size: 2rem; }

/* Extra Button Classes */
.tboc-button-primary .elementor-widget-container .elementor-button-wrapper .elementor-button {
    background-color: var(--tboc-color-primary);
    border-color: var(--tboc-color-primary);
    color: var(--tboc-color-widget-bg);
    fill: var(--tboc-color-widget-bg);
}

    .tboc-button-primary .elementor-widget-container .elementor-button-wrapper .elementor-button:hover,
    .tboc-button-primary .elementor-widget-container .elementor-button-wrapper .elementor-button:focus {
        background-color: var(--tboc-color-form-field-bg);
        color: var(--tboc-color-primary);
        fill: var(--tboc-color-primary);
    }

.tboc-button-secondary .elementor-widget-container .elementor-button-wrapper .elementor-button {
    background-color: var(--tboc-color-secondary);
    border-color: var(--tboc-color-secondary);
}

    .tboc-button-secondary .elementor-widget-container .elementor-button-wrapper .elementor-button:hover,
    .tboc-button-secondary .elementor-widget-container .elementor-button-wrapper .elementor-button:focus {
        background-color: var(--tboc-color-form-field-bg);
        color: var(--tboc-color-secondary);
        fill: var(--tboc-color-secondary);
    }

.tboc-button-outline .elementor-widget-container .elementor-button-wrapper .elementor-button {
    background-color: transparent;
    border-color: var(--tboc-color-text-muted);
    color: var(--tboc-color-text-muted);
    fill: var(--tboc-color-text-muted);
}

    .tboc-button-outline .elementor-widget-container .elementor-button-wrapper .elementor-button:hover,
    .tboc-button-outline .elementor-widget-container .elementor-button-wrapper .elementor-button:focus {
        background-color: var(--tboc-color-form-field-bg);
    }

.tboc-button-outline-neg .elementor-widget-container .elementor-button-wrapper .elementor-button {
    background-color: transparent;
    border-color: var(--tboc-color-widget-bg);
    color: var(--tboc-color-widget-bg);
    fill: var(--tboc-color-widget-bg);
}

    .tboc-button-outline-neg .elementor-widget-container .elementor-button-wrapper .elementor-button:hover,
    .tboc-button-outline-neg .elementor-widget-container .elementor-button-wrapper .elementor-button:focus {
        background-color: var(--tboc-color-ui-button-hover-bg);
        border-color: var(--tboc-color-form-field-bg-active);
        color: var(--tboc-color-form-field-bg-active);
        fill: var(--tboc-color-form-field-bg-active);
    }

.tboc-button-outline-neg-ui .elementor-widget-container .elementor-button-wrapper .elementor-button {
    background-color: transparent;
    border-color: var(--tboc-color-ui-subnav-link-70);
    color: var(--tboc-color-ui-subnav-link-70);
    fill: var(--tboc-color-ui-subnav-link-70);
}

    .tboc-button-outline-neg-ui .elementor-widget-container .elementor-button-wrapper .elementor-button:hover,
    .tboc-button-outline-neg-ui .elementor-widget-container .elementor-button-wrapper .elementor-button:focus {
        background-color: var(--tboc-color-ui-button-hover-bg);
        border-color: var(--tboc-color-ui-subnav-link);
        color: var(--tboc-color-ui-subnav-link);
        fill: var(--tboc-color-ui-subnav-link);
    }

.tboc-button-outline-sub .elementor-widget-container .elementor-button-wrapper .elementor-button {
    background-color: transparent;
    border-width: var(--tboc-border-min);
    border-color: var(--tboc-color-neutral);
    color: var(--tboc-color-text-muted);
    fill: var(--tboc-color-text-muted);
    font-weight: var(--tboc-font-weight-medium);
}

    .tboc-button-outline-sub .elementor-widget-container .elementor-button-wrapper .elementor-button .elementor-button-icon i {
        color: var(--tboc-color-neutral);
        fill: var(--tboc-color-neutral);
    }

    .tboc-button-outline-sub .elementor-widget-container .elementor-button-wrapper .elementor-button:hover,
    .tboc-button-outline-sub .elementor-widget-container .elementor-button-wrapper .elementor-button:focus {
        background-color: var(--tboc-color-form-field-bg);
    }

/* Extra Button Icon Classes */
.tboc-button-icon .elementor-widget-container .elementor-button-wrapper .elementor-button {
    border-radius: var(--tboc-border-radius-circle) !important;
    padding: 0 !important;
}

.tboc-button-icon .elementor-widget-container .elementor-button-wrapper .elementor-button.elementor-size-xs { width: 1.5rem !important; }
.tboc-button-icon .elementor-widget-container .elementor-button-wrapper .elementor-button.elementor-size-sm { width: 2rem !important; }
.tboc-button-icon .elementor-widget-container .elementor-button-wrapper .elementor-button.elementor-size-md { width: 2.5rem !important; }
.tboc-button-icon .elementor-widget-container .elementor-button-wrapper .elementor-button.elementor-size-lg { width: 3.5rem !important; }
.tboc-button-icon .elementor-widget-container .elementor-button-wrapper .elementor-button.elementor-size-xl { width: 4rem !important; }

/* Button Icon Only Scaling Font Icons and SVG Icons */
.tboc-button-icon .elementor-widget-container .elementor-button-wrapper .elementor-button.elementor-size-xs .elementor-button-icon > * { height: .75rem; width: .75rem; font-size: .75rem; margin-left: 1px; }
.tboc-button-icon .elementor-widget-container .elementor-button-wrapper .elementor-button.elementor-size-sm .elementor-button-icon > * { height: 1rem; width: 1rem; font-size: 1rem; }
.tboc-button-icon .elementor-widget-container .elementor-button-wrapper .elementor-button.elementor-size-md .elementor-button-icon > * { height: 1.25rem; width: 1.25rem; font-size: 1.25rem; }
.tboc-button-icon .elementor-widget-container .elementor-button-wrapper .elementor-button.elementor-size-lg .elementor-button-icon > * { height: 1.5rem; width: 1.5rem; font-size: 1.5rem; }
.tboc-button-icon .elementor-widget-container .elementor-button-wrapper .elementor-button.elementor-size-xl .elementor-button-icon > * { height: 2rem; width: 2rem; font-size: 2rem; }

/* Button Icon Only Adjustments Font Icons */
.tboc-button-icon .elementor-widget-container .elementor-button-wrapper .elementor-button .elementor-button-icon i { margin-left: .0625rem; margin-top: .0625rem; }

/********************************/
/*** Extra Form Field Classes ***/
/********************************/

/* Form Size "Small" Adjustments */
.tboc-elementor-form-small label { font-size: var(--tboc-font-size-small) !important; }
.tboc-elementor-form-small .elementor-field-group { margin-bottom: var(--tboc-gutter-small) !important; }
.tboc-elementor-form-small input[type=checkbox], .tboc-elementor-form-small input[type=radio] { width: 1rem !important; height: 1rem !important; margin: 0 .25rem 0 0; }
.tboc-elementor-form-small input[type=checkbox] { border-radius: var(--tboc-border-radius-small) !important; }
.tboc-elementor-form-small input[type=radio]:checked::before { width: 0.5rem; height: 0.5rem; margin: 3px; }
.tboc-elementor-form-small input[type=checkbox]:checked::before { width: 10px; height: 8px; margin-top: 3px; }
.tboc-elementor-form-small .elementor-field-option { line-height: 1rem !important; }
.tboc-elementor-form-small .elementor-labels-above .elementor-field-group > label { padding-bottom: 0.25rem !important; }
.tboc-elementor-form-small .elementor-field-subgroup.elementor-subgroup-inline .elementor-field-option { padding-right: 0.5rem !important;}