/* ================================================================
   BINARIUM BLUE THEME  — custom.css
   Loads last; overrides all fruity/sea_green defaults.
   ================================================================ */

/* ── Palette ──────────────────────────────────────────────────── */
:root {
    --b-primary:  #1a73e8;
    --b-dark:     #1557b0;
    --b-darker:   #0d47a1;
    --b-navy:     #0a2e6e;
    --b-light:    #e8f0fb;
    --b-mid:      #d2e3fc;
    --b-border:   #c5d9f7;
    --b-shadow:   rgba(26,115,232,0.13);
    --b-text:     #1a1a2e;
    --b-muted:    #5f6368;
    --b-radius:   8px;
    --b-sm:       4px;
}

/* ── Global ───────────────────────────────────────────────────── */
body.fruity, body.vanilla {
    background-color: #f0f4fc !important;
    color: var(--b-text) !important;
}

/* ── Navbar ───────────────────────────────────────────────────── */
html body .navbar.navbar-default.navbar-fixed-top {
    background: linear-gradient(90deg, var(--b-navy) 0%, var(--b-darker) 100%) !important;
    border-bottom: 2px solid var(--b-dark) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25) !important;
}
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus { background: transparent !important; }

.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav .dropdown-toggle { color: rgba(255,255,255,0.88) !important; }
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover { background: rgba(255,255,255,0.12) !important; color: #fff !important; }

.navbar-default .navbar-toggle .icon-bar { background-color: #fff !important; }
.navbar-default .navbar-toggle { border-color: rgba(255,255,255,0.35) !important; }
.navbar-default .navbar-toggle:hover { background: rgba(255,255,255,0.12) !important; }

/* Dropdown menus */
.navbar .dropdown-menu {
    border-radius: var(--b-sm) !important;
    border-color: var(--b-border) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.14) !important;
}
.navbar .dropdown-menu > li > a:hover,
.navbar .dropdown-menu > li > a:focus { background: var(--b-light) !important; color: var(--b-primary) !important; }

/* ── Progress bar ─────────────────────────────────────────────── */
.top-container .progress {
    background-color: var(--b-mid) !important;
    border-radius: 10px !important;
    height: 7px !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}
.progress .progress-bar,
.top-container .progress .progress-bar {
    background: linear-gradient(90deg, var(--b-primary) 0%, #4285f4 100%) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: width 0.5s ease !important;
}

/* ── Survey list page ─────────────────────────────────────────── */
#surveys-list-jumbotron {
    background: transparent !important;
    padding: 18px 30px 10px !important;
    border-radius: 0 !important;
    margin-bottom: 16px !important;
    text-align: center !important;
    box-shadow: none !important;
}
#surveys-list-jumbotron { color: var(--b-navy) !important; }

/* hide logo_full.png watermark */
#surveys-list-jumbotron img.img-responsive { display: none !important; }

ul.surveys-list li.btn-group {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    float: none !important;
    margin-top: 4px !important;
}
ul.surveys-list li.btn-group a.surveytitle.btn {
    background: var(--b-primary) !important;
    border: 1px solid var(--b-dark) !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 11px 36px !important;
    box-shadow: 0 2px 8px var(--b-shadow) !important;
    width: auto !important;
    min-width: 200px !important;
    max-width: 360px !important;
    transition: background 0.2s, box-shadow 0.2s !important;
}
ul.surveys-list li.btn-group a.surveytitle.btn:hover {
    background: var(--b-dark) !important;
    box-shadow: 0 4px 16px rgba(26,115,232,0.35) !important;
}

.survey-list-heading { display: none !important; }
#surveys-list-jumbotron {
    font-size: 24px !important;
    font-weight: 500 !important;
    color: var(--b-navy) !important;
    text-align: center !important;
}
.survey-contact { text-align: center !important; color: var(--b-muted) !important; }

/* ── Main well / outer container ─────────────────────────────── */
.well {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ── Group containers ─────────────────────────────────────────── */
.group-outer-container {
    background: #fff !important;
    border-radius: var(--b-radius) !important;
    box-shadow: 0 2px 12px var(--b-shadow) !important;
    margin-bottom: 28px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--b-border) !important;
}

