/*
Primary color: #255464;
Secondary color: #FF6D6A;
tertiary color: #40C1AC;
*/


/*
@media screen and (min-width: 769px) and (max-width: 1280px) {
    body {
        zoom: 90%;                           /* Chrome, Edge, Samsung Internet
    }

    /* Firefox & Safari fallback
    @supports not (zoom: 90%) {
        body {
            transform: scale(0.90);
            transform-origin: top center;
            width: 105.26%;                  /* 1/0.95 to compensate for scale shrink
            margin-left: -2.63%;             /* (105.26% - 100%) / 2 to re-center
        }
    }
}
*/

:root {
  /* Primary color */
  /* --primary-color: #d11c04; */
  --primary-color: #d66a4e;
  /* secondary color */
  --secondary-color: #00cca3;
  /* tertiary shade */
  --tertiary-color: #ff9999;

  /* Mobile selection - dark and light shades*/
  --color-mobile--1: #00ced1;
  --color-mobile--2: #e0ffff;

  /* Smiley face colors */
  --color-darkgreen--1: #26f726;
  --color-lightgreen--1: #96d73a;
  --color-yellow--1: #f7c308ec;
  --color-orange--1: #ffa500;
  --color-red--1: #ff0000;

  /* Shades of black and white */
  --color-dark--1: #000;
  --color-dark--2: #111;
  --color-light--1: #fff;
  --color-light--2: #b3b3b3;

  /* Other colors used - Green tick */
/*  --color-green-tick: #018752; */
/*  --color-red-tick: #c41230; */

  /* Star checking color */
 /*  --color-star-check: #ffde00; */

  --color-green-tick: #FF8C69;
  --color-red-tick: #FF8C69;


  --color-star-check: #FF8C69;


}

* {
  margin: 0;

  padding: 0;

  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  overflow: hidden;       /* change7march*/

 /* overflow-x: hidden;
  overflow-y: auto; */

  /* overflow: scroll; */

  background-color: var(--color-light--1);

  font-family:  'Josefin' sans-serif;

  color: var(--color-dark--1);

  line-height: 1;

  font-weight: 400;

  /*margin-top: 13.8rem;*/
  margin-top: 13.8rem;
}

/* Mobile layout - vertical with boundaries */

.grid-item {
  display: grid;

  grid-template-columns: 1fr 2fr;

  align-items: center;

  justify-items: center;

  border: 2px solid var(--color-dark--1);

  border-radius: 9px;

  transition: all 0.4s ease-in-out;

  width: 70vw;

  /* height: 7vh; */
}

.grid-icon {
  padding: 0.5rem 0;

  font-size: 1.8rem;
}

.grid-tooltip {
  font-size: 2.4rem;

  justify-self: flex-start;

  font-weight: 600;
}

.grid-item:hover {
  transform: scale(1.1);
  border-color: var(--color-mobile--1);
}

.grid-item.select {
  transform: scale(1.1);
}

.grid-item.select:hover {
  transform: scale(1.15);
}

fieldset .grid-item.select {
  border: 4px solid var(--color-mobile--1);

  background-color: var(--color-mobile--2);
}

/********************************/

/* General  */

/********************************/

.grid {
  display: grid;

 /*row-gap: 3.5rem;*/
  row-gap: 2.2rem;

  grid-template-rows: 1fr 2fr 1fr;

  align-items: center;

  height: 60vh;
}

.grid--5-cols {
  grid-template-columns: repeat(5, 1fr);
}

.grid--justifyself-center {
  justify-self: center;
}

.flex-box {
  display: flex;

  margin: 0 2.4rem;
}

.flex-container {
  display: flex;
}

.flex-row {
  display: flex;

  justify-content: space-around;
}

.flex-gap--1rem {
  gap: 1rem;
}

.flex-gap--2rem {
  gap: 2rem;
}

.flex-gap--3rem {
  gap: 3rem;
}

.flex-card {
  width: 32rem;
}

.flex-item {
  display: flex;

  flex-direction: column;
}

.flex-align {
  align-items: center;

  justify-content: center;
}

.radio-check {
  flex: 1;

  text-align: center;
}

.flex-column {
  display: flex;

  flex-direction: column;
}

/* selects elements that have both navbar-text and flex-column */

.navbar-text.flex-column {
  gap: 1.2rem;
}

.radio-check.flex-column {
  gap: 3.4rem;
}

.margin-lg {
 /*  margin: 2rem 3.2rem 16rem 3.2rem;*/
  margin: -2rem 3.2rem 25rem 3.2rem;
}

.margin-md {
  margin: 6.4rem !important;
}

.margin-top-lg {
  margin-top: 14rem !important;
}

.margin-top-md {
  margin-top: 4.8rem !important;
}

.margin-top-sm {
  margin-top: 0px;
}

.margin-x-sm {
  margin: 0 2.4rem !important;
}

.margin-x-md {
  margin: 0 4.8rem !important;
}

.margin-y-md {
  margin: 4.8rem 0 !important;

  /* margin: 1.2rem 0 !important; */
}

.margin-y-sm {
  /* margin: 4.8rem 0 !important; */

  margin: 1.2rem 0 !important;
}

.margin-bottom-sm {
  margin-bottom: 0rem !important;
}

.margin-btm-md {
  margin-bottom: 6.4rem !important;
}

.margin-btm-lg {
  margin-bottom: 12.8rem !important;
}

.padding-x-lg {
  padding: 0 6.4rem;
}

.padding-x-sm {
  padding: 0 2.4rem;
}

.hidden,
.btn-hidden {
  visibility: hidden;

  opacity: 0;

  pointer-events: none;
}

.btn-visible {
  visibility: visible;

  opacity: 1;

  pointer-events: all;
}

.laptop-view {
  visibility: visible;

  opacity: 1;

  pointer-events: all;
}

.mobile-view {
  display: none;
}

/********************************/

/* Nav Bar

/********************************/

.auto-margin {
  /* margin: 1.2rem 3.6rem; */

  margin: 1.2rem 2.4rem;
}

.navbar {
  margin: 0 2.4rem !important;
}

.navbar-brand {
  margin-right: 0;
}

.navbar-logo {
  height: 4rem;

  /* height: 8.6rem; */
}

.navbar-exit-btn {
  font-weight: 600;

  width: 11rem;

  background-color: var(--secondary-color);

  color: var(--color-dark--1);

  text-transform: uppercase;

  font-size: 2rem;

  border: 0 none;

  border-radius: 9rem;

  cursor: pointer;

  padding: 0.5rem 0.5rem;
}

.navbar-exit-btn:hover {
  background-color: var(--tertiary-color);

  width: 11rem;

  padding: 1rem 2rem;


  color: var(--color-dark--1);

  border: 0 none;
}

.navbar-mainheading,
.navbar-secheading {
  text-transform: uppercase;

  font-weight: 600;

  color: var(--color-dark--1);
}

.navbar-childheading,
.navbar-secchildheading {
  font-weight: 600;

  color: var(--color-dark--1);
}

.navbar-mainheading {
  font-size: 3rem;
}

.navbar-childheading {
  font-size: 1.8rem;
}

.navbar-secchildheading,
.navbar-childheading {
  color: var(--secondary-color);
}

.navbar-secheading,
.navbar-secchildheading {
  display: none;
}

/********************************/

/* ProgressBar  */

/********************************/

.progress-bar {
  height: 2.5rem;

  border-radius: 50rem;
}
.no-top-spacing {
  margin-top: 0 !important;
}
.progress-indicator {
  width: 65%;

  position: fixed;

  font-weight: 600;

  border: 3px solid var(--color-dark--1);

  border-radius: 50rem;

  z-index: 3;

  background-color: var(--color-light--1);
}

.progress-text {
  color: var(--color-dark--1);

  font-size: 2rem;
}

/********************************/

/* Body */

/********************************/

fieldset {
  background: var(--color-light--1);

  border: 0 none;

  box-sizing: border-box;

  width: 100%;
}

#hospice-form input:focus,
#hospice-form textarea:focus {
  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;

  box-shadow: none !important;

  border: 3px solid var(--color-dark--1);

  outline-width: 0;
}

.note-text {
  font-size: 2.4rem;

  font-weight: 600;

  font-style: italic;

  color: var(--secondary-color);
}

/* .textbox-input:focus {

  border-color: cadetblue;

} */

/*Next Buttons*/

.action-button {
  width: 15rem;

  background: var(--secondary-color);

  color: var(--color-dark--1);

  border: 0 none;

  border-radius: 9rem;

  padding: 1.6rem 2.8rem;

  font-size: 2.4rem;

  font-weight: 600;

  text-transform: uppercase;
}

#hospice-form .action-button:hover,
#hospice-form .action-button:focus {
  background-color: var(--tertiary-color);

  border: 0 none;

  width: 15rem;

  color: var(--color-dark--1);
}

/*Previous Buttons*/

#hospice-form .action-button-previous {
  width: 15rem;

  background: var(--secondary-color);

  font-weight: 600;

  color: var(--color-dark--1);

  border: 0 none;

  padding: 1.6rem 2.8rem;

  border-radius: 9rem;

  font-size: 2.4rem;

  text-transform: uppercase;
}

#hospice-form .action-button-previous:hover,
#hospice-form .action-button-previous:focus {
  background-color: var(--tertiary-color);

  border: 0 none;

  width: 15rem;

  color: var(--color-dark--1);
}

.button-class {
  display: flex;
}

.hospice-card {
  z-index: 0;

  border: none;

  position: relative;
}

