/* 
Theme Name: Vibrant Blue Oils Shop
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.5.12
Text Domain: prism_base
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/


/* Import Open Sans from Google Fonts with specified weights and styles */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* Now add your CSS rules */
body {
    font-family: 'Open Sans', sans-serif; /* Fallback to sans-serif if Open Sans is not available */
}




:root {
    --black: #000000;
    --charcoal: #17181A;
    --gray: #39414D;
    --white: #FFFFFF;
    --lavender: #F5F6FF;
    --light_blue: #E4E7F8;
    --blue: #203597;
    --dark_blue: #12226E;
    --very_dark_blue: #14043F;
    --dark_purple: #331E6C;
    --purple: #470F76;
    --brand_purple: #7A23A5;
    --magenta: #962070;
    --aqua: #44C4E7;
    --light_green: #BCD3CE;
    --green: #0B803F;
    --yellow: #E7AD39;
    --orange: #EF8228;
    --bright_pink: #f2295b;
}



body {
  --wp--preset--font-size--small: 0.842em;
  --wp--preset--font-size--medium: 1.1em;
  --wp--preset--font-size--large: 1.25em;
  --wp--preset--font-size--x-large: 1.6em;
}


/* Orange to Pink*/
.has_orange_to_bright_pink_gradient_background {
    background: linear-gradient(180deg, rgba(0,101,155,0.5) 0%, rgba(255,255,255,1) 100%);
}

/*WordPress Password*/
.post-password-form {
    display:flex;flex-direction:column;width:calc(100vw -40px); 
    height:calc(100vh - 40px); 
    justify-content:center; 
    background-color:var(--white);
    padding:50px;align-items:
    center;
    gap:20px;
    margin:20px
}

.post-password-form p {
    text-align:center;
    align-items:center;
    line-height:1.5;
    font-size:1.3rem
}


.post-password-form label {
    display:flex; 
    flex-direction:column; 
    width:250px; 
    justify-content:center; 
    align-items:center; 
    margin-bottom:10px
}

.post-password-form input {
    width:250px; 
    padding:15px 
}



.post-password-form [type="submit"] {
    width:250px; 
    padding:15px; 
    background-color:var(--blue); 
    color:var(--white) }


/*Accesbility - add focus for skip link*/

#skip a:focus, .skip a:focus {
    left: 0;
    top: 0;
    padding: 3px;
    background: #ffc;
    border:1px solid #990000;
    }

/*Mobile Breaks*/
@media screen and (min-width: 600px)  {
        .mobile-break { display: none; }
       
    }
    
@media screen and (max-width: 600px)  {
        .mobile-hide { display: none; }
       
    }   

/*Hide subtotals on the mini-cart and the regular cart - this was done so when someone views a funnel checkout page and it auto-ads to the cart it wouldn't display the product (coded) or the subtotal with that product included
- when this new theme is added in remove the css on the cart page widget - for abandoned cart pages you will have to override this somehow*/
.elementor-menu-cart__subtotal {display:none;}
.cart_totals .shop_table.shop_table_responsive {display:none;}

/*Underline inline Paragraph only*/
p a {
  border-bottom: solid 1px currentColor;
}

/*Widen Letter Spacing*/
.wide {letter-spacing:5.5px;}

/*Center Text*/
.center p {
    text-align:center;
}

/*Div Borders*/
/*Blue Div Borders*/
.box-borders {
    z-index:1;
    box-shadow:
    inset  0 0 0 1px var(--white),
    inset  0 0 0 8px var(--dark_blue),
    inset  0 0 0 11px var(--white),
    inset  0 0 0 19px var(--dark_blue),
    inset  0 0 0 20px var(--white);
}


/*Infusionsoft Form Styling Master*/
/*Icons & Buttons*/

.icon-gradient .elementor-icon {background: linear-gradient(150deg, var(--orange) 0%, var(--bright_pink) 100%);border-radius:100%}
.button-gradient button {background: linear-gradient(150deg, var(--orange) 0%, var(--bright_pink) 100%);border-radius:5px; width:100%;}




/*Display Gutenberg colors*/
/* Gutenberg color classes */

/* Basic Colors */
.has-black-color { color: var(--black); }
.has-black-background-color { background-color: var(--black); }

.has-charcoal-color { color: var(--charcoal); }
.has-charcoal-background-color { background-color: var(--charcoal); }

.has-gray-color { color: var(--gray); }
.has-gray-background-color { background-color: var(--gray); }

.has-white-color { color: var(--white); }
.has-white-background-color { background-color: var(--white); }

.has-lavender-color { color: var(--lavender); }
.has-lavender-background-color { background-color: var(--lavender); }

.has-light-blue-color { color: var(--light_blue); }
.has-light-blue-background-color { background-color: var(--light_blue); }

.has-blue-color { color: var(--blue); }
.has-blue-background-color { background-color: var(--blue); }

.has-dark-blue-color { color: var(--dark_blue); }
.has-dark-blue-background-color { background-color: var(--dark_blue); }

.has-very-dark-blue-color { color: var(--very_dark_blue); }
.has-very-dark-blue-background-color { background-color: var(--very_dark_blue); }

.has-dark-purple-color { color: var(--dark_purple); }
.has-dark-purple-background-color { background-color: var(--dark_purple); }

.has-purple-color { color: var(--purple); }
.has-purple-background-color { background-color: var(--purple); }

.has-brand-purple-color { color: var(--brand_purple); }
.has-brand-purple-background-color { background-color: var(--brand_purple); }

.has-magenta-color { color: var(--magenta); }
.has-magenta-background-color { background-color: var(--magenta); }

