/* ================================================================
   TalentCI Survey Theme  —  v1.1.0
   ================================================================ */

/* ----------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------- */
:root {
    --tc-primary:        #0A66C2;
    --tc-primary-dark:   #004182;
    --tc-primary-light:  #EBF3FF;
    --tc-primary-ring:   rgba(10,102,194,0.22);

    --tc-bg:             #eef1f5;
    --tc-surface:        #ffffff;
    --tc-surface-alt:    #f7f9fb;
    --tc-border:         #dde3ea;

    --tc-text:           #1a1f2e;
    --tc-text-sec:       #5a6478;
    --tc-text-muted:     #8a94a6;

    --tc-success:        #16a34a;
    --tc-success-bg:     #dcfce7;
    --tc-error:          #dc2626;
    --tc-error-bg:       #fee2e2;
    --tc-warning:        #d97706;
    --tc-warning-bg:     #fef3c7;

    --tc-r-xs:  4px;
    --tc-r-sm:  8px;
    --tc-r:     12px;
    --tc-r-lg:  16px;

    --tc-sh-sm: 0 1px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --tc-sh:    0 3px 12px rgba(0,0,0,0.08);
    --tc-sh-lg: 0 8px 32px rgba(0,0,0,0.12);

    --tc-nav-h: 54px;
    --tc-prog-h: 40px;
    --tc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --tc-ease: all 0.18s cubic-bezier(0.4,0,0.2,1);
}

/* ----------------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family:   var(--tc-font) !important;
    background:    var(--tc-bg) !important;
    color:         var(--tc-text) !important;
    font-size:     15px !important;
    line-height:   1.55 !important;
    padding-top:   calc(var(--tc-nav-h) + var(--tc-prog-h)) !important;
    padding-bottom: 32px !important;
    min-height:    100vh;
    display:       flex;
    flex-direction: column;
}

body > article, body > main { flex: 1; }
a { color: var(--tc-primary); text-decoration: none; }
a:hover { color: var(--tc-primary-dark); }

/* ----------------------------------------------------------------
   3. NAVBAR
   ---------------------------------------------------------------- */
.tc-navbar {
    height:      var(--tc-nav-h) !important;
    background:  var(--tc-surface) !important;
    border-bottom: 1px solid var(--tc-border);
    box-shadow:  var(--tc-sh-sm);
    padding:     0 !important;
    z-index:     1040;
}

.tc-navbar-inner {
    max-width:   860px;
    margin:      0 auto;
    padding:     0 20px;
    height:      var(--tc-nav-h);
    display:     flex;
    align-items: center;
    gap:         12px;
}

.tc-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.tc-brand-logo {
    width: 30px; height: 30px;
    background: var(--tc-primary);
    color: #fff;
    border-radius: var(--tc-r-sm);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 15px;
    box-shadow: 0 2px 8px rgba(10,102,194,0.3);
    flex-shrink: 0;
}

.tc-brand-text { display: flex; flex-direction: column; line-height: 1.15; }

.tc-brand-name {
    font-weight: 700; font-size: 14px;
    color: var(--tc-primary); letter-spacing: -0.2px;
}

.tc-brand-survey {
    font-size: 11px; color: var(--tc-text-muted);
    max-width: 300px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}

/* Toggler (mobile uniquement) */
.tc-toggler {
    border: none; background: transparent;
    color: var(--tc-text-sec); padding: 6px;
    border-radius: var(--tc-r-sm); cursor: pointer;
    display: none; /* caché sur desktop */
}

@media (max-width: 767px) { .tc-toggler { display: flex; align-items: center; } }

.tc-nav-links {
    display: flex; align-items: center; gap: 2px;
    list-style: none; margin: 0; padding: 0; margin-left: auto;
}

.tc-nav-links li a {
    color: var(--tc-text-sec) !important;
    font-size: 13px; font-weight: 500;
    padding: 6px 10px !important;
    border-radius: var(--tc-r-sm);
    transition: var(--tc-ease);
    display: flex; align-items: center; gap: 5px;
}

