body {
    background: #f7f7fa;
}

.folders-list {
    margin: 0 auto 32px auto;
    max-width: 1100px;
}

.folders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.folder-card {
    background: #fff;
    border-radius: 1.2rem;
    border: 1.5px solid #ddd;
    padding: 24px 14px 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 1px 5px #0002;
    transition: box-shadow .16s, border-color .16s, transform .13s;
    cursor: pointer;
    min-height: 170px;
}
.folder-card:active, .folder-card:hover {
    border-color: #0d6efd;
    box-shadow: 0 2px 15px #0d6efd33;
    transform: scale(1.018);
}
.folder-card-full {
    grid-column: 1/-1 !important;
    width: 100%;
}

.new-folder-card {
    background: linear-gradient(135deg, #e9f1ff 70%, #d4e3fb 100%);
    border: 2px dashed #2188ff;
    color: #2188ff;
    font-weight: 500;
}
.new-folder-card .bi {
    color: #2188ff;
}
.new-folder-ui input[type=text] {
    font-weight: 500;
}
.new-folder-ui .btn-seleziona-foto,
.new-folder-ui .btn-carica-img {
    margin-bottom: 10px;
}
.new-folder-ui .tiles-preview {
    margin-bottom: 10px;
}

/* TILES GRID (sia nelle card che nelle modali) */
.tiles-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(66px, 1fr));
    gap: 12px;
}
.tile-img {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px #0002;
    border: 1.3px solid #e2e6ee;
    padding: 2px;
    background: #fcfcfe;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
}
.tile-img img {
    width: 100%;
    height: 65px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

/* MODALE stile */
#modalDettaglioGruppo .modal-title {
    font-weight: 600;
}
#modalDettaglioGruppo .tiles-preview {
    margin-bottom: 10px;
}
#aggiungiFotoArea {
    margin-top: 12px;
}
#dettaglioPreviewTiles .tile-img img {
    height: 52px;
}

.group-date {
    font-size: .95em;
    color: #888;
    font-style: italic;
    margin-bottom: 1px;
    display: inline-block;
}

/* Piccoli fix */
input[type="file"] {
    font-size: .99em;
}

@media (max-width: 900px) {
    .folders-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 15px;
    }
    .folder-card {
        min-height: 140px;
        padding: 16px 7px 13px 7px;
    }
}
@media (max-width: 575px) {
    .folders-list {
        max-width: 98vw;
    }
    .folders-grid {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 9px;
    }
    .folder-card {
        padding: 10px 5px 9px 5px;
        min-height: 110px;
    }
    .tile-img img {
        height: 36px;
    }
    #dettaglioPreviewTiles .tile-img img {
        height: 30px;
    }
}
.tiles-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 12px;
}

.tile-img {
    aspect-ratio: 1/1;
    /* ↑ fa la tile sempre quadrata in tutti i browser moderni */
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px #0002;
    border: 1.3px solid #e2e6ee;
    padding: 2px;
    background: #fcfcfe;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    aspect-ratio: 1/1;
    /* ↑ anche l'immagine resta quadrata, taglia se serve */
    position: absolute;
    inset: 0;
}
/* Tutte le tiles, ovunque, anche in preview: sempre quadrate */
.tiles-preview .tile-img,
#previewTiles .tile-img,
#dettaglioPreviewTiles .tile-img {
    aspect-ratio: 1 / 1 !important;
    position: relative;
}
.tiles-preview .tile-img img,
#previewTiles .tile-img img,
#dettaglioPreviewTiles .tile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1 !important;
    position: absolute;
    inset: 0;
}
#dettaglioBtnSelect { display: none; }
#btnApriModaleNuovaCartella {
    background: linear-gradient(90deg, #2188ff 70%, #1976d2 100%);
    border: none;
    box-shadow: 0 2px 10px #2188ff25, 0 1px 5px #0002;
    transition: box-shadow .13s, transform .13s;
}
#btnApriModaleNuovaCartella:active,
#btnApriModaleNuovaCartella:focus,
#btnApriModaleNuovaCartella:hover {
    background: linear-gradient(90deg, #1976d2 85%, #2188ff 100%);
    box-shadow: 0 4px 18px #2188ff33, 0 2px 12px #0d6efd22;
    transform: scale(1.015);
}
.font-wedding {
    font-family: 'Great Vibes', 'Parisienne', 'Marck Script', cursive;
    font-size: 2.4em;
    font-weight: normal;
    letter-spacing: 0.5px;
    line-height: 1.12;
}

