/*
=================================================================
== Phia Energy Survey - Definitive Stylesheet v3.0.0
== This is the final and correct CSS for the front-end survey.
=================================================================
*/
/* Past this commented Energy Fit block in themes css */
/* Energy Fit start */

/* #energy-app .survey-main-title{
  font-family: 'Raleway', sans-serif;
  font-size: 48px;
  font-weight: 200;
  color: #9e8844;
  text-align: center;
  margin-bottom: 30px;
} */

/* Energy Fit End */

/* --- 1. Global Scoping and Centering --- */
#fit {
  font-family: 'Raleway', sans-serif;
}

#energy-app {
  text-align: center;
}

/* This is the master centering rule */
#energy-app h2 {
  font-size: 2.5rem;
  font-weight: 300;
  margin: 20px 0 30px 0;
}

#energy-app p,
#energy-app li {
  font-size: 1rem;
  line-height: 1.6;
}

/* --- 2. Intro Block --- */
#pes-intro-block p,
#pes-intro-block ul {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

#pes-intro-block ul {
  list-style-position: inside;
}

/* --- THIS IS THE FIX for Language and Button Alignment --- */
.pes-lang-options {
  display: block; /* Force the container to be a block */
  max-width: 1100px;
  margin: 30px auto;
  text-align: left;
}

.pes-lang-options .option {
    display: block; /* Force each option onto its own line */
    margin-bottom: 10px; /* Add some space between the options */
}

/* We create a wrapper for the button to control its alignment */
#pes-intro-block .button-wrapper {
    max-width: 1100px;
    margin: 20px auto;
    text-align: left;
}

.pes-lang-options .option label {
  width: 100%;
  max-width: 250px; /* Give it a max-width for a clean look */
}



/* --- 3. Personal Details Form (Corrected) --- */

/* This targets BOTH the English and Japanese form blocks */
.pes-details-block {
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
}

.pes-details-block h2 {
    text-align: center; /* Center the main heading */
    font-size: 3rem;
    font-weight: 500;
}

/* This targets the wrapper inside each form block */
.pes-details-block .form-wrapper {
    text-align: left;
}

/* Be very specific about the labels inside this section */
.pes-details-block .form-wrapper label.form {
    display: block;
    background-color: transparent;
    border: none;
    padding: 0;
    margin-bottom: 10px;
    font-size: 1.5rem;
    font-weight: 400;
    cursor: default;
    grid-template-columns: none;
    min-height: auto;
}

.pes-details-block .form-wrapper label.form:hover {
    background-color: transparent; /* Remove hover effect */
    border: none;
}

.pes-details-block .form-wrapper input[type="text"],
.pes-details-block .form-wrapper input[type="email"] {
    width: 100%;
    height: 3rem;
    padding: 0px 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 20px;
}

.pes-details-block .button-wrapper {
    text-align: center;
}
/* --- 4. Question Layout & Progress Bar --- */
.pes-question {
    max-width: 1000px; /* Set a max-width for the content */
    margin: 0 auto; /* Center the container on the page */
    text-align: left; /* Align all text inside to the left */
}

.pes-question h4 {
  font-size: 1.5rem;
  font-weight: 400;
  color: #888;
}

.pes-question .progress {
  width: 100%;
  max-width: 400px; /* This can remain the same */
  height: 6px;
  background: #e1e4e8;
  border-radius: 3px;
  overflow: hidden;
  margin: 10px 0 20px 0; /* Changed from 'auto' to '0' to left-align */
}

.pes-question .progress-bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffd33d, #ea4aaa 17%, #b34bff 34%, #01feff 51%, #ffd33d 68%, #ea4aaa 85%, #b34bff);
  background-size: 300% 100%;
  animation: progress-animation 3s linear infinite;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Force 3 columns */
  justify-content: start; /* Align the grid itself to the left */
  gap: 15px;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* On smaller screens (tablets and below), stack to 2 columns */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* On mobile screens, stack to 1 column */
