/******************
    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
*/
/* =========================
   QUESTION CARD ONLY
========================= */
.question-container {
    background: #fcfbf7 !important;
    border: 1px solid #e3e6e8 !important;
    border-radius: 22px !important;
    box-shadow: 0 6px 18px rgba(31, 51, 73, 0.05) !important;
    padding: 22px 24px !important;
    margin-bottom: 20px !important;
    transition: all 0.25s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Διακριτικό accent επάνω */
.question-container::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 24px !important;
    width: 90px !important;
    height: 4px !important;
    background: linear-gradient(90deg, #c5a864 0%, #b59652 100%) !important;
    border-radius: 0 0 8px 8px !important;
}

/* Hover */
.question-container:hover {
    border-color: #d6dde2 !important;
    box-shadow: 0 8px 20px rgba(31, 51, 73, 0.07) !important;
    transform: translateY(-1px) !important;
}

/* =========================
   QUESTION TITLE
========================= */
.question-title-container {
    margin-bottom: 10px !important;
}

.question-title-container .asterisk,
.question-title-container .mandatory {
    color: #d9534f !important;
}

.question-text,
.question-text h3,
.question-title-container,
.question-title-container h3 {
    color: #2f4f60 !important;
    font-weight: 600 !important;
    margin-bottom: 0 !important;
}

/* =========================
   HELP TEXT
========================= */
.questionhelp,
.ls-questionhelp,
.question-valid-container,
.ls-question-message {
    color: #41585D !important;
    font-size: 15px !important;
    margin-bottom: 8px !important;
}

/* =========================
   ANSWERS NORMAL - TIGHTER SPACING
========================= */
.answer-container {
    margin-top: 4px !important;
}

.answer-container ul,
.answer-container ol {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.answer-container li {
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
}

.answer-container label {
    margin-bottom: 0 !important;
}

.list-radio .radio-item,
.list-radio .answer-item,
.radio-list .radio-item,
.radio-list .answer-item {
    margin-bottom: 8px !important;
}

/* Κουμπιά navigator στο ύφος της αρχικής */
#navigator-container .btn,
#navigator-container .btn-primary,
#navigator-container .ls-move-btn,
#navigator-container .ls-move-next-btn,
#navigator-container .ls-move-submit-btn,
#navigator-container .action--ls-button-submit,
#ls-button-submit,
button.btn.btn-primary,
input.btn.btn-primary {
    background: linear-gradient(135deg, #c5a864 0%, #b59652 100%) !important;
    border: 1px solid #ad8d49 !important;
    color: #ffffff !important;
    border-radius: 14px !important;
    padding: 12px 24px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    box-shadow: 0 8px 20px rgba(181, 150, 82, 0.25) !important;
    transition: all 0.25s ease !important;
    text-shadow: none !important;
}

/* Hover */
#navigator-container .btn:hover,
#navigator-container .btn-primary:hover,
#navigator-container .ls-move-btn:hover,
#navigator-container .ls-move-next-btn:hover,
#navigator-container .ls-move-submit-btn:hover,
#navigator-container .action--ls-button-submit:hover,
#ls-button-submit:hover,
button.btn.btn-primary:hover,
input.btn.btn-primary:hover {
    background: linear-gradient(135deg, #d1b06a 0%, #bf9d57 100%) !important;
    border-color: #a8863f !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 24px rgba(181, 150, 82, 0.32) !important;
}

/* Focus */
#navigator-container .btn:focus,
#navigator-container .btn-primary:focus,
#navigator-container .ls-move-btn:focus,
#navigator-container .ls-move-next-btn:focus,
#navigator-container .ls-move-submit-btn:focus,
#navigator-container .action--ls-button-submit:focus,
#ls-button-submit:focus,
button.btn.btn-primary:focus,
input.btn.btn-primary:focus {
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(197, 168, 100, 0.22), 0 8px 20px rgba(181, 150, 82, 0.25) !important;
    color: #ffffff !important;
}

/* Active */
#navigator-container .btn:active,
#navigator-container .btn-primary:active,
#navigator-container .ls-move-btn:active,
#navigator-container .ls-move-next-btn:active,
#navigator-container .ls-move-submit-btn:active,
#navigator-container .action--ls-button-submit:active,
#ls-button-submit:active,
button.btn.btn-primary:active,
input.btn.btn-primary:active {
    background: linear-gradient(135deg, #ac8a47 0%, #9b7938 100%) !important;
    border-color: #947233 !important;
    transform: translateY(0) !important;
    box-shadow: 0 4px 10px rgba(181, 150, 82, 0.18) !important;
}

/* Disabled */
#navigator-container .btn:disabled,
#navigator-container .btn-primary:disabled,
#navigator-container .ls-move-btn:disabled,
#navigator-container .ls-move-next-btn:disabled,
#navigator-container .ls-move-submit-btn:disabled,
#navigator-container .action--ls-button-submit:disabled,
#ls-button-submit:disabled,
button.btn.btn-primary:disabled,
input.btn.btn-primary:disabled {
    background: #d8c18e !important;
    border-color: #d8c18e !important;
    color: #ffffff !important;
    box-shadow: none !important;
    opacity: 0.85 !important;
}



/* PROGRESS BAR WRAPPER */
.top-container .progress,
.progress {
    height: 18px !important;
    background-color: #e9eef1 !important;
    background-image: none !important;
    border: 1px solid #d5dde2 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    margin: 14px auto 20px auto !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

/* PROGRESS BAR FILL */
.top-container .progress .progress-bar,
.progress .progress-bar,
.fruity .progress .progress-bar,
.fruity .progress-bar {
    position: relative !important;
    background: linear-gradient(90deg, #4f9da6 0%, #2f7e89 100%) !important;
    background-color: #2f7e89 !important;
    background-image: linear-gradient(90deg, #4f9da6 0%, #2f7e89 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 18px !important;
    text-align: center !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 8px rgba(47, 126, 137, 0.25) !important;
    text-shadow: none !important;
    transition: width 0.35s ease !important;
}

/* Μικρή γυαλάδα */
.top-container .progress .progress-bar::after,
.progress .progress-bar::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    pointer-events: none !important;
}