/* =============================================================
   POSIZIONI NOTE — Tema "Riviera Notturna"
   Tramonto sul mare → notte della movida. Coerente su tutte le pagine.
   ============================================================= */

:root {
    /* Palette base */
    --pn-night:      #14121f;   /* notte profonda  */
    --pn-night-2:    #1f1b32;   /* notte 2         */
    --pn-ink:        #221f33;   /* testi scuri     */
    --pn-bg:         #f6f5fb;   /* sfondo pagina   */
    --pn-card:       #ffffff;
    --pn-muted:      #6b6880;

    /* Firma cromatica / accenti */
    --pn-primary:    #ff5a36;   /* corallo tramonto */
    --pn-magenta:    #e23c7d;
    --pn-violet:     #7b3ff2;

    /* Colori per gruppo categoria */
    --pn-movida:     #ff3d7f;
    --pn-cultura:    #f5a623;
    --pn-sport:      #19c3a3;
    --pn-business:   #3d7bff;

    /* Gradienti */
    --pn-sunset:     linear-gradient(120deg, #ff5a36 0%, #e23c7d 48%, #7b3ff2 100%);
    --pn-sunset-soft: linear-gradient(120deg, rgba(255,90,54,.12), rgba(123,63,242,.12));
    --pn-night-grad: linear-gradient(150deg, #14121f 0%, #241c3d 55%, #3a2456 100%);

    /* Forma & ombre */
    --pn-radius:     18px;
    --pn-radius-sm:  12px;
    --pn-shadow:     0 10px 30px rgba(20, 16, 40, .10);
    --pn-shadow-lg:  0 20px 50px rgba(123, 63, 242, .22);

    --pn-font-display: "Outfit", system-ui, sans-serif;
    --pn-font-body:    "Inter", system-ui, sans-serif;
}

/* ---------------- Base ---------------- */
body {
    background:
        radial-gradient(1200px 600px at 100% -10%, rgba(123,63,242,.10), transparent 60%),
        radial-gradient(900px 500px at -10% 0%, rgba(255,90,54,.10), transparent 55%),
        var(--pn-bg);
    color: var(--pn-ink);
    font-family: var(--pn-font-body);
    min-height: 100vh;
}

h1, h2, h3, h4, .navbar-brand, .display-6 {
    font-family: var(--pn-font-display);
    letter-spacing: -.01em;
}

h3 {
    font-weight: 700;
    position: relative;
    padding-left: .85rem;
}
h3::before {
    content: "";
    position: absolute;
    left: 0; top: .15em; bottom: .15em;
    width: 5px;
    border-radius: 4px;
    background: var(--pn-sunset);
}

a { text-decoration: none; }

/* ---------------- Navbar ---------------- */
.pn-navbar {
    background: rgba(20, 16, 40, .78) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.pn-navbar .navbar-brand {
    font-weight: 800;
    font-size: 1.4rem;
    background: var(--pn-sunset);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pn-navbar .nav-link {
    color: rgba(255, 255, 255, .82) !important;
    font-weight: 500;
    border-radius: 8px;
    padding: .4rem .75rem !important;
    transition: color .15s, background .15s;
}
.pn-navbar .nav-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .08);
}

/* ---------------- Hero ---------------- */
.pn-hero {
    background: var(--pn-night-grad);
    color: #fff;
    border-radius: var(--pn-radius);
    padding: 3.5rem 2.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--pn-shadow-lg);
}
.pn-hero::before {
    content: "";
    position: absolute;
    inset: -40% -10% auto auto;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(255,90,54,.45), transparent 65%);
    filter: blur(10px);
}
.pn-hero::after {
    content: "";
    position: absolute;
    inset: auto auto -50% -15%;
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(123,63,242,.40), transparent 65%);
}
.pn-hero > * { position: relative; z-index: 1; }
.pn-hero .display-6 {
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 3rem);
}
.pn-hero .lead { color: rgba(255, 255, 255, .85); }

/* ---------------- Tile categoria (home) ---------------- */
.pn-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .35rem;
    width: 100%;
    border: none;
    border-radius: var(--pn-radius-sm);
    padding: 1.4rem 1.25rem;
    color: #fff !important;
    font-weight: 700;
    font-family: var(--pn-font-display);
    font-size: 1.1rem;
    box-shadow: var(--pn-shadow);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.pn-tile i { font-size: 1.6rem; opacity: .95; }
