:root {

  /* COLORS */

  --brtGrn: #29f19c;
  --medGrn: #01c38d;
  --deepPrpl: #340b6b;
  --drkBlu: #191e29;
  --medBlu: #132d46;
  --litBlu: #02a1f9;
  --ltgrey: #d1d1d1;
  
  /* PURPLE GRAD COLORS */
  --primary: #841DBF;
  --secondary: #480e93;
  --accent: #be12a5;
  --complimentary: #ffcc00;
  --charcoal: #36454F;
  --ltgrey: #d1d1d1;
  --medGrey: ##636363;
  --darkGrey: #313131;
  --white: #ffffff;
  --black: #000000;
  --deepRed: #e00a0a;
  --warmOrange: #FD6528;
  --medGreen: #26C000;
  --litBlu: #02a1f9;


  --btnGrad: linear-gradient(
    to right,
    var(--brtGrn) 0%,
    var(--litBlu) 100%
  );

/* STANDARD FONT WEIGHT STYLES */
  --fw-xbold: 900;
  --fw-bold: 700;
  --fw-semibold: 600;
  --fw-medium: 500;
  --fw-normal: 400;

/* HEADER */

--header-bkgd: transparent;
--status-pill-border:   solid 1px #fff;
--status-pill-border-radius:   999px;

/* SHIELD ICON COLOR */

--shieldIconColor: var(--white);

/* FORM VARIABLES */

--answers-radio-label-border: solid 2px var(--brtGrn);
--answers-radio-border-color: var(--brtGrn);
--answers-radio-hvr-border-color: var(--brtGrn);
--answers-radio-txt-align: left;
--answers-radio-padding: 10px 20px;
--answers-radio-border-radius: 12px;
--cond-block-bkgd-grad: linear-gradient(180deg, #480E93, #841DBF);
--cond-block-font-color: #fff;
--cond-block-border: solid 2px #fff;


/* FOATING FORMS STYLES */

--qz-form-conf-statement-color: #ffffff;
--qz-form-float-bkgd: #132d46d9;
--qz-form-float-border: solid 2px #ffffff;
--qz-form-float-color: #ffffff;
--progress-bkgd: hsla(0, 0%, 100%, .1);
--progress-bar-bkgd: var(--brtGrn);

--q-form-btn-bkgd-color: #fbf5ff;
--q-form-btn-hvr-bkgd-color: #480e93;
--q-form-btn-color: #000000;
--q-form-btn-hvr-color: #000000;
--q-form-btn-border: 2px solid #480e93;
--q-form-btn-hvr-border: 2px solid #841dbf;
--q-form-btn-border-radius: 20px;
--q-form-btn-max-width: 350px;
--q-form-btn-hvr-max-width: 360px;
--quiz-form-btn-padding-btm: .75rem;
--quiz-form-btn-padding-top: .75rem;

--help-text-color: rgba(255, 255, 255, 0.7);

/* FOOTER */

--footer-bkgd: #303030;
--footer-text: #ffffff;
--footer-border: hsla(0,0%,100%,.12);


/* TEXT */

--q-question-font-size: clamp(1.5rem, 1vw + 1rem, 2rem);
--q-question-font-color: #ffffff;
--q-question-font-family: "Tiro Bangla", serif;

/* OFF CANVAS */

--offcanvas-header-bkgd: #232323;
--offcanvas-header-color: rgba(255,255,255,0.5);
--offcanvas-body-bkgd: linear-gradient(180deg,var(--primary),var(--secondary));
--offcanvas-body-hvr-color: var(--complimentary);

/* MAIN TOP PADDING */
--main-padding-top: 5rem;
}



@view-transition {
  navigation: auto;
}

::view-transition-group(root){
  animation-duration: 1.3s;
}


/* ################################
    MISC 
   ################################ */

header {
  view-transition-name: none; 
}
footer {
  view-transition-name: none;
}

html,
body {
    height: 100% 100vh;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans", Arial, sans-serif;
}

.asknow-quiz-logo {max-width: 200px;}
main {
    flex: 1 0 auto;
}
main > div {
    padding-top: var(--main-padding-top);
}

footer {
    flex-shrink: 0
}

.logo-progress-wrap {
    max-width: 700px;
    text-align: center;
}


.quiz-wrapper__outer {
    margin: auto;
    max-width: 720px;
}


/* ################################
    HEADER 
   ################################ */

.quiz-header {
    background: var(--qz-header-bkgd);
}


.shield-icon {
  color: var( --shieldIconColor);
  width: 18px;
  height: 18px;
}
.icon-shield {margin-right: 1em;
width: 18px;
  height: 18px;}


  
a.quiz-logo {width: 350px;}
.quiz-logo img, .asknow-quiz-logo {max-width: 200px; margin: auto;}


  /* ################################
      FORM STYLES 
     ################################ */

input[type=text], input[type=email], input[type=tel], input[type=password], .country-pill {
    border: solid 2px #480e93;
    background-color: #fbf5ff;
    max-width: 450px;
    margin: 0 auto;
}

textarea#question {
    border: solid 2px #841dbf;
    max-width: 450px;
    margin: 0 auto;
}
#char-count {
    max-width: 450px;
    margin: 0 auto;
}

  /* ################################
      RADIO STYLES 
     ################################ */