.tc-nav-links li a:hover {
    background: var(--tc-primary-light);
    color: var(--tc-primary) !important;
}

.tc-nav-links .dropdown-menu {
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-r);
    box-shadow: var(--tc-sh);
    padding: 6px; min-width: 160px;
}

.tc-nav-links .dropdown-item {
    border-radius: var(--tc-r-sm);
    font-size: 13px; padding: 7px 10px;
    color: var(--tc-text); transition: var(--tc-ease);
}

.tc-nav-links .dropdown-item:hover {
    background: var(--tc-primary-light); color: var(--tc-primary);
}

/* ----------------------------------------------------------------
   4. BARRE DE PROGRESSION
   ---------------------------------------------------------------- */
.tc-progress-wrap {
    position: fixed !important;
    top: var(--tc-nav-h); left: 0; right: 0;
    height: var(--tc-prog-h);
    background: var(--tc-surface);
    border-bottom: 1px solid var(--tc-border);
    z-index: 1030;
    display: flex; align-items: center;
}

.tc-progress-inner {
    max-width: 860px; margin: 0 auto;
    padding: 0 20px; width: 100%;
    display: flex; align-items: center; gap: 12px;
}

.tc-progress-label {
    font-size: 11px; font-weight: 600; color: var(--tc-text-muted);
    text-transform: uppercase; letter-spacing: 0.7px; white-space: nowrap;
}

.tc-progress-pct {
    font-size: 12px; font-weight: 700;
    color: var(--tc-primary); white-space: nowrap; min-width: 32px; text-align: right;
}

.tc-progress-track {
    flex: 1; background: var(--tc-border);
    border-radius: 100px; height: 5px; overflow: hidden;
}

.tc-progress-fill {
    background: linear-gradient(90deg, var(--tc-primary), #3b9bff);
    border-radius: 100px; height: 100%;
    transition: width 0.5s ease;
}

/* Masquer la progress bar vanilla */
.progress, .space-col > .progress { display: none !important; }

/* ----------------------------------------------------------------
   5. CONTENEUR
   ---------------------------------------------------------------- */
.container-md, .container-fluid,
#outerframeContainer, #outerframe {
    max-width: 820px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
}

/* ----------------------------------------------------------------
   6. BOUTON INTERNE CACHÉ (#defaultbtn)
      LimeSurvey génère ce bouton avec style="display:none"
      mais notre CSS button[type="submit"] écrase ça.
      On le neutralise ici avec la priorité maximale.
   ---------------------------------------------------------------- */
#defaultbtn,
button#defaultbtn,
[id="defaultbtn"],
button[value="default"][name="move"],
button.submit.d-none,
.d-none[type="submit"] {
    display:    none !important;
    visibility: hidden !important;
    position:   absolute !important;
    left:       -9999px !important;
    width:      0 !important;
    height:     0 !important;
    overflow:   hidden !important;
    pointer-events: none !important;
    opacity:    0 !important;
}

/* ----------------------------------------------------------------
   7. CARTES QUESTIONS
   ---------------------------------------------------------------- */
.question-container,
div[id^="question"] {
    background:    var(--tc-surface) !important;
    border:        1px solid var(--tc-border) !important;
    border-radius: var(--tc-r) !important;
    box-shadow:    var(--tc-sh-sm) !important;
    padding:       16px 20px !important;
    margin-bottom: 10px !important;
    position:      relative;
    overflow:      hidden;
    transition:    box-shadow 0.18s, border-color 0.18s;
}

.question-container::before,
div[id^="question"]::before {
    content:  '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--tc-primary), #3b9bff);
}

.question-container:focus-within,
div[id^="question"]:focus-within {
    border-color: var(--tc-primary) !important;
    box-shadow: var(--tc-sh-sm), 0 0 0 3px var(--tc-primary-ring) !important;
}

/* Numéro */
.question-number, .ls-label-question-number {
    display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    width: 24px !important; height: 24px !important;
    background: var(--tc-primary-light) !important;
    color: var(--tc-primary) !important;
    border-radius: 50% !important;
    font-size: 11px !important; font-weight: 700 !important;
    margin-right: 8px !important; flex-shrink: 0;
}