.pn-tile:hover {
    transform: translateY(-4px);
    filter: brightness(1.06);
    box-shadow: var(--pn-shadow-lg);
    color: #fff !important;
}
.pn-tile-movida   { background: linear-gradient(135deg, #ff5a36, #ff3d7f); }
.pn-tile-cultura  { background: linear-gradient(135deg, #f5a623, #ff6f3d); }
.pn-tile-sport    { background: linear-gradient(135deg, #19c3a3, #2bb1ff); }
.pn-tile-business { background: linear-gradient(135deg, #3d7bff, #7b3ff2); }

/* ---------------- Card ---------------- */
.pn-card-evento, .pn-card-locale, .pn-card-offerta {
    border: 1px solid rgba(20, 16, 40, .05);
    border-radius: var(--pn-radius);
    background: var(--pn-card);
    box-shadow: var(--pn-shadow);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
    height: 100%;
}
.pn-card-evento:hover, .pn-card-locale:hover, .pn-card-offerta:hover {
    transform: translateY(-6px);
    box-shadow: var(--pn-shadow-lg);
}
.pn-card-img {
    height: 180px;
    width: 100%;
    object-fit: cover;
    border-radius: var(--pn-radius) var(--pn-radius) 0 0;
}
.pn-card-evento .card-title,
.pn-card-locale .card-title,
.pn-card-offerta .card-title {
    font-family: var(--pn-font-display);
    font-weight: 700;
}

/* ---------------- Badge gruppo (firma colore) ---------------- */
.pn-badge-gruppo {
    background: var(--pn-sunset);
    color: #fff;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .4em .75em;
    border-radius: 999px;
}
.pn-badge-movida   { background: var(--pn-movida);   color: #fff; }
.pn-badge-cultura  { background: var(--pn-cultura);  color: #2a1f00; }
.pn-badge-sport    { background: var(--pn-sport);    color: #03241e; }
.pn-badge-business { background: var(--pn-business); color: #fff; }

/* ---------------- Bottoni ---------------- */
.btn-primary,
.btn-pn {
    background: var(--pn-sunset);
    border: none;
    font-weight: 600;
    border-radius: 999px;
    padding: .5rem 1.3rem;
    box-shadow: 0 6px 18px rgba(226, 60, 125, .35);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn-primary:hover,
.btn-pn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(226, 60, 125, .45);
}
.btn-outline-dark {
    border-radius: 999px;
    border-color: rgba(34, 31, 51, .25);
    font-weight: 600;
}
.btn-outline-dark:hover {
    background: var(--pn-ink);
    border-color: var(--pn-ink);
}

/* ---------------- Banner offerta del giorno ---------------- */
.pn-banner {
    display: block;
    position: relative;
    min-height: 240px;
    border-radius: var(--pn-radius);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: var(--pn-shadow-lg);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.pn-banner:hover { transform: translateY(-3px); }
.pn-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20,16,40,.92) 0%, rgba(36,28,61,.78) 45%, rgba(226,60,125,.30) 100%);
}
.pn-banner-body {
    position: relative;
    z-index: 1;
    padding: 2.2rem 2.4rem;
    max-width: 640px;
}
.pn-banner-label {
    display: inline-block;
    font-family: var(--pn-font-display);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--pn-sunset);
    padding: .35rem .8rem;
    border-radius: 999px;
    margin-bottom: .9rem;
}
.pn-banner-title {
    font-family: var(--pn-font-display);
    font-weight: 800;
    color: #fff;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    line-height: 1.1;
    margin: 0 0 .6rem;
}
.pn-banner-sconto {
    display: inline-block;
    font-family: var(--pn-font-display);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--pn-night);
    background: #ffd54a;
    padding: .25rem .8rem;
    border-radius: 10px;
    transform: rotate(-2deg);
    margin-bottom: 1.1rem;
}
.pn-banner-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--pn-font-display);
    font-weight: 600;
    color: var(--pn-night);
    background: #fff;
    padding: .6rem 1.3rem;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.pn-banner-cta i { transition: transform .15s ease; }
.pn-banner:hover .pn-banner-cta i { transform: translateX(4px); }

/* ---------------- Carosello offerte ---------------- */
.pn-offerte-carousel .carousel-inner {
    border-radius: var(--pn-radius);
    /* lascia respiro per l'ombra del banner, altrimenti verrebbe tagliata */
    padding: 6px;
    margin: -6px;
}
.pn-offerte-carousel .pn-banner { min-height: 260px; }
.pn-offerte-carousel .pn-banner:hover { transform: none; }
.pn-offerte-carousel .carousel-control-prev,
.pn-offerte-carousel .carousel-control-next { width: 8%; }
.pn-offerte-carousel .carousel-control-prev-icon,
.pn-offerte-carousel .carousel-control-next-icon {
    background-color: rgba(20, 16, 40, .45);
    border-radius: 50%;
    padding: 1.1rem;
    background-size: 45%;
}
.pn-offerte-carousel .carousel-indicators { margin-bottom: .6rem; }
.pn-offerte-carousel .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
}

/* ---------------- Card laterale (non si allunga in colonna flex) ---------------- */
.pn-card-side {
    border: 1px solid rgba(20, 16, 40, .05);
    border-radius: var(--pn-radius);
    background: var(--pn-card);
    box-shadow: var(--pn-shadow);
}

/* ---------------- Galleria scheda evento ---------------- */
.pn-carousel-img {
    height: 400px;
    object-fit: cover;
}
.pn-thumbs {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.pn-thumb {
    width: 90px;
    height: 64px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    opacity: .55;
    border: 2px solid transparent;
    transition: opacity .15s ease, border-color .15s ease, transform .15s ease;
}
.pn-thumb:hover { opacity: 1; transform: translateY(-2px); }
.pn-thumb.active {
    opacity: 1;
    border-color: var(--pn-primary);
}

/* ---------------- Sponsor banner ---------------- */
.pn-sponsor-banner {
    background: var(--pn-sunset-soft);
    border: 1px solid rgba(226, 60, 125, .25);
    border-left: 5px solid var(--pn-primary);
    border-radius: var(--pn-radius-sm);
}

/* ---------------- Backoffice: portale con sidebar ---------------- */
.pn-admin { display: flex; min-height: 100vh; align-items: stretch; }
.pn-admin-sidebar {
    width: 260px; flex-shrink: 0;
    background: var(--pn-night-grad);
    color: rgba(255, 255, 255, .82);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
    border-right: 1px solid rgba(255, 255, 255, .06);
    box-shadow: var(--pn-shadow);
}
.pn-admin-brand {
    padding: 1.4rem 1.4rem 1rem;
    font-family: var(--pn-font-display);
    font-weight: 800; font-size: 1.3rem; color: #fff;
    line-height: 1.15;
}
.pn-admin-brand small {
    display: block; font-size: .68rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--pn-primary); margin-top: .2rem;
}
.pn-admin-nav { display: flex; flex-direction: column; padding: .4rem 0; overflow-y: auto; }
.pn-admin-group {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .1em;
    color: rgba(255, 255, 255, .4); padding: 1rem 1.4rem .35rem;
}
.pn-admin-nav a {
    display: flex; align-items: center; gap: .7rem;
    padding: .62rem 1.4rem; color: rgba(255, 255, 255, .8);
    font-weight: 500; border-left: 3px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}
.pn-admin-nav a i { font-size: 1.05rem; }
.pn-admin-nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.pn-admin-nav a.active {
    background: rgba(255, 90, 54, .16); color: #fff;
    border-left-color: var(--pn-primary);
}
.pn-admin-bottom {
    margin-top: auto; padding: 1rem 1.2rem 1.4rem;
    display: flex; flex-direction: column; gap: .5rem;
    border-top: 1px solid rgba(255, 255, 255, .06);
}
.pn-admin-main { flex: 1; min-width: 0; padding: 2rem 2.4rem; }
@media (max-width: 900px) {
    .pn-admin { flex-direction: column; }
    .pn-admin-sidebar { width: 100%; height: auto; position: static; }
    .pn-admin-nav { flex-direction: row; flex-wrap: wrap; }
    .pn-admin-group { width: 100%; }
    .pn-admin-bottom { flex-direction: row; }
    .pn-admin-main { padding: 1.2rem; }
}

/* ---------------- Backoffice: drag & drop menu ---------------- */
.pn-drag-handle { cursor: grab; }
.pn-drag-handle:active { cursor: grabbing; }
.pn-voce-card { transition: box-shadow .15s ease; }
.pn-drag-ghost { opacity: .45; box-shadow: 0 0 0 2px var(--pn-primary); }
.pn-cat-item { cursor: grab; user-select: none; }
.pn-cat-item:active { cursor: grabbing; }
.pn-cat-list {
    min-height: 44px;
    border: 1px dashed transparent;
    border-radius: var(--pn-radius-sm);
    padding: .35rem;
    transition: border-color .15s ease, background .15s ease;
}
.pn-cat-list.sortable-drag-over,
.pn-cat-list:has(.sortable-ghost) {
    border-color: var(--pn-primary);
    background: rgba(255, 90, 54, .05);
}

/* ---------------- Footer ---------------- */
.pn-footer {
    background: var(--pn-night-grad);
    color: rgba(255, 255, 255, .75);
    border-top: 1px solid rgba(255, 255, 255, .06);
}
.pn-footer p { font-family: var(--pn-font-display); font-weight: 500; }