/********************************************************************************
 * Merged CSS File
 * Combines detailstyles.css and styles.css ensuring that all features work as before.
 ********************************************************************************/

/*--------------------------------------
  Global Reset and Base Styles
----------------------------------------*/
body, html {
    margin: 0;
    padding: 0;
    font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
}
body {
  margin: 0 !important;
  padding: 0 !important;
  /*    padding-top: 60px;*/
    color: #333;
}

html {
    scroll-behavior: smooth;
  }

/*--------------------------------------
  Section Element Base Styles (detailstyles.css)
----------------------------------------*/
section {
    padding: 50px 20px;
    text-align: center;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax effect on larger screens */
}

/*--------------------------------------
  Specific Section Backgrounds & Positioning (detailstyles.css)
----------------------------------------*/
/* Centering for new journey sections */
#intro,
#section0,
#section1,
#section2,
#section3,
#section4,
#section5,
#section6,
#section7,
#section7-1,
#section7-2,
#section7-3,
#section7-4 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Timeline & Map Sections */
#timeline {
    background-image: url('https://happycamp.blob.core.windows.net/images/project_sec1-bg.webp');
}
#happycamp-map {
    background-image: url('https://happycamp.blob.core.windows.net/images/happycamp-map-bg.webp');
}

/* Area Section */
#area-section {
    background-image: url('https://happycamp.blob.core.windows.net/images/background_photos2.webp');
    background-size: cover;
    background-position: center;
    padding: 50px 0;
}
.area {
    max-width: 1920px;
    margin: 20px auto;
    text-align: center;
  }
.area img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.area h2 {
    font-weight: 700;                 /* bolder text */
    color: #fff;                      /* white text color */
    background-color: rgba(0, 0, 0, 0.5); /* black at 50% opacity */
    padding: 10px 20px;               /* some spacing around the text */
    display: inline-block;            /* background only spans the text, not the full width */
    border-radius: 5px;               /* optional rounded corners */
  }


/* New Happy Camp Journey Sections */
#intro {
    background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/introa-big.webp');
}
#section0 {
    background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/section0-big.webp');
}
#section1 {
    background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/section1-big.webp');
}
#section2 {
    background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/section2-big.webp');
}
#section3 {
    background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/section3p-big.webp');
}
#section4 {
    background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/section4c-big.webp');
}
#section5 {
    background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/section5a-big.webp');
}
#section6 {
    background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/section6-big.webp');
}
#section7 {
    background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/section7a-big.webp');
}
/* Sub-sections for Section 7 */
#section7-1 {
    background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/section71a-big.webp');
}
#section7-2 {
    background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/section72a-big.webp');
}
#section7-3 {
    background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/section73-big.webp');
}
#section7-4 {
    background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/section74a-big.webp');
}

/*--------------------------------------
  Responsive Background Image Switching (detailstyles.css)
----------------------------------------*/
@media (max-width: 768px) {
    #intro {
      background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/introa-small.webp');
    }
    #section0 {
      background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/section0-small.webp');
    }
    #section1 {
      background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/section1-small.webp');
    }
    #section2 {
      background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/section2-small.webp');
    }
    #section3 {
      background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/section3p-small.webp');
    }
    #section4 {
      background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/section4c-small.webp');
    }
    #section5 {
      background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/section5a-small.webp');
    }
    #section6 {
      background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/section6-small.webp');
    }
    #section7 {
      background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/section7a-small.webp');
    }
    /* Sub-sections for Section 7 */
    #section7-1 {
      background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/section71a-small.webp');
    }
    #section7-2 {
      background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/section72a-small.webp');
    }
    #section7-3 {
      background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/section73-small.webp');
    }
    #section7-4 {
      background-image: url('https://happycamp.blob.core.windows.net/images/howitworks/section74a-small.webp');
    }
}

/*--------------------------------------
  Content Overlay & Typography (detailstyles.css)
----------------------------------------*/
.content-overlay {
    background: rgba(255, 255, 255, 0.85);
    padding: 30px;
    border-radius: 8px;
    max-width: 800px;
    width: 90%;
}
h1, h2, h3 {
    margin: 0 0 20px;
    font-weight: bold;
}
p {
    line-height: 1.6;
    margin-bottom: 20px;
}