/*FieldSet headings*/

.fs-title {
  font-size: 3.2rem;

  color: var(--primary-color);

  font-weight: 700;

  margin-bottom: 0px; !important
}

.fs-section {
  font-size: 3.2rem;

  color: var(--primary-color);

  font-weight: 500;
}

.fs-section1 {
  font-size: 2.8rem;

  color: var(--primary-color);

  font-weight: 500;
}


.fs-declaration {
  font-weight: 400;

  font-size: 2.8rem;

  color: var(--color-dark--1);

  text-align: justify;
}

/*Step Count*/

.steps {
  font-size: 2.8rem;

  color: var(--secondary-color);

  /* margin-bottom: 10px; */

  font-weight: 300;

  text-align: right;
}

/*Field names*/

.fieldlabel {
  color: var(--color-dark--1);

  font-size: 2.8rem;

  font-weight: 600;

  line-height: 1.2;

  text-align: justify;
}

.textbox-input {
  border: inset 3px var(--color-dark--1);

  font-size: 2.4rem;

  /*width: 70vw;

  height: 25vh;*/

  padding: 1rem;
}

.textbox-input10 {
  border: inset 3px var(--color-dark--1);

  font-size: 2.4rem;

  /*width: 70vw;

  height: 25vh;*/

  padding: 1rem;
}


/* .textbox-input:focus {

  outline: none;

  box-shadow: none;

} */

.hospice-card h5 {
  margin-bottom: 10px;

  font-size: 25px;

  font-weight: 700;
}

.field-input {
  display: none;
}

.field-input-label {
  cursor: pointer;

  /* font-size: 2.8rem; */

  font-size: 12rem;
}

.field-input-tooltip {
 /* display: hidden;*/

  /*opacity: 0;*/

  color: var(--color-dark--1);

  font-size: 3rem;

  font-weight: 500;
}

/* space between smilies and arrows */

.field-input-label:hover + .flex-tooltip {
  visibility: visible;

  opacity: 1;
}

.field-input-label:hover + .field-input-tooltip {
  /* transform: scale(1); */

  display: inline;

  opacity: 1;

  /* transition: transform 0.3s ease-in-out; */
}

.radio-check.select > .field-input-label .no,
.radio-check.select > .field-input-label .yes {
  transform: scale(1.4);

  transition: all 0.3s ease-in-out;
}

.radio-check.select > .field-input-tooltip {
  display: inline;

  opacity: 1;
}

.form-check-label {
  cursor: pointer;

  padding-left: 1px;

  padding-right: 1px;

  margin-bottom: 50px;

  font-size: 30px;

  margin-top: 20px;

  display: block;
}

a.btn-link {
  text-decoration: none;

  background: var(--secondary-color);

  color: var(--color-light--1);

  padding: 15px 25px;

  border-radius: 18px;

  /* vw vh */

  font-size: 22px;

  line-height: 1;

  min-width: 150px;

  font-weight: 500;
}

.fit-image {
  width: 100%;

  object-fit: cover;
}

.happy-dark-green-laugh {
  color: var(--color-darkgreen--1);

  /* font-size: 4em;

  font-size: 2em; */

  cursor: pointer;

  /* position: relative;*/
}

.happy-light-green-smile {
  color: var(--color-lightgreen--1);

  /* font-size: 4em;

  font-size: 2em; */

  cursor: pointer;
}

/* To scale element when hovered */

.fa-hover:hover {
  transform: scale(1.4);

  transition: transform 0.3s ease-in-out;
}

/* selects elements with class field-input-label that is a direct child of element with

both classes radio-check and select */

/* Finally selects elements with fa-hover class under field-input-label */



/* Only apply selected background in fieldset 34 and 112 */
#fieldset-34 .radio-check.select,
#fieldset-95 .radio-check.select,
#fieldset-112 .radio-check.select {

    transform: scale(1.05) !important; /* Make it slightly bigger */
    transition: all 0.3s ease !important; /* Smooth transition */

}

/* Also override hover for only these fieldsets */
#fieldset-34 .radio-check.select:hover,
#fieldset-95 .radio-check.select:hover,
#fieldset-112 .radio-check.select:hover {

    transform: scale(1.05) !important; /* Keep the bigger size on hover */
}

/* Add transition for smooth scaling */
#fieldset-34 .radio-check,
#fieldset-95 .radio-check,
#fieldset-112 .radio-check {
    transition: all 0.3s ease !important;
}

/* Also apply to grid-item for mobile view */
#fieldset-34 .grid-item.select,
#fieldset-95 .grid-item.select,
#fieldset-112 .grid-item.select {

    transform: scale(1.05) !important;
    transition: all 0.3s ease !important;

}

#fieldset-34 .grid-item.select:hover,
#fieldset-95 .grid-item.select:hover,
#fieldset-112 .grid-item.select:hover {

    transform: scale(1.05) !important;
}

#fieldset-34 .grid-item,
#fieldset-95 .grid-item,
#fieldset-112 .grid-item {
    transition: all 0.3s ease !important;
}

#fieldset-34 .grid-item.select .field-input-label,
#fieldset-95 .grid-item.select .field-input-label,
#fieldset-34 .radio-check.select .field-input-label,
#fieldset-95 .radio-check.select .field-input-label,
#fieldset-112 .grid-item.select .field-input-label,
#fieldset-112 .radio-check.select .field-input-label {
    color: #FF8C69 !important;
}

#fieldset-34 .grid-item.select .icon-color,
#fieldset-95 .grid-item.select .icon-color,
#fieldset-34 .radio-check.select .icon-color,
#fieldset-95 .radio-check.select .icon-color,
#fieldset-112 .grid-item.select .icon-color,
#fieldset-112 .radio-check.select .icon-color {
    color: #FF8C69 !important;
}


.yellow-face-meh {
  color: var(--color-yellow--1);

  /* text-shadow: 1px 1px 1px #ccc; */

  /* font-size: 4em;

  font-size: 2em; */

  cursor: pointer;
}

.orange-frown-slight {
  color: var(--color-orange--1);

  /* text-shadow: 1px 1px 1px #ccc; */

  /* font-size: 4em;

  font-size: 2em; */

  cursor: pointer;
}

.red-face-angry {
  color: var(--color-red--1);

  /* text-shadow: 1px 1px 1px; */

  /* font-size: 4em;

  font-size: 2em; */

  cursor: pointer;
}

header.headerSeactio {
  margin-top: 100px;

  box-shadow: 0 2px 3px rgb(0 0 0 / 15%);
}

.navbar-color {
  background-color: var(--color-light--1);
}

h1.logo img {
  max-width: 200px;
}

/* .starBox {

  font-size: 2rem;

  justify-content: space-evenly;

} */

h2.survey-title {
  font-size: 30px;

  color: var(--color-dark--1);

  margin-bottom: 0px;

  text-transform: uppercase;

  font-weight: 700;
}

h2.exit-title {
  margin-left: 150px;

  color: var(--color-dark--1);

  text-transform: uppercase;

  font-weight: 700;
}

.submit-form {
  font-weight: 600;

  width: 16rem;

  background: var(--secondary-color);

  color: var(--color-dark--1);

  border: 0 none;

  border-radius: 9rem;

  text-transform: uppercase;

  font-size: 2.4rem;

  text-decoration: none;

  padding: 1.4rem 2.8rem;
}

.submit-form:hover {
  background-color: var(--tertiary-color);

  border: 0 none;

  width: 16rem;

  color: var(--color-dark--1);
}

.bg-changed-yellow {
  background-color: var(--secondary-color);
}

.bg-changed-green {
  background-color: var(--tertiary-color);
}

.starchecked {
  color: var(--tertiary-color);
}

.starwhite {
  color: var(--color-light--2);

  opacity: 0.7;
}

.fa-5x {
  font-size: 15rem !important;
}

/* Pop up styles */

.model-container {
  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 100vh;

  width: 100vw;

  position: fixed;

  left: 50%;

  transform: translate(-50%, -50%) scale(0.1);

  visibility: hidden;

  transition: transform 0.4s, top 0.4s;
}

.open-popup {
  visibility: visible;

  top: 55%;

  transform: translate(-50%, -50%) scale(1);
}

.model-container .model {
  height: 30rem;

  max-width: 45rem;

  margin: 0 1rem;

  border: 2px solid var(--color-dark--1);

  background: var(--color-light--2);

  border-radius: 11px;

  text-align: center;

  display: flex;

  flex-direction: column;

  gap: 2rem;

  z-index: 999;
}

.model-container .model p {
  color: var(--color-dark--1);

  font-size: 1.8rem;

  padding: 0 2rem;
}

.model-container .model h2 {
  color: var(--color-dark--1);

  font-size: 2.4rem;

  text-transform: uppercase;

  padding: 0 1rem;
}

.model-container .model img {
  width: 7rem;

  height: auto;

  border-radius: 9px;

  box-shadow: 0 1.2rem 2.4rem var(--color-dark--1);
}

.user-large {
  font-size: 6rem;

  color: var(--primary-color);
}

.model-container .model button {
  width: 12rem;

  background: var(--secondary-color);

  color: var(--color-dark--1);

  border: 0 none;

  border-radius: 9rem;

  cursor: pointer;

  padding: 1.2rem 2.4rem;

  font-size: 1.8rem;

  font-weight: 600;

  text-transform: uppercase;

  box-shadow: 0 1.2rem 2.4rem var(--color-dark--1);
}