.answers-wrap {
  text-align: center;
  color: #000;
  /* font-size: 1.4rem; */
}

.answers-wrap .input-radio {
  margin: 0.75rem auto;
  min-width: 320px;
  display: block;
}
.answers-wrap input[type="radio"] {
  display: none;
}

.answers-wrap input[type="radio"] + label span:first-of-type {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}
 

.condition-block {
    background-image: var(--cond-block-bkgd-grad);
    color: var(--cond-block-font-color);
    padding: 1rem;
    max-width: 500px;
    margin: 2rem auto;
    border: var(--cond-block-border);
    border-radius: 20px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, .262745098);
    font-weight: bold;
}

.conditional-answer {
    display: none;
}
.condition-block.is-active {
    display: block;
}
.conditional-answer.is-visible {
    display: block;
}



/* 1. THE BUTTON CONTAINER */
.quiz-form .btn {
    /* --- STRUCTURAL RULES FOR ICON --- */
    position: relative;       
    padding-left: 50px;       
    display: flex;            
    align-items: center;      
    text-align: left;         
    padding-top: var(--quiz-form-btn-padding-top);
    padding-bottom: var(--quiz-form-btn-padding-btm);
    justify-content: center; /* REMOVE IF USING ICONS */

    /* --- VISUAL STYLES (Variables) --- */
    background-color: var(--q-form-btn-bkgd-color);
    border: var(--q-form-btn-border);
    color: var(--q-form-btn-color);
    
    /* WIDTH & CENTERING (The Fix!) */
    max-width: var(--q-form-btn-max-width);
    width: 100%;             /* Ensures it tries to fill space up to 450px */
    margin: 0 auto 1rem auto; /* Top=0, Right=Auto, Bottom=1rem, Left=Auto */
    
    font-weight: bold;
    border-radius: var(--q-form-btn-border-radius);
    transition: all .25s ease-in-out;
}

/* 2. HOVER STATE */
.quiz-form .btn:hover {
    background-color: var(--q-form-btn-hvr-bkgd-color);
    color: var(--q-form-btn-hvr-color);
    font-weight: bold;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, .4431372549);
    border: var(--q-form-btn-hvr-border); 
    max-width: var(--q-form-btn-hvr-max-width);
}

/* 3. THE ICON (::before on the label) */
.quiz-form .btn::before {
    content: "";
    position: absolute;
    left: 15px;               
    top: 50%;
    transform: translateY(-50%); /* Centered vertically */
    
    width: 24px;
    height: 24px;
    
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    transition: transform 0.3s ease; 
}

/* 4. THEME: SPINNING (For Green Quiz) */
/* When hovering the label (.btn), spin the ::before pseudo-element */
.quiz-form .btn:hover::before {
    transform: translateY(-50%) rotate(360deg);
}


    /* ################################
        ICON MAPPING 
       ################################ */