/*--------------------------------------
  Button Styling (Journey Buttons & Others)
----------------------------------------*/
.journey-buttons {
    margin-top: 20px;
}
.journey-button {
    display: inline-block;
    margin: 10px;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}
.journey-button:hover {
    background-color: #0056b3;
}

/*--------------------------------------
  Milestone Cards, Modal & Details (detailstyles.css)
----------------------------------------*/
.milestone {
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    border-radius: 8px;
    padding: 20px;
    margin: 20px auto;
    max-width: 700px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.milestone h3 {
    margin-bottom: 10px;
    font-size: 1.5rem;
}
.milestone button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.3s;
}
.milestone button:hover {
    background-color: #0056b3;
}
.details {
    display: none;
    margin-top: 10px;
    text-align: left;
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 5px;
}
.details.expanded {
    display: block;
}

/* Modal Styling */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
}
.modal-content {
    background-color: #f9f9f9;
    color: #333;
    margin: 15% auto;
    padding: 20px;
    border-radius: 10px;
    width: 80%;
    max-width: 600px;
    text-align: center;
    position: relative;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
}
.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #333;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    background: none;
    border: none;
}
.modal-close:hover,
.modal-close:focus {
    color: red;
    text-decoration: none;
}
.modal.show {
    display: block;
}

/*--------------------------------------
  Interactive Map (detailstyles.css)
----------------------------------------*/
#interactive-map {
    display: block;
    width: 100% !important; 
    height: auto;
    max-width: 100% !important; 
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
    #interactive-map {
        width: 100vw;
        height: auto;
    }
}
@media only screen and (max-width: 768px) {
    #interactive-map {
        width: 100% !important;
        height: auto !important;
    }
}

/*--------------------------------------
  Responsive Adjustments for Sections (detailstyles.css)
----------------------------------------*/
@media (max-width: 768px) {
    section {
        background-attachment: scroll;
        padding: 30px 10px;
    }
    .content-overlay {
        padding: 20px;
    }
}

/*--------------------------------------
  Iframe Container for Embedded Sections (detailstyles.css)
----------------------------------------*/
.iframe-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  min-height: 330px;
  border-radius: 8px;
  overflow: hidden;
}
.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
}

/*--------------------------------------
  Rythm and Timing Sections Backgrounds (detailstyles.css)
----------------------------------------*/
#rythmsection1 {
  background-image: url('https://happycamp.blob.core.windows.net/images/rythmntiming/rythmntiming-sec1a.webp');
}
#rythmsection2 {
  background-image: url('https://happycamp.blob.core.windows.net/images/rythmntiming/rythmntiming-sec2.webp');
}
#rythmsection3 {
  background-image: url('https://happycamp.blob.core.windows.net/images/rythmntiming/rythmntiming-sec3.webp');
}
/* Global styling for sections (if not already applied) */
section {
  padding: 50px 20px;
  text-align: center;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
/* New topic blocks */
.rythm-topic {
  background-color: rgba(255, 255, 255, 0.9);
  color: #333;
  border-radius: 8px;
  padding: 20px;
  margin: 20px auto;
  max-width: 700px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.rythm-topic h3 {
  margin-bottom: 10px;
  font-size: 1.5rem;
}

/* Specific h1 styles for rythm sections */
#rythmsection1 h1 {
  font-size: 2rem;
  font-weight: bold;
  color: #f4f8f7;
  text-align: center;
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}
#rythmsection2 h1 {
  font-size: 2rem;
  font-weight: bold;
  color: #D4C1A1;
  text-align: center;
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}
#rythmsection3 h1 {
  font-size: 2rem;
  font-weight: bold;
  color: #EED8AE;
  text-align: center;
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

/*--------------------------------------
  Video Section & Text Overlay (styles.css)
----------------------------------------*/
/* Video Section */
.video-section {
    position: relative;
    height: 100vh;
    overflow: hidden;
}
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Text Overlay */
.text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    padding: 30px;
    border-radius: 10px;
    font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
}
.text-overlay h1,
.text-overlay h2 {
    font-size: 3rem;
    font-weight: bold;
}
.text-overlay p {
    font-size: 1.5rem;
    line-height: 1.8;
}
/* Responsive adjustments for text overlay */
@media (max-width: 768px) {
    .text-overlay {
        padding: 20px;
    }
    .text-overlay h1,
    .text-overlay h2 {
        font-size: 2rem;
    }
    .text-overlay p {
        font-size: 1.5rem;
        line-height: 1.8;
    }
}
@media (max-width: 480px) {
    .text-overlay {
        padding: 7px;
    }
    .text-overlay h1,
    .text-overlay h2 {
        font-size: 1.2rem;
    }
    .text-overlay p {
        font-size: 1.0rem;
        line-height: 1.3;
    }
}

