/* =========================================================
   AIONION CAPITAL - MODERN THEME (REMASTERED)
   Font: Poppins | Colors: Brand Blue & Pink Gradient
   ========================================================= */

/* 1. IMPORT FONTS */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --brand-blue: #2263a6;
    --brand-pink: #f15977;
    --brand-gradient: linear-gradient(135deg, #2263a6 0%, #f15977 100%);
    --bg-color: #f0f2f5;
    --text-main: #111827; /* Jet Black for Titles */
    --text-body: #374151; /* Dark Grey for Questions */
}

/* 2. BODY & BACKGROUND */
body {
    font-family: 'Poppins', sans-serif !important;
    background-color: var(--bg-color) !important;
    color: var(--text-body);
    margin: 0;
    line-height: 1.6;
}

/* 3. THE MAIN WHITE CARD (Centering & Design) */
.outerframe, .container, .jumbotron {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* This is the box containing the survey */
#surveylist, .survey-container, .group-container {
    background: #ffffff !important;
    max-width: 850px !important; /* Perfect reading width */
    width: 95%;
    margin: 40px auto !important; /* Centers the card */
    padding: 60px !important;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08); /* Soft High-end Shadow */
    border-top: 5px solid var(--brand-blue); /* Blue Line at top */
}

/* 4. LOGO STYLING (Center & Big) */
.navbar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0px;
}

.navbar-brand {
    float: none;
    display: block;
    text-align: center;
    width: 100%;
    padding: 20px 0;
}

.navbar-brand img {
    height: 70px !important; /* Bigger Logo */
    width: auto;
    object-fit: contain;
}

/* 5. TYPOGRAPHY (Visibility & Alignment) */
.survey-name, h1 {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: var(--brand-blue);
    text-align: center;
    margin-bottom: 10px;
}

.survey-description {
    text-align: center;
    color: #6b7280;
    margin-bottom: 40px;
}

/* Question Titles */
.question-title-container {
    color: var(--text-main) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 15px;
    text-align: left; /* Align questions to left for readability */
}

/* Question Help Text */
.question-help {
    color: var(--brand-pink) !important;
    font-size: 14px;
}

/* 6. INPUT FIELDS (Modern & Clean) */
.form-control {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 15px;
    font-size: 16px;
    color: #000;
    transition: all 0.3s ease;
}

.form-control:focus {
    background: #fff;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 4px rgba(34, 99, 166, 0.1);
    outline: none;
}

/* 7. BUTTONS (Gradient & Animation) */
.navigator {
    text-align: center; /* Center the buttons */
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

#ls-button-submit, .ls-move-btn, .btn-primary {
    background: var(--brand-gradient) !important; /* Blue to Pink Gradient */
    border: none;
    color: white !important;
    padding: 14px 40px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 50px; /* Pill Shape */
    box-shadow: 0 10px 20px rgba(34, 99, 166, 0.2);
    transition: transform 0.2s;
}

#ls-button-submit:hover, .ls-move-btn:hover {
    transform: translateY(-3px); /* Move up effect */
    box-shadow: 0 15px 30px rgba(241, 89, 119, 0.3);
}

/* Previous Button */
.ls-move-previous-btn {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
    box-shadow: none !important;
}

/* 8. PROGRESS BAR */
.progress {
    height: 8px;
    background-color: #e5e7eb;
    border-radius: 10px;
    margin-bottom: 30px;
}

.progress-bar {
    background: var(--brand-gradient) !important;
}

/* 9. RADIO & CHECKBOX ALIGNMENT */
.radio-item, .checkbox-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
    transition: background 0.2s;
}

.radio-item:hover, .checkbox-item:hover {
    background-color: #f0f7ff;
}

input[type="radio"], input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 15px;
    accent-color: var(--brand-blue);
}
/* =================================================
   CLEANUP: HIDE TOP BAR & BROKEN ICONS
   ================================================= */

/* 1. Hide the entire top menu bar (contains the broken image & resume text) */
.navbar, 
.navbar-default, 
.navbar-expand-lg,
#ls-row-header {
    display: none !important; 
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
}

