/*
Theme Name: Shoptimizer Child Theme
Theme URI: 
Description: Child theme of Shoptimizer
Author: CommerceGurus
Author URI: 
Template: shoptimizer
Version: 1.2.2
License:         	GNU General Public License v2 or later
License URI:     	http://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
  --fruity-color: #F45648;
  --chocolate-color: #9E7639;
  --nuts-color: #C2995C;
  --spice-color: #F78100;
  --citrus-color: #F4D848;
  --floral-color: #FFAE05;
  --winey-color: #6F85C2;
  --darkroast-color: #88684C;
  --mediumroast-color: #BE9877;
  --lightroast-color: #FDEDDF;
  --light-bg-color: #FFFBF7;
}

.light-bg {
  background-color: var(--light-bg-color);
  padding: 5rem;
}

.coffee-flavor-profile {
  transition: background-color 1s;
  background-color: #fff;
  padding: 10px;
  }

.coffee-flavor-profile.darken {
  background-color: #aaa;
}

.coffee-flavor-profile .bar-item {
  display: grid;
  align-items: center;
  grid-column: auto;
  gap: 10px;
  grid-template-columns: 80px auto;
}

.coffee-flavor-profile .bar-item .flavor-label {
  text-transform: capitalize;
}

.coffee-flavor-profile .bar > div {
  transition: width 1s 500ms ease-in-out;
  background-color: red;
  display: block;
  height: 100%;
}

.coffee-flavor-profile .bar {
  width: 100%;
  height: 2rem;
  display: flex;
  align-items: center;
  background-color: #f4f4f4;
  border-radius: 999px;
  overflow: hidden;
}

.coffee-flavor-profile .bar > .none { width: 0%;  }
.coffee-flavor-profile .bar > .low  { width: 25%; }
.coffee-flavor-profile .bar > .mid  { width: 50%; }
.coffee-flavor-profile .bar > .high { width: 100%;}

.coffee-flavor-profile .bar > .fruity { background-color: var(--fruity-color);  }
.coffee-flavor-profile .bar > .chocolate { background-color: var(--chocolate-color);  }
.coffee-flavor-profile .bar > .nuts { background-color: var(--nuts-color);  }
.coffee-flavor-profile .bar > .spice { background-color: var(--spice-color);  }
.coffee-flavor-profile .bar > .citrus { background-color: var(--citrus-color);  }
.coffee-flavor-profile .bar > .floral { background-color: var(--floral-color);  }
.coffee-flavor-profile .bar > .winey { background-color: var(--winey-color);  }

#roast-level {
  display: flex;
  width: 100%;
  gap: 1rem;
}

#roast-level label {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#roast-level input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  margin: 0;
}
#roast-level label > div {
  width: 100%;
  display:flex;
  gap: 0.25rem;
}
#roast-level label div div {
  filter: grayscale(100%);
  transition: filter 1s ease-in-out;
}
#roast-level label div div {
  height: 0.5rem;
  width: 100%;
  border-radius: 1.5rem;
  margin-bottom: 0.25rem;
  display: block;
}

#roast-level .light > div { background-color: var(--lightroast-color); }
#roast-level .medium > div { background-color: var(--mediumroast-color); }
#roast-level .dark > div { background-color: var(--darkroast-color); }

#roast-level label {
  text-align: center;
}

#roast-level label:focus-within div,
#roast-level input[type="radio"]:checked + div div {
  color: CanvasText;
  filter: grayscale(0%);
}