/* Texte question */
.question-text,
.ls-label-question,
.question-title-container label,
.question-title-container .ls-label-question {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--tc-text) !important;
    line-height: 1.4 !important;
    margin-bottom: 2px !important;
}

.question-code, .ls-label-question-code {
    font-size: 10px !important; color: var(--tc-text-muted) !important;
    font-weight: 500 !important; text-transform: uppercase; letter-spacing: 0.5px;
}

/* Groupe */
.group-title, .ls-group-title {
    font-size: 17px !important; font-weight: 700 !important;
    color: var(--tc-text) !important;
    margin: 16px 0 4px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--tc-border);
}

.group-desc, .ls-group-desc {
    color: var(--tc-text-sec) !important; font-size: 13px !important;
    margin-bottom: 10px !important;
}

/* Aide */
.question-help, .ls-questionhelp {
    background: var(--tc-surface-alt) !important;
    border: 1px solid var(--tc-border) !important;
    border-radius: var(--tc-r-sm) !important;
    padding: 8px 12px !important;
    font-size: 12px !important; color: var(--tc-text-sec) !important;
    margin-top: 8px !important;
    display: flex; align-items: flex-start; gap: 6px;
}

.question-help::before, .ls-questionhelp::before {
    content: 'ℹ'; color: var(--tc-primary); font-weight: 700;
    flex-shrink: 0; font-size: 13px;
}

/* ----------------------------------------------------------------
   8. CHAMPS TEXTE / TEXTAREA / SELECT
   ---------------------------------------------------------------- */
.form-control,
input[type="text"], input[type="email"], input[type="number"],
input[type="tel"], input[type="url"], input[type="date"],
textarea, select {
    background:    var(--tc-surface) !important;
    border:        1px solid var(--tc-border) !important;
    border-radius: var(--tc-r-sm) !important;
    color:         var(--tc-text) !important;
    font-family:   var(--tc-font) !important;
    font-size:     14px !important;
    padding:       8px 12px !important;
    transition:    border-color 0.15s, box-shadow 0.15s !important;
    width: 100%; outline: none;
}

.form-control:focus,
input[type="text"]:focus, input[type="email"]:focus,
input[type="number"]:focus, textarea:focus, select:focus {
    border-color: var(--tc-primary) !important;
    box-shadow: 0 0 0 3px var(--tc-primary-ring) !important;
}

.form-control::placeholder, input::placeholder, textarea::placeholder {
    color: var(--tc-text-muted) !important;
}

textarea.form-control { min-height: 90px; resize: vertical; }

select.form-control, select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%235a6478' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    -webkit-appearance: none !important; appearance: none !important;
    padding-right: 36px !important; cursor: pointer;
}

/* ----------------------------------------------------------------
   9. RADIO & CHECKBOX
   ---------------------------------------------------------------- */
.radio label, .checkbox label,
.form-check-label, .ls-answers label {
    display: flex !important; align-items: flex-start !important;
    gap: 8px !important; cursor: pointer !important;
    padding: 6px 10px !important;
    border: 1px solid var(--tc-border) !important;
    border-radius: var(--tc-r-sm) !important;
    margin-bottom: 3px !important;
    background: var(--tc-surface) !important;
    transition: var(--tc-ease) !important;
    font-size: 14px !important; color: var(--tc-text) !important;
    line-height: 1.4 !important;
}

.radio label:hover, .checkbox label:hover,
.form-check-label:hover, .ls-answers label:hover {
    border-color: var(--tc-primary) !important;
    background: var(--tc-primary-light) !important;
}

.radio input[type="radio"], .ls-answers input[type="radio"],
.checkbox input[type="checkbox"], .ls-answers input[type="checkbox"],
.form-check-input {
    appearance: none !important; -webkit-appearance: none !important;
    width: 18px !important; height: 18px !important;
    border: 2px solid var(--tc-border) !important;
    background: var(--tc-surface) !important;
    flex-shrink: 0 !important; margin: 0 !important;
    cursor: pointer !important; transition: var(--tc-ease) !important;
    position: relative !important;
}

