/* ==========================================================================
   Droppy · Modern theme — "Minimal Premium" (v3)
   La Gondola Rossa — transfer.lagondolarossa.com
   --------------------------------------------------------------------------
   Strato di restyling caricato DOPO style.css: non riscrive il layout
   originale (posizionamenti, flex, JS) ma ne ridefinisce tipografia,
   colori, spaziature, bordi e ombre.

   Palette derivata dal logo (rosso #EC2E2E). Per cambiare identità
   basta modificare i token qui sotto.
   ========================================================================== */

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

:root {
    /* Brand */
    --v3-brand: #E02328;
    --v3-brand-strong: #BE1A1F;
    --v3-brand-soft: #FDEDED;

    /* Inchiostro e superfici */
    --v3-ink: #12161B;
    --v3-ink-2: #4C555E;
    --v3-ink-3: #8B949C;
    --v3-line: #E7EAEE;
    --v3-line-2: #D8DDE3;
    --v3-surface: #FFFFFF;
    --v3-surface-2: #F6F7F9;

    /* Forma */
    --v3-radius: 22px;
    --v3-radius-md: 14px;
    --v3-radius-sm: 10px;

    /* Ombre */
    --v3-shadow-card:
        0 1px 2px rgba(12, 18, 26, .06),
        0 18px 40px -14px rgba(12, 18, 26, .26),
        0 44px 90px -32px rgba(12, 18, 26, .40);
    --v3-shadow-soft: 0 8px 24px -10px rgba(12, 18, 26, .25);
    --v3-ring: 0 0 0 4px rgba(224, 35, 40, .16);

    /* Tipografia */
    --v3-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --v3-font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;

    --v3-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

body {
    font-family: var(--v3-font) !important;
    color: var(--v3-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Velo sulla slideshow di sfondo: dà profondità e stacca la card */
.background::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(130% 100% at 15% 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .38) 100%),
        linear-gradient(180deg, rgba(9, 12, 16, .42) 0%, rgba(9, 12, 16, .14) 42%, rgba(9, 12, 16, .46) 100%);
}

.background .vegas-slide-inner {
    filter: brightness(.95) saturate(.96);
}

/* Logo in alto a sinistra */
.main-logo {
    top: 14px;
    max-height: 54px;
    padding: 9px 15px;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 0 var(--v3-radius-md) var(--v3-radius-md) 0;
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .45);
}

/* --------------------------------------------------------------------------
   2. Navigazione in alto a destra (div.tabs#page-tabs)
   -------------------------------------------------------------------------- */

.tabs:not(.core) {
    top: 16px;
    right: 16px;
    padding: 5px;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 999px;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5);
}

.tabs:not(.core) ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: none;
    gap: 2px;
}

.tabs:not(.core) ul li {
    margin: 0;
}

.tabs:not(.core) ul li a {
    display: block;
    padding: 8px 15px;
    background: transparent;
    border: none;
    border-radius: 999px;
    color: var(--v3-ink-2);
    font-family: var(--v3-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    transition: background-color .2s var(--v3-ease), color .2s var(--v3-ease);
}

.tabs:not(.core) ul li a:hover {
    background: rgba(18, 22, 27, .07);
    color: var(--v3-ink);
}

.tabs:not(.core) ul li.is-active a,
.tabs:not(.core) ul li a.is-active {
    background: var(--v3-ink);
    color: #fff;
}

/* --------------------------------------------------------------------------
   3. Pannello laterale dei tab (Termini, Contatti, ...)
   -------------------------------------------------------------------------- */

.tab-window {
    background: var(--v3-surface);
    box-shadow: -30px 0 80px -24px rgba(12, 18, 26, .32);
}

.tab-window .tab {
    max-width: 720px;
    margin: 64px auto 56px;
    padding: 0 34px;
}

.tab-window .tab h1 {
    font-family: var(--v3-font-display);
    font-size: clamp(28px, 2.6vw, 38px);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -.015em;
    margin-bottom: 22px;
    color: var(--v3-ink);
}

.tab-window .tab h2 {
    font-family: var(--v3-font);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 30px 0 10px;
    color: var(--v3-ink);
}

.tab-window .tab h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 22px 0 8px;
    color: var(--v3-ink);
}

.tab-window .tab p,
.tab-window .tab li {
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--v3-ink-2);
}

.tab-window .tab a {
    color: var(--v3-brand);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(224, 35, 40, .3);
}

.tab-window .tab a:hover {
    border-bottom-color: var(--v3-brand);
}

.tab-window .tab hr {
    border: none;
    border-top: 1px solid var(--v3-line);
    margin: 30px 0;
}

.tab-window .close-btn {
    color: var(--v3-ink-3);
    transition: color .2s var(--v3-ease), transform .2s var(--v3-ease);
}

.tab-window .close-btn:hover {
    color: var(--v3-brand);
    transform: rotate(90deg);
}

/* --------------------------------------------------------------------------
   4. La card principale
   -------------------------------------------------------------------------- */

