/* ====== PALETTE CONVERSION-FIRST ====== */
:root{
    /* Primari (fiducia) */
    --brand:        #1170EE;   /* nuovo primary */
    --brand-600:    #0a59c7;   /* hover/active */
    --brand-50:     #e9f3ff;   /* soft bg */
    --brand-100:    #d6e9ff;

    /* CTA (attenzione) */
    --cta:          #FF8A1E;   /* arancione caldo */
    --cta-600:      #E06F07;   /* hover/active */
    --cta-50:       #FFF1E5;

    /* Stati */
    --success:      #146C43;
    --danger:       #E65353;
    --warning:      #F4B400;
    --info:         #16B1C4;

    /* Testi & basi */
    --fg:           #212529;
    --muted:        #6c757d;
    --bg-soft:      #F8F9FA;
    --white:        #ffffff;

    /* mapping legacy tuoi token */
    --soft-bg:      var(--brand-50);
    --soft-fg:      var(--brand);
}

/* ====== BOTTONI ====== */
.btn-primary{
    background-color: var(--brand);
    border-color:     var(--brand);
    color:            var(--white);
}
.btn-primary:hover,
.btn-primary:focus{
    background-color: var(--brand-600);
    border-color:     var(--brand-600);
    color:            var(--white);
}

/* Bottone "Conferma" = verde conversione (come .btn-success migliorato) */
.swal2-confirm {
    background-color: #146C43 !important;
    border: 1px solid #146C43 !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: .5rem;
    padding: .5rem 1rem;
    transition: all .2s ease-in-out;
}
.swal2-confirm:hover,
.swal2-confirm:focus {
    background-color: #1C865A !important;
    border-color: #1B7D55 !important;
    color: #fff !important;
}

/* Bottone "Cancel" = stile .btn-outline-secondary */
.swal2-cancel {
    background-color: transparent !important;
    border: 1px solid #6c757d !important;
    color: #6c757d !important;
    font-weight: 500;
    border-radius: .5rem;
    padding: .5rem 1rem;
    transition: all .2s ease-in-out;
}
.swal2-cancel:hover,
.swal2-cancel:focus {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

.hint-text {
    font-weight: 600;
    color: black;
    font-size: 0.95rem;

    animation-name: bounce;
    animation-duration: 1.4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 3;  /* solo 3 volte */
    animation-fill-mode: forwards; /* resta fermo allo stato finale */
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(4px); }
    60% { transform: translateY(2px); }
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #146C43;                 /* verde acceso conversione */
    --bs-btn-border-color: #146C43;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1C865A;           /* hover leggermente più scuro */
    --bs-btn-hover-border-color: #1B7D55;
    --bs-btn-focus-shadow-rgb: 34,160,107; /* ombra verde coerente */
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #197750;          /* active ancora più scuro */
    --bs-btn-active-border-color: #176D4B;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #146C43;
    --bs-btn-disabled-border-color: #146C43;
}

/* CTA dedicata (più “converting” di primary) */
.btn-cta{
    background-color: var(--cta);
    border-color:     var(--cta);
    color:            var(--white);
    padding:.7rem 1.1rem; font-weight:600; border-radius: .6rem;
    box-shadow: 0 6px 16px rgba(255,138,30,.25);
}
.btn-cta:hover,
.btn-cta:focus{
    background-color: var(--cta-600);
    border-color:     var(--cta-600);
    box-shadow: 0 8px 20px rgba(255,138,30,.32);
    color: var(--white);
}

/* Link evidenti ma accessibili */
a, .link-primary{ color: var(--brand); }
a:hover, .link-primary:hover{ color: var(--brand-600); }

/* Pills/tabs più “chip” */
.nav-pills .nav-link{
    border-radius: 999px;
    color: var(--brand);
    border:1px solid transparent;
}
.nav-pills .nav-link:hover{
    background: var(--brand-50);
    border-color: var(--brand-100);
}
.nav-pills .nav-link.active{
    background: var(--brand);
    color: var(--white);
    box-shadow: 0 2px 8px rgba(17,112,238,.35);
}

/* Badge soft coerenti con la palette */
.badge-soft{ background: var(--soft-bg); color: var(--soft-fg); }

/* Alert/info */
.alert-info{
    background: linear-gradient(180deg, #eaf9fc, #e5f7ff);
    border-color: #c8ecf7; color: #055160;
}

/* Progress sottile */
.progress-thin{ height:8px; border-radius:6px; }
.progress .progress-bar.bg-primary{
    background-color: var(--success) !important;
}

.progress{
    margin-top: 7px;
}

/* Ombre morbide */
.shadow-soft{ box-shadow: 0 6px 24px rgba(0,0,0,.06); }

/* ====== DARK MODE ====== */
[data-bs-theme="dark"]{
    --fg:#E9ECEF; --muted:#adb5bd;
    --bg-soft:#0f1115;
    --brand-50: rgba(17,112,238,.18);
    --cta-50:   rgba(255,138,30,.18);
}
[data-bs-theme="dark"] .badge-soft{ background: var(--brand-50); color:#cfe2ff; }
[data-bs-theme="dark"] .nav-pills .nav-link{ color:#cfe2ff; }
[data-bs-theme="dark"] .nav-pills .nav-link:hover{
    background: rgba(17,112,238,.18); border-color: transparent;
}
[data-bs-theme="dark"] .nav-pills .nav-link.active{
    background: var(--brand); color:#fff;
}
[data-bs-theme="dark"] .btn-cta{ box-shadow: 0 6px 18px rgba(255,138,30,.26); }
[data-bs-theme="dark"] .alert-info{
    background: rgba(22,177,196,.12); border-color: rgba(22,177,196,.35); color:#b8e8ef;
}


/* Contenitore anteprima: altezza fissa e cover */
.screenshot-preview{
    height: 360px;            /* regola l’altezza dell’anteprima */
    cursor: zoom-in;
    background: #f8f9fa;
}
.screenshot-preview img{
    width: 100%;
    height: 100%;
    object-fit: cover;        /* taglia in alto/basso per mobile molto alto */
    object-position: top;     /* mostra la parte alta (above the fold) */
}

/* Sfumatura in basso per indicare che l’immagine continua */
.screenshot-fade{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 64px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.92));
    pointer-events: none;
}

/* Call-to-action centrale in hover */
.screenshot-cta{
    position: absolute;
    left: 50%; bottom: 18px; transform: translateX(-50%);
    opacity: .0;
    transition: opacity .2s ease;
}
.screenshot-preview:hover .screenshot-cta{ opacity: 1; }

/* Dark mode friendly */
[data-bs-theme="dark"] .screenshot-fade{
    background: linear-gradient(to bottom, rgba(33,37,41,0), rgba(33,37,41,.92));
}

.badge.small{
    font-size: 10px;
    font-weight: normal;
}


#inlineEmailCard .badge { border-radius: 999px; }