.sd-root-modern {
    --sjs-primary-backcolor: #0066cc !important;
    --sjs-primary-forecolor: #ffffff !important;
    --sjs-general-backcolor-dim: #0066cc !important;
    --sjs-special-red: #0066cc !important;
    --sjs-special-green: #0066cc !important;
    --primary-color: #0066cc !important;
}

/* Poll System Styles */
.poll-container,
.poll-results,
.poll-expired,
.poll-error,
.poll-results-loading,
.poll-already-submitted,
.poll-thank-you {
    border: solid 1px #dcdcdc;
    clear: both;
    padding: 22px;
    margin: 22px 0;
}

/* When poll embed is ready to show */
.poll-embed.poll-ready,
div[data-poll-id].poll-ready {
    opacity: 1;
}

.poll-embed h3.poll-embed-id {
    display: none;
}

.poll-embed p.poll-embed-expire {
    display: none;
}

.poll-remove-btn {
    display: none;
}

.poll-container h3,
.poll-results h3,
.poll-expired h3 {
    margin: 0 0 15px 0;
    color: #0066cc;
    font-weight: bold;
    font-size: 24px;
}

.poll-error p {
    margin: 0;
    color: #ff4444;
    text-align: center;
}

.poll-results p {
    margin: 0 0 10px 0;
}

.poll-results .fa-check-circle {
    color: #28a745;
}

.poll-question-results {
    margin-bottom: 30px;
}

.poll-question-results h4 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 16px;
}

.poll-result-bar {
    margin-bottom: 10px;
}

.poll-result-bar > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.poll-result-bar span:first-child {
    font-size: 14px;
    color: #333;
}

.poll-result-bar span:last-child {
    font-size: 14px;
    font-weight: bold;
    color: #0066cc;
}

.poll-result-bar > div:last-child {
    background: #f0f0f0;
    border-radius: 10px;
    height: 20px;
    overflow: hidden;
}

.poll-result-bar > div:last-child > div {
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
}

.poll-results-loading {
    text-align: center;
    padding: 40px 22px;
}

.poll-results-loading h3 {
    margin: 0 0 10px 0;
    color: #0066cc;
}

.poll-results-loading p {
    margin: 0;
    color: #666;
}

.poll-results-loading .fa-spinner {
    font-size: 24px;
    color: #0066cc;
    margin-right: 10px;
}

.poll-expired p {
    margin: 0;
    color: #666;
    font-style: italic;
    text-align: center;
}

.btn-poll-results {
    background: #0066cc;
    color: white;
    padding: 10px 22px;
    cursor: pointer;
    margin: 15px 0;
}

.btn-poll-results:hover {
    background: #0052a3;
}

.poll-survey-container {
    transition: opacity 0.5s ease-in-out;
}

.poll-loader {
    border: 16px solid #3759ec;
    border-top: 16px solid #c0e3f9;
    border-radius: 50%;
    clear: both;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    margin: 10px auto 10px auto;
}

.poll-loader-sm {
    border: 8px solid #3759ec;
    border-top: 8px solid #c0e3f9;
    border-radius: 50%;
    clear: both;
    width: 44px;
    height: 44px;
    animation: spin 2s linear infinite;
    margin: 0px auto -10px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Make SurveyJS questions bold and blue */
.poll-question-results h4,
.sv_main .sv_q_title,
.sv_main .sv_q_title_left,
.sv_main .sv_question_title,
.sv_main .sv_q .sv_q_title,
.sv_main .sv_q .sv_q_title_left .sv_q_title,
.sv_main .sv_row .sv_q_title,
.sv-question__title,
.sd-question__title {
    font-weight: bold !important;
    color: #0066cc !important;
}

.sd-question--mobile > .sd-question__content {
    padding: 0px 2px 0px 2px;
}

.sd-root-modern--mobile .sd-progress-buttons {
    padding: 0px 0px 0px 0px;  
}

.sd-progress-buttons {
    padding: 0px 0px 22px 0px;
    display: flex;
    flex-direction: column;
}

/* Add these styles to make the SurveyJS progress bar visible: */
.sd-progress,
.sd-progress-bar,
.sd-progress__background {
    background-color: #f0f0f0 !important;
    height: 12px !important;
    border-radius: 6px !important;
    margin: 15px 0 !important;
    border: 1px solid #ddd !important;
    overflow: hidden !important;
}

.sd-progress__bar,
.sd-progress-bar__indicator {
    background-color: #0066cc !important;
    height: 100% !important;
    border-radius: 6px !important;
    transition: width 0.3s ease !important;
    min-width: 10% !important;
}

.sd-body__page .sd-progress {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.sv-progress,
.sv-progress-bar {
    background-color: #f0f0f0 !important;
    height: 12px !important;
    border-radius: 6px !important;
    margin: 15px 0 !important;
    border: 1px solid #ddd !important;
}

.sv-progress-bar__fill {
    background-color: #0066cc !important;
    height: 100% !important;
    border-radius: 6px !important;
}

.post-content ul.sd-progress-buttons__list {
    margin: 0px 0px 22px 0px;
}

.sd-root-modern.sd-root-modern--full-container {
    background-color: transparent;
}

.sd-page {
    padding: 22px 0px 22px 0px;
}

.sd-body.sd-body--static {
    padding: 0px 0px 0px 0px;
}

.sd-root-modern--mobile .sd-body.sd-body--responsive, 
.sd-root-modern--mobile .sd-body.sd-body--static {
    padding: 0px 0px 0px 0px;
}   

.sd-root--compact .sd-body.sd-body--responsive .sd-body__navigation, 
.sd-root--compact .sd-body.sd-body--static .sd-body__navigation {
    padding-top: 22px;
}

.sd-body.sd-body--static .sd-body__navigation.sd-action-bar {
    padding-left: 0px;
    padding-right: 0px;
}

/* Target the actual radio button decorators based on your DOM */
.sd-radio__decorator,
.sd-checkbox__decorator,
.sd-item__decorator {
    border: 2px solid #cccccc !important;
    background-color: transparent !important;
}

/* When radio/checkbox is checked - target the parent container */
.sd-item--checked .sd-radio__decorator,
.sd-radio--checked .sd-radio__decorator,
.sd-selectbase__item--checked .sd-item__decorator,
.sd-item--checked .sd-item__decorator {
    background-color: #0066cc !important;
    border-color: #0066cc !important;
}

/* Hover states */
.sd-item--allowhover:hover .sd-radio__decorator,
.sd-radio--allowhover:hover .sd-radio__decorator,
.sd-item:hover .sd-item__decorator {
    border-color: #0066cc !important;
}

/* Remove any existing background from checked items */
.sd-item--checked,
.sd-radio--checked,
.sd-selectbase__item--checked {
    background-color: transparent !important;
}

/* Make sure radio button circles are blue when selected */
.sd-radio__decorator::after {
    background-color: #ffffff !important;
}

.sd-item--checked .sd-radio__decorator::after,
.sd-radio--checked .sd-radio__decorator::after {
    background-color: #ffffff !important;
}

/* For checkboxes - make the checkmark white */
.sd-checkbox__decorator::after {
    color: #ffffff !important;
}

.sd-item--checked .sd-checkbox__decorator::after {
    color: #ffffff !important;
}

/* ✅ FIXED Navigation positioning using pure flexbox */
.sd-body__navigation.sd-action-bar {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}

/* Previous button - stays in natural order, left side */
.sd-action-bar #sv-nav-prev,
.sd-action-bar .sv-action:has(.sd-navigation__prev-btn),
.sd-action-bar .sv-action:has(.results-prev-btn) {
    order: 1 !important;
    margin-right: auto !important;
}

/* Next/Submit button - goes to the right */
.sd-action-bar #sv-nav-next,
.sd-action-bar .sv-action:has(.sd-navigation__next-btn),
.sd-action-bar .sv-action:has(.results-next-btn),
.sd-action-bar .sv-action:has([value="Submit Poll"]) {
    order: 2 !important;
    margin-left: auto !important;
}

/* When there's only one button and it's a next/submit button - push to right */
.sd-body__navigation.sd-action-bar .sv-action:only-child:has(.sd-navigation__next-btn),
.sd-body__navigation.sd-action-bar .sv-action:only-child:has(.results-next-btn),
.sd-body__navigation.sd-action-bar .sv-action:only-child:has([value="Submit Poll"]) {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* When there's only one button and it's a previous button - keep left */
.sd-body__navigation.sd-action-bar .sv-action:only-child:has(.sd-navigation__prev-btn),
.sd-body__navigation.sd-action-bar .sv-action:only-child:has(.results-prev-btn) {
    margin-right: auto !important;
    margin-left: 0 !important;
}

/* Default single button behavior - keep left */
.sd-body__navigation.sd-action-bar .sv-action:only-child {
    margin-right: auto !important;
}

/* Single rule for ALL navigation buttons */
.sd-body__navigation .sd-btn {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: 120px !important;
    max-width: 200px !important;
    padding: 8px 24px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

/* When there are multiple buttons, make them share space equally */
.sd-body__navigation.sd-action-bar .sd-btn:not(:only-child) {
    flex: 1 1 auto !important;
    max-width: 48% !important;
}

/* Make the .sv-action__content containers flex to control button alignment */
.sd-body__navigation.sd-action-bar .sv-action__content {
    display: flex !important;
    justify-content: flex-start !important; /* ✅ CHANGED: Default to left alignment */
    width: 100% !important;
}

/* ✅ ADD: Previous buttons - align to left of their container */
.sd-body__navigation.sd-action-bar .sv-action:has(.sd-navigation__prev-btn) .sv-action__content,
.sd-body__navigation.sd-action-bar .sv-action:has(.results-prev-btn) .sv-action__content {
    justify-content: flex-start !important; /* Left edge */
}

/* ✅ ADD: Next/Submit buttons - align to right of their container */
.sd-body__navigation.sd-action-bar .sv-action:has(.sd-navigation__next-btn) .sv-action__content,
.sd-body__navigation.sd-action-bar .sv-action:has(.results-next-btn) .sv-action__content,
.sd-body__navigation.sd-action-bar .sv-action:has([value="Submit Poll"]) .sv-action__content {
    justify-content: flex-end !important; /* Right edge */
}

/* ✅ ADD: Single button containers - previous stays left, next/submit goes right */
.sd-body__navigation.sd-action-bar .sv-action:only-child:has(.sd-navigation__prev-btn) .sv-action__content,
.sd-body__navigation.sd-action-bar .sv-action:only-child:has(.results-prev-btn) .sv-action__content {
    justify-content: flex-start !important; /* Previous buttons stay left */
}

.sd-body__navigation.sd-action-bar .sv-action:only-child:has(.sd-navigation__next-btn) .sv-action__content,
.sd-body__navigation.sd-action-bar .sv-action:only-child:has(.results-next-btn) .sv-action__content,
.sd-body__navigation.sd-action-bar .sv-action:only-child:has([value="Submit Poll"]) .sv-action__content {
    justify-content: flex-end !important; /* Next/Submit buttons go right */
}

/* Force all textareas in polls to look like single-line inputs */
.poll-survey-container textarea,
.sd-input textarea,
.sd-text textarea {
    height: 40px !important;
    resize: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    width: 250px !important;
    max-width: 60% !important;
    padding: 8px 12px !important;
    border: 2px solid #cccccc !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-left: 30px !important;
    display: inline-block !important;
    vertical-align: top !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
}

.poll-survey-container textarea:focus,
.sd-input textarea:focus,
.sd-text textarea:focus {
    border-color: #0066cc !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2) !important;
}

/* Prevent textarea from expanding */
.poll-survey-container textarea::-webkit-resizer,
.sd-input textarea::-webkit-resizer,
.sd-text textarea::-webkit-resizer {
    display: none !important;
}