/*
=================================================================
== Phia Energy Survey - Definitive Stylesheet v3.3.0
== FINAL VERSION: Arabic Sparkles & RTL Fully Fixed
=================================================================
*/

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

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

#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;
}

/* Language Options Container */
.pes-lang-options {
  display: block;
  max-width: 1100px;
  margin: 30px auto;
  text-align: left;
}

.pes-lang-options .option {
    display: block;
    margin-bottom: 10px;
}

#pes-intro-block .button-wrapper {
    max-width: 1100px;
    margin: 20px auto;
    text-align: left;
}

.pes-lang-options .option label {
  width: 100%;
  max-width: 250px;
}

/* --- 3. Personal Details Form --- */
.pes-details-block {
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
}

.pes-details-block h2 {
    text-align: center;
    font-size: 3rem;
    font-weight: 500;
}

.pes-details-block .form-wrapper {
    text-align: left;
}

.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;
    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;
    margin: 0 auto;
    text-align: left;
}

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

.pes-question .progress {
  width: 100%;
  max-width: 400px;
  height: 6px;
  background: #e1e4e8;
  border-radius: 3px;
  overflow: hidden;
  margin: 10px 0 20px 0;
}

.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);
  justify-content: start;
  gap: 15px;
  margin-top: 20px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
}

.pes-question .button-wrapper {
    text-align: left;
}

/* --- 5. Custom Radio Buttons & Animations (Default LTR) --- */
#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;
}

/* Default LTR Animation Positioning */
#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;
  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 --- */
#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; }

/* 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; }
}

/* =========================================================================
   RTL (Arabic) Specific Overrides - CORRECTED SELECTORS
   ========================================================================= */

/* 1. Set Global Direction */
[data-lang="ar"] {
    direction: rtl;
    text-align: right;
}

[data-lang="ar"] .pes-question {
    text-align: right;
}

/* 2. Flip the Grid for Radio Buttons 
   The radio button (20px) moves to the RIGHT column.
*/
[data-lang="ar"] .option label {
    grid-template-columns: 20px auto;
    text-align: right;
}

/* 3. CRITICAL FIX: Flip Bubble/Sparkle Position
   Target the 'label:before' INSIDE the Arabic wrapper (#energy-app [data-lang="ar"]).
   This overrides the default LTR positioning.
*/
#energy-app [data-lang="ar"] label:before,
#energy-app [data-lang="ar"] label:after {
    left: auto !important;
    right: 29px !important; 
    transform-origin: center center;
}

/* 4. Fix Image-based Answers (if any) */
[data-lang="ar"] label.has-image {
    grid-template-columns: 20px 42px auto; 
}

/* 5. Flip Progress Bar alignment */
[data-lang="ar"] .progress {
    margin: 10px 0 20px auto;
}

/* 6. Align Buttons to the Right */
[data-lang="ar"] .button-wrapper {
    text-align: right;
}

/* 7. Fix Personal Details Form Inputs in RTL */
/* Targeted by ID and class to ensure it applies */
#pes-details-block-ar .form-wrapper input,
[data-lang="ar"] .pes-details-block .form-wrapper input {
    text-align: right;
    direction: rtl;
}

/* 8. Fix Intro List Indentation (Zigzag fix) */
[data-lang="ar"] ul {
    padding-left: 0;   
    padding-right: 20px; 
    list-style-position: inside; 
}

[data-lang="ar"] ul li {
    text-align: right;
    margin-bottom: 5px;
}