/*
 * Criticalcase Satisfaction Survey — Frontend Styles v1.1
 * Design system aggiornato: brand arancione #e36d0d, IBM Plex Sans + Karla.
 * Tutto isolato dentro .ccs-survey-wrap
 */

/* Theme & Layout Overrides */
.ccs-survey-wrap .content,
.ccs-survey-wrap .sidebar,
.ccs-frontend-dashboard-wrap .content,
.ccs-frontend-dashboard-wrap .sidebar {
    margin: 0px !important;
    padding-top: 16px !important;
}

.html_header_transparency #top .avia-builder-el-0 .container,
.html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
    padding-top: 0 !important;
}

.ccs-frontend-dashboard-wrap.ccs-admin-wrap img {
    max-width: 166px;
}

/* ─── Reset & box model ───────────────────────────────────────────────────── */
.ccs-survey-wrap *,
.ccs-survey-wrap *::before,
.ccs-survey-wrap *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ─── Design Tokens ──────────────────────────────────────────────────────── */
.ccs-survey-wrap {
    /* Colore accento brand */
    --ccs-primary: #e36d0d;
    --ccs-primary-light: #fdf0e6;
    --ccs-primary-dark: #de6739;

    /* Semantici */
    --ccs-success: #1D9E75;
    --ccs-warning: #EF9F27;
    --ccs-danger: #E24B4A;

    /* Testi */
    --ccs-text: #2a2a2a;
    --ccs-text-secondary: #616775;
    --ccs-text-hint: #919191;

    /* Superfici */
    --ccs-surface: #FFFFFF;
    --ccs-surface-variant: #fdf6f0;
    --ccs-outline: #e1e1e1;

    /* Layout */
    --ccs-radius: 12px;
    --ccs-radius-sm: 8px;
    --ccs-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
    --ccs-transition: 180ms ease;

    /* Tipografia */
    --ccs-font-heading: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --ccs-font-body: 'Karla', system-ui, -apple-system, sans-serif;

    /* Cursore custom slider: cerchio arancio 14px, opacità 76% */
    --ccs-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%23e36d0d' fill-opacity='0.76'/%3E%3C/svg%3E") 7 7, crosshair;

    /* Base: font body + colore secondary come default */
    font-family: var(--ccs-font-body);
    color: var(--ccs-text-secondary);
    font-size: 16px;
    line-height: 1.5;
    background: transparent;
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 16px 48px;
}

.ccs-survey-wrap img {
    max-width: 166px;
    height: auto;
    display: block;
}

/* Headings e testi domanda: font heading + colore text */
.ccs-survey-wrap h1,
.ccs-survey-wrap h2,
.ccs-survey-wrap h3,
.ccs-card__label,
.ccs-slider-item__label,
.ccs-complete__title {
    font-family: var(--ccs-font-heading);
    color: var(--ccs-text);
}

/* ─── Progress bar ───────────────────────────────────────────────────────── */
.ccs-progress-track {
    width: 100%;
    height: 3px;
    background: var(--ccs-outline);
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: 10px;
}

.ccs-progress-fill {
    height: 100%;
    background: var(--ccs-primary);
    border-radius: 100px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ccs-progress-label {
    font-size: 13px;
    color: var(--ccs-text-hint);
    margin-bottom: 20px;
    font-family: var(--ccs-font-body);
}

/* ─── Keyboard accessibility hint ───────────────────────────────────────── */
.ccs-keyboard-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--ccs-surface-variant);
    border: 1px solid var(--ccs-outline);
    border-radius: var(--ccs-radius-sm);
    padding: 10px 14px;
    margin-bottom: 24px;
    font-size: 13px;
    color: var(--ccs-text-hint);
    font-family: var(--ccs-font-body);
    line-height: 1.5;
}

.ccs-keyboard-hint__icon {
    flex-shrink: 0;
    opacity: 0.6;
    margin-top: 1px;
}

/* ─── Section badge ──────────────────────────────────────────────────────── */
.ccs-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ccs-primary-light);
    color: var(--ccs-primary);
    border-radius: 100px;
    padding: 4px 14px 4px 4px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--ccs-font-heading);
    margin-bottom: 20px;
}

.ccs-section-badge__letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--ccs-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
}

/* ─── Step ───────────────────────────────────────────────────────────────── */
.ccs-step {
    display: none;
}

.ccs-step.is-active {
    display: block;
    animation: ccs-fade-in 0.25s ease both;
}

@keyframes ccs-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Card domanda ───────────────────────────────────────────────────────── */
.ccs-card {
    background: var(--ccs-surface);
    border: 1px solid var(--ccs-outline);
    border-radius: var(--ccs-radius);
    padding: 24px 24px 66px;
    box-shadow: var(--ccs-shadow);
    margin-bottom: 16px;
}