/*--------------------------------------
  Additional Section Styles (styles.css)
----------------------------------------*/
/* Generic section classes */
.section {
    padding: 50px 20px;
    text-align: center;
    color: white;
}
.about-me-section {
    background-color: #222;
}
.philosophy-section {
    background-color: #333;
}
.how-it-works-section {
    background-color: #444;
}
.mind-section {
    background-color: #555;
}
.nutrition-section {
    background-color: #666;
}
.exercise-section {
    background-color: #777;
}
.section h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}
.section p {
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* Final Section */
.final-section {
    position: relative;
    height: 100vh;
    text-align: center;
    background-image: url('https://happycamp.blob.core.windows.net/images/final-section-bg.webp');
    background-size: cover;
    background-position: top;
    color: white;
    font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.final-content {
    max-width: 800px;
}
.final-content h2 {
    font-size: 2.5rem;
    margin-bottom: 30px;
}
.options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}
.button {
    display: inline-block;
    padding: 15px 25px;
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    border: 2px solid white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.2rem;
    font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
    transition: background-color 0.3s, color 0.3s;
}
.button:hover {
    background-color: white;
    color: black;
}

/*--------------------------------------
  Footer Styles (common to both files)
----------------------------------------*/
footer {
  background-color: #222;
  color: #fff;
  text-align: center;
  padding: 30px 0;
  border-top: 1px solid #444;
  font-size: 1rem;
}
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
.footer-container p {
  margin: 0;
}
.footer-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.footer-container ul li {
  margin: 0;
}
.footer-container ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}
.footer-container ul li a:hover {
  color: #ccc;
}
@media (min-width: 768px) {
  .footer-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/*--------------------------------------
  Navigation Bar & Dropdown (merged from both files)
----------------------------------------*/
nav {

    background-color: rgba(51, 51, 51, 0.8);
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
}
.nav-links {
  order: 1;
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.nav-links li {
  position: relative;
  margin: 0 15px;
}
.nav-links li a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  padding: 8px 12px;
  transition: color 0.3s;
  white-space: nowrap;
}
.nav-links li a:hover {
  color: #ccc;
}

.nav-button.subscribe-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.nav-button.subscribe-btn svg {
  width: 24px;
  height: 24px;
  fill: #fff; /* Adjust icon color as needed */
  transition: fill 0.3s ease;
}

.nav-button.subscribe-btn:hover svg {
  fill: #59f148; /* Change to your preferred hover color */
}

/* Dropdown Menu */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #444;
  list-style: none;
  padding: 10px 0;
  margin: 0;
  min-width: 180px;
  z-index: 1000;
}
.dropdown-menu li a {
  display: block;
  color: #fff;
  padding: 8px 20px;
  text-decoration: none;
  transition: background-color 0.3s;
  white-space: nowrap;
}
.dropdown-menu li a:hover {
  background-color: #555;
}
/* Show dropdown on hover for desktop */
.nav-links li.dropdown:hover > .dropdown-menu {
  display: block;
}
.dropdown-toggle {
    display: inline-block;    /* or block if you prefer */
    width: auto;             
    padding: 8px 12px;       
    line-height: 1.4;         /* ensures enough space if text wraps */
    cursor: pointer;          
  }
  