.radio input[type="radio"], .ls-answers input[type="radio"] {
    border-radius: 50% !important; margin-top: 2px !important;
}

.checkbox input[type="checkbox"], .ls-answers input[type="checkbox"] {
    border-radius: var(--tc-r-xs) !important; margin-top: 2px !important;
}

.radio input[type="radio"]:checked, .ls-answers input[type="radio"]:checked {
    border-color: var(--tc-primary) !important;
    background: var(--tc-primary) !important;
    box-shadow: inset 0 0 0 3px #fff !important;
}

.checkbox input[type="checkbox"]:checked, .ls-answers input[type="checkbox"]:checked {
    border-color: var(--tc-primary) !important;
    background: var(--tc-primary) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.854 3.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3.5-3.5a.5.5 0 11.708-.708L6.5 10.293l6.646-6.647a.5.5 0 01.708 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 12px !important;
}

/* ----------------------------------------------------------------
   10. NAVIGATOR (Précédent / Suivant / Soumettre)
   ---------------------------------------------------------------- */
.tc-navigator {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    background:      var(--tc-surface);
    border:          1px solid var(--tc-border);
    border-radius:   var(--tc-r);
    box-shadow:      var(--tc-sh-sm);
    padding:         12px 18px;
    margin-top:      10px;
    margin-bottom:   28px;
    gap:             10px;
}

/* Quand seulement le bouton Suivant (pas de Précédent) */
.tc-navigator.tc-nav-only-next {
    justify-content: center;
}

/* Boutons communs */
.tc-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    font-family:   var(--tc-font);
    font-size:     14px;
    font-weight:   600;
    padding:       9px 22px;
    border-radius: var(--tc-r-sm);
    cursor:        pointer;
    transition:    var(--tc-ease);
    border:        none;
    white-space:   nowrap;
    line-height:   1;
}

/* Bouton Suivant / Soumettre */
.tc-btn-next, .tc-btn-submit {
    background:  var(--tc-primary);
    color:       #fff !important;
    box-shadow:  0 2px 8px rgba(10,102,194,0.28);
}

.tc-btn-next:hover, .tc-btn-submit:hover {
    background:  var(--tc-primary-dark);
    box-shadow:  0 4px 14px rgba(10,102,194,0.38);
    transform:   translateY(-1px);
    color:       #fff !important;
}

.tc-btn-next:active, .tc-btn-submit:active { transform: translateY(0); }

/* Bouton Précédent */
.tc-btn-prev {
    background:   transparent;
    color:        var(--tc-text-sec) !important;
    border:       1.5px solid var(--tc-border) !important;
}

.tc-btn-prev:hover {
    border-color:  var(--tc-primary) !important;
    color:         var(--tc-primary) !important;
    background:    var(--tc-primary-light);
}

/* Bouton désactivé */
.tc-btn:disabled, .tc-btn.disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }

/* Compatibilité — styles Bootstrap btn qui s'appliquent encore */
.btn-primary,
button.btn-primary:not(.tc-btn-prev) {
    background:    var(--tc-primary) !important;
    border:        none !important;
    border-radius: var(--tc-r-sm) !important;
    color:         #fff !important;
    font-size:     14px !important;
    font-weight:   600 !important;
    padding:       9px 22px !important;
    box-shadow:    0 2px 8px rgba(10,102,194,0.28) !important;
    transition:    var(--tc-ease) !important;
}

.btn-primary:hover, button.btn-primary:not(.tc-btn-prev):hover {
    background: var(--tc-primary-dark) !important;
}

.btn-default, .btn-secondary,
button.btn-outline-secondary {
    background:    transparent !important;
    border:        1.5px solid var(--tc-border) !important;
    border-radius: var(--tc-r-sm) !important;
    color:         var(--tc-text-sec) !important;
    font-size:     14px !important;
    font-weight:   500 !important;
    padding:       8px 20px !important;
    transition:    var(--tc-ease) !important;
}