.model-container .model button:hover {
  background-color: var(--tertiary-color);
}

.greeting-text {
  font-size: 3.2rem;

  padding: 2.4rem 1.2rem;

  text-align: center;
}

.subnote {
  font-size: 2.8rem;
}

/********************************/

/* Footer  */

/********************************/

.flex-footer {
  text-align: center;

  font-size: 1.6rem;

  padding: 1.6rem 0;
}

.copyright {
  align-self: center;
}

.flex-card-container {
  display: flex;
}

/* yes no colors */
fieldset .radio-check.select .field-input-label .icon-color.no,
fieldset .grid-item.select .field-input-label .icon-color.no {
  color: var(--color-red-tick);
}

fieldset .radio-check.select .field-input-label .icon-color.yes,
fieldset .grid-item.select .field-input-label .icon-color.yes {
  color: var(--color-green-tick);
}

fieldset .radio-check.select .field-input-label .icon-color.other,
fieldset .grid-item.select .field-input-label .icon-color.other {
  color: blue;
}

.icon-color {
  color: var(--secondary-color);
}



 #custom-alert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  .alert-content {
    background: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
  }

  #close-alert {
    margin-top: 10px;
    padding: 5px 15px;
    background-color: #f44336;
    color: white;
    border: none;
    cursor: pointer;
  }

  #close-alert:hover {
    background-color: #d32f2f;
  }
.textbox-input {
  border: inset 3px var(--color-dark--1);

  font-size: 2.4rem;

  border-radius: 9px;

  /*width: 70vw;*/

 /* height: 25vh;*/

  padding: 1rem;
}


.textbox-input10 {
  border: inset 3px var(--color-dark--1);

  font-size: 2.4rem;

  border-radius: 9px;

  /*width: 70vw;*/

 /* height: 25vh;*/

  padding: 1rem;
}


.textbox-input1 {
  border: inset 3px var(--color-dark--1);
  font-size: 2.4rem;
  border-radius: 9px;
  padding: 1rem;

  width: 70vw;   /* 70% of the viewport width */
  height: 25vh;  /* 25% of the viewport height */
}






.no-star{
color: #b3fff0;
}
/* New styles for the dropdown */
.select-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  row-gap: 2rem;
}

/* Styling the dropdown */
.field-dropdown {
  display: block; /* Making sure dropdown is visible */
  width: 300px;
  /*max-width: 300px; */
  padding: 10px;
  font-size: 2.2rem;
  border: 2px solid #ccc;
  border-radius: 9px;
  background-color: #fff;
  cursor: pointer;
  text-align: center;
  /*height: 7rem;*/
}

/* Hover and focus effects for dropdown */
.field-dropdown:hover,
.field-dropdown:focus {
  border-color: #007bff;
  outline: none;
}
.grid--checkbox {

  display: grid;

  align-items: center;

  /*padding : 2rem;*/

  justify-items: center;

  row-gap: 2rem;

  column-gap: 0.5rem;  /* 2rem*/

  text-align: center;
}
.grid--2--cols{

    grid-template-columns: 1fr 1fr; /* Two equal-width columns */

    gap: 0.2rem; /* Space between columns change8march 1rem*/

    align-items: start; /* Align items to the top of each column */

    /*padding: 1.5rem;*/

    font-size: 3rem;
}
.no-border.select{

 /* background-color: #ffee8c;*/

 background-color: #FF8C69;

  /*text-align: justify;*/

}

.no-border{

  border: 2.5px solid black;

  border-radius: 9px;

  width: 25rem;

  padding: 1rem;
}


/*
@media (max-width: 768px) {
  .no-border {
    width: 100%;
  }
}



@media (max-width: 390px) {
  .no-border {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.9rem;
  }
}


*/

.field-input-label--1{

    cursor: pointer;

    font-size: 2rem;

}
.short_input{

border-radius: 9px;

border: 2.5px solid black;

padding: 0.5rem 1rem;

font-size: 2rem;

width: 30rem;

}


.short_input1{

border-radius: 15px;

border: 2.5px solid black;

padding: 0.5rem 1rem;

font-size: 2rem;

width: 50rem;
display: block;         /* ensures margin auto works
margin: 0 auto;         /* centers horizontally*/

}







.highlight-text {

  color: #c41230;

  font-style: italic;

  font-size: 2.2rem;

  text-align: center;

  padding-top: 2rem;

  padding-bottom: 2rem;
}


/* Modal Styling - Responsive */
.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 100rem;
  height: 80vh;
  max-height: 60rem;
  background: #e6fffa;
  padding: 3rem;
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  text-align: center;
  overflow-y: hidden;
  z-index: 1000;
  box-sizing: border-box;
}

.modal-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

.modal-text {
  font-size: 2.3rem;
  color: #333;
}

.modal-body {
  max-height: 40rem;
  overflow-y: scroll;
  background: #f9f9f9;
  text-align: left;
  padding: 1.5rem;
  border-radius: 0.8rem;
  margin-bottom: 2rem;
  font-size: 2.1rem;
  line-height: 1.6;
}

/* Tablet styles */
@media (max-width: 768px) {
  .modal {
    width: 95%;
    height: 85vh;
    padding: 2rem;
  }

  .modal-title {
    font-size: 2rem;
  }

  .modal-text {
    font-size: 1.8rem;
  }

  .modal-body {
    font-size: 1.6rem;
    max-height: 35rem;
    padding: 1.2rem;
  }
}

/* Mobile styles */
@media (max-width: 480px) {
  .modal {
    width: 98%;
    height: 90vh;
    padding: 1.5rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .modal-title {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }

  .modal-text {
    font-size: 1.4rem;
  }

  .modal-body {
    font-size: 1.3rem;
    max-height: 40vh;
    padding: 1rem;
    margin-bottom: 1.5rem;
    overflow-y: scroll; /* Ensure scrolling on mobile */
  }
}

/* Extra small screens */
@media (max-width: 360px) {
  .modal {
    width: 100%;
    height: 100vh;
    padding: 1rem;
    border-radius: 0;
    top: 10%;
    left: 0;
    transform: none;
  }

  .modal-title {
    font-size: 1.6rem;
  }

  .modal-text {
    font-size: 1.2rem;
  }

  .modal-body {
    font-size: 1.1rem;
    max-height: 60vh;
    overflow-y: scroll; /* Ensure scrolling on mobile */
  }
}

.modal-checkbox {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 2rem;
  margin-bottom: 2rem;
  margin-left: 2rem;
}

/* Button Styling (Consistent with Start Button) */
button {
  width: 15rem;
  background: #00cca3;
  color: var(--color-dark--1);
  border: 0 none;
  border-radius: 9rem;
  padding: 1.6rem 2.8rem;
  font-size: 2.2rem;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
}

button:disabled {
  background: gray;
  cursor: not-allowed;
}

/* Terms of Reference Link (Styled Like a Button) */
.terms-link {
  display: inline-block;
  font-size: 2rem;
  font-weight: 600;
  color: #00cca3;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 2px solid #00cca3;
  padding-bottom: 0.5rem;
  cursor: pointer;
}

.terms-link:hover {
  color: #008f7a;
  border-bottom: 2px solid #008f7a;
}
.close-button{
    margin-bottom: 2rem;
}
/* Map */
/* Center the container and limit the map’s width so it’s not huge */
  .cta-map-container {
    text-align: center;
    margin: 0 auto;
    max-width: 800px; /* Adjust to taste */
  }

  /* Make the SVG scale proportionally to fit the container width */
  #svg_map {
    width: 100%;
    height: auto;        /* Ensures aspect ratio is maintained */
    max-height: 90vh;    /* Default for mobile */
    display: block;
    margin: 0 auto;
  }

  /* For laptop screens (e.g., widths 768px and above), reduce the map’s height */
  @media (min-width: 768px) {
    #svg_map {
      max-height: 60vh; /* Reduced height on larger screens */
    }
  }


   /* Tablet landscape: iPads + similar devices */
   @media (min-width: 768px) and (max-width: 1180px) and (orientation: landscape) {
       #svg_map {
           max-height: 45vh !important; /* reduce map height */
       }

       .cta-map-container {
           margin-bottom: 0 !important;
           padding-bottom: 0 !important;
       }
   }


  /* Hover and selected styles (as before) */
  .map-region:hover .map-region-single {
    fill: #21b099;
    filter: url("#dropshadow");
    stroke: #fff;
    stroke-width: 8px;
  }
  .map-region-single {
    fill: #fa715e;
    transition: fill 0.25s;
    cursor: pointer;
  }
  .map-region-single.selected {
    fill: #21b099 !important; /* clicked region color */
  }
  .region-label {
    fill: black;
    font-size: 60px;
    font-weight: bold;
    text-anchor: middle;
    pointer-events: none;
    text-decoration: none; /* Remove underlines */
  }

  .map-region {
  text-decoration: none;
}
.map-region.disabled {
    cursor: not-allowed;
    pointer-events: none; /* Completely disables all mouse events */
}

.map-region.disabled .map-region-single {
    fill: #bdbdbd !important; /* Gray color */
    stroke: #999 !important;
    opacity: 0.6;
}

.map-region.disabled .region-label {
    fill: #666 !important;
    opacity: 0.7;
}
.field-input-label--2{

}