#lightbox-gallery {
  position: fixed; inset:0; background:rgba(10,12,18,0.97);
  z-index: 9999; display: none; align-items: center; justify-content: center;
  animation: lb-fadein .17s;
}
@keyframes lb-fadein { from{opacity:0} to{opacity:1} }
#lightbox-gallery .lb-content {
  position:relative; display:flex; flex-direction:column; align-items:center;
  max-width:98vw; max-height:98vh;
}
#lightbox-gallery .lb-img {
  max-width:97vw; max-height:72vh; border-radius:14px; box-shadow:0 4px 26px #0009;
  background:#fff; margin:20px 0 18px 0; transition:.13s;
}
#lightbox-gallery .lb-close, #lightbox-gallery .lb-prev, #lightbox-gallery .lb-next {
  position:absolute; background:#fff9; border:none; border-radius:50%;
  font-size:2.2rem; width:44px; height:44px; top:14px; cursor:pointer;
  transition:.13s; z-index:3; color:#333; box-shadow:0 1px 8px #0003;
}
#lightbox-gallery .lb-close { right:14px; top:14px; font-size:2.1rem;}
#lightbox-gallery .lb-prev { left:8px; top:50%; transform:translateY(-50%);}
#lightbox-gallery .lb-next { right:8px; top:50%; transform:translateY(-50%);}
#lightbox-gallery .lb-count {
  color:#eee; font-size:1.15rem; margin-bottom:12px; text-shadow:0 2px 4px #000a;
}
@media (max-width: 600px) {
  #lightbox-gallery .lb-img { max-width:99vw; max-height:55vh;}
  #lightbox-gallery .lb-content { max-width:100vw; }
  #lightbox-gallery .lb-close, #lightbox-gallery .lb-prev, #lightbox-gallery .lb-next { width:40px; height:40px;}
}
#lightbox-gallery {
  position: fixed; inset:0; background:rgba(10,12,18,0.97);
  z-index: 9999; display: none; align-items: center; justify-content: center;
  animation: lb-fadein .17s;
}
@keyframes lb-fadein { from{opacity:0} to{opacity:1} }
#lightbox-gallery .lb-content {
  position:relative; display:flex; flex-direction:column; align-items:center;
  max-width:98vw; max-height:98vh;
}
#lightbox-gallery .lb-img {
  max-width:97vw; max-height:72vh; border-radius:14px; box-shadow:0 4px 26px #0009;
  background:#fff; margin:20px 0 18px 0; transition:.13s;
  object-fit: contain;
}
#lightbox-gallery .lb-close, #lightbox-gallery .lb-prev, #lightbox-gallery .lb-next {
  position:absolute; background:rgba(255,255,255,0.92); border:none; border-radius:50%;
  font-size:2.2rem; width:48px; height:48px; top:14px; cursor:pointer;
  transition:.13s; z-index:3; color:#222; box-shadow:0 1px 8px #0003;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.92;
}
#lightbox-gallery .lb-close i,
#lightbox-gallery .lb-prev i,
#lightbox-gallery .lb-next i {
  font-size: 2.0rem;
  pointer-events: none;
  color: #222;
}
#lightbox-gallery .lb-close { right:14px; top:14px; }
#lightbox-gallery .lb-prev { left:10px; top:50%; transform:translateY(-50%);}
#lightbox-gallery .lb-next { right:10px; top:50%; transform:translateY(-50%);}
#lightbox-gallery .lb-count {
  color:#eee; font-size:1.15rem; margin-bottom:12px; text-shadow:0 2px 4px #000a;
  font-variant-numeric: tabular-nums;
}
#lightbox-gallery .lb-close:hover,
#lightbox-gallery .lb-prev:hover,
#lightbox-gallery .lb-next:hover {
  background: #0d6efd;
  color: #fff !important;
  opacity: 1;
}
#lightbox-gallery .lb-close:hover i,
#lightbox-gallery .lb-prev:hover i,
#lightbox-gallery .lb-next:hover i {
  color: #fff;
  filter: drop-shadow(0 0 6px #1976d2cc);
}

@media (max-width: 600px) {
  #lightbox-gallery .lb-img { max-width:99vw; max-height:58vh;}
  #lightbox-gallery .lb-content { max-width:100vw; }
  #lightbox-gallery .lb-close, #lightbox-gallery .lb-prev, #lightbox-gallery .lb-next { width:38px; height:38px; font-size:1.55rem;}
  #lightbox-gallery .lb-close i, #lightbox-gallery .lb-prev i, #lightbox-gallery .lb-next i { font-size:1.15rem; }
}

@font-face {
  font-family: 'Marauders';
  src: url('marauders.ttf') format('truetype');
}

.font-wedding {
  font-family: 'Marauders', cursive;
}