.ccs-card__label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 18px;
    line-height: 1.4;
}

.ccs-card__sublabel {
    display: block;
    font-size: 13px;
    color: var(--ccs-text-hint);
    margin-top: -12px;
    margin-bottom: 18px;
    font-family: var(--ccs-font-body);
}

/* Hint sotto la domanda */
.ccs-question-hint {
    display: block;
    font-size: 13px;
    color: var(--ccs-text-hint);
    margin-top: -12px;
    margin-bottom: 16px;
    font-family: var(--ccs-font-body);
}

/* ─── Choice Chips (radio / checkbox) ───────────────────────────────────── */
.ccs-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ccs-chip {
    position: relative;
}

.ccs-chip input[type="radio"],
.ccs-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ccs-chip__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1.5px solid var(--ccs-outline);
    border-radius: 100px;
    font-size: 14px;
    cursor: pointer;
    color: var(--ccs-text-secondary);
    background: var(--ccs-surface);
    font-family: var(--ccs-font-body);
    transition:
        border-color var(--ccs-transition),
        background var(--ccs-transition),
        color var(--ccs-transition),
        box-shadow var(--ccs-transition);
    user-select: none;
}

.ccs-chip__label::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--ccs-outline);
    background: transparent;
    transition:
        border-color var(--ccs-transition),
        background var(--ccs-transition),
        transform 0.15s ease;
    flex-shrink: 0;
}

/* checkbox: angoli quadri */
.ccs-chip input[type="checkbox"]+.ccs-chip__label::before {
    border-radius: 4px;
}

.ccs-chip input:checked+.ccs-chip__label {
    border-color: var(--ccs-primary);
    background: var(--ccs-primary-light);
    color: var(--ccs-primary);
    box-shadow: 0 0 0 3px rgba(227, 109, 13, 0.12);
}

.ccs-chip input:checked+.ccs-chip__label::before {
    background: var(--ccs-primary);
    border-color: var(--ccs-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transform: scale(1.1);
}

.ccs-chip__label:hover {
    border-color: var(--ccs-primary-dark);
}

/* ─── Slider noUiSlider ──────────────────────────────────────────────────── */
.ccs-slider-item {
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ccs-outline);
}

.ccs-slider-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Spazio per tooltip sopra il track + pips sotto */
/* Cursor custom applicato anche all'area esterna al track */
.ccs-slider-outer {
    padding: 16px 4px 0;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%23e36d0d' fill-opacity='0.76'/%3E%3C/svg%3E") 7 7, crosshair;
}

.ccs-slider-item__label {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
    line-height: 1.4;
}

.ccs-slider-item__hint {
    display: block;
    font-size: 13px;
    color: var(--ccs-text-hint);
    margin-bottom: 0px;
    font-family: var(--ccs-font-body);
}

/* Labels MIN/MAX — ora sopra il track, nel template vengono prima del data-slider */
.ccs-slider-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.ccs-slider-labels span {
    font-size: 12px;
    color: var(--ccs-text-hint);
    font-family: var(--ccs-font-body);
}

/* ─── Pips (tacche step) ─────────────────────────────────────────────────── */
.noUi-pips-horizontal {
    padding: 10px 0;
    height: 60px;
    top: -2px !important;
    left: 0;
    width: 100%;
}

.noUi-marker {
    background: var(--ccs-outline);
    width: 1px;
    height: 5px;
}

.noUi-marker-horizontal.noUi-marker {
    margin-left: -1px;
    width: 1px !important;
    height: 5px;
}

.noUi-marker-horizontal.noUi-marker-large {
    height: 27px !important;
}

.noUi-marker-large {
    background: #e1e1e1 !important;
}

.noUi-value {
    display: none;
    /* nascondi numeri pips, usiamo solo le tacche */
}

/* Override noUiSlider */
.ccs-survey-wrap .noUi-target {
    background: transparent;
    border: none;
    box-shadow: none;
    height: 36px;
    margin: 10px 0 0;
    cursor: var(--ccs-cursor);
    padding: 0;
}

.ccs-survey-wrap .noUi-horizontal {
    height: 36px !important;
}

/* Track visivo: barra grigia di 4px centrata */
.ccs-survey-wrap .noUi-target::before {
    content: '';
    position: absolute;
    top: 58%;
    left: 0;
    right: 0;
    height: 4px;
    margin-top: -2px;
    background: #e1e1e1;
    border-radius: 10px;
    pointer-events: none;
}