.has-aqua-color { color: var(--aqua); }
.has-aqua-background-color { background-color: var(--aqua); }

.has-light-green-color { color: var(--light_green); }
.has-light-green-background-color { background-color: var(--light_green); }

.has-green-color { color: var(--green); }
.has-green-background-color { background-color: var(--green); }

.has-yellow-color { color: var(--yellow); }
.has-yellow-background-color { background-color: var(--yellow); }

.has-orange-color { color: var(--orange); }
.has-orange-background-color { background-color: var(--orange); }

.has-bright-pink-color { color: var(--bright_pink); }
.has-bright-pink-background-color { background-color: var(--bright_pink); }


/*Keap form styling*/
.button_magenta button, .button_magenta form .button {
    background-color: var(--magenta); 
    color: var(--white);
}

.button_blue button, .button_blue form .button {
    background-color: var(--blue); 
    color: var(--white);
}

.button_purple button, .button_purple form .button {
    background-color: var(--purple); 
    color: var(--white);
}

.button_brand_purple button, .button_brand_purple form .button {
    background-color: var(--brand_purple); 
    color: var(--white);
}

.button_white button, .button_white form .button {
    background-color: var(--white); 
    color: var(--blue);
}

.button_gradient button, .button_gradient form .button {
    background: linear-gradient(150deg, var(--orange) 0%, var(--bright_pink) 100%);
    color: var(--white);
}

.button_full {
    width: 100%;
}

.button_magenta form .button {
    padding:20px;
}

.button_blue form .button {
    padding:20px;
}

.button_purple form .button {
    padding:20px;
}

.button_brand_purple form .button{
    padding:20px;
}

.button_white form .button {
    padding:20px;
}

.button_gradient form .button {
    padding:20px;
}


/*Keap Form All*/
.keap button {
    border-radius:5px; 
    width:100%;
    font-weight:500;
    padding:15px;
}

.keap label {
    font-weight:500; letter-spacing:.5px;
}

.keap .infusion-field {
    padding-bottom:10px;
    width:100%;
    font-weight:500;
    
}
.keap .infusion-checkbox {
    display:flex;
    vertical-align:middle;
    align-items: baseline;
    
}

.keap .infusion-checkbox label {
    font-weight:400;
    padding-left:5px;
    font-size:0.9rem;
    line-height:1.4em;
}

.keap .infusion-radio label {
    font-weight:400;
    padding-right:10px;
    
}

.keap .infusion-option {display:flex;
    vertical-align:middle;
    align-items: baseline;
}

.keap .infusion-option label {
    font-weight:400;
    padding-left:5px;}

.keap .infusion-field:not(.form_hide_labels) input::placeholder, .keap .infusion-field:not(.form_hide_labels) textarea::placeholder  {
         visibility: hidden;
    }



/*Keap Form Text and Other Span Accent Text */
/* Keap Form Text and Other Span Accent Text */
.white .infusion-field, .white {
    color: var(--white);
}

.white .infusion-field a, .white a {
    color: var(--white);
    text-decoration:underline;
}

.blue .infusion-field, .blue {
    color: var(--blue);
}

.magenta .infusion-field, .magenta {
    color: var(--magenta);
}

.purple .infusion-field, .purple {
    color: var(--purple);
}

.brand_purple .infusion-field, .brand_purple {
    color: var(--brand_purple);
}



.form_hide_labels .infusion-field label:not([for="inf_option_IncludemeinPractitionerLocator"],  [for="inf_option_AreyouaHealthWellnessProfessional"], .infusion-option label, .infusion-checkbox label) {
    display:none
}

.form_hide_labels .infusion-field input::placeholder {
  visibility: visible !important;
}



/*Keap Form Fields Backgrounds*/
.background_white .infusion-field input, .background_white .infusion-field textarea, .background_white input {
    border:1px #cccfd9 solid;
    background-color:var(--white);
}

.background_purple .infusion-field input, .background_purple .infusion-field textarea, .background_purple input {
    border:1px #cccfd9 solid;
    background-color:var(--purple);
}

.background_brand_purple .infusion-field input, .background_brand_purple .infusion-field textarea, .background_brand_purple input {
    border:1px #cccfd9 solid;
    background-color:var(--brand_purple);
}
   
.background_lavender .infusion-field input, .background_lavender .infusion-field textarea, .background_lavender input {
    border:1px #cccfd9 solid;
    background-color:var(--lavender);
}   
   
.background_gray .infusion-field input, .background_gray .infusion-field textarea, .background_gray input {
    border: 1px #cccfd9 solid;
    background-color: var(--gray);  /* Updated to use the variable */
}

.background_blue .infusion-field ::placeholder {
    color: var(--blue);
}

.background_purple .infusion-field ::placeholder {
    color: var(--white);
}

.background_brand_purple .infusion-field ::placeholder {
    color: var(--white);
}

/*Style Woo Reviews*/
.comment-text {

    border: 1px solid #e1dde7;
    border-radius: 4px;
    padding: 1em 1em 0;
}
.woocommerce-Review {
    margin-bottom: 20px;
}
.comment-heading-div {
    display:flex;
    flex-direction:row;
    justify-content: space-between;

}

.woocommerce-review__author {
    font-size: 1rem;
    color:black;
    text-transform: capitalize;
}

.woocommerce-review__dash {
    display:none;
}

.woocommerce-review__published-date {
    display:none;
}

.avatar {
    display:none;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
    margin: 0;
}

.woocommerce-Reviews-title {
    display:none;
}

.woocommerce-review_author strong {
    font-size: 1rem;
    color: black;

}

 ol.commentlist {
    padding: 0;
}