@media (max-width: 500px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
}

/* Align the 'Continue' button to the left */
.pes-question .button-wrapper {
    text-align: left;
}

/* --- 5. Custom Radio Buttons & Animations (The Complete, Corrected Version) --- */
#energy-app [type="radio"] {
  z-index: -1;
  position: absolute;
  opacity: 0;
}

#energy-app [type="radio"]:checked~label {
  border-color: #4062f6;
  background-color: rgba(97, 154, 234, 0.16);
}

#energy-app [type="radio"]:checked~label:before {
  will-change: transform, border-width, border-color;
  animation: bubble 1s ease-in;
}

#energy-app [type="radio"]:checked~label:after {
  will-change: opacity, box-shadow;
  animation: sparkles 700ms ease-in-out;
}

#energy-app [type="radio"]:checked~label>span.radio-button {
  border: 0;
  background-image: linear-gradient(to top right, #6e89ff, #4363ee);
  animation: radio 400ms cubic-bezier(0.17, 0.89, 0.32, 1.49);
}

#energy-app [type="radio"]:checked~label>span.radio-button:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 10px;
  background-color: #fff;
}

#energy-app .option label {
  position: relative;
  display: grid;
  align-items: center;
  grid-template-columns: 20px auto;
  grid-gap: 15px;
  width: 100%;
  min-height: 62px;
  padding: 8px 20px;
  border-radius: 6px;
  border: 2px solid #fff;
  background-color: #fff;
  transition: all 200ms ease-in;
  line-height: 1.2;
  text-align: left;
  box-sizing: border-box;
  cursor: pointer;
}

#energy-app label.has-image {
  grid-template-columns: 20px 42px auto;
}

#energy-app label.has-image img {
  width: 42px;
  height: 42px;
}

#energy-app .option label:hover {
  border-color: #4062f6;
  background-color: rgba(97, 154, 234, 0.16);
}

#energy-app label>span.radio-button {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  border: 2px solid #888;
}

#energy-app label:before,
#energy-app label:after {
  position: absolute;
  left: 29px;
  border-radius: 50%;
  content: "";
}

#energy-app label:before {
  margin: -2rem;
  border: solid 2rem #545461;
  width: 4rem;
  height: 4rem;
  transform: scale(0);
}

#energy-app label:after {
  margin: -0.1875rem;
  width: 0.375rem;
  height: 0.375rem;
  box-shadow: 0.32476rem -2.6875rem 0 -0.1875rem #ff8080, -0.32476rem -2.3125rem 0 -0.1875rem #ffed80, 2.30366rem -1.42172rem 0 -0.1875rem #ffed80, 1.6055rem -1.69573rem 0 -0.1875rem #a4ff80, 2.54785rem 0.91464rem 0 -0.1875rem #a4ff80, 2.32679rem 0.19796rem 0 -0.1875rem #80ffc8, 0.87346rem 2.56226rem 0 -0.1875rem #80ffc8, 1.29595rem 1.94258rem 0 -0.1875rem #80c8ff, -1.45866rem 2.28045rem 0 -0.1875rem #80c8ff, -0.71076rem 2.2244rem 0 -0.1875rem #a480ff, -2.69238rem 0.28141rem 0 -0.1875rem #a480ff, -2.18226rem 0.8312rem 0 -0.1875rem #ff80ed, -1.89869rem -1.92954rem 0 -0.1875rem #ff80ed, -2.01047rem -1.18791rem 0 -0.1875rem #ff8080;
}

/* --- 6. Universal Button Style --- */
#energy-app button {
  background-color: #9E8844;
  color: #ffffff !important;
  border: none;
  padding: 12px 35px;
  font-size: 16px;
  font-weight: normal;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 0; /* Remove top margin */
  transition: background-color 0.3s ease;
}

#energy-app button:hover {
  background-color: #d2b55b;
}