.ccs-survey-wrap .noUi-base {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.ccs-survey-wrap .noUi-connects {
    border-radius: 100px;
    height: 4px !important;
    top: 50% !important;
    margin-top: -2px !important;
    background: transparent;
}

.ccs-survey-wrap .noUi-connect {
    background: var(--ccs-primary);
}

/* Handle: Pallino Arancione */
.ccs-survey-wrap .noUi-handle {
    width: 19px !important;
    height: 19px !important;
    border-radius: 50% !important;
    background: var(--ccs-primary) !important;
    border: 2px solid #fff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
    top: 50% !important;
    margin-top: 10px !important;
    right: -9px !important;
    cursor: grab;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.ccs-survey-wrap .noUi-handle::before,
.ccs-survey-wrap .noUi-handle::after {
    display: none !important;
}

.ccs-survey-wrap .noUi-handle:hover {
    transform: scale(1.1);
}

/* Focus da tastiera (Tab): ring visibile e netto */
.ccs-survey-wrap .noUi-handle:focus {
    outline: none;
    box-shadow:
        0 0 0 3px #fff,
        0 0 0 6px var(--ccs-primary) !important;
}

.ccs-survey-wrap .noUi-active {
    cursor: grabbing;
    transform: scale(1.1);
}

.ccs-survey-wrap .noUi-horizontal {
    height: 20px;
}

.ccs-survey-wrap .noUi-origin {
    top: 0 !important;
}

.noUi-horizontal .noUi-tooltip {
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    bottom: 126%;
}

/* Tooltip sopra il track (posizione default noUiSlider) */
.noUi-tooltip {
    display: block;
    position: absolute;
    border: 1px solid #D9D9D9;
    border-radius: 16px !important;
    background: #fff;
    color: #000;
    padding: 5px 7px !important;
    text-align: center;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--ccs-font-body);
}

/* Handle non posizionato = slider non interagito */
.ccs-slider--pristine .noUi-handle {
    opacity: 1;
    background: #ccc !important;
    box-shadow: none;
    background-color: sepia(1);
}

.ccs-slider--pristine .noUi-tooltip {
    display: none;
}

/* ─── Textarea ───────────────────────────────────────────────────────────── */
.ccs-textarea {
    width: 100%;
    border: 1px solid var(--ccs-outline);
    border-radius: var(--ccs-radius-sm);
    padding: 12px 16px;
    font-family: var(--ccs-font-body);
    font-size: 14px;
    color: var(--ccs-text);
    background: var(--ccs-surface);
    resize: vertical;
    min-height: 100px;
    transition: border-color var(--ccs-transition), box-shadow var(--ccs-transition);
    line-height: 1.5;
}

.ccs-textarea:focus {
    outline: none;
    border-color: var(--ccs-primary);
    box-shadow: 0 0 0 3px var(--ccs-primary-light);
}

.ccs-textarea::placeholder {
    color: var(--ccs-text-hint);
}

/* ─── Navigazione ────────────────────────────────────────────────────────── */
.ccs-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.ccs-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    cursor: pointer;
    font-family: var(--ccs-font-body);
    font-size: 14px;
    font-weight: 600;
    border-radius: 100px;
    padding: 10px 24px;
    transition: background var(--ccs-transition), box-shadow var(--ccs-transition), opacity var(--ccs-transition);
}

.ccs-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Filled — Avanti / Invia */
.ccs-btn--primary {
    background: var(--ccs-primary);
    color: #fff;
    box-shadow: 0 1px 4px rgba(227, 109, 13, 0.25);
}

.ccs-btn--primary:hover:not(:disabled) {
    background: var(--ccs-primary-dark);
    box-shadow: 0 4px 12px rgba(227, 109, 13, 0.35);
}

.ccs-btn--primary:active {
    box-shadow: 0 4px 12px rgba(227, 109, 13, 0.35);
}

/* Pulse per bottone avvio */
@keyframes ccs-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(227, 109, 13, 0.7);
    }

    50% {
        transform: scale(1.03);
        box-shadow: 0 0 0 10px rgba(227, 109, 13, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(227, 109, 13, 0);
    }
}

.ccs-btn--pulse {
    animation: ccs-pulse 2s ease-in-out infinite;
}

/* Outlined — Indietro */
.ccs-btn--outlined {
    background: transparent;
    color: var(--ccs-text-secondary);
    border: 1.5px solid var(--ccs-outline);
}

.ccs-btn--outlined:hover:not(:disabled) {
    border-color: var(--ccs-primary);
    color: var(--ccs-primary);
}

/* Text — Reset */
.ccs-btn--danger {
    background: transparent;
    color: var(--ccs-danger);
    padding: 10px 12px;
}

.ccs-btn--danger:hover:not(:disabled) {
    background: rgba(226, 75, 74, 0.08);
}