/* Responsive Navigation for Mobile */
.menu-toggle {
    order: 2;
    margin-left: auto;
    font-size: 2rem;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    display: none;
}
@media (max-width: 1024px) {
  .menu-toggle {
      display: block !important;
  }
  .nav-links {
      display: none;
  }
  .nav-links.active {
      display: flex;
      flex-direction: column;
      width: 100%;
      background-color: rgba(51, 51, 51, 0.9);
      position: absolute;
      top: 60px;
      left: 0;
      z-index: 999;
  }
  .nav-links li {
      margin: 10px 0;
  }
  .dropdown-menu {
      position: static;
      background-color: rgba(51, 51, 51, 0.9);
  }
  .dropdown-menu li a {
      padding: 8px 12px;
  }
  .nav-button.subscribe-btn {
    padding: 10px;
  }
}
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
    position: absolute;
    right: 20px;
    top: 15px;
    z-index: 10001;
  }
  .nav-links {
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: rgba(51, 51, 51, 0.8);
    display: none;
  }
  .nav-links.active {
    display: flex;
  }
  .nav-button.subscribe-btn {
    padding: 10px;
  }
  .dropdown-menu {
      position: relative;
      width: 100%;
      background-color: rgba(51, 51, 51, 0.9);
      padding: 10px 0;
      text-align: left;
  }
}

/* About Me Page Styles */
.about-container {
  background: url('https://happycamp.blob.core.windows.net/images/aboutme_1920x1080.webp') no-repeat center center fixed;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
  min-height: 100vh;
}

/* About Me Page Styles */
.suscribe-container {
  background: url('https://happycamp.blob.core.windows.net/images/subscriptionHC_bg.webp') no-repeat center center fixed;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
  min-height: 100vh;
}

.content-overlay {
  background: rgba(0, 0, 0, 0.7); /* Semi-transparent background for readability */
  padding: 40px;
  max-width: 800px;
  border-radius: 10px;
  color: white;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  .content-overlay {
      padding: 20px;
      max-width: 90%;
  }
}

/* Legal Notice Page Styles */
.legal-container {
  background: url('https://happycamp.blob.core.windows.net/images/legal%20notice_1920x1080.webp') no-repeat center center fixed;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
  min-height: 100vh;
}

.content-overlay {
  background: rgba(0, 0, 0, 0.7); /* Semi-transparent background for readability */
  padding: 40px;
  max-width: 800px;
  border-radius: 10px;
  color: white;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  .content-overlay {
      padding: 20px;
      max-width: 90%;
  }
}

/* Style for survey/questionaire sections */
/*====================================================================================================================*/
section[id^="survey_section_"] {
  padding: 50px 20px;
  text-align: center;
  min-height: 100vh;
  background-color: #f8f8f8;  /* Light gray background */
  background-size: cover;
  background-position: center;
  display: none;
  align-items: flex-start;
  justify-content: center;
}
section::before {
  content: "";
  display: block;
  height: 70px; /* height of the navbar */
  margin-top: -70px;
}
/* Content overlay within each survey section */
section[id^="survey_section_"] .content-overlay {
  background: rgba(0, 0, 0, 0.7);
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  max-width: 800px;
  margin: 0 auto;
}

/* Navigation buttons container for survey sections */
.survey-nav {
  margin-top: 20px;
}