.quiz-form .btn.poor_communication::before {
    background-image: url('img/icons/speaking_head_in_silhouette.png');
}
.quiz-form .btn.feeling_disconnected::before {
    background-image: url('img/icons/puzzle.png');
}
.quiz-form .btn.trust_issues::before {
    background-image: url('img/icons/lock.png');
}
.quiz-form .btn.frequent_arguments::before {
    background-image: url('img/icons/zap.png');
}
.quiz-form .btn.commitment_issues::before {
    background-image: url('img/icons/crystal_ball.png');
}
.quiz-form .btn.feeling_undervalued::before {
    background-image: url('img/icons/gem.png');
}
.quiz-form .btn.mismatched_goals::before {
    background-image: url('img/icons/target.png');
}
.quiz-form .btn.interference_from_others::before {
    background-image: url('img/icons/interference.png');
}
.quiz-form .btn.partner_behavior::before {
    background-image: url('img/icons/penant.png');
}
.quiz-form .btn.not_in_relationship::before {
    background-image: url('img/icons/single-icon.png');
}
.quiz-form .btn.finding_lasting_love::before {
    background-image: url('img/icons/two_hearts.png');
}
.quiz-form .btn.improving_communication::before {
    background-image: url('img/icons/speech_balloon.png');
}
.quiz-form .btn.understanding_partners_needs::before {
    background-image: url('img/icons/brain.png');
}
.quiz-form .btn.to_stay_leave::before {
    background-image: url('img/icons/scales.png');
}
.quiz-form .btn.healing_heartbreak::before {
    background-image: url('img/icons/broken_heart.png');
}
.quiz-form .btn.major_life_decision::before {
    background-image: url('img/icons/twisted_rightwards_arrows.png');
}
.quiz-form .btn.finding_purpose_direction::before {
    background-image: url('img/icons/compass.png');
}
.quiz-form .btn.interference_others::before {
    background-image: url('img/icons/money.png');
}
.quiz-form .btn.financial_improvement::before {
    background-image: url('img/icons/sparkles.png');
}
.quiz-form .btn.something_else::before {
    background-image: url('img/icons/single-icon.png');
}
.quiz-form .btn.caring::before {
    background-image: url('img/icons/hugging_face.png');
}
.quiz-form .btn.respectful::before {
    background-image: url('img/icons/clap.png');
}
.quiz-form .btn.patient::before {
    background-image: url('img/icons/handshake.png');
}
.quiz-form .btn.honest::before {
    background-image: url('img/icons/heart_eyes.png');
}
.quiz-form .btn.helpful::before {
    background-image: url('img/icons/dove_of_peace.png');
}
.quiz-form .btn.all_above::before {
    background-image: url('img/icons/arrows_counterclockwise.png');
}
.quiz-form .btn.sparkles::before {
    background-image: url('img/icons/sparkles.png');
}
.quiz-form .btn.single::before {
    background-image: url('img/icons/single-icon.png');
}
.quiz-form .btn.strength::before {
  background-image: url('img/icons/muscle.png');}
.quiz-form .btn.thinking::before {
  background-image: url('img/icons/thinking_face.png');}
.quiz-form .btn.left-hook::before {
  background-image: url('img/icons/leftwards_arrow_with_hook.png');}
.quiz-form .btn.broken-heart::before {
  background-image: url('img/icons/broken_heart.png');}
.quiz-form .btn.sparkles::before {
  background-image: url('img/icons/sparkles.png');}
.quiz-form .btn.counterclockwise::before {
  background-image: url('img/icons/arrows_counterclockwise.png');}
.quiz-form .btn.single::before {
  background-image: url('img/icons/single-icon.png');}
.quiz-form .btn.dating::before {
  background-image: url('img/icons/tropical_drink.png');}
.quiz-form .btn.married::before {
  background-image: url('img/icons/ring.png');}
.quiz-form .btn.separated::before {
  background-image: url('img/icons/page_with_curl.png');}
.quiz-form .btn.committed::before {
  background-image: url('img/icons/lock.png');}