.group-title-container {
    background: linear-gradient(90deg, var(--b-navy) 0%, var(--b-darker) 100%) !important;
    padding: 18px 26px !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.group-title-container .group-title {
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    margin: 0 !important;
}
.group-title-container .group-description {
    color: rgba(255,255,255,0.80) !important;
    font-size: 13px !important;
    margin-top: 4px !important;
}

/* ── Question containers ──────────────────────────────────────── */
.question-container {
    background: #fff !important;
    padding: 20px 26px !important;
    border-bottom: 1px solid #eef3fc !important;
    transition: background 0.15s !important;
}
.question-container:last-child { border-bottom: none !important; }
.question-container:hover { background: #fafcff !important; }

.question-title-container { margin-bottom: 14px !important; }

.question-number, .question-code {
    color: var(--b-primary) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.question-text, label.question-text,
.question-title-container label {
    font-weight: 500 !important;
    color: var(--b-text) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.questionhelp {
    color: var(--b-muted) !important;
    font-size: 12.5px !important;
    font-style: italic !important;
    margin-top: 4px !important;
}

/* ── Form inputs ──────────────────────────────────────────────── */
.question-container input[type="text"],
.question-container input[type="email"],
.question-container input[type="number"],
.question-container input[type="tel"],
.question-container textarea,
.question-container select,
input.form-control, textarea.form-control, select.form-control {
    border: 1.5px solid #d0dff7 !important;
    border-radius: var(--b-sm) !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    color: var(--b-text) !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
.question-container input[type="text"]:focus,
.question-container input[type="email"]:focus,
.question-container input[type="number"]:focus,
.question-container textarea:focus,
.question-container select:focus,
input.form-control:focus, textarea.form-control:focus, select.form-control:focus {
    border-color: var(--b-primary) !important;
    box-shadow: 0 0 0 3px rgba(26,115,232,0.14) !important;
    outline: none !important;
}

/* ── Radio / Checkbox items ───────────────────────────────────── */
.radio-item label, .checkbox-item label {
    color: #2c3e50 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    padding: 5px 8px 5px 26px !important;
    border-radius: var(--b-sm) !important;
    transition: background 0.14s !important;
}
.radio-item label:hover, .checkbox-item label:hover {
    background: var(--b-light) !important;
}
.radio-item input[type="radio"]:focus + label::before,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
    box-shadow: 0 0 0 3px rgba(26,115,232,0.18) !important;
}
.radio-item input[type="radio"]:checked + label::before,
.checkbox-item input[type="checkbox"]:checked + label::before {
    background-color: var(--b-primary) !important;
    border-color: var(--b-primary) !important;
}
body .checkbox-item label::after { color: #fff !important; }

/* ── Yes / No buttons ─────────────────────────────────────────── */
div.yes-no .btn-group label,
div.yes-no .btn-group label.btn {
    border: 1.5px solid var(--b-border) !important;
    color: var(--b-muted) !important;
    background: #fff !important;
    font-size: 14px !important;
    padding: 7px 26px !important;
    transition: all 0.15s !important;
}
div.yes-no .btn-group label.active,
div.yes-no .btn-group label.checked,
div.yes-no .btn-group input:checked + label {
    background: var(--b-primary) !important;
    color: #fff !important;
    border-color: var(--b-dark) !important;
}
div.yes-no .btn-group label:first-of-type { border-radius: var(--b-sm) 0 0 var(--b-sm) !important; }
div.yes-no .btn-group label:last-of-type  { border-radius: 0 var(--b-sm) var(--b-sm) 0 !important; }

/* ── Buttons ──────────────────────────────────────────────────── */
.fruity .btn-primary,
.fruity button[type="submit"],
.fruity input[type="submit"] {
    background: var(--b-primary) !important;
    border-color: var(--b-dark) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 9px 28px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 6px var(--b-shadow) !important;
    transition: background 0.2s, box-shadow 0.2s !important;
}
.fruity .btn-primary:hover,
.fruity .btn-primary:focus,
.fruity .btn-primary:active,
.fruity .btn-primary.active {
    background: var(--b-dark) !important;
    border-color: var(--b-darker) !important;
    box-shadow: 0 4px 14px rgba(26,115,232,0.32) !important;
}
.fruity .btn-default {
    background: #fff !important;
    border-color: var(--b-border) !important;
    color: var(--b-primary) !important;
    border-radius: 6px !important;
    transition: all 0.15s !important;
}
.fruity .btn-default:hover,
.fruity .btn-default:focus {
    background: var(--b-light) !important;
    border-color: var(--b-primary) !important;
    color: var(--b-dark) !important;
}
.fruity .btn-info {
    background: #0288d1 !important;
    border-color: #0277bd !important;
    color: #fff !important;
    border-radius: 6px !important;
}

/* ── Answer tables (array questions) ─────────────────────────── */
.answer-container thead th {
    background: var(--b-light) !important;
    color: var(--b-darker) !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    border-color: var(--b-border) !important;
    padding: 10px 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}
.answer-container tr:nth-child(even) td { background: #fafcff !important; }
.answer-container tr:hover td { background: var(--b-light) !important; }
.answer-container td { border-color: #eef3fc !important; padding: 9px 14px !important; }
.ls-answers td.radio-item, .ls-answers td.checkbox-item { text-align: center !important; }

/* ── Survey title + welcome text ──────────────────────────────── */
.survey-name {
    color: var(--b-darker) !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    margin-bottom: 4px !important;
}
.survey-welcome { color: var(--b-muted) !important; line-height: 1.6 !important; }

/* ── Links ────────────────────────────────────────────────────── */
.fruity a { color: var(--b-primary) !important; }
.fruity a:hover { color: var(--b-dark) !important; }

/* ── Alerts / validation ──────────────────────────────────────── */
.text-danger, .question-valid-container .text-danger { color: #d32f2f !important; }
.text-info { color: var(--b-primary) !important; }
.input-error input, .input-error textarea, .input-error select {
    border-color: #d32f2f !important;
    box-shadow: 0 0 0 3px rgba(211,47,47,0.12) !important;
}

/* ── Footer ───────────────────────────────────────────────────── */
#footer-container, .footer-container {
    background: #f0f4fc !important;
    border-top: 1px solid var(--b-mid) !important;
    padding: 18px !important;
    text-align: center !important;
}
#footer-container a { color: var(--b-primary) !important; }

/* ── Hide "Powered by LimeSurvey" ─────────────────────────────── */
img[alt="LimeSurvey Survey Software"] { display: none !important; }

/* Binarium: "Surveys" text next to nav logo */
.navbar-brand.logo-container {
    display: flex !important;
    align-items: center !important;
}
.navbar-brand.logo-container::after {
    content: "Surveys";
    color: rgba(255,255,255,0.92);
    font-size: 17px;
    font-weight: 500;
    margin-left: 10px;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

/* ===== Binarium: Group description - fix Bootstrap .row negative margins ===== */
.group-description.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.group-description {
    padding: 14px 22px !important;
    background: var(--b-light) !important;
    border-left: 4px solid var(--b-primary) !important;
    border-radius: 0 var(--b-sm) var(--b-sm) 0 !important;
    margin: 0 0 4px 0 !important;
    color: var(--b-muted) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* ===== Binarium: Group title gradient - correct selector ===== */
.group-title {
    background: linear-gradient(90deg, var(--b-navy) 0%, var(--b-darker) 100%) !important;
    color: #fff !important;
    padding: 13px 22px !important;
    border-radius: var(--b-radius) var(--b-radius) 0 0 !important;
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}
.group-outer-container {
    margin-bottom: 24px !important;
    border-radius: var(--b-radius) !important;
    box-shadow: 0 2px 8px var(--b-shadow) !important;
    overflow: visible !important;
}
.group-container {
    border: 1px solid var(--b-border) !important;
    border-top: none !important;
    border-radius: 0 0 var(--b-radius) var(--b-radius) !important;
    background: #fff !important;
    padding: 0 !important;
}
/* Collapse chevron */
.b-collapse-icon {
    float: right;
    margin-top: 2px;
    transition: transform 0.2s ease;
    opacity: 0.85;
}
.b-collapsed .b-collapse-icon { transform: rotate(180deg); }

/* ===== Binarium: Yes/No button clean design ===== */
.button-item.btn.btn-primary {
    background: #fff !important;
    border: 2px solid var(--b-border) !important;
    color: var(--b-text) !important;
    padding: 12px 8px !important;
    border-radius: var(--b-radius) !important;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
    box-shadow: 0 1px 4px var(--b-shadow) !important;
}
.button-item.btn.btn-primary label {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--b-text) !important;
    font-weight: 500 !important;
    padding: 4px 0 0 !important;
    cursor: pointer !important;
}
.button-item.btn.btn-primary .ls-icon {
    color: var(--b-primary) !important;
    font-size: 2em !important;
    margin-bottom: 6px !important;
}
.button-item.btn.btn-primary:hover {
    background: var(--b-light) !important;
    border-color: var(--b-primary) !important;
}
.button-item.btn.btn-primary.active,
.button-item.btn.btn-primary.active:focus,
.button-item.btn.btn-primary:active {
    background: var(--b-primary) !important;
    border-color: var(--b-dark) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(26,115,232,0.30) !important;
}
.button-item.btn.btn-primary.active label,
.button-item.btn.btn-primary.active .ls-icon {
    color: #fff !important;
}

/* ===== Binarium: confirm modal button overrides ===== */
#identity__bsconfirmModal .btn-danger {
    background-color: #c62828 !important;
    color: #fff !important;
    border-color: #b71c1c !important;
    border-radius: 6px !important;
}
#identity__bsconfirmModal .btn-danger:hover {
    background-color: #b71c1c !important;
}
#identity__bsconfirmModal .btn-default {
    background: #fff !important;
    color: var(--b-primary) !important;
    border-color: var(--b-border) !important;
    border-radius: 6px !important;
}
#identity__bsconfirmModal .btn-default:hover {
    background: var(--b-light) !important;
    border-color: var(--b-primary) !important;
}