/* Styling for the survey navigation buttons */
.survey-nav button {
  margin: 0 10px;
  padding: 10px 20px;
  border: none;
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.survey-nav button:hover {
  background-color: #0056b3;
}

/*-----------> Clarity question control <-----------*/
/* ============================= */
/* Question Card Layout          */
/* ============================= */
.question-card {
  background-color: #f9f9f9;      /* Light gray background */
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  margin: 20px 0;
  display: flex;
  align-items: flex-start;
  padding: 20px;
}

/* The circular badge for question number */
.question-number {
  background-color: #007bff;      /* Accent color */
  color: #fff;
  font-size: 1.2rem;
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  margin-right: 15px;
  font-weight: bold;
}

/* Container for the question text and controls */
.question-content {
  flex: 1;   /* Takes up the remaining space */
}

/* Large, bold question text */
.question-title {
  display: block;
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

fieldset {
  border: 2px solid #007bff;
  border-radius: 10px;
  padding: 1em;
  margin-bottom: 1em;
}

legend {
  padding: 0 10px;
  font-weight: bold;
}

/* ============================= */
/* Scale (1-5) Radio Buttons     */
/* ============================= */
.scale {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.scale label {
  background-color: #e2e2ede4;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}

/* On hover, slightly highlight the option */
.scale label:hover {
  background-color: #6a5a0a;
  border-color: #007bff;
}

/* Hide native radio style, so label can be the click target */
.scale input[type="radio"] {
  display: none;
}

/* If you want a "selected" effect, you can add JS that toggles a .selected class. */
.scale label.selected {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

/* ============================= */
/* Navigation Buttons            */
/* ============================= */
.survey-nav {
  margin-top: 20px;
  text-align: center;
}

.survey-nav button {
  padding: 10px 20px;
  margin: 0 10px;
  border: none;
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.survey-nav button:hover {
  background-color: #0056b3;
}

/* ============================= */
/* Text area design              */
/* ============================= */

/* Additional textarea styling within question-card */
.question-card textarea {
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box; /* Ensures padding is counted inside total width */
}

/* ============================= */
/* Options for Multiple Choice   */
/* ============================= */
.options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.options label {
  background-color: #e2e2ede4;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px 15px;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}

/* Hover state */
.options label:hover {
  background-color: #6a5a0a;
  border-color: #007bff;
}

/* Hide native radio buttons */
.options input[type="radio"] {
  display: none;
}

/* Span to wrap option text */
.options label span {
  display: inline-block;
}

/* Selected state for chosen option */
.options label.selected {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

/* Thank You Section */
#thankYouSection,#puzzleResultSection {
  display: none;  /* Hidden by default */
  align-items: flex-start;
  justify-content: center;
  min-height: auto;
  padding: 40px 20px; /* adjust padding as needed */
  background-color: #f8f8f8;
}

#thankYouSection, #puzzleResultSection .content-overlay {
  background: rgba(0, 0, 0, 0.7);
  padding: 40px;
  max-width: 800px;
  margin: 0 auto;
  border-radius: 10px;
  color: #fff;
  text-align: center;
}

/* Tooltip CSS */
.info-icon {
  display: inline-block;
  margin-left: 8px;
  color: #007BFF;
  cursor: pointer;
  position: relative;
  font-weight: bold;
}
.info-icon:focus .tooltip,
.info-icon:hover .tooltip {
  visibility: visible;
  opacity: 1;
}
.tooltip {
  visibility: hidden;
  opacity: 0;
  width: 250px;
  background-color: #333;
  color: #fff;
  text-align: left;
  padding: 8px;
  border-radius: 4px;
  position: absolute;
  bottom: 125%;
  left: 50%;
  margin-left: -125px;
  transition: opacity 0.3s;
  z-index: 10;
  font-size: 14px;
}
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}
.country-select {
  width: 100%;
  padding: 8px 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
}

/* Optional: Enhance appearance on focus */
.country-select:focus {
  outline: none;
  border-color: #007BFF;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}


/* Assistant Section Styles */
.assistant {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  max-width: 800px;
  margin: auto;
}

.assistant h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #007BFF;
}

/* Step guide container */
.assistant-steps .step {
  margin-bottom: 20px;
  text-align: center;
  border-bottom: 2px solid #007BFF;
  padding-bottom: 10px;
}

/* Numbering style for each step */
.step-number {
  font-weight: bold;
  font-size: 1.2rem;
  display: block;
  margin-bottom: 10px;
}

/* Assistant buttons (for steps) – different color than survey button */
.assistant-btn {
  background-color: #28a745; /* Example: Green */
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1.1rem;
  cursor: pointer;
  margin-bottom: 8px;
}
.assistant-btn:hover {
  background-color: #218838;
}

/* Tick icon styling */
.assistant-steps .tick {
  display: none;           /* Hidden until the button is clicked */
  font-size: 1.5rem;
  color: #28a745;          /* Same green as the assistant button hover or a contrasting color */
  margin-left: 10px;
  vertical-align: middle;
}
/* Step description text */
.step-description {
  font-size: 0.95rem;
  color: #555;
  margin: 0;
}

/* Survey start button – styled differently */
.survey-btn {
  background-color: #007bff; /* Example: Blue */
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 5px;
  font-size: 1.2rem;
  cursor: pointer;
  margin-top: 20px;
}
.survey-btn:hover {
  background-color: #0056b3;
}


/*--------------------------------------
  PUZZLE CSS ADDED START
----------------------------------------*/
/* Persistent Puzzle Container */
#persistentPuzzleContainer {
  position: relative;    /* so z-index works properly */
  z-index: 1;            /* ensure it is above any background elements */
  margin-top: 80px;      /* push it below the 60px nav (adjust as needed) */
  width: 50%;
  max-width: 400px;     /* to keep it from stretching too large */
  margin: 20px auto;
  background-color: #fff;           /* <-- White background */
  border: 2px dashed #007bff;       /* dashed border, optional */
  box-shadow: 0 2px 10px rgba(0,0,0,0.15); /* optional subtle shadow */
  /*background-image: url('https://happycamp.blob.core.windows.net/images/question%20mark.webp');*/
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#persistentPuzzleContainer {
  position: relative;
}

.watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: 1rem;
  color: rgba(0, 0, 0, 0.2);  /* subtle appearance */
  pointer-events: none;
  user-select: none;
  text-align: center;
}

.puzzle-text {
  text-align: center;
  font-size: 1.2em;
  padding: 20px;
  margin: 0;
}

/* Puzzle grid and cells remain the same */
.puzzle-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 2px;
}

.puzzle-cell {
  width: 100%;
  padding-top: 75%; /* Adjust as needed for aspect ratio */
  background-color: transparent; /* Now transparent so the question mark shows behind empty cells */
  background-size: 100% 100%;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s;
}

/* Optionally, when a puzzle cell is still empty, you can add a subtle overlay effect */
.puzzle-cell.empty::before {
  content: "?";
  display: block;
  font-size: 2rem;
  color: #007bff;
  text-align: center;
  line-height: 1.5;
}

/* Spinner styling */
.spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #007bff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* For mobile adjustments */
@media (max-width: 768px) {
  #persistentPuzzleContainer {
    width: 90%;
  }
}
/*--------------------------------------
  PUZZLE CSS ADDED END
----------------------------------------*/
body.questionnaire-bg, html.questionnaire-bg {
  height: 100%;
  margin: 0;
  padding: 0;
  background: url('https://happycamp.blob.core.windows.net/images/questionaireshort_bg.webp')
              no-repeat center center fixed;
  background-size: cover;
}

/* Ensure sections on this page are transparent so the background shows through */
body.questionnaire-bg section {
  background: transparent !important;
}

/* Adjust the persistent puzzle container on this page to start below the nav */
body.questionnaire-bg #persistentPuzzleContainer {
  margin-top: 80px; /* Starts 60px from the top so it appears below your fixed nav */
  /* You can also add padding if you need extra spacing */
  /* For example: padding-top: 10px; */
}