.upload-block .upload-block-inner {
    width: min(420px, 94vw);
    height: auto;
    min-height: 480px;
    padding: 0;
    background: var(--v3-surface);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--v3-radius);
    box-shadow: var(--v3-shadow-card);
    overflow: hidden;
}

.upload-block .upload-block-content {
    padding: 28px 26px 0;
}

/* Zona di rilascio / selezione file */
.upload-block .upload-block-content .add-files {
    width: 100%;
    height: auto;
    min-height: 258px;
    margin: 4px auto 0;
    background: var(--v3-surface-2);
    border: 1.5px dashed var(--v3-line-2);
    border-radius: 18px;
    transition: border-color .25s var(--v3-ease),
                background-color .25s var(--v3-ease),
                transform .25s var(--v3-ease);
}

.upload-block .upload-block-content .add-files:hover {
    background: var(--v3-brand-soft);
    border-color: var(--v3-brand);
    transform: translateY(-1px);
}

.upload-block .upload-block-content span.description {
    padding: 0 6px;
    color: var(--v3-ink-2);
    font-size: 14px;
    line-height: 1.65;
}

.upload-block .upload-block-content span.description b {
    color: var(--v3-ink);
    font-weight: 600;
}

.upload-block .upload-block-content span.folder-select {
    color: var(--v3-brand);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.upload-block .upload-block-content span.folder-select:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   5. Pulsanti
   -------------------------------------------------------------------------- */

.button {
    font-family: var(--v3-font);
    font-weight: 600;
    letter-spacing: .01em;
    border: none;
    border-radius: 999px;
    transition: transform .18s var(--v3-ease),
                box-shadow .18s var(--v3-ease),
                background-color .18s var(--v3-ease);
}

.button.is-info {
    background: var(--v3-brand) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px -10px rgba(224, 35, 40, .75);
}

.button.is-info:hover {
    background: var(--v3-brand-strong) !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px -10px rgba(224, 35, 40, .8);
}

.button.is-info:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px -8px rgba(224, 35, 40, .7);
}

/* Pulsante "opzioni" (ingranaggio) accanto a quello principale */
.upload-block .upload-block-content#upload > .button-block > button.options,
.upload-block .upload-block-content .button-block button.options {
    background: var(--v3-surface-2) !important;
    color: var(--v3-ink-2) !important;
    box-shadow: none;
}

.upload-block .upload-block-content#upload > .button-block > button.options:hover,
.upload-block .upload-block-content .button-block button.options:hover {
    background: var(--v3-line) !important;
    color: var(--v3-ink) !important;
}

/* Barra inferiore della card */
.upload-block .upload-block-content .button-block {
    height: 86px;
    padding: 0 26px;
    background: transparent;
    border-top: 1px solid var(--v3-line);
    border-radius: 0;
}

/* --------------------------------------------------------------------------
   6. Campi di input
   -------------------------------------------------------------------------- */

.input,
.textarea,
.select select {
    height: 46px;
    font-family: var(--v3-font);
    font-size: 14.5px;
    color: var(--v3-ink);
    background: var(--v3-surface-2);
    border: 1px solid var(--v3-line-2);
    border-radius: var(--v3-radius-sm);
    box-shadow: none;
    transition: border-color .18s var(--v3-ease),
                box-shadow .18s var(--v3-ease),
                background-color .18s var(--v3-ease);
}

.textarea {
    height: auto;
    min-height: 110px;
    padding: 12px 14px;
}

.input::placeholder,
.textarea::placeholder {
    color: var(--v3-ink-3);
}

.input:focus,
.textarea:focus,
.select select:focus {
    background: #fff;
    border-color: var(--v3-brand);
    box-shadow: var(--v3-ring);
}

/* Campo readonly con l'URL finale */
.input[readonly] {
    background: var(--v3-surface-2);
    color: var(--v3-ink-2);
    font-size: 13px;
    border-style: dashed;
}

/* --------------------------------------------------------------------------
   7. Lista file selezionati e statistiche
   -------------------------------------------------------------------------- */

.selected-files {
    padding: 6px 14px;
    background: var(--v3-surface-2);
    border-top: 1px solid var(--v3-line);
}

.selected-files ul li {
    height: 44px;
    align-content: center;
    border-bottom: 1px solid rgba(18, 22, 27, .07);
}

.selected-files ul li span.name {
    font-size: 13px;
    font-weight: 500;
    color: var(--v3-ink);
}

.selected-files ul li span.size {
    font-size: 11px;
    color: var(--v3-ink-3);
}

.selected-files ul li span.delete {
    color: var(--v3-ink-3);
    transition: color .18s var(--v3-ease);
}

.selected-files ul li span.delete:hover {
    color: var(--v3-brand);
}

.selected-files .stats span {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--v3-ink-3);
}

.selected-files .stats span b {
    display: block;
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--v3-ink);
}