#energy-app button:disabled {
  background-color: #c8c8c8;
  cursor: not-allowed;
}

/* --- 7. Result Page Layout & Colors (Corrected for Specificity) --- */
#energy-app .recommendation-container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
  max-width: 900px;
  margin: 40px auto;
  text-align: left;
}

#energy-app .energy-fit-column,
#energy-app .shop-column {
  flex: 1;
  min-width: 280px;
}

#energy-app h2.fit-recommendation-header {
  margin-top: 0;
  margin-bottom: 20px;
  font-weight: 300;
  font-size: 2rem;
}

#energy-app p.fit-recommendation {
  margin: 0;
  padding: 0;
  line-height: 1.4;
}

#energy-app p.fit-recommendation-and {
  margin: 15px 0;
}

#energy-app .fit-recommendation {
  font-weight: bold;
}

#energy-app .fit-recommendation.quantity {
  margin-top: 16px;
}

#energy-app .fit-recommendation.category {
  font-size: 20px;
}

#energy-app .fit-recommendation.large {
  font-size: 24px;
}

#energy-app .fit-recommendation.grounding,
#energy-app a.fit-recommendation.grounding {
  color: #9e2424;
}

#energy-app .fit-recommendation.adventure,
#energy-app a.fit-recommendation.adventure {
  color: #ee7722;
}

#energy-app .fit-recommendation.focus,
#energy-app a.fit-recommendation.focus {
  color: #a4c539;
}

#energy-app .fit-recommendation.balance,
#energy-app a.fit-recommendation.balance {
  color: #418370;
}

#energy-app .fit-recommendation.imagination,
#energy-app a.fit-recommendation.imagination {
  color: #6e6196;
}

#energy-app .fit-recommendation.charisma,
#energy-app a.fit-recommendation.charisma {
  color: #b72978;
}

/* --- NEW: No Results Message Styling --- */
#energy-app .no-profile-message-container {
    text-align: center;
    display: block; 
}
#energy-app .no-profile-message-container h2 {
    max-width: 600px; 
    color: #9E8844;
    font-weight: 400;
    margin-left: auto;
    margin-right: auto;
}

#energy-app .no-profile-message-container p {
    max-width: 600px; 
    margin-left: auto;
    margin-right: auto;
}

/* --- 8. All Animations --- */
@keyframes progress-animation {
  0% {
    background-position: 100%;
  }

  100% {
    background-position: 0;
  }
}

@keyframes radio {

  0%,
  17.5% {
    transform: scale(0);
  }
}

@keyframes bubble {
  15% {
    transform: scale(1);
    border-color: #545461;
    border-width: 0;
  }

  30%,
  100% {
    transform: scale(1);
    border-color: #545461;
    border-width: 0;
  }
}

@keyframes sparkles {

  0%,
  10% {
    opacity: 0;
    transform: scale(0);
  }

  15% {
    opacity: 1;
    transform: scale(1.2) rotate(-20deg);
    box-shadow: 0.32476rem -2.1875rem 0 0rem #ff8080, -0.32476rem -1.8125rem 0 0rem #ffed80, 1.91274rem -1.10998rem 0 0rem #ffed80, 1.21459rem -1.38398rem 0 0rem #a4ff80, 2.06039rem 0.80338rem 0 0rem #a4ff80, 1.83932rem 0.0867rem 0 0rem #80ffc8, 0.65652rem 2.11178rem 0 0rem #80ffc8, 1.07901rem 1.4921rem 0 0rem #80c8ff, -1.24172rem 1.82996rem 0 0rem #80c8ff, -0.49382rem 1.77391rem 0 0rem #a480ff, -2.20492rem 0.17015rem 0 0rem #a480ff, -1.69479rem 0.71994rem 0 0rem #ff80ed, -1.50777rem -1.61779rem 0 0rem #ff80ed, -1.61955rem -0.87617rem 0 0rem #ff8080;
  }
}