.button-container {
  text-align: center;
  margin: 20px 0;
}
.button-item {
  margin-bottom: 20px;
}
.button-link {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007BFF;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  margin-bottom: 5px;
}
.button-link:hover {
  background-color: #0056b3;
}
.explanation {
  font-size: 14px;
  color: #555;
  margin: 0;
}

/* Subscription Page CSS */
/* Subscription Container & Forms */
.legal-container.subscription-page {
  background: url('https://happycamp.blob.core.windows.net/images/subscriptionHC_bg.webp') no-repeat center top fixed;
  background-size: cover;
  padding: 30px 20px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.subscription-page .content-overlay {
  background: rgba(0, 0, 0, 0.7);
  padding: 40px;
  max-width: 800px;
  width: auto;
  margin: 0 auto;
  border-radius: 10px;
  color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  text-align: left;
}

.subscription-page h1 {
  color: #ffffff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  margin-bottom: 20px;
}

.subscription-page hr {
  width: 80%;
  border: none;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.7);
  margin: 10px auto;
}

.subscription-page .form-section {
  margin: 20px auto;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.subscription-page .form-group {
  margin-bottom: 15px;
}

.subscription-page .form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.subscription-page .form-group input {
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

.subscription-page .form-button {
  background-color: #007bff;
  border: none;
  color: #fff;
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.subscription-page .form-button:hover {
  background-color: #0056b3;
}

/* Message Boxes */
.subscription-page .message {
  font-size: 16px;
  padding: 10px;
  border-radius: 5px;
  margin-top: 10px;
}
.subscription-page .message.success {
  color: #155724;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
}
.subscription-page .message.error {
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
}
.subscription-page .message span {
  font-weight: normal;
}

/* Spinner – renamed animation to spinMe */
/* Revised spinner: absolutely positioned in the center of its container */
.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border: 6px solid rgba(0, 0, 0, 0.1);
  border-top-color: #007bff;
  border-radius: 50%;
  animation: spinMe 1s linear infinite;
  z-index: 10;
}

@keyframes spinMe {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Subscription Page CSS */