.selected-files .add-buttons .button {
    font-size: 12px;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   8. Progresso e schermate di esito
   -------------------------------------------------------------------------- */

.upload-block .upload-progress-bar {
    font-family: var(--v3-font);
    font-size: 34px;
    font-weight: 600;
}

.upload-block .upload-progress-details {
    font-size: 12.5px;
    color: var(--v3-ink-2);
}

.upload-block .upload-finished-details h1,
.upload-block .upload-verify-details h1 {
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--v3-ink);
}

.upload-block .upload-finished-details p,
.upload-block .upload-verify-details p {
    font-size: 14px;
    color: var(--v3-ink-2);
}

/* --------------------------------------------------------------------------
   9. Schermata "accetta i termini" (#terms)
   -------------------------------------------------------------------------- */

.upload-block .upload-block-content#terms {
    padding: 34px 30px 0;
}

.upload-block .upload-block-content#terms lord-icon {
    height: 186px !important;
}

.upload-block .upload-block-content#terms .description {
    font-size: 15px;
    line-height: 1.7;
    color: var(--v3-ink-2);
}

.upload-block .upload-block-content#terms .description a {
    color: var(--v3-brand);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(224, 35, 40, .35);
}

.upload-block .upload-block-content#terms .description a:hover {
    border-bottom-color: var(--v3-brand);
}

/* --------------------------------------------------------------------------
   10. Tooltip / messaggi
   -------------------------------------------------------------------------- */

.upload-block .upload-block-tooltip {
    font-family: var(--v3-font);
    border-radius: var(--v3-radius-md);
    box-shadow: 0 22px 50px -16px rgba(12, 18, 26, .38);
}

.upload-block .upload-block-tooltip .content p {
    font-size: 13.5px;
    line-height: 1.55;
}

.notification {
    border-radius: var(--v3-radius-md);
    font-family: var(--v3-font);
    font-size: 14px;
}

.notification.is-danger {
    background: var(--v3-brand-soft);
    color: #8E1116;
}

/* --------------------------------------------------------------------------
   11. Login
   -------------------------------------------------------------------------- */

.login-block {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
    box-shadow: 30px 0 90px -28px rgba(12, 18, 26, .40);
}

.login-block form {
    width: min(360px, 84%);
}

.login-block form .logo {
    display: block;
    max-height: 74px;
    width: auto;
    margin: 0 auto 30px;
}

.login-block form .input {
    height: 48px;
    font-size: 15px;
}

.login-block form .button {
    width: 100%;
    height: 48px;
    font-size: 15px;
    margin-top: 6px;
}

/* --------------------------------------------------------------------------
   12. Barra di navigazione mobile
   -------------------------------------------------------------------------- */

.navbar.is-info {
    background: rgba(255, 255, 255, .94) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    border-bottom: 1px solid var(--v3-line);
    box-shadow: 0 8px 24px -16px rgba(12, 18, 26, .5);
}

.navbar.is-info .navbar-item img {
    max-height: 26px;
    width: auto;
}

.navbar-burger span {
    background-color: var(--v3-ink) !important;
}

.drop-overlay {
    border-color: var(--v3-brand);
    border-radius: var(--v3-radius);
    background-color: rgba(224, 35, 40, .08);
}

.drop-overlay p {
    font-family: var(--v3-font);
    font-size: 20px;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   13. Accessibilità
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
.input:focus-visible,
.textarea:focus-visible {
    outline: 2px solid var(--v3-brand);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   14. Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .upload-block {
        padding-top: 56px;
    }

    .upload-block .upload-block-inner {
        width: 100%;
        min-height: 0;
        height: 100%;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: var(--v3-surface);
    }

    .upload-block .upload-block-content {
        padding: 20px 18px 0;
    }

    .upload-block .upload-block-content .add-files {
        min-height: 200px;
        border-radius: 16px;
    }

    .upload-block .upload-block-content .button-block {
        height: 78px;
        padding: 0 18px;
    }

    .tab-window .tab {
        margin: 74px auto 40px;
        padding: 0 20px;
    }

    .login-block {
        width: 100%;
        min-width: 0;
        max-width: none;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .button,
    .tabs:not(.core) ul li a,
    .upload-block .upload-block-content .add-files,
    .input,
    .textarea,
    .tab-window .close-btn {
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   15. Contenuto delle pagine (Termini, Chi siamo)
   Il markup delle pagine non porta piu' stili propri: li governa il tema.
   -------------------------------------------------------------------------- */

.tab-window .tab img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 26px 0;
    border-radius: 16px;
    box-shadow: 0 20px 44px -20px rgba(12, 18, 26, .38);
}

.tab-window .tab ul {
    list-style: disc;
    margin: 14px 0 20px;
    padding-left: 22px;
}

.tab-window .tab ul li {
    margin-bottom: 8px;
}

.tab-window .tab ul li::marker {
    color: var(--v3-brand);
}

.tab-window .tab p + h2 {
    margin-top: 34px;
}