.btn-default:hover, .btn-secondary:hover, button.btn-outline-secondary:hover {
    border-color: var(--tc-primary) !important;
    color:        var(--tc-primary) !important;
    background:   var(--tc-primary-light) !important;
}

/* Anciens sélecteurs navigator vanilla — masquer ou réinitialiser */
#navigator-container.row.navigator,
div[id*="navigatorcontainer"] {
    all: unset;
    display: block;
}

/* ----------------------------------------------------------------
   11. PAGE D'ACCUEIL
   ---------------------------------------------------------------- */
.jumbotron, .ls-welcome-wrapper, .welcome-text,
#welMessage, div[id*="welMessage"] {
    background:    var(--tc-surface) !important;
    border:        1px solid var(--tc-border) !important;
    border-radius: var(--tc-r-lg) !important;
    box-shadow:    var(--tc-sh) !important;
    padding:       28px 32px !important;
    text-align:    center;
    margin-bottom: 10px !important;
}

.survey-title, h1.survey-title, .ls-start-title {
    font-size: 26px !important; font-weight: 800 !important;
    color: var(--tc-text) !important;
    line-height: 1.2 !important; margin-bottom: 10px !important;
    letter-spacing: -0.4px;
}

.survey-description, .ls-start-description {
    font-size: 14px !important; color: var(--tc-text-sec) !important;
    line-height: 1.6 !important; margin: 0 auto 20px !important;
    max-width: 560px;
}

.therearexquestions, div[id*="therearexquestions"] {
    display: inline-block;
    background: var(--tc-primary-light) !important;
    color: var(--tc-primary) !important;
    border-radius: 100px !important;
    padding: 4px 14px !important;
    font-size: 12px !important; font-weight: 600 !important;
    margin-bottom: 16px !important;
}

/* ----------------------------------------------------------------
   12. PAGE DE FIN
   ---------------------------------------------------------------- */
.endmessage, .ls-completed-container, #completed-container {
    background:    var(--tc-surface) !important;
    border:        1px solid var(--tc-border) !important;
    border-radius: var(--tc-r-lg) !important;
    box-shadow:    var(--tc-sh) !important;
    padding:       40px 32px !important;
    text-align:    center;
    border-top:    4px solid var(--tc-success) !important;
    margin:        10px 0;
}

.endmessage::before {
    content: '✓';
    display: block;
    width: 56px; height: 56px;
    background: var(--tc-success-bg);
    color: var(--tc-success);
    border-radius: 50%;
    font-size: 24px; font-weight: 700;
    line-height: 56px; text-align: center;
    margin: 0 auto 18px;
}

.endmessage h3, .ls-completed-container h1, #completed-container h1 {
    font-size: 22px !important; font-weight: 800 !important;
    color: var(--tc-text) !important; margin-bottom: 10px !important;
}

/* ----------------------------------------------------------------
   13. ERREURS & VALIDATION
   ---------------------------------------------------------------- */
.has-error .form-control,
.has-error input, .has-error textarea { border-color: var(--tc-error) !important; }

.error, .em_num_answers.error, span.error {
    color: var(--tc-error) !important;
    font-size: 12px !important; font-weight: 500 !important;
    margin-top: 4px !important;
    padding: 6px 10px !important;
    background: var(--tc-error-bg) !important;
    border-radius: var(--tc-r-xs) !important;
    border-left: 3px solid var(--tc-error) !important;
    display: flex; align-items: center; gap: 5px;
}

.required_asterisk, abbr[title="required"] {
    color: var(--tc-error) !important;
}

/* ----------------------------------------------------------------
   14. TABLEAUX
   ---------------------------------------------------------------- */
.ls-answers table, .question-container table {
    width: 100% !important;
    border-collapse: separate !important; border-spacing: 0 3px !important;
}

.ls-answers table thead th, .question-container table thead th {
    background: var(--tc-surface-alt) !important;
    color: var(--tc-text-sec) !important;
    font-size: 11px !important; font-weight: 600 !important;
    text-transform: uppercase !important; letter-spacing: 0.5px !important;
    padding: 8px 12px !important; border-bottom: 2px solid var(--tc-border) !important;
}