.quiz-form .btn.looking::before {
  background-image: url('img/icons/heart.png');}
.quiz-form .btn.not_looking::before {
  background-image: url('img/icons/meditating.png');}
.quiz-form .btn.breakup::before {
  background-image: url('img/icons/broken_heart.png');}
.quiz-form .btn.complicated::before {
  background-image: url('img/icons/cyclone.png');}
.quiz-form .btn.open_honest::before {
  background-image: url('img/icons/ok_hand.png');}
.quiz-form .btn.needs_work::before {
  background-image: url('img/icons/wrench.png');}
.quiz-form .btn.avoid_topics::before {
  background-image: url('img/icons/see_no_evil.png');}
.quiz-form .btn.strained::before {
  background-image: url('img/icons/slightly_frowning_face.png');}
.quiz-form .btn.no_contact::before {
  background-image: url('img/icons/octagonal_sign.png');}
.quiz-form .btn.varies::before {
  background-image: url('img/icons/arrows_counterclockwise.png');}
.quiz-form .btn.hopeful::before {
  background-image: url('img/icons/heart_eyes.png');}
.quiz-form .btn.reserved::before {
  background-image: url('img/icons/slightly_smiling_face.png');}
.quiz-form .btn.anxious::before {
  background-image: url('img/icons/cold_sweat.png');}
.quiz-form .btn.calm::before {
  background-image: url('img/icons/neutral_face.png');}
.quiz-form .btn.sad::before {
  background-image: url('img/icons/cry.png');}
.quiz-form .btn.relieved::before {
  background-image: url('img/icons/relieved.png');}
.quiz-form .btn.constantly::before {
  background-image: url('img/icons/arrows_counterclockwise.png');}
.quiz-form .btn.multiple_times_day::before {
  background-image: url('img/icons/clock3.png');}
.quiz-form .btn.once_a_day::before {
  background-image: url('img/icons/date.png');}
.quiz-form .btn.occasionally::before {
  background-image: url('img/icons/calendar.png');}
.quiz-form .btn.rarely::before {
  background-image: url('img/icons/no_entry_sign.png');}
.quiz-form .btn.very_similar::before {
  background-image: url('img/icons/handshake.png');}
.quiz-form .btn.mostly_same::before {
  background-image: url('img/icons/thumb_up.png');}
.quiz-form .btn.major_differences::before {
  background-image: url('img/icons/thinking_face.png');}
.quiz-form .btn.different_goals::before {
  background-image: url('img/icons/zap.png');}
.quiz-form .btn.being_alone::before {
  background-image: url('img/icons/mag.png');}
.quiz-form .btn.losing_independence::before {
  background-image: url('img/icons/dove_of_peace.png');}
.quiz-form .btn.hurt_again::before {
  background-image: url('img/icons/broken_heart.png');}
.quiz-form .btn.not_good_enough::before {
  background-image: url('img/icons/pensive.png');}
.quiz-form .btn.commitment::before {
  background-image: url('img/icons/lock.png');}
.quiz-form .btn.ready_hopeful::before {
  background-image: url('img/icons/heart_stars.png');}
.quiz-form .btn.cautious_optimistic::before {
  background-image: url('img/icons/thinking_face.png');}
.quiz-form .btn.personal_growth::before {
  background-image: url('img/icons/seedling.png');}
.quiz-form .btn.content_independent::before {
  background-image: url('img/icons/blush.png');}
.quiz-form .btn.still_figuring::before {
  background-image: url('img/icons/healing.png');}
.quiz-form .btn.shared_intimacy::before {
  background-image: url('img/icons/couple_with_heart.png');}
.quiz-form .btn.companionship::before {
  background-image: url('img/icons/tada.png');}
.quiz-form .btn.building_stability::before {
  background-image: url('img/icons/hammer.png');}
.quiz-form .btn.supportive_partner::before {
  background-image: url('img/icons/handshake.png');}
.quiz-form .btn.unsure::before {
  background-image: url('img/icons/thinking_face.png');}