/* Privacy Notice Scrollable Content */
.privacy-content {
  width: 90%;
  max-width: 100rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.privacy-scroll-area {
  max-height: 58vh;
  overflow-y: scroll;
  background: #f9f9f9;
  padding: 2rem;
  border-radius: 1rem;
  border: 2px solid #ddd;
  font-size: 2.1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.privacy-scroll-area p {
  color: #333;
  text-align: left;
}

.privacy-scroll-area a {
  color: #00cca3;
  text-decoration: underline;
}

.privacy-scroll-area a:hover {
  color: #008f7a;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .privacy-content {
    width: 98%; /* Increased from 95% */
    padding: 0 0.5rem; /* Reduced padding */
  }

  .privacy-scroll-area {
    max-height: 50vh; /* Reduced height */
    padding: 1rem; /* Reduced padding */
    font-size: 1.6rem; /* Smaller font */
    margin-bottom: 2rem; /* Reduced margin */
  }
}

@media (max-width: 480px) {
  .privacy-content {
    width: 100%; /* Full width */
    padding: 0; /* No padding */
  }

  .privacy-scroll-area {
    max-height: 50vh; /* Even smaller height */
    padding: 0.8rem; /* Minimal padding */
    font-size: 1.4rem; /* Smaller font */
    margin-bottom: 1.5rem; /* Reduced margin */
    border-radius: 0.5rem; /* Smaller border radius */
  }
}




/*Slider */
/* General Styling for the Slider */
/* General Styling for the Slider */
/*.slider-container {
    position: relative;
    width: 100%;
    height: 60px;
    margin: 20px 0;
}

.slider-scale {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    background: #ddd;
    border-radius: 5px;
    transform: translateY(-50%);
}

.thumb {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    color: #ff746c;
    cursor: grab;
    transition: transform 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.thumb:active {
    cursor: grabbing;
}

.rating-display {
    margin-top: 10px;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    color: #333;
}

.slider-numbers {
    position: absolute;
    top: 70%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    color: #333;
    pointer-events: none;
}

.slider-numbers span {
    text-align: center;
    flex: 1;
}


.frown {
    color: red;
}
.neutral {
    color: yellow;
}
.smile {
    color: green;
}

.rating-display {
    margin-top: 10px;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    color: #333;
} */

/* ===== RESPONSIVE SLIDER STYLES WITH PERFECT ALIGNMENT ===== */

.slider-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    min-width: 280px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5rem;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Slider track - responsive width */
.slider-track {
    width: calc(100% - 40px); /* Account for container padding */
    height: 6px;
    background-color: #ddd;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px; /* Match container padding */
}

/* Grid marks - perfectly aligned with labels */
.slider-grid {
    position: absolute;
    top: 50%;
    width: calc(100% - 40px); /* Match track width */
    height: 6px;
    display: flex;
    justify-content: space-between;
    left: 20px; /* Match container padding */
    transform: translateY(-50%);
}

.slider-grid .grid-line {
    width: 2px;
    height: 100%;
    background-color: #999;
    position: relative;
}

/* First grid line positioning - rest area */
.slider-grid .grid-line:nth-child(1) {
    margin-left: 0; /* No margin for first line */
}

/* Active grid lines positioning - distributed evenly in remaining space */
.slider-grid .grid-line:nth-child(2),
.slider-grid .grid-line:nth-child(3),
.slider-grid .grid-line:nth-child(4),
.slider-grid .grid-line:nth-child(5),
.slider-grid .grid-line:nth-child(6) {
    /* Let flexbox handle distribution */
}

/* Smiley as draggable thumb */
[id^="smiley-"] {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 60px;
    cursor: pointer;
    transition: left 0.3s ease;
    touch-action: none;
    user-select: none;
    z-index: 0;

    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 400; /* Regular weight for 'far' icons */
    line-height: 1;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

/* ===== SMILEY TEXT POSITIONED ABOVE SLIDER (BELOW QUESTION) ===== */
.smiley-container,
[id^="slider-value-"] {
    text-align: center;
    font-size: 24px;
    position: absolute;
    top: -50px; /* Position above the slider track, below question */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 0;
    line-height: 1.2;
    color: #333;
}

/* ===== PERFECTLY ALIGNED NUMBER LABELS UNDER GRID MARKS ===== */
.slider-labels {
    position: relative;
    top: 50px; /* Position below the slider track */
    left: 0px; /* Match container padding */
    width: calc(100% - 40px); /* Match track width */
    display: flex;
    font-size: 24px;
    color: #b3b3b3;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Individual label positioning to align exactly with grid lines */
.slider-labels span {
    position: absolute;
    text-align: center;
    transform: translateX(-50%); /* Center each label on its grid line */
    font-weight: 500;
}

/* Position each label exactly under its corresponding grid line */
.slider-labels span:nth-child(1) {
    left: 0%; /* Empty - under first grid line (rest position) */
}

.slider-labels span:nth-child(2) {
    left: 20%; /* "1" - under second grid line */
}

.slider-labels span:nth-child(3) {
    left: 40%; /* "2" - under third grid line */
}

.slider-labels span:nth-child(4) {
    left: 60%; /* "3" - under fourth grid line */
}

.slider-labels span:nth-child(5) {
    left: 80%; /* "4" - under fifth grid line */
}

.slider-labels span:nth-child(6) {
    left: 100%; /* "5" - under sixth grid line */
}

/* ===== TABLET STYLES (768px - 1024px) ===== */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    .slider-container {
        width: 90%;
        max-width: 800px;
        height: 70px;
        margin-top: 4rem;
        padding: 0 15px;
    }

    .slider-track,
    .slider-grid {
        width: calc(100% - 30px);
        left: 15px;
    }

    [id^="smiley-"] {
        width: 50px;
        height: 50px;
        font-size: 50px;
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
        font-weight: 400;
    }

    .smiley-container,
    [id^="slider-value-"] {
        font-size: 22px;
        top: -45px;
    }

    .slider-labels {
        font-size: 22px;
        top: 25px;
        left: 15px;
        width: calc(100% - 30px);
    }

    /* Adjust label positions for 18% rest area on tablet */
    .slider-labels span:nth-child(1) { left: 0%; }
    .slider-labels span:nth-child(2) { left: 18%; }
    .slider-labels span:nth-child(3) { left: 38.5%; }
    .slider-labels span:nth-child(4) { left: 59%; }
    .slider-labels span:nth-child(5) { left: 79.5%; }
    .slider-labels span:nth-child(6) { left: 100%; }
}

/* ===== MOBILE STYLES (up to 768px) ===== */
@media screen and (max-width: 768px) {
    .slider-container {
        width: 95%;
        max-width: 450px;       /* 500px change8march=*/
        height: 60px;
        margin-top: 3rem;
        padding: 0 20px;
    }

    .slider-track,
    .slider-grid {
        width: calc(100% - 40px);
        left: 20px;
        height: 4px;
    }

    [id^="smiley-"] {
        width: 40px;
        height: 40px;
        font-size: 40px;
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
        font-weight: 400;

    }

    .smiley-container,
    [id^="slider-value-"] {
        font-size: 18px;
        top: -40px;
    }

    .slider-labels {
        font-size: 16px;
        top: 30px;
        left: 0px;
        width: calc(100% - 20px);
    }

    /* Adjust label positions for 15% rest area on mobile */
    .slider-labels span:nth-child(1) { left: 0%; }
    .slider-labels span:nth-child(2) { left: 15%; }
    .slider-labels span:nth-child(3) { left: 36.25%; }
    .slider-labels span:nth-child(4) { left: 57.5%; }
    .slider-labels span:nth-child(5) { left: 78.75%; }
    .slider-labels span:nth-child(6) { left: 100%; }
}

/* ===== SMALL MOBILE STYLES (up to 480px) ===== */
@media screen and (max-width: 480px) {
    .slider-container {
        width: 95%;
        max-width: 320px;      /* 350px change8march=*/
        height: 50px;
        margin-top: 2rem;
        padding: 0 5px;
    }

    .slider-track,
    .slider-grid {
        width: calc(100% - 10px);
        left: 5px;
    }

    [id^="smiley-"] {
        width: 35px;
        height: 35px;
        font-size: 35px;
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
        font-weight: 400;
    }

    .smiley-container,
    [id^="slider-value-"] {
        font-size: 16px;
        top: -35px;
    }

    .slider-labels {
        font-size: 14px;
        top: 25px;
        left: 5px;
        width: calc(100% - 10px);
    }

    /* Adjust label positions for 12% rest area on small mobile */
    .slider-labels span:nth-child(1) { left: 0%; }
    .slider-labels span:nth-child(2) { left: 18%; }
    .slider-labels span:nth-child(3) { left: 38%; }
    .slider-labels span:nth-child(4) { left: 59%; }
    .slider-labels span:nth-child(5) { left: 79%; }
    .slider-labels span:nth-child(6) { left: 100%; }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
    [id^="smiley-"] {
        padding: 10px;
        margin: -10px;
    }

    .slider-container {
        touch-action: none;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
@media (prefers-reduced-motion: reduce) {
    [id^="smiley-"] {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .slider-track {
        background-color: #000;
        border: 2px solid #fff;
    }

    .slider-grid .grid-line {
        background-color: #fff;
    }

    .slider-labels {
        color: #fff;
    }

    .smiley-container,
    [id^="slider-value-"] {
        color: #fff;
    }
}

/* ===== LANDSCAPE MOBILE OPTIMIZATION ===== */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .slider-container {
        margin-top: 1rem;
        height: 40px;
    }

    .smiley-container,
    [id^="slider-value-"] {
        top: -30px;
        font-size: 14px;
    }

    .slider-labels {
        top: 15px;
        font-size: 12px;
    }
}
h3.fs-declaration.nomad{
    font-size: 2.3rem;
    margin-bottom: 0px; !important
    margin-top: 0px; !important
}

/*////////////////////////////////*/

/* ===== 7-SCALE RESPONSIVE SLIDER STYLES WITH PERFECT ALIGNMENT ===== */

.slider-container-7scale {
    position: relative;
    width: 100%;
    max-width: 1200px;
    min-width: 320px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5rem;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 7-Scale Slider track - responsive width */
.slider-container-7scale .slider-track-7scale {
    width: calc(100% - 40px); /* Account for container padding */
    height: 6px;
    background-color: #ddd;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px; /* Match container padding */
}

/* 7-Scale Grid marks - perfectly aligned with labels */
.slider-container-7scale .slider-grid-7scale {
    position: absolute;
    top: 50%;
    width: calc(100% - 40px); /* Match track width */
    height: 6px;
    display: flex;
    justify-content: space-between;
    left: 20px; /* Match container padding */
    transform: translateY(-50%);
}

.slider-container-7scale .slider-grid-7scale .grid-line-7scale {
    width: 2px;
    height: 100%;
    background-color: #999;
    position: relative;
}

/* 7-Scale Smiley as draggable thumb */
[id^="smiley-7scale-"] {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 60px;
    cursor: pointer;
    transition: left 0.3s ease;
    touch-action: none;
    user-select: none;
    z-index: 0;
}

/* ===== 7-SCALE SMILEY TEXT POSITIONED ABOVE SLIDER (BELOW QUESTION) ===== */
.smiley-container-7scale,
[id^="slider-value-7scale-"] {
    text-align: center;
    font-size: 24px;
    position: absolute;
    top: -50px; /* Position above the slider track, below question */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 0;
    line-height: 1.2;
    color: #333;
}

/* ===== 7-SCALE PERFECTLY ALIGNED NUMBER LABELS UNDER GRID MARKS ===== */
.slider-container-7scale .slider-labels-7scale {
    position: relative;
    top: 50px; /* Position below the slider track */
    left: 20px; /* Match container padding */
    width: calc(100% - 40px); /* Match track width */
    display: flex;
    justify-content: space-between; /* Same as grid lines */
    font-size: 24px;
    color: #b3b3b3;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 7-Scale Individual label positioning - using flexbox alignment */
.slider-container-7scale .slider-labels-7scale span {
    text-align: center;
    font-weight: 500;
    flex: none; /* Don't grow or shrink */
}


/* Style for labels that have custom text (positions 1 and 7) */
.slider-container-7scale .slider-labels-7scale .label-with-custom {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Custom text positioning */
.slider-container-7scale .slider-labels-7scale .custom-text {
    position: absolute;
    top: 30px; /* Position below the number */
    font-size: 14px;
    color: #666;
    white-space: nowrap;
    font-weight: 400;
    text-align: center;
    width: max-content;
    left: 50%;
    transform: translateX(-50%);
}

/* ===== 7-SCALE TABLET STYLES (768px - 1024px) ===== */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    .slider-container-7scale {
        width: 90%;
        max-width: 900px;
        height: 70px;
        margin-top: 4rem;
        padding: 0 15px;
    }

    .slider-container-7scale .slider-labels-7scale .custom-text {
        top: 25px;
        font-size: 16px;
    }

    .slider-container-7scale .slider-track-7scale,
    .slider-container-7scale .slider-grid-7scale {
        width: calc(100% - 30px);
        left: 15px;
    }

    [id^="smiley-7scale-"] {
        width: 50px;
        height: 50px;
        font-size: 50px;
    }

    .smiley-container-7scale,
    [id^="slider-value-7scale-"] {
        font-size: 22px;
        top: -45px;
    }

    .slider-container-7scale .slider-labels-7scale {
        font-size: 22px;
        top: 25px;
        left: 15px;
        width: calc(100% - 30px);
    }
}

/* ===== 7-SCALE MOBILE STYLES (up to 768px) ===== */
@media screen and (max-width: 768px) {
    .slider-container-7scale {
        width: 85%;
        max-width: 420px;                 /*  //change8march was 450px  */
        height: 60px;
        margin-top: 3rem;
        padding: 0px;                   /*   //change8march was padding: 0px 10px*/
    }

    .slider-container-7scale .slider-labels-7scale .custom-text {
        top: 22px;
        font-size: 10px;
    }

    .slider-container-7scale .slider-track-7scale,
    .slider-container-7scale .slider-grid-7scale {
        width: calc(100% - 20px);
        left: 0px;                               /* // change8march was 10px*/
        height: 4px;
    }

    [id^="smiley-7scale-"] {
        width: 40px;
        height: 40px;
        font-size: 40px;
    }

    .smiley-container-7scale,
    [id^="slider-value-7scale-"] {
        font-size: 18px;
        top: -40px;
    }

    .slider-container-7scale .slider-labels-7scale {
        font-size: 16px;
        top: 30px;
        left: 0px;                              /* // change8march was 10px*/
        width: calc(100% - 20px);
    }
}

/* ===== 7-SCALE SMALL MOBILE STYLES (up to 480px) ===== */
@media screen and (max-width: 480px) {
    .slider-container-7scale {
        width: 95%;
        max-width: 320px;                           /*  //change8march was 350px  */
        height: 50px;
        margin-top: 2rem;
        padding: 0px;                                /* //change8march was padding: 0px 5px*/
    }

    .slider-container-7scale .slider-labels-7scale .custom-text {
        top: 20px;
        font-size: 9px;
    }

    .slider-container-7scale .slider-track-7scale,
    .slider-container-7scale .slider-grid-7scale {
        width: calc(100% - 10px);
        left: px;                                 /* // change8march was 5px*/
    }

    [id^="smiley-7scale-"] {
        width: 35px;
        height: 35px;
        font-size: 35px;
    }

    .smiley-container-7scale,
    [id^="slider-value-7scale-"] {
        font-size: 16px;
        /*top: -35px;  */
        top: -15px;
    }

    .slider-container-7scale .slider-labels-7scale {
        font-size: 14px;
        top: 25px;
        left: 0px;                             /* // change8march was 5px*/
        width: calc(100% - 10px);
    }
}

/* ===== 7-SCALE TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
    [id^="smiley-7scale-"] {
        padding: 10px;
        margin: -10px;
    }

    .slider-container-7scale {
        touch-action: none;
    }
}

/* ===== 7-SCALE ACCESSIBILITY IMPROVEMENTS ===== */
@media (prefers-reduced-motion: reduce) {
    [id^="smiley-7scale-"] {
        transition: none;
    }
}

/* 7-Scale High contrast mode support */
@media (prefers-contrast: high) {
    .slider-container-7scale .slider-track-7scale {
        background-color: #000;
        border: 2px solid #fff;
    }

    .slider-container-7scale .slider-grid-7scale .grid-line-7scale {
        background-color: #fff;
    }

    .slider-container-7scale .slider-labels-7scale {
        color: #fff;
    }

    .smiley-container-7scale,
    [id^="slider-value-7scale-"] {
        color: #fff;
    }
}

/* ===== 7-SCALE LANDSCAPE MOBILE OPTIMIZATION ===== */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .slider-container-7scale {
        margin-top: 1rem;
        height: 40px;
    }

    .slider-container-7scale .slider-labels-7scale .custom-text {
        top: 15px;
        font-size: 8px;
    }

    .smiley-container-7scale,
    [id^="slider-value-7scale-"] {
        top: -30px;
        font-size: 14px;
    }

    .slider-container-7scale .slider-labels-7scale {
        top: 15px;
        font-size: 12px;
    }
}




/* ===== FAMILIARITY RESPONSIVE SLIDER STYLES WITH PERFECT ALIGNMENT ===== */

/* ===== FAMILIARITY RESPONSIVE SLIDER STYLES WITH PERFECT ALIGNMENT ===== */

.slider-container-familiarity {
    position: relative;
    width: 100%;
    max-width: 1200px;
    min-width: 320px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5rem;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Familiarity Slider track - responsive width */
.slider-container-familiarity .slider-track-familiarity {
    width: calc(100% - 40px); /* Account for container padding */
    height: 6px;
    background-color: #ddd;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px; /* Match container padding */
}

/* Familiarity Grid marks - perfectly aligned with labels */
.slider-container-familiarity .slider-grid-familiarity {
    position: absolute;
    top: 50%;
    width: calc(100% - 40px); /* Match track width */
    height: 6px;
    display: flex;
    justify-content: space-between;
    left: 20px; /* Match container padding */
    transform: translateY(-50%);
}

.slider-container-familiarity .slider-grid-familiarity .grid-line-familiarity {
    width: 2px;
    height: 100%;
    background-color: #999;
    position: relative;
}

/* Familiarity Smiley as draggable thumb */
[id^="smiley-familiarity-"] {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 60px;
    cursor: pointer;
    transition: left 0.3s ease;
    touch-action: none;
    user-select: none;
    z-index: 0;
}

/* ===== FAMILIARITY SMILEY TEXT POSITIONED ABOVE SLIDER (BELOW QUESTION) ===== */
.smiley-container-familiarity,
[id^="slider-value-familiarity-"] {
    text-align: center;
    font-size: 24px;
    position: absolute;
    top: -50px; /* Position above the slider track, below question */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 0;
    line-height: 1.2;
    color: #333;
}

/* ===== FAMILIARITY PERFECTLY ALIGNED NUMBER LABELS UNDER GRID MARKS ===== */
.slider-container-familiarity .slider-labels-familiarity {
    position: relative;
    top: 50px; /* Position below the slider track */
    left: 20px; /* Match container padding */
    width: calc(100% - 40px); /* Match track width */
    display: flex;
    justify-content: space-between; /* Same as grid lines */
    font-size: 24px;
    color: #b3b3b3;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Familiarity Individual label positioning - using flexbox alignment */
.slider-container-familiarity .slider-labels-familiarity span {
    text-align: center;
    font-weight: 500;
    flex: none; /* Don't grow or shrink */
}

/* Style for labels that have custom text (positions 1 and 7) */
.slider-container-familiarity .slider-labels-familiarity .label-with-custom {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Custom text positioning */
.slider-container-familiarity .slider-labels-familiarity .custom-text {
    position: absolute;
    top: 30px; /* Position below the number */
    font-size: 16px;
    color: #666;
    white-space: normal; /* Allow text wrapping */
    font-weight: 400;
    text-align: center;
    width: 120px; /* Set max width */
    left: 50%;
    transform: translateX(-50%);
    line-height: 1.2;
}

/* Special positioning for position 7 to prevent overflow */
.slider-container-familiarity .slider-labels-familiarity span:nth-child(8) .custom-text {
    left: 0; /* Align to right edge instead of center */
    transform: translateX(-100%);
}

/* ===== FAMILIARITY TABLET STYLES (768px - 1024px) ===== */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    .slider-container-familiarity {
        width: 90%;
        max-width: 900px;
        height: 70px;
        margin-top: 4rem;
        padding: 0 15px;
    }

    .slider-container-familiarity .slider-track-familiarity,
    .slider-container-familiarity .slider-grid-familiarity {
        width: calc(100% - 30px);
        left: 15px;
    }

    [id^="smiley-familiarity-"] {
        width: 50px;
        height: 50px;
        font-size: 50px;
    }

    .smiley-container-familiarity,
    [id^="slider-value-familiarity-"] {
        font-size: 22px;
        top: -45px;
    }

    .slider-container-familiarity .slider-labels-familiarity {
        font-size: 22px;
        top: 25px;
        left: 15px;
        width: calc(100% - 30px);
    }

    .slider-container-familiarity .slider-labels-familiarity .custom-text {
        top: 25px;
        font-size: 12px;
        width: 100px;
    }

    /* Adjust position 7 text for tablet */
    .slider-container-familiarity .slider-labels-familiarity span:nth-child(8) .custom-text {
        left: 0;
        transform: translateX(-90%);
    }
}

/* ===== FAMILIARITY MOBILE STYLES (up to 768px) ===== */
@media screen and (max-width: 768px) {
    .slider-container-familiarity {
        width: 85%;
        max-width: 420px;               /* change8march 450px */
        height: 60px;
        margin-top: 3rem;
        padding: 0px;                    /* change8march 0 10px */
    }

    .slider-container-familiarity .slider-track-familiarity,
    .slider-container-familiarity .slider-grid-familiarity {
        width: calc(100% - 20px);
        left: 0px;                         /* change8march 10px */
        height: 4px;
    }

    [id^="smiley-familiarity-"] {
        width: 40px;
        height: 40px;
        font-size: 40px;
    }

    .smiley-container-familiarity,
    [id^="slider-value-familiarity-"] {
        font-size: 18px;
        top: -40px;
    }

    .slider-container-familiarity .slider-labels-familiarity {
        font-size: 16px;
        top: 30px;
        left: 0px;                  /* change8march 10px */
        width: calc(100% - 20px);
    }

    .slider-container-familiarity .slider-labels-familiarity .custom-text {
        top: 22px;
        font-size: 11px;
        width: 80px;
    }

    /* Adjust position 7 text for mobile */
    .slider-container-familiarity .slider-labels-familiarity span:nth-child(8) .custom-text {
        left: 0;
        transform: translateX(-85%);
    }
}

/* ===== FAMILIARITY SMALL MOBILE STYLES (up to 480px) ===== */
@media screen and (max-width: 480px) {
    .slider-container-familiarity {
        width: 95%;
        max-width: 320px;           /* change8march 350px */
        height: 50px;
        margin-top: 2rem;
        padding: 0px;        /* change8march 0 5px */
    }

    .slider-container-familiarity .slider-track-familiarity,
    .slider-container-familiarity .slider-grid-familiarity {
        width: calc(100% - 10px);
        left: 0px;               /* change8march 5px */
    }

    [id^="smiley-familiarity-"] {
        width: 35px;
        height: 35px;
        font-size: 35px;
    }

    .smiley-container-familiarity,
    [id^="slider-value-familiarity-"] {
        font-size: 16px;
        top: -35px;
    }

    .slider-container-familiarity .slider-labels-familiarity {
        font-size: 14px;
        top: 25px;
        left: 0px;                       /* change8march 5px */
        width: calc(100% - 10px);
    }

    .slider-container-familiarity .slider-labels-familiarity .custom-text {
        top: 20px;
        font-size: 10px;
        width: 60px;
    }

    /* Adjust position 7 text for small mobile */
    .slider-container-familiarity .slider-labels-familiarity span:nth-child(8) .custom-text {
        left: 0;
        transform: translateX(-80%);
    }
}

/* ===== FAMILIARITY TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
    [id^="smiley-familiarity-"] {
        padding: 10px;
        margin: -10px;
    }

    .slider-container-familiarity {
        touch-action: none;
    }
}

/* ===== FAMILIARITY ACCESSIBILITY IMPROVEMENTS ===== */
@media (prefers-reduced-motion: reduce) {
    [id^="smiley-familiarity-"] {
        transition: none;
    }
}

/* Familiarity High contrast mode support */
@media (prefers-contrast: high) {
    .slider-container-familiarity .slider-track-familiarity {
        background-color: #000;
        border: 2px solid #fff;
    }

    .slider-container-familiarity .slider-grid-familiarity .grid-line-familiarity {
        background-color: #fff;
    }

    .slider-container-familiarity .slider-labels-familiarity {
        color: #fff;
    }

    .smiley-container-familiarity,
    [id^="slider-value-familiarity-"] {
        color: #fff;
    }
}

/* ===== FAMILIARITY LANDSCAPE MOBILE OPTIMIZATION ===== */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .slider-container-familiarity {
        margin-top: 1rem;
        height: 40px;
    }

    .smiley-container-familiarity,
    [id^="slider-value-familiarity-"] {
        top: -30px;
        font-size: 14px;
    }

    .slider-container-familiarity .slider-labels-familiarity {
        top: 15px;
        font-size: 12px;
    }

    .slider-container-familiarity .slider-labels-familiarity .custom-text {
        top: 15px;
        font-size: 9px;
        width: 50px;
    }

    /* Adjust position 7 text for landscape mobile */
    .slider-container-familiarity .slider-labels-familiarity span:nth-child(8) .custom-text {
        left: 0;
        transform: translateX(-75%);
    }
}



/* ===== AGREEMENT RESPONSIVE SLIDER STYLES WITH PERFECT ALIGNMENT ===== */

.slider-container-agreement {
    position: relative;
    width: 100%;
    max-width: 1200px;
    min-width: 320px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5rem;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Agreement Slider track - responsive width */
.slider-container-agreement .slider-track-agreement {
    width: calc(100% - 40px); /* Account for container padding */
    height: 6px;
    background-color: #ddd;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px; /* Match container padding */
}

/* Agreement Grid marks - perfectly aligned with labels */
.slider-container-agreement .slider-grid-agreement {
    position: absolute;
    top: 50%;
    width: calc(100% - 40px); /* Match track width */
    height: 6px;
    display: flex;
    justify-content: space-between;
    left: 20px; /* Match container padding */
    transform: translateY(-50%);
}

.slider-container-agreement .slider-grid-agreement .grid-line-agreement {
    width: 2px;
    height: 100%;
    background-color: #999;
    position: relative;
}

/* Agreement Smiley as draggable thumb */
[id^="smiley-agreement-"] {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 60px;
    cursor: pointer;
    transition: left 0.3s ease;
    touch-action: none;
    user-select: none;
    z-index: 0;
}

/* ===== AGREEMENT SMILEY TEXT POSITIONED ABOVE SLIDER (BELOW QUESTION) ===== */
.smiley-container-agreement,
[id^="slider-value-agreement-"] {
    text-align: center;
    font-size: 24px;
    position: absolute;
    top: -50px; /* Position above the slider track, below question */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 0;
    line-height: 1.2;
    color: #333;
}

/* ===== AGREEMENT PERFECTLY ALIGNED NUMBER LABELS UNDER GRID MARKS ===== */
.slider-container-agreement .slider-labels-agreement {
    position: relative;
    top: 50px; /* Position below the slider track */
    left: 20px; /* Match container padding */
    width: calc(100% - 40px); /* Match track width */
    display: flex;
    justify-content: space-between; /* Same as grid lines */
    font-size: 24px;
    color: #b3b3b3;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Agreement Individual label positioning - using flexbox alignment */
.slider-container-agreement .slider-labels-agreement span {
    text-align: center;
    font-weight: 500;
    flex: none; /* Don't grow or shrink */
}

/* Style for labels that have custom text (positions 1 and 7) */
.slider-container-agreement .slider-labels-agreement .label-with-custom {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Custom text positioning */
.slider-container-agreement .slider-labels-agreement .custom-text {
    position: absolute;
    top: 30px; /* Position below the number */
    font-size: 16px;
    color: #666;
    white-space: normal; /* Allow text wrapping */
    font-weight: 400;
    text-align: center;
    width: 120px; /* Set max width */
    left: 50%;
    transform: translateX(-50%);
    line-height: 1.2;
}

/* Special positioning for position 7 to prevent overflow */
.slider-container-agreement .slider-labels-agreement span:nth-child(8) .custom-text {
    left: 0; /* Align to right edge instead of center */
    transform: translateX(-100%);
}

/* ===== AGREEMENT TABLET STYLES (768px - 1024px) ===== */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    .slider-container-agreement {
        width: 90%;
        max-width: 900px;
        height: 70px;
        margin-top: 4rem;
        padding: 0 15px;
    }

    .slider-container-agreement .slider-track-agreement,
    .slider-container-agreement .slider-grid-agreement {
        width: calc(100% - 30px);
        left: 15px;
    }

    [id^="smiley-agreement-"] {
        width: 50px;
        height: 50px;
        font-size: 50px;
    }

    .smiley-container-agreement,
    [id^="slider-value-agreement-"] {
        font-size: 22px;
        top: -45px;
    }

    .slider-container-agreement .slider-labels-agreement {
        font-size: 22px;
        top: 25px;
        left: 15px;
        width: calc(100% - 30px);
    }

    .slider-container-agreement .slider-labels-agreement .custom-text {
        top: 25px;
        font-size: 12px;
        width: 100px;
    }

    /* Adjust position 7 text for tablet */
    .slider-container-agreement .slider-labels-agreement span:nth-child(8) .custom-text {
        left: 0;
        transform: translateX(-90%);
    }
}

/* ===== AGREEMENT MOBILE STYLES (up to 768px) ===== */
@media screen and (max-width: 768px) {
    .slider-container-agreement {
        width: 85%;
        max-width: 450px;
        height: 60px;
        margin-top: 3rem;
        padding: 0px;                        /* change8march 0 10px */
    }

    .slider-container-agreement .slider-track-agreement,
    .slider-container-agreement .slider-grid-agreement {
        width: calc(100% - 20px);
        left: 0px;              /* change8march 10px */
        height: 4px;
    }

    [id^="smiley-agreement-"] {
        width: 40px;
        height: 40px;
        font-size: 40px;
    }

    .smiley-container-agreement,
    [id^="slider-value-agreement-"] {
        font-size: 18px;
        top: -40px;
    }

    .slider-container-agreement .slider-labels-agreement {
        font-size: 16px;
        top: 30px;
        left: 0px;                      /* change8march 10px */
        width: calc(100% - 20px);
    }

    .slider-container-agreement .slider-labels-agreement .custom-text {
        top: 22px;
        font-size: 11px;
        width: 80px;
    }

    /* Adjust position 7 text for mobile */
    .slider-container-agreement .slider-labels-agreement span:nth-child(8) .custom-text {
        left: 0;
        transform: translateX(-85%);
    }
}

/* ===== AGREEMENT SMALL MOBILE STYLES (up to 480px) ===== */
@media screen and (max-width: 480px) {
    .slider-container-agreement {
        width: 95%;
        max-width: 350px;
        height: 50px;
        margin-top: 2rem;
        padding: 0px;                  /* change8march 0 5px */
    }

    .slider-container-agreement .slider-track-agreement,
    .slider-container-agreement .slider-grid-agreement {
        width: calc(100% - 10px);
        left: 0px;                   /* change8march 5px */
    }

    [id^="smiley-agreement-"] {
        width: 35px;
        height: 35px;
        font-size: 35px;
    }

    .smiley-container-agreement,
    [id^="slider-value-agreement-"] {
        font-size: 16px;
        top: -35px;
    }

    .slider-container-agreement .slider-labels-agreement {
        font-size: 14px;
        top: 25px;
        left: 0px;                       /* change8march 5px */
        width: calc(100% - 10px);
    }

    .slider-container-agreement .slider-labels-agreement .custom-text {
        top: 20px;
        font-size: 10px;
        width: 60px;
    }

    /* Adjust position 7 text for small mobile */
    .slider-container-agreement .slider-labels-agreement span:nth-child(8) .custom-text {
        left: 0;
        transform: translateX(-80%);
    }
}

/* ===== AGREEMENT TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
    [id^="smiley-agreement-"] {
        padding: 10px;
        margin: -10px;
    }

    .slider-container-agreement {
        touch-action: none;
    }
}

/* ===== AGREEMENT ACCESSIBILITY IMPROVEMENTS ===== */
@media (prefers-reduced-motion: reduce) {
    [id^="smiley-agreement-"] {
        transition: none;
    }
}

/* Agreement High contrast mode support */
@media (prefers-contrast: high) {
    .slider-container-agreement .slider-track-agreement {
        background-color: #000;
        border: 2px solid #fff;
    }

    .slider-container-agreement .slider-grid-agreement .grid-line-agreement {
        background-color: #fff;
    }

    .slider-container-agreement .slider-labels-agreement {
        color: #fff;
    }

    .smiley-container-agreement,
    [id^="slider-value-agreement-"] {
        color: #fff;
    }
}

/* ===== AGREEMENT LANDSCAPE MOBILE OPTIMIZATION ===== */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .slider-container-agreement {
        margin-top: 1rem;
        height: 40px;
    }

    .smiley-container-agreement,
    [id^="slider-value-agreement-"] {
        top: -30px;
        font-size: 14px;
    }

    .slider-container-agreement .slider-labels-agreement {
        top: 15px;
        font-size: 12px;
    }

    .slider-container-agreement .slider-labels-agreement .custom-text {
        top: 15px;
        font-size: 9px;
        width: 50px;
    }

    /* Adjust position 7 text for landscape mobile */
    .slider-container-agreement .slider-labels-agreement span:nth-child(8) .custom-text {
        left: 0;
        transform: translateX(-75%);
    }
}








/* Hide the slider description text for 7-scale sliders */
#slider-value-7scale-167 {
    display: none !important;
}

/* Hide the slider description text for 7-scale sliders */
#slider-value-7scale-168 {
    display: none !important;
}

/* Hide the slider description text for 7-scale sliders */
#slider-value-7scale-169 {
    display: none !important;
}

/* Hide the slider description text for 7-scale sliders */
#slider-value-7scale-170 {
    display: none !important;
}

/* Hide the slider description text for 7-scale sliders */
#slider-value-7scale-171 {
    display: none !important;
}

/* Hide the slider description text for 7-scale sliders */
#slider-value-7scale-172 {
    display: none !important;
}

/* Hide the slider description text for 7-scale sliders */
#slider-value-7scale-173 {
    display: none !important;
}

