/************************************************************
 * UMinho Survey Theme
 * LimeSurvey 7.x
 * Autor: Customização Institucional UMinho
 *
 * Objetivos:
 * - Visual clean e institucional
 * - Vermelho UMinho apenas em ações
 * - Botões outline por defeito
 * - Hover vermelho com texto branco
 * - Eliminar verdes do Fruity/Mango
 * - Eliminar sombras violeta Bootstrap
 ************************************************************/

/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

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

/* ==========================================================
   DESIGN TOKENS
   ========================================================== */

:root {

    /* UMinho */
    --uminho-primary: #A4343A;
    --uminho-primary-hover: #8F2C31;
    --uminho-primary-light: rgba(164, 52, 58, 0.15);

    /* Typography */
    --uminho-text: #212529;
    --uminho-text-muted: #6C757D;

    /* Layout */
    --uminho-border: #DEE2E6;
    --uminho-background: #FFFFFF;
    --uminho-background-soft: #F8F9FA;

    /* Bootstrap Overrides */
    --bs-primary: #A4343A;
    --bs-primary-rgb: 164, 52, 58;

    --bs-success: #A4343A;
    --bs-success-rgb: 164, 52, 58;

    --bs-link-color: #A4343A;
    --bs-link-hover-color: #8F2C31;
}

/* ==========================================================
   GLOBAL
   ========================================================== */

body,
.survey-container,
.question-container,
.btn,
.form-control,
.form-select {
    font-family: 'Inter', sans-serif;
}

body {
    background: #f5f6f8;
    color: var(--uminho-text);
}

/* ==========================================================
   LAYOUT
   ========================================================== */

.container-fluid {
    max-width: 1200px;
    margin: 0 auto;
}

#outerframeContainer {
    background: #ffffff;
}

/* ==========================================================
   HEADINGS
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--uminho-text);
    font-weight: 600;
}

.survey-title {
    font-weight: 700;
}

/* ==========================================================
   LINKS
   ========================================================== */

a,
a:visited,
.text-primary,
.text-success,
.text-info {
    color: var(--uminho-primary) !important;
}

a:hover,
a:focus {
    color: var(--uminho-primary-hover) !important;
    text-decoration: none;
    box-shadow: none;
}

/* ==========================================================
   LANGUAGE SELECTOR
   ========================================================== */

.dropdown-toggle,
.lang-dropdown-toggle,
.languagechanger {
    color: var(--uminho-primary) !important;
}

/* ==========================================================
   QUESTION CONTAINERS
   ========================================================== */

.question-container {

    background: #fff;

    border: 1px solid var(--uminho-border);

    border-radius: 8px;

    padding: 1.5rem;

    box-shadow: none;
}

/* ==========================================================
   HELPER TEXTS
   ========================================================== */

.questionhelp,
.group-description,
.text-muted {
    color: var(--uminho-text-muted);
}

.ls-em-tip {
    display: none;
}

.has-error .ls-em-tip,
.input-error .ls-em-tip,
.question-container.has-error .ls-em-tip {
    display: block;
}


/* ==========================================================
   INPUTS
   ========================================================== */

.form-control,
.form-select {

    border: 1px solid var(--uminho-border);

    border-radius: 6px;
}

.form-control:focus,
.form-select:focus {

    border-color: var(--uminho-primary) !important;

    box-shadow: 0 0 0 .20rem rgba(164,52,58,.15) !important;
}

/* ==========================================================
   CHECKBOXES + RADIOS
   ========================================================== */

.form-check-input {

    border-color: var(--uminho-primary) !important;
}

.form-check-input:checked {

    background-color: var(--uminho-primary) !important;

    border-color: var(--uminho-primary) !important;
}

.form-check-input:focus {

    box-shadow: 0 0 0 .20rem rgba(164,52,58,.15) !important;
}

/* ==========================================================
   PROGRESS BAR
   ========================================================== */

.progress {

    height: 8px;

    background: #ECECEC;

    border-radius: 4px;
}

.progress-bar {

    background-color: var(--uminho-primary) !important;
}

/* ==========================================================
   BUTTONS
   ========================================================== */

.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-close,
.btn-outline-secondary,
button,
button[type="submit"],
button[type="button"] {

    background: #FFFFFF !important;

    color: var(--uminho-primary) !important;

    border: 1px solid var(--uminho-primary) !important;

    border-radius: 6px;

    box-shadow: none !important;

    transition: all .20s ease;
}

/* Hover */

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-outline-secondary:hover,
button:hover {

    background: var(--uminho-primary) !important;

    color: #FFFFFF !important;

    border-color: var(--uminho-primary) !important;
}

/* Focus + Active */

.btn:focus,
.btn:active,
.btn.focus,
.btn-primary:focus,
.btn-primary:active,
.btn-secondary:focus,
.btn-secondary:active,
.btn-success:focus,
.btn-success:active,
button:focus,
button:active {

    outline: none !important;

    box-shadow: 0 0 0 .20rem rgba(164,52,58,.20) !important;
}

.btn.active,
.btn-primary.active {

    background: var(--uminho-primary) !important;

    color: #FFFFFF !important;
}

/* ==========================================================
   PAGINATION
   ========================================================== */

.page-link {

    color: var(--uminho-primary) !important;
}

.page-item.active .page-link {

    background: var(--uminho-primary) !important;

    border-color: var(--uminho-primary) !important;

    color: #FFFFFF !important;
}

/* ==========================================================
   ALERTS
   ========================================================== */

.alert-success {

    color: var(--uminho-primary);

    background: #FFFFFF;

    border-color: var(--uminho-primary);
}

/* ==========================================================
   MATRIX QUESTIONS
   ========================================================== */

.table thead th {

    background: #FAFAFA;

    border-bottom: 2px solid var(--uminho-primary);
}

/* ==========================================================
   SLIDERS
   ========================================================== */

.slider-handle,
.ui-slider-handle {

    background: var(--uminho-primary) !important;

    border-color: var(--uminho-primary) !important;
}

/* ==========================================================
   REMOVE FRUITY/MANGO GREENS
   ========================================================== */

.bg-success,
.border-success {

    background-color: transparent !important;

    border-color: var(--uminho-primary) !important;
}

.dropdown-menu.dropdown-menu > .active.active > a {
    font-family: 'Inter', sans-serif;
    color: #fff !important;
    background-color: var(--uminho-primary) !important;
}

.dropdown-item.dropdown-item:hover {
    font-family: 'Inter', sans-serif;
    color: #fff !important;
    background-color: var(--uminho-primary) !important;
}

/* ==========================================================
   FOOTER
   ========================================================== */

footer {

    border-top: 1px solid var(--uminho-border);

    color: var(--uminho-text-muted);
}

/* ==========================================================
   SELECTION
   ========================================================== */

::selection {

    background: var(--uminho-primary);

    color: #FFFFFF;
}