.quiz-form .btn.finding_time::before {
  background-image: url('img/icons/alarm_clock.png');}
.quiz-form .btn.fear_of_hurt::before {
  background-image: url('img/icons/slightly_frowning_face.png');}
.quiz-form .btn.not_meeting::before {
  background-image: url('img/icons/question.png');}
.quiz-form .btn.uncertain::before {
  background-image: url('img/icons/woman-shrugging.png');}
.quiz-form .btn.not_interested::before {
  background-image: url('img/icons/no_entry_sign.png');}
.quiz-form .btn.very_important::before {
  background-image: url('img/icons/fire.png');}
.quiz-form .btn.important::before {
  background-image: url('img/icons/sparkles.png');}
.quiz-form .btn.somewhat_important::before {
  background-image: url('img/icons/slightly_smiling_face.png');}
.quiz-form .btn.not_very_important::before {
  background-image: url('img/icons/thinking_face.png');}
.quiz-form .btn.not_important::before {
  background-image: url('img/icons/no_good.png');}
.quiz-form .btn.absolutely::before {
  background-image: url('img/icons/100.png');}
.quiz-form .btn.maybe_possible::before {
  background-image: url('img/icons/star2.png');}
.quiz-form .btn.not_sure::before {
  background-image: url('img/icons/thinking_face.png');}
.quiz-form .btn.not_really::before {
  background-image: url('img/icons/thumb_down.png');}
.quiz-form .btn.open_discussion::before {
  background-image: url('img/icons/speaking_head_in_silhouette.png');}
.quiz-form .btn.find_compromise::before {
  background-image: url('img/icons/handshake.png');}
.quiz-form .btn.avoid_issue::before {
  background-image: url('img/icons/see_no_evil.png');}
.quiz-form .btn.get_defensive::before {
  background-image: url('img/icons/shield.png');}
.quiz-form .btn.depends_situation::before {
  background-image: url('img/icons/arrows_counterclockwise.png');}
.quiz-form .btn.kind_words::before {
  background-image: url('img/icons/speech_balloon.png');}
.quiz-form .btn.acts_service::before {
  background-image: url('img/icons/hammer_and_wrench.png');}
.quiz-form .btn.giving_gifts::before {
  background-image: url('img/icons/gift.png');}
.quiz-form .btn.quality_time::before {
  background-image: url('img/icons/alarm_clock.png');}
.quiz-form .btn.physical_touch::before {
  background-image: url('img/icons/hugging_face.png');}
.quiz-form .btn.supportive_open::before {
  background-image: url('img/icons/thumb_up.png');}
.quiz-form .btn.cautiously_hopeful::before {
  background-image: url('img/icons/crossed_fingers.png');}
.quiz-form .btn.unsure_follow_through::before {
  background-image: url('img/icons/monocle.png');}
.quiz-form .btn.uninterested::before {
  background-image: url('img/icons/no_good.png');}
.quiz-form .btn.depends_on_changes::before {
  background-image: url('img/icons/woman-shrugging.png');}
.quiz-form .btn.happiness_current_love::before {
  background-image: url('img/icons/sparkles.png');}
.quiz-form .btn.finding_true_love::before {
  background-image: url('img/icons/mag.png');}
.quiz-form .btn.joy_partner::before {
  background-image: url('img/icons/rainbow.png');}
.quiz-form .btn.getting_ex_back::before {
  background-image: url('img/icons/arrows_counterclockwise.png');}
.quiz-form .btn.learning_from_past::before {
  background-image: url('img/icons/books.png');}
.quiz-form .btn.seeing_future_clearly::before {
  background-image: url('img/icons/crystal_ball.png');}
.quiz-form .btn.something_else::before {
  background-image: url('img/icons/single-icon.png');}
.quiz-form .btn.offer_support::before {
  background-image: url('img/icons/handshake.png');}
.quiz-form .btn.help_give_space::before {
  background-image: url('img/icons/seedling.png');}
.quiz-form .btn.how_to_support_them::before {
  background-image: url('img/icons/thinking_face.png');}