/* Hide the slider description text for 7-scale sliders */
#slider-value-7scale-174 {
    display: none !important;
}

/* Hide the slider description text for 7-scale sliders */
#slider-value-7scale-175 {
    display: none !important;
}

/* Hide the slider description text for 7-scale sliders */
#slider-value-7scale-176 {
    display: none !important;
}

/* Hide the slider description text for 7-scale sliders */
#slider-value-7scale-177 {
    display: none !important;
}

/* Hide the slider description text for 7-scale sliders */
#slider-value-7scale-178 {
    display: none !important;
}
/* Hide the slider description text for 7-scale sliders */
#slider-value-7scale-179 {
    display: none !important;
}
/* Hide the slider description text for 7-scale sliders */
#slider-value-7scale-180 {
    display: none !important;
}
/* Hide the slider description text for 7-scale sliders */
#slider-value-7scale-181 {
    display: none !important;
}

/* Hide the slider description text for 7-scale sliders */
#slider-value-7scale-182 {
    display: none !important;
}

/* Hide the slider description text for 7-scale sliders */
#slider-value-7scale-183 {
    display: none !important;
}

/* Hide the slider description text for 7-scale sliders */
#slider-value-7scale-184 {
    display: none !important;
}
#slider-value-7scale-185 {
    display: none !important;
}