.ls-answers table tbody td, .question-container table tbody td {
    padding: 10px 12px !important; vertical-align: middle !important;
    border-bottom: 1px solid var(--tc-border) !important;
    font-size: 13px !important;
}

.ls-answers table tbody tr:hover { background: var(--tc-primary-light) !important; }

/* ----------------------------------------------------------------
   15. ALERTES
   ---------------------------------------------------------------- */
.alert {
    border-radius: var(--tc-r-sm) !important; border: none !important;
    font-size: 13px !important; padding: 10px 14px !important;
}

.alert-danger  { background: var(--tc-error-bg) !important; color: var(--tc-error) !important; }
.alert-success { background: var(--tc-success-bg) !important; color: var(--tc-success) !important; }
.alert-warning { background: var(--tc-warning-bg) !important; color: var(--tc-warning) !important; }
.alert-info    { background: var(--tc-primary-light) !important; color: var(--tc-primary) !important; }

/* ----------------------------------------------------------------
   16. FOOTER
   ---------------------------------------------------------------- */
.tc-footer {
    background: var(--tc-surface); border-top: 1px solid var(--tc-border);
    padding: 14px 20px; margin-top: auto;
}

.tc-footer-inner {
    max-width: 860px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    gap: 6px; font-size: 12px; color: var(--tc-text-muted);
}

.tc-footer-brand { display: flex; align-items: center; gap: 5px; font-weight: 600; color: var(--tc-text-sec); }

.tc-footer-logo {
    width: 20px; height: 20px; background: var(--tc-primary); color: #fff;
    border-radius: var(--tc-r-xs); display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800;
}

.tc-footer-sep { color: var(--tc-border); }

/* ----------------------------------------------------------------
   17. ÉLÉMENTS VANILLA À NEUTRALISER
   ---------------------------------------------------------------- */

/* Ancienne navbar bootstrap (si elle leake) */
#survey-nav.navbar-light.bg-light:not(.tc-navbar) { display: none !important; }

/* Well / Panel vanilla */
.well {
    background: var(--tc-surface) !important;
    border: 1px solid var(--tc-border) !important;
    border-radius: var(--tc-r) !important;
    box-shadow: var(--tc-sh-sm) !important;
    padding: 16px 20px !important;
}

.panel {
    background: var(--tc-surface) !important;
    border: 1px solid var(--tc-border) !important;
    border-radius: var(--tc-r) !important;
    box-shadow: var(--tc-sh-sm) !important; overflow: hidden;
}

.panel-heading {
    background: var(--tc-surface-alt) !important;
    border-bottom: 1px solid var(--tc-border) !important;
    padding: 12px 18px !important; font-weight: 700 !important;
}

.panel-body { padding: 16px 18px !important; }

/* Modals */
.modal-content {
    border: none !important; border-radius: var(--tc-r-lg) !important;
    box-shadow: var(--tc-sh-lg) !important;
}

.modal-header { border-bottom: 1px solid var(--tc-border) !important; padding: 14px 20px !important; }
.modal-footer { border-top: 1px solid var(--tc-border) !important; padding: 12px 20px !important; gap: 8px; }

/* ----------------------------------------------------------------
   18. RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .tc-brand-survey { display: none; }
    .tc-progress-label { display: none; }

    .question-container, div[id^="question"] { padding: 14px 14px !important; }
    .question-container::before, div[id^="question"]::before { width: 2px; }

    .jumbotron, .ls-welcome-wrapper, .endmessage { padding: 20px 16px !important; }

    .tc-navigator { padding: 10px 14px; }

    .tc-btn { padding: 8px 16px; font-size: 13px; }

    .survey-title { font-size: 20px !important; }
}

/* ----------------------------------------------------------------
   19. ANIMATIONS
   ---------------------------------------------------------------- */
@keyframes tc-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.question-container, div[id^="question"],
.jumbotron, .endmessage, .tc-navigator {
    animation: tc-in 0.22s ease-out;
}

:focus-visible {
    outline: 2px solid var(--tc-primary) !important;
    outline-offset: 2px !important;
}