/* 2. Hide specifically the 'Resume Later' text just in case */
.nav-link, 
.text-info-header,
a[href*="resume"] {
    display: none !important;
}

/* 3. Reset the body so there is no empty gap at the top */
body {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
/* =================================================
   FIX: HIDE THE BROKEN TOP HEADER
   (Based on your Inspect Element Screenshot)
   ================================================= */

/* This targets the specific bar shown in your screenshot */
.survey-header-bar {
    display: none !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important; /* Prevents clicking */
}

/* Also hide the text inside it specifically */
.survey-header-text {
    display: none !important;
}

/* Ensure body starts at the very top */
body {
    padding-top: 0 !important;
}
/* =========================================================
   FIX: RATING BUTTONS (0-10) & ALIGNMENT
   ========================================================= */

/* 1. Fix Title Color (Change Red to Brand Blue) */
h1, h2, h3, .group-title, .question-title-container {
    color: #2263a6 !important; /* Brand Blue */
}

/* 2. Fix Help Text (Change Green to Grey/Pink) */
.ls-question-help, .text-info, .question-help-container {
    color: #f15977 !important; /* Brand Pink */
    font-weight: 500;
}

/* 3. RESET BUTTON STYLES (Make them White initially) */
/* This targets the answer buttons specifically to remove the gradient */
.ls-answers .btn-primary {
    background: #ffffff !important; /* White Background */
    color: #2263a6 !important; /* Blue Text */
    border: 2px solid #e5e7eb !important; /* Light Grey Border */
    box-shadow: none !important;
    font-weight: 700 !important;
    padding: 10px 5px !important;
    margin: 5px !important;
    border-radius: 12px !important;
    min-width: 45px !important; /* Ensure circle/square shape */
    transition: all 0.2s ease !important;
}

/* 4. HOVER EFFECT (When mouse is over number) */
.ls-answers .btn-primary:hover {
    background-color: #f0f9ff !important;
    border-color: #2263a6 !important;
    transform: translateY(-2px);
}

/* 5. ACTIVE/SELECTED STATE (When clicked - Show Gradient) */
/* LimeSurvey adds 'active' class or checks the input */
.ls-answers .btn-primary.active, 
.ls-answers .btn-primary:active,
.ls-answers input:checked + label {
    background: linear-gradient(135deg, #2263a6 0%, #f15977 100%) !important;
    color: #ffffff !important; /* White Text */
    border-color: transparent !important;
    box-shadow: 0 5px 15px rgba(34, 99, 166, 0.3) !important;
}


/* Override Bootstrap columns to fit content */
.ls-answers .col-md-2, 
.ls-answers .col-12 {
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    padding: 0 !important;
}



/* ================================
   FIX COLLAPSING BETWEEN QUESTIONS
   ================================ */

/* Ensure each question behaves like a block */
.ls-question {
    display: block !important;
    margin-bottom: 30px !important;
}

/* Prevent title + answers overlap */
.question-title-container {
    display: block !important;
    margin-bottom: 15px !important;
}

/* Ensure answers are pushed below title */
.ls-answers {
    display: block !important;
    margin-top: 10px !important;
}
/* =========================================
   FORCE 0–10 RATING BUTTONS LIKE IMAGE 2
   (ONE ROW – HORIZONTAL)
   ========================================= */

/* Make answer container flex */
.ls-answers {
    display: flex !important;
    justify-content: center !important;
}

/* Force answers into ONE horizontal row */
.ls-answers .row {
    display: flex !important;
    flex-wrap: nowrap !important;   /* KEY LINE */
    justify-content: center !important;
    gap: 12px !important;
}

/* Make each number a ROUND BUTTON (not full width) */
.ls-answers .btn-primary {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    border-radius: 999px !important; /* perfect circle */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.has-error input {
  border: 2px solid red !important;
  background-color: #fff0f0;
}



/* Force radio buttons to display vertically */
/* Force this specific question to vertical */
.force-vertical .form-check-inline {
    display: block !important;
    margin-bottom: 10px;
}