/* ===== NEW SLIDER WIDGET V2 STYLES for ATID questions===== */

.slider-widget {
    position: relative;
    width: 100%;
    max-width: 1000px;
    min-width: 280px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5rem;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Widget track - responsive width */
.widget-track {
    width: calc(100% - 40px); /* Account for container padding */
    height: 6px;
    background-color: #ddd;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px; /* Match container padding */
}

/* Grid marks - perfectly aligned with labels */
.widget-grid {
    position: absolute;
    top: 50%;
    width: calc(100% - 40px); /* Match track width */
    height: 6px;
    display: flex;
    justify-content: space-between;
    left: 20px; /* Match container padding */
    transform: translateY(-50%);
}

.widget-grid .grid-mark {
    width: 2px;
    height: 100%;
    background-color: #999;
    position: relative;
}

/* First grid mark positioning - rest area */
.widget-grid .grid-mark:nth-child(1) {
    margin-left: 0; /* No margin for first line */
}

/* Active grid marks positioning - distributed evenly in remaining space */
.widget-grid .grid-mark:nth-child(2),
.widget-grid .grid-mark:nth-child(3),
.widget-grid .grid-mark:nth-child(4),
.widget-grid .grid-mark:nth-child(5),
.widget-grid .grid-mark:nth-child(6) {
    /* Let flexbox handle distribution */
}

/* Thumb as draggable element */
[id^="thumb-"] {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 60px;
    cursor: pointer;
    transition: left 0.3s ease;
    touch-action: none;
    user-select: none;
    z-index: 0;

    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 400; /* Regular weight for 'far' icons */
    line-height: 1;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

/* ===== DISPLAY TEXT POSITIONED ABOVE WIDGET (BELOW QUESTION) ===== */
.display-container,
[id^="display-text-"] {
    text-align: center;
    font-size: 24px;
    position: absolute;
    top: -50px; /* Position above the slider track, below question */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 0;
    line-height: 1.2;
    color: #333;
}

/* ===== PERFECTLY ALIGNED NUMBER LABELS UNDER GRID MARKS ===== */
.widget-labels {
    position: relative;
    top: 50px; /* Position below the slider track */
    left: 0px; /* Match container padding */
    width: calc(100% - 40px); /* Match track width */
    display: flex;
    font-size: 24px;
    color: #b3b3b3;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Individual label positioning to align exactly with grid marks */
.widget-labels span {
    position: absolute;
    text-align: center;
    transform: translateX(-50%); /* Center each label on its grid mark */
    font-weight: 500;
}

/* Position each label exactly under its corresponding grid mark */
.widget-labels span:nth-child(1) {
    left: 0%; /* Empty - under first grid mark (rest position) */
}

.widget-labels span:nth-child(2) {
    left: 20%; /* "1" - under second grid mark */
}

.widget-labels span:nth-child(3) {
    left: 40%; /* "2" - under third grid mark */
}

.widget-labels span:nth-child(4) {
    left: 60%; /* "3" - under fourth grid mark */
}

.widget-labels span:nth-child(5) {
    left: 80%; /* "4" - under fifth grid mark */
}

.widget-labels span:nth-child(6) {
    left: 100%; /* "5" - under sixth grid mark */
}

/* ===== TABLET STYLES (768px - 1024px) ===== */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    .slider-widget {
        width: 90%;
        max-width: 800px;
        height: 70px;
        margin-top: 4rem;
        padding: 0 15px;
    }

    .widget-track,
    .widget-grid {
        width: calc(100% - 30px);
        left: 15px;
    }

    [id^="thumb-"] {
        width: 50px;
        height: 50px;
        font-size: 50px;
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
        font-weight: 400;
    }

    .display-container,
    [id^="display-text-"] {
        font-size: 22px;
        top: -45px;
    }

    .widget-labels {
        font-size: 22px;
        top: 25px;
        left: 15px;
        width: calc(100% - 30px);
    }

    /* Adjust label positions for 18% rest area on tablet */
    .widget-labels span:nth-child(1) { left: 0%; }
    .widget-labels span:nth-child(2) { left: 18%; }
    .widget-labels span:nth-child(3) { left: 38.5%; }
    .widget-labels span:nth-child(4) { left: 59%; }
    .widget-labels span:nth-child(5) { left: 79.5%; }
    .widget-labels span:nth-child(6) { left: 100%; }
}

/* ===== MOBILE STYLES (up to 768px) ===== */
@media screen and (max-width: 768px) {
    .slider-widget {
        width: 95%;
        max-width: 460px;    /* change8march      500px;*/
        height: 60px;
        margin-top: 3rem;
        padding: 0px;               /* change8march      padding: 0 10px;*/
    }

    .widget-track,
    .widget-grid {
        width: calc(100% - 20px);
        left: 0px;             /* change8march      10px;*/
        height: 4px;
    }

    [id^="thumb-"] {
        width: 40px;
        height: 40px;
        font-size: 40px;
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
        font-weight: 400;
    }

    .display-container,
    [id^="display-text-"] {
        font-size: 18px;
        top: -40px;
    }

    .widget-labels {
        font-size: 16px;
        top: 30px;
        left: 0px;
        width: calc(100% - 20px);
    }

    /* Adjust label positions for 15% rest area on mobile */
    .widget-labels span:nth-child(1) { left: 0%; }
    .widget-labels span:nth-child(2) { left: 15%; }
    .widget-labels span:nth-child(3) { left: 36.25%; }
    .widget-labels span:nth-child(4) { left: 57.5%; }
    .widget-labels span:nth-child(5) { left: 78.75%; }
    .widget-labels span:nth-child(6) { left: 100%; }
}

/* ===== SMALL MOBILE STYLES (up to 480px) ===== */
@media screen and (max-width: 480px) {
    .slider-widget {
        width: 100%;
        max-width: 320px;               /* change8march      350px;*/
        height: 50px;
        margin-top: 2rem;
        padding: 0px;              /* change8march      padding: 0 5px;*/
    }

    .widget-track,
    .widget-grid {
        width: calc(100% - 10px);
        left: 0px;                      /* change8march      5px;*/
    }

    [id^="thumb-"] {
        width: 35px;
        height: 35px;
        font-size: 35px;
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
        font-weight: 400;
    }

    .display-container,
    [id^="display-text-"] {
        font-size: 16px;
        top: -5px;         /* change8march      -15px;*/
    }

    .widget-labels {
        font-size: 14px;
        top: 25px;
        left: 0px;                          /* change8march      5px;*/
        width: calc(100% - 10px);
    }

    /* Adjust label positions for 12% rest area on small mobile */
    .widget-labels span:nth-child(1) { left: 0%; }
    .widget-labels span:nth-child(2) { left: 16%; }
    .widget-labels span:nth-child(3) { left: 37%; }
    .widget-labels span:nth-child(4) { left: 58%; }
    .widget-labels span:nth-child(5) { left: 78%; }
    .widget-labels span:nth-child(6) { left: 100%; }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
    [id^="thumb-"] {
        padding: 10px;
        margin: -10px;
    }

    .slider-widget {
        touch-action: none;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
@media (prefers-reduced-motion: reduce) {
    [id^="thumb-"] {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .widget-track {
        background-color: #000;
        border: 2px solid #fff;
    }

    .widget-grid .grid-mark {
        background-color: #fff;
    }

    .widget-labels {
        color: #fff;
    }

    .display-container,
    [id^="display-text-"] {
        color: #fff;
    }
}

/* ===== LANDSCAPE MOBILE OPTIMIZATION ===== */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .slider-widget {
        margin-top: 1rem;
        height: 40px;
    }

    .display-container,
    [id^="display-text-"] {
        top: -30px;
        font-size: 14px;
    }

    .widget-labels {
        top: 15px;
        font-size: 12px;
    }
}


#exit-btn {
  /*   visibility: hidden;  /* Hides button but keeps its space */

  visibility: visible !important;
}











/* ===== N/A BUTTON ===== */
.na-button-container {
    text-align: center;
    margin: 15px 0;
}

.na-button {
    padding: 8px 20px;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.4;
    width: 220px;        /* fixed width — fits text in 1 line on desktop */
    white-space: normal; /* allow wrapping if needed */
    word-break: break-word;
}

.na-button:hover {
    background-color: #5a6268;
}

/* Tablet */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    .na-button {
        width: 200px;
        font-size: 13px;
        padding: 7px 18px;
    }
}

/* Mobile */
@media screen and (max-width: 768px) {
    .na-button {
        width: 180px;   /* narrower screen but text can wrap to 2 lines */
        font-size: 12px;
        padding: 6px 14px;
    }
}

/* Small mobile */
@media screen and (max-width: 480px) {
    .na-button {
        width: 160px;
        font-size: 11px;
        padding: 5px 12px;
    }
}


/*
.progress-popup {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background-color: #2c7a4b;
    color: white;
    padding: 16px 32px;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
    z-index: 9999;
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    white-space: nowrap;
}

.progress-popup.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

*/






/*
.progress-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(120px);
    border-radius: 14px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
    width: 520px;
    max-width: 92vw;
    overflow: hidden;
    background-color: #d0d0d0;
}

.progress-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.progress-toast-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(135deg, #a8e6cf, #7bdcb5, #4cc9a7);       /* linear-gradient(135deg, #a8e6cf, #7bdcb5, #4cc9a7).   background: linear-gradient(135deg, #1a5c38, #2c7a4b, #3da362);
    z-index: 0;
}

.progress-toast-fill.animate {
    width: 100%;
    transition: width 5s linear;
}

.progress-toast-message {
    position: relative;
    z-index: 1;
    padding: 26px 36px;
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

@media (max-width: 576px) {
    .progress-toast {
      width: 92vw;
      bottom: 20px;
  }
.progress-toast-message {
      font-size: 1.1rem;
      padding: 20px 20px;
}
}
*/




.progress-toast {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%) translateY(120px);
    border-radius: 14px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
    width: 520px;
    max-width: 88vw;
    overflow: hidden;
    background-color: #adadad;
}

.progress-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.progress-toast-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(135deg, #a8e6cf, #7bdcb5, #4cc9a7);
    z-index: 0;
    transition: none;
}

.progress-toast-message {
    position: relative;
    z-index: 1;
    padding: 22px 30px;
    font-size: 2.35rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tablets (portrait and landscape) */
@media (max-width: 768px) {
    .progress-toast {
        width: 85vw;
        bottom: 45px;
    }
    .progress-toast-message {
        font-size: 2.2rem;
        padding: 18px 20px;
    }
}

/* Small phones (iPhone SE, older Androids) */
@media (max-width: 576px) {
    .progress-toast {
        width: 86vw;
        bottom: 40px;
        border-radius: 12px;
    }
    .progress-toast-message {
        font-size: 2.2rem;
        padding: 14px 16px;
        white-space: normal;
    }
}

/* Very small screens */
@media (max-width: 400px) {
    .progress-toast {
        width: 82vw;
        bottom: 38px;
    }
    .progress-toast-message {
        font-size: 2.2rem;
        padding: 10px 10px;
    }
}