.quiz-form .btn.become_withdrawn::before {
  background-image: url('img/icons/desert_island.png');}
.quiz-form .btn.dont_do_anything::before {
  background-image: url('img/icons/snowflake.png');}
.quiz-form .btn.take_seriously::before {
  background-image: url('img/icons/memo.png');}
.quiz-form .btn.listen_selectively::before {
  background-image: url('img/icons/headphones.png');}
.quiz-form .btn.depends_on_friend::before {
  background-image: url('img/icons/thinking_face.png');}
.quiz-form .btn.ignore_it::before {
  background-image: url('img/icons/hear_no_evil.png');}
.quiz-form .btn.complete_acceptance::before {
  background-image: url('img/icons/hugging_face.png');}
.quiz-form .btn.passion_excitement::before {
  background-image: url('img/icons/fire.png');}
.quiz-form .btn.security_stability::before {
  background-image: url('img/icons/shield.png');}
.quiz-form .btn.freedom_to_grow::before {
  background-image: url('img/icons/seedling.png');}
.quiz-form .btn.emotional_understanding::before {
  background-image: url('img/icons/thought_balloon.png');}
.quiz-form .btn.very_comfortable::before {
  background-image: url('img/icons/thumb_up.png');}
.quiz-form .btn.mostly_fine::before {
  background-image: url('img/icons/slightly_smiling_face.png');}
.quiz-form .btn.slightly_worried::before {
  background-image: url('img/icons/slightly_frowning_face.png');}
.quiz-form .btn.anxious_insecure::before {
  background-image: url('img/icons/cold_sweat.png');}
.quiz-form .btn.depends_who::before {
  background-image: url('img/icons/thinking_face.png');}
.quiz-form .btn.dont_like_it::before {
  background-image: url('img/icons/thumb_down.png');}
.quiz-form .btn.talk_calmly::before {
  background-image: url('img/icons/meditating.png');}
.quiz-form .btn.tensions_rise::before {
  background-image: url('img/icons/chart_up.png');}
.quiz-form .btn.shut_down::before {
  background-image: url('img/icons/lock.png');}
.quiz-form .btn.ask_for_advice::before {
  background-image: url('img/icons/speaking_head_in_silhouette.png');}
.quiz-form .btn.depends_on_issue::before {
  background-image: url('img/icons/thinking_face.png');}
.quiz-form .btn.share_openly::before {
  background-image: url('img/icons/speaking_head_in_silhouette.png');}
.quiz-form .btn.share_selectively::before {
  background-image: url('img/icons/mag.png');}
.quiz-form .btn.process_alone::before {
  background-image: url('img/icons/brain.png');}
.quiz-form .btn.hide_completely::before {
  background-image: url('img/icons/see_no_evil.png');}
.quiz-form .btn.distract_yourself::before {
  background-image: url('img/icons/video_game.png');}
.quiz-form .btn.depends_why::before {
  background-image: url('img/icons/woman-shrugging.png');}
.quiz-form .btn.taught_lessons::before {
  background-image: url('img/icons/pencil2.png');}
.quiz-form .btn.repeat_patterns::before {
  background-image: url('img/icons/arrows_counterclockwise.png');}
.quiz-form .btn.do_things_differently::before {
  background-image: url('img/icons/twisted_rightwards_arrows.png');}
.quiz-form .btn.childhood_influences_me::before {
  background-image: url('img/icons/girl.png');}
.quiz-form .btn.doesnt_affect_me::before {
  background-image: url('img/icons/shield.png');}
.quiz-form .btn.mending_heart::before {
  background-image: url('img/icons/mending-heart-emoji.png');}
.quiz-form .btn.target::before {
  background-image: url('img/icons/target.png');}
.quiz-form .btn.compass::before {
  background-image: url('img/icons/compass.png');}
.quiz-form .btn.disconnected::before {
  background-image: url('img/icons/puzzle.png');}
.quiz-form .btn.unappreciated::before {
  background-image: url('img/icons/gem.png');}
.quiz-form .btn.well_being::before {
  background-image: url('img/icons/fern.png');}
.quiz-form .btn.interference::before {
  background-image: url('img/icons/interference.png');}
.quiz-form .btn.scales::before {
  background-image: url('img/icons/scales.png');}
.quiz-form .btn.finding_lasting_love::before {
  background-image: url('img/icons/two_hearts.png');}
.quiz-form .btn.closed-door::before {
  background-image: url('img/icons/door-emoji.png');}
.quiz-form .btn.stability::before {
  background-image: url('img/icons/house.png');}
.quiz-form .btn.affirmative::before {
  background-image: url('img/icons/quiz-checkmark.svg');}
.quiz-form .btn.negative::before {
  background-image: url('img/icons/quiz-xmark.svg');}

  /* FOR YES OR NO ANSWERS */

  /* --- MODIFIER: Centered Buttons (for Yes/No) --- */

/* 1. Reset the container to center everything */
.quiz-form .btn.center-content {
    justify-content: center; /* Flexbox centering */
    padding-left: 0;         /* Remove the "List View" empty space */
    text-align: center;
}

/* 2. Un-pin the Icon */
.quiz-form .btn.center-content::before {
    position: relative;      /* Put icon back in the flow */
    left: auto;              /* Stop pinning to left edge */
    top: auto;               /* Stop pinning to top edge */
    transform: none;         /* Remove the "translateY" centering trick */
    
    margin-right: 10px;      /* Add space between Icon and Text */
    display: inline-block;   /* Ensure it sits inline */
}

/* 3. Adjust the Animation for Centered Mode */
/* Since we removed 'translateY' above, we need a simpler hover animation here */
.quiz-form .btn.center-content:hover::before {
    transform: scale(1.3);   /* Just scale, don't translate */
    /* OR use rotate(360deg) if you prefer the spin */
}


.quiz-form-float .help-text {
    color: var(--help-text-color); /* Light grey text */
    font-size: 0.85rem;
}

.form-label {font-size: 1rem;}

.optin-text {font-size: .8rem;}

.input-group select {margin-bottom: .7em;}

.quiz-dob-select {
    border: solid 1px #480e93;
    max-width: 650px;
    margin: 0 auto;
    margin-bottom: 1rem;
    border-radius: 16px;
    color: #480e93;
    background-color: #fff;
    overflow: hidden;
}

select.form-select {
    border: solid 2px #480e93;
    border-radius: 12px;
    overflow: hidden;
    background-color: #fbf5ff;
}

.btn-check:checked+.btn {
background-color: #841dbf;
color: #fff;
font-weight: bold;
border: solid 1px #841dbf;
}


/* YES/NO INPUT BUTTON STYLES */

.yes-or-no + .answers-wrap .input-radio {
  margin: 0.75rem auto;
  min-width: none;
  display: block;
}


/* SINGLE ANSWER RADIO ANSWER ICONS */


.multi-answer-icon {
  width: 32px;
  height: 32px;
  display: inline-block;
  margin-right: 1rem;
  transition: transform 600ms;
}


.quiz-question-container:hover .multi-answer-icon {
  transform: rotate(360deg);
}

.continue-btn .btn.btn-primary {
    margin: 2rem auto;
    background-color: #be12a5;
    color: #fff;
    transition: all .5s ease-in-out;
    padding: .5rem 5rem;
    background-image: linear-gradient(90deg, var(--secondary), var(--accent));
    background-size: 100% 100%;
    border: solid 2px #fff;
}

.continue-btn .btn.btn-primary:hover {
    margin: 2rem auto;
    background-color: #480e93;
    background-image: linear-gradient(180deg, var(--accent), var(--secondary));
    background-size: 100% 200%;
}

/* MULTIPLE CHOICE CHEKBOX STYLES */

/* When the checkbox is checked, add a blue background */
.quiz-question-container input:checked ~ .checkmark {
  background-color: #29f19c;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.quiz-question-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.quiz-question-container .checkmark:after {
  left: 5px;
  top: 0;
  width: 8px;
  height: 15px;
  border: solid black;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* =========================================
   FLOATING FORM
   ========================================= */

/* --- STRUCTURE --- */
/* This handles size, spacing, and rounding for ALL themes */
.quiz-form-float {
    max-width: 450px;
    width: 100%;
    border-radius: 12px;
    padding: 1.5rem;    /* Replaces p-4 */
    margin-top: 1.5rem; /* Replaces mt-4 */
    position: relative;
    z-index: 10;
    margin: 0 auto;
    background-color: var(--qz-form-float-bkgd);
    border: var(--qz-form-float-border);
    border-radius: 20px;
    box-shadow: 2px 2px 12px #0000004a;
    color: var(--qz-form-float-color);
}


.confidential-statement {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2em;
    color: var(--qz-form-conf-statement-color);
    font-size: .8rem;
    line-height: 1;
    padding: 0 1rem;
    color: var(--qz-form-conf-statement-color)
}

.status-pill {
    display: inline-block;
    padding: .25rem .6rem;
    border-radius: var(--status-pill-border-radius);
    font-size: .8rem;
    line-height: 1;
    color: #fff;
    box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .15) inset;
    border: var(--status-pill-border);
}




.progress {
    background: var(--progress-bkgd);
    height: 6px;
    max-width: 450px;
    margin: 0 auto;
    margin-bottom: 1rem;
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: var(--bs-progress-bar-color);
    text-align: center;
    white-space: nowrap;
    background-color: var(--progress-bar-bkgd);
    transition: var(--bs-progress-bar-transition);
}

.quiz-form-float .progress-bar {
    transition: width .35s ease;
    background-color: #fff;
}

.quiz-form-float .form-check {padding-left: 0;}

/* FOOTER */

.quiz-footer {
background: var(--footer-bkgd);
border-top: 1px solid var(--footer-border);
color: var(--footer-text);
padding: .5em;
width: 100%;
text-align: center;
}

.inset-img {
    max-width: 300px;
    border: solid 1px gray;
    margin: 1rem auto;
    margin-bottom: 2rem;
}

/* TEXT */

.quiz-question {
    font-size: var(--q-question-font-size);
    line-height: 1.3;
    color: var(--q-question-font-color);
    text-align: center;
    font-family: var(--q-question-font-family);
}

/* OFF CANVAS */

.offcanvas-header {
    background-color: var(--offcanvas-header-bkgd);
    color: var(--offcanvas-header-color);
}
.offcanvas-body {
    background-image: var(--offcanvas-body-bkgd);
    color: var(--offcanvas-header-color);
}
.offcanvas-body a.nav-link{
    color: var(--offcanvas-header-color);
}
.offcanvas-body a.nav-link:hover{
    color: var(--offcanvas-body-hvr-color);
}


/* WINDOWS SELECT STYLES */

/* select.form-select, select.form-select:focus, select.form-select:active {
  color: white !important;
} */

.os-windows select.form-select:focus, .os-windows select.form-select:active {
  color: white !important;
  background-color: #0e1e37 !important;
}

/* CALL CTA MODAL STYLES */
.call-cta {font-size: 1rem; color: #000; font-weight: bold;}
.call-cta a {font-size: 2rem; color: #841DBF; font-weight: bold;}
.cta-modal {border: 6px solid #841DBF;}
.offer {font-weight: 700; color: #841DBF; font-size: 2rem;}
h1 {font-weight: 700; color: #841DBF; font-size: 2rem;}
.offer span {font-weight: 700; color: #590f83; font-size: 1.3rem;}
.user-question{color: red; font-weight: bold; line-height: 1;}
a.call-cta { color: #fff; }
.call-cta-wrap {background-color: #590f83; color: #fff; font-weight: 700; padding: .5 1em; text-align: center; border-radius: 20px; margin-top: 1em;}
.call-cta-wrap p {margin-bottom: 0; pad: 1em;}
.modal-body img {margin-top: -2.5em; width: 100%; max-width: 170px; text-align: center;}
.cta-modal h1, .cta-modal h2 {line-height: .9; font-family: "Tiro Bangla", serif;}
.modal-intro {line-height: 1;}