/* ─── Save indicator ─────────────────────────────────────────────────────── */
.ccs-save-indicator {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ccs-text-secondary);
    font-family: var(--ccs-font-body);
    background: #fff;
    border: 1px solid var(--ccs-outline);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    padding: 6px 14px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.ccs-save-indicator.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ccs-save-indicator__dot {
    width: 6px;
    height: 6px;
    background: var(--ccs-success);
    border-radius: 50%;
}

/* ─── Banner riprendi sessione ───────────────────────────────────────────── */
.ccs-resume-banner {
    background: var(--ccs-primary-light);
    border: 1.5px solid var(--ccs-primary);
    border-radius: var(--ccs-radius);
    padding: 20px 24px;
    margin-bottom: 24px;
    display: none;
}

.ccs-resume-banner.is-visible {
    display: block;
    animation: ccs-fade-in 0.3s ease both;
}

.ccs-resume-banner__title {
    font-weight: 700;
    font-size: 15px;
    font-family: var(--ccs-font-heading);
    color: var(--ccs-text);
    margin-bottom: 6px;
}

.ccs-resume-banner__desc {
    font-size: 13px;
    color: var(--ccs-text-hint);
    margin-bottom: 16px;
    font-family: var(--ccs-font-body);
}

.ccs-resume-banner__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ─── Errore validazione ─────────────────────────────────────────────────── */
.ccs-error-msg {
    font-size: 13px;
    color: var(--ccs-danger);
    font-family: var(--ccs-font-body);
    background: rgba(226, 75, 74, 0.08);
    border-radius: var(--ccs-radius-sm);
    padding: 10px 16px;
    margin-top: 12px;
    display: none;
}

.ccs-error-msg.is-visible {
    display: block;
}

/* ─── Schermata completamento ────────────────────────────────────────────── */
.ccs-complete {
    display: none;
    text-align: center;
    padding: 48px 24px;
}

.ccs-complete.is-active {
    display: block;
    animation: ccs-fade-in 0.4s ease both;
}

.ccs-complete__icon {
    width: 72px;
    height: 72px;
    background: var(--ccs-success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    animation: ccs-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes ccs-pop {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.ccs-complete__icon svg {
    width: 36px;
    height: 36px;
    stroke: #fff;
    animation: ccs-check 0.4s 0.4s ease both;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
}

@keyframes ccs-check {
    to {
        stroke-dashoffset: 0;
    }
}

.ccs-complete__title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
}

.ccs-complete__desc {
    font-size: 15px;
    color: var(--ccs-text-hint);
    font-family: var(--ccs-font-body);
    max-width: 360px;
    margin: 0 auto;
}

/* ─── Utility ────────────────────────────────────────────────────────────── */
.ccs-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

/* ─── Modal ────────────────────────────────────────────────────────────── */
.ccs-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 20px;
}

.ccs-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.ccs-modal-content {
    background: #fff;
    border-radius: var(--ccs-radius);
    padding: 32px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    text-align: center;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ccs-modal.is-open .ccs-modal-content {
    transform: translateY(0);
}

.ccs-modal-title {
    font-family: var(--ccs-font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--ccs-text);
    margin-bottom: 12px;
}

.ccs-modal-desc {
    font-family: var(--ccs-font-body);
    font-size: 14px;
    color: var(--ccs-text-secondary);
    line-height: 1.5;
    margin-bottom: 24px;
}

.ccs-modal-actions {
    display: flex;
    gap: 12px;
}

.ccs-modal-actions .ccs-btn {
    flex: 1;
    justify-content: center;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .ccs-survey-wrap {
        padding: 16px 12px 40px;
    }

    .ccs-card {
        padding: 18px 16px;
    }

    .ccs-choices {
        flex-direction: column;
    }

    .ccs-chip__label {
        width: 100%;
        border-radius: var(--ccs-radius-sm);
    }

    .ccs-nav {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .ccs-btn {
        justify-content: center;
    }
}

.ccs-filter-bar .input-text,
.ccs-filter-bar input[type="text"],
.ccs-filter-bar input[type="input"],
.ccs-filter-bar input[type="password"],
.ccs-filter-bar input[type="email"],
.ccs-filter-bar input[type="number"],
.ccs-filter-bar input[type="url"],
.ccs-filter-bar input[type="tel"],
.ccs-filter-bar input[type="search"],
.ccs-filter-bar textarea,
.ccs-filter-bar select {
    font-size: 14px !important;
    font-family: var(--ccs-font-heading) !important;
}

/* Fix Dashicons in frontend per navigazione calendario */
.ccs-admin-wrap .dashicons {
    font-family: dashicons !important;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    font-size: 20px;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.ccs-month-nav {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ccs-month-nav a.ccs-btn--outlined {
    display: flex;
    align-items: center;
    justify-content: center;
}