/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/*Css for limesurvey elements */

/*.primary-half {*/
/*    display: none !important;*/
/*}*/

.none {
    display: none;
}

#survey-nav {
    /*This is for the big survey banner with linme survey logo */
    display: none; 
}

.control-label {
    display: flex;
}

.captcha-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.captcha-input {
    margin-bottom : 8px;
}

/*I don't know where this is from though */
  .table-bordered > thead > tr > th {
    border: 1px solid #dadada;
  }
  .table-bordered > thead > tr > td {
    border: 1px solid #dadada;
  }
  
  /* Custom CSS that is on azure repo as well */
  
  :root {
  --primary-btn: #3b5e98;
  --primary-container: #3b5e9814;
  --padding: 12px 24px;
}

body {
  padding: 24px !important;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* button related */
.app-btn {
  background-color: var(--primary-btn);
  color: white;
  border: none;
  border-radius: 8px;
  padding: var(--padding);
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

/* i { */
/*   font-size: 24px; */
/* } */

/* header */
.main-header {
  background-color: var(--primary-container);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--padding);
  border-radius: 24px;
}

/* body section */
.home-double-section {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  align-items:stretch;
  flex-wrap: wrap;
  flex: 1;
}

.main-halves {
  background-color: var(--primary-container);
  padding: var(--padding);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-width: 370px;
  flex: 1 1 370px;
  max-width: 100%;
  height: 100%;
}

/*for the bag, gpt code*/
.primary-half {
    position: relative;
}
.bag-with-title {
    position: sticky;
    top: 50px;
}


/* left side */

.bag-img {
  max-height: 580px;
}

.success-title {
  position: relative;
  max-width: 491px;
}

.success-title img {
  position: absolute;
  max-width: 642px;
  left: -50px;
  width: 120%;
}

.success-title h1 {
  font-weight: 700;
  font-size: 3.5625rem;
  max-width: 100%;
  text-wrap: normal;
  text-align: center;
}

footer {
  font-weight: 400;
  font-size: 0.75rem;
  max-width: 30.6875rem;
  text-wrap: normal;
  text-align: center;
}

/*#limesurvey {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*}*/

/*Hide navigation*/
#navigator-container {
    /*display: none !important;*/
    
}

.group-title {
    display: none;
}

/* Onboarding page */
.welcome-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}

.welcome-progress-bars {
  display: flex;
  gap: 8px;
  padding: 8px;
}

.welcome-progress-bar {
  width: 129px;
  height: 16px;
  border-radius: 24px;
}

.welcome-progress-bar-filled {
  background-color: var(--primary-btn);
}

.welcome-progress-bar-empty {
  background-color: #dfe2e8;
}

.welcome-text, .welcome-privacy {
  text-align: center;
  max-width: 642px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}


/*  main progress bar */
.progress-bar-main {
  background-color: var(--primary-btn);
  border-radius: 24px;
}

.step-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.step-btn {
  background-color: transparent;
  border: 1px solid #d1d5db; /* light border */
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-btn);
}

.step-btn:disabled {
  opacity: 0.3;
  cursor: default;
  color: #9ca3af;
}

.step-counter {
  display: flex;
  align-items: baseline;
  margin: 0 20px;
  font-family: sans-serif;
}

.current-step {
  font-weight: 700;
  font-size: 3.5625rem;
  color: #1f2937; /* dark gray text */
}

.total-step {
  font-size: 2.25rem;
  color: #9ca3af; /* lighter gray text */
  margin-left: 2px;
}


/*Container*/
.question-container {
    background-color: rgba(0, 0, 0, 0);
    border: none;
}

/* Question Title*/
.question-title-container {
    text-align: left;
}
.ls-label-question span {
      font-weight: 700 !important;
    font-size: 2.25rem !important;
}
.ls-label-question {
      font-weight: 700 !important;
    font-size: 2.25rem !important;
}

/*Answer container*/
.ls-answers.answers-list.radio-list.row {
     background-color: #DFE2E8;
     border-radius: 24px;
}


/*Question sections*

/* Asterisk */
.question-title-container {
  position: relative;
}

.question-title-container .asterisk {
  position: absolute;
  top: 0.2em;
  left: 0;
}

.question-title-container .question-text {
  /*padding-left: 1.2em;*/
}


/* === Answer grid (ul/li) === */
ul.list-unstyled {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* 1–4 per row responsively */
  gap: 10px;                          /* space between buttons */
  padding: 12px;                      /* optional: create a soft inset like your card */
  margin: 0;
  list-style: none;
  width: 100%;
  box-sizing: border-box;
  /*background: #f5f8fc;              */
  /*border-radius: 14px;*/
}

/* each LI fills its grid cell */
.answer-item {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* kill bootstrap row/col noise if present inside */
.answer-item .row,
.answer-item .col-auto { width: 100%; margin: 0; padding: 0; }

/* hide native inputs */
.answer-item input[type="radio"],
.answer-item input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* === Button style for labels === */
.answer-item .control-label {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;     /* text left, arrow right */
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid var(--primary-btn);        /* blue outline */
  border-radius: 10px;
  background: #fff;
  color: var(--primary-btn);                    
  text-align: left;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .02s ease;
}

/* arrow at the right */
.answer-item .control-label::after {
  content: "→";
  font-size: 16px;
  line-height: 1;
  opacity: .9;
}

/* hover / active */
.answer-item .control-label:hover { background: #eef5ff; border-color: var(--primary-btn); }
.answer-item .control-label:active { transform: translateY(1px); }

/* focus ring for keyboard users */
.answer-item input[type="radio"]:focus-visible + .control-label,
.answer-item input[type="checkbox"]:focus-visible + .control-label {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 100, 184, .25);
}

/* checked state (filled blue) */
.answer-item input[type="radio"]:checked + .control-label,
.answer-item input[type="checkbox"]:checked + .control-label {
  background: #2f64b8;
  color: #fff;
  border-color: #2f64b8;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
}

/* disabled */
.answer-item input:disabled + .control-label {
  opacity: .55;
  cursor: not-allowed;
}

/* remove default LS radio/checkbox bullets if any */
.radio-item label::before, .checkbox-item label::before,
.radio-item label::after,  .checkbox-item label::after {
  display: none !important;
}





/* === Other row tweaks === */
.answer-item.radio-text-item {
  display: flex;
  align-items: center;
  /* space between "Other:" and the input */
  gap: 12px;   
  padding-left: 12px;
}

.row:has(.othertext-label-checkox-container):not(.ls-hidden):not(li) {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 0px;
}

.checkbox-item .othertext-label-checkox-container {
    padding-left: 0px;
}

.checkbox-item.othertext-label-checkox-container {
  padding-left: 12px;
}

.row .answer-item .radio-text-item .radio-item .d-flex {
    padding-left: 12px;
}

/* Label tweaks */
/*.answer-item.radio-text-item .control-label {*/
/*  border: none;*/
/*  background: none;*/
/*  padding: 0;*/
/*  margin: 0;*/
/*  font-weight: 500;*/
/*  color: var(--primary-btn);*/
/*  min-height: auto;*/
/*  cursor: default;*/
/*}*/


/*.answer-item.radio-text-item input[type="text"] {*/
/*  flex: 1 1 auto;*/
/*  min-width: 180px;*/
/*}*/

/* (optional) tighten small screens to 1 per row earlier */
@media (max-width: 480px) {
  ul.list-unstyled { grid-template-columns: 1fr; }
}

@media (max-width: 750px) {
    .primary-half {
        display: none !important;
    }
    
    body {
        padding: 5px !important;
    }
}