/* === Disabilita lo scroll orizzontale globale === */
html, body {overflow-x: hidden !important; }

/* Evita che gli elementi interni sforino orizzontalmente */
.fg-container,
.fg-wrap,
.fg-panel,
.fg-grid {
  max-width: 100%;
  overflow-x: clip; /* più moderno di hidden */
}

/* Per sicurezza: preveniamo "colonne" che generano spazi laterali */
.fg-grid.fg-masonry {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* UPLOAD */
/* sotto agli overlay di modal (1000+) e lightbox (1200+), cosi' quando si
   apre un popup il tasto "+" resta coperto invece di restarci sopra */
.upload-btn {position: fixed; right: 30px; bottom: 30px; z-index: 40; border: 0; }
/* Solo il bottone "+" vero e proprio, non le voci del menu che apre (vedi .fg-plus-item):
   altrimenti "button" selezionerebbe anche i pulsanti dentro #fg-plus-menu. */
#fg-plus-btn {height: 50px; width: 50px; text-align: center; background: var(--fg-accent); border: none; outline: none; box-shadow: none;}

/* HEADER */
.fg-header-title {color: white; text-align: center; margin: 10px 0 0 0;}
.fg-header-subtitle {text-align: center; margin: 0 0 30px 0; color: #666666;}
.fg-header {text-align: center; margin-top: 15px;}
.fg-header img {width: 150px; height: auto;}
/* Login box */

.fg-login-box {max-width: 100%; margin: 40px auto; padding: 16px; color: #999999; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06);}
.login-username, .login-password {text-align: center;}
.fg-login-box p {margin-top: 0; margin-bottom: 0;}
.fg-login-box label, .fg-login-box input {display: block; width: 100%; margin-bottom: 20px;} 
.fg-login-box input {height: 50px; color: black; border: 1px solid #CCC; border-radius: 10px; padding: 5px; background-color: white; font-size: 1.5rem; }
.fg-login-box .login-remember {text-align: left;}
.fg-login-box .login-remember {font-size: 2rem;}
.fg-login-box .login-remember input {display: inline-block; width: 25px; margin-bottom: 0; height: 1.8rem;}
.login-submit input {background-color: #3cc7b2; color: white; }

/* Layout */
.fg-wrap { max-width: 1100px; margin: 0 auto; }
.fg-panel { background:#000000; border:0; border-radius:12px; padding:5px; margin-bottom:16px; }
.fg-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.fg-help { color:#6b7280; font-size:.92rem; }
.fg-panel h3 {color: #999999; margin: 0 0 15px 0;}
.fg-container {background: var(--fg-bg, transparent); padding: 3px; border-radius: 0;}

/* Bottoni */
.fg-btn {padding:8px 12px; border-radius:8px; border:0; background: var(--fg-accent); color:#fff; cursor:pointer; }
.fg-btn.secondary { background:#fff; color:#111; }
#fg-upload {display: block; width: 100%; height: 50px;  font-size: 1.2rem;}

.tag-btn {position: absolute; top: 20px; right: 20px;}
.tag-btn button {border: 0; }
.note-btn {position: absolute; top: 60px; right: 20px;}
.note-btn button {border: 0; }
.other-btn {position: absolute; top: 100px; right: 20px;}
.other-btn button {border: 0; }
/* Solo admin: scansiona tutta la gallery alla ricerca di foto probabilmente duplicate */
.clean-btn {position: absolute; top: 140px; right: 20px;}
.clean-btn button {border: 0; }
#fg-admin-dupcheck.fg-scanning .dashicons { animation: fg-spin 1s linear infinite; }
@keyframes fg-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Avviso "possibili foto duplicate" sotto la barra di avanzamento upload */
.fg-dup-banner {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #7c2d12;
  font-size: .9rem;
}
.fg-dup-banner p { margin: 0 0 8px 0; }

/* Modal verifica duplicati: confronto affiancato + due azioni per ogni coppia */
.fg-dup-list { display: flex; flex-direction: column; gap: 16px; }
.fg-dup-row { border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; }
.fg-dup-pair { display: flex; gap: 12px; margin-bottom: 10px; }
.fg-dup-photo { flex: 1; min-width: 0; text-align: center; }
.fg-dup-photo img { width: 100%; height: 140px; object-fit: cover; border-radius: 8px; display: block; }
.fg-dup-photo span { display: block; margin-top: 6px; font-size: 12px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-dup-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fg-dup-actions .fg-btn { flex: 1; min-width: 140px; }
.fg-dup-row.fg-dup-resolved { display: none; }
.fg-dup-done {
  text-align: center;
  padding: 24px 12px;
  color: #15803d;
  font-weight: 600;
}
.fg-dup-done p { margin: 0; }

/* Menu del bottone "+": scelta tra caricare una foto o scrivere una nota */
.fg-plus-menu {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  min-width: 220px;
  overflow: hidden;
  z-index: 20;
}
.fg-plus-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  background: #fff;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  color: #111;
  font-size: .95rem;
  white-space: nowrap;
}
.fg-plus-item:last-child {border-bottom: 0;}
.fg-plus-item:hover {background: #f9fafb;}
.fg-plus-item .dashicons {flex-shrink: 0; color: #111;}

/* Vista mappa: sostituisce .fg-wrap ma resta dentro .fg-container, quindi header
   e sfondo globali della pagina restano invariati. */
.fg-map-view {margin-top: 12px;}
.fg-map-topbar {display:flex; align-items:center; gap:10px; max-width:1100px; margin:0 auto 10px;}
.fg-map-title {color:#999999; margin:0;}
.fg-map {width:100%; max-width:1100px; height:70vh; margin:0 auto; border-radius:12px; overflow:hidden;}

/* Input */
#fg-file, #fg-newtag {padding:8px; border:1px solid #d1d5db; border-radius:8px;}
#fg-file {border:1px solid white;}
/* Hashtag */
.fg-hlist { display:flex; gap:6px; flex-wrap:wrap; }
#fg-tags {margin-bottom: 15px;}
#fg-managetags {margin-top: -15px;}
.fg-tag {background: transparent; padding:4px 9px; border:1px solid #d1d5db; color: #d1d5db; border-radius:999px; cursor:pointer; user-select:none; font-size:.82rem; }
.fg-btn-icon {background: transparent; padding:6px 10px; border:1px solid #d1d5db; color: #d1d5db; border-radius:999px; cursor:pointer; user-select:none; }
.fg-btn-icon {color:#fff;}
.fg-tag.active {background: var(--fg-accent); color:#fff; border-color: var(--fg-accent); }
#fg-addtag {background: var(--fg-accent); border: 0;}

.fg-manage-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.fg-manage-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}
.fg-tag-label { font-weight: 500; color: #333; }
.fg-remove-tag {
  background: transparent;
  border: none;
  color: #b91c1c;
  cursor: pointer;
  font-size: 18px;
}
.fg-remove-tag:hover {color: #7f1d1d;}

/* Matita bottom-right, sopra il contatore commenti */
.fg-pencil {
  position: absolute;
  right: 9px;
  bottom: 78px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
}
.fg-pencil:hover {color: #fff;}

/* BULK BAR */
.fg-bulk-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  padding: 12px 16px;
  background: #111827;
  color: #fff;
  flex-wrap: wrap;
}
.fg-bulk-bar[hidden] {
  display: none;
}

/* Menu contestuale */
.fg-menu {
  position: absolute;
  right: 8px;
  bottom: 48px;
  background: #111;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  min-width: 25px;
  padding: 6px;
  display: none;
  z-index: 999; border: 0; 
}
.fg-menu:focus, .fg-pencil:focus, .fg-menu-item {outline-width: 0;}
.fg-menu.open {display: block; }

.fg-menu-item {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  color: white;
}
.fg-menu-item:hover {
  background: black;
}
.fg-menu-item.danger {color: #b91c1c;}

/* NOTE: vedi override sotto, dopo .fg-card (deve venire dopo per vincere la
   parita' di specificita' sull'aspect-ratio) */

/* MODAL */

/* Overlay */
.fg-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.9);
  z-index: 1000;
}

/* Il modal di modifica commento si apre da dentro il lightbox (foto + commenti),
   quindi deve stare sopra di esso (il lightbox usa z-index 1200/1201), non sotto
   come gli altri modal generici. */
#fg-comment-edit-overlay { z-index: 1300; }
#fg-comment-edit-modal { z-index: 1301; }

/* Modal — header e footer restano sempre visibili, scrolla solo il body:
   utile quando il contenuto cresce (es. lista file in upload) e non deve
   spingere il tasto di chiusura fuori dallo schermo. */
.fg-modal {
  position: fixed;
  z-index: 1001;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: min(520px, 92vw);
  max-height: min(85vh, 720px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  overflow: hidden;
}
/* l'attributo hidden da solo non basta piu': impostando display:flex qui sopra
   sovrascriviamo la regola predefinita del browser [hidden]{display:none},
   quindi va ridichiarata esplicitamente (stesso trattamento gia' usato per
   .fg-lightbox e .fg-bulk-bar, che hanno lo stesso problema). */
.fg-modal[hidden] { display: none !important; }

.fg-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid #e5e7eb;
  flex: 0 0 auto;
}
.fg-modal-head h3 { margin: 0; font-size: 1.05rem; }
.fg-modal-close { background: transparent; border: 0; font-size: 22px; line-height: 1; cursor: pointer; }

.fg-modal-body { padding: 14px; color: #999999; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.fg-modal-actions {padding: 12px 14px; border-top: 1px solid #e5e7eb; flex: 0 0 auto; }
#fg-confirm-ok, #fg-confirm-cancel {width: 100%; display: block; margin-bottom: 15px;}

.fg-lightbox-likes {color: white; text-align: center; font-size: .9rem; margin-top: 2px;}
.fg-like-name {font-weight: bold; color: var(--fg-accent);}

/* Checkbox list */
.fg-checkboxlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px 12px;
}
.fg-check {align-items: center; }
.fg-check input[type="checkbox"] { transform: translateY(1px); }

#fg-tags-list .fg-check {padding:8px 12px; border-radius:999px; border:1px solid #111; background:#111; color:#fff; cursor:pointer;}

/* ====== GRIGLIA FOTO ======
   Griglia CSS vera (non column-count): le foto sono ordinate riga per
   riga, identiche su tutti gli schermi. Le card sono quadrate e la foto
   viene ritagliata (object-fit: cover) per riempire la cella. */
.fg-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.fg-card {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  position: relative;
  background: #fff;
  border: none;
  overflow: hidden;
}

.fg-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* le note non sono foto: niente riquadro quadrato forzato, l'altezza segue solo
   il contenuto. Deve stare DOPO .fg-card nel foglio di stile: stessa specificita'
   (una classe), quindi a parita' di specificita' vince la regola che viene dopo
   nel file — se .fg-note-card fosse prima, aspect-ratio:1/1 di .fg-card la
   sovrascriverebbe comunque. */
.fg-note-card {background: #ff0054 !important; color: white; padding: 8px 20px 8px 8px; border-radius: 12px; border: 1px solid #d31654 !important; position: relative; max-width: calc(100% - 25px); aspect-ratio: auto; height: auto; overflow: visible;}
.fg-note-card p {margin: 0}
.fg-note-card button {background: transparent; color: white; border: 0; position: absolute; bottom: 5px; right: 5px;}

.fg-day > h3 {font-size: 1rem; margin: 30px 0 10px 0; font-family: "Radio Canada", sans-serif; font-size: 12px;}

/* ===== Lightbox ===== */
.fg-lightbox-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.9);
  z-index: 1200;
}
.fg-lightbox {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 1201;
  padding: 24px;
}
.fg-lightbox[hidden], .fg-lightbox-overlay[hidden] { display: none !important; }

.fg-lightbox-inner {
  position: relative;
  max-width: 90vw; max-height: 74vh;
  display: flex; align-items: center; justify-content: center;
  background: #000; border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.fg-lightbox-inner img {
  display:block; max-width: 90vw; max-height: 74vh; width: auto; height: auto;
}

/* Riga sotto la foto: freccetta - didascalia/like - freccetta. Le freccette
   non stanno piu' sopra l'immagine (dove si sovrapponevano al cuore ed erano
   scomode da premere su mobile), ma ai lati di questa riga. */
.fg-lightbox-footer {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 90vw;
  margin-top: 10px;
}
.fg-lightbox-info { flex: 1 1 auto; min-width: 0; text-align: center; }

.fg-lightbox-prev,
.fg-lightbox-next {flex: 0 0 auto; background: transparent; border-radius: 999px; width: 44px; height: 44px; display: flex; align-items:center; justify-content:center; cursor: pointer; font-size: 22px; line-height: 1; color: white; border: none;}

/* X ancorata al riquadro della foto (non allo schermo): resta raggiungibile
   anche dopo lo zoom nativo del telefono, che sposta in modo imprevedibile
   gli elementi ancorati al viewport (position: fixed). */
.fg-lightbox-close {
  position: absolute; top: 8px; right: 8px; z-index: 5;
  background: rgba(17,24,39,.55); border-radius: 999px;
  width: 32px; height: 32px; display: flex; align-items:center; justify-content:center;
  cursor: pointer; font-size: 18px; line-height: 1; color: white; border: none;
}

/* Cuore preferiti nel lightbox — stessa logica della X: ancorato al
   riquadro della foto (non al viewport), in basso a destra accanto alla riga
   commenti, stessa icona usata nella thumbnail della griglia. z-index sopra
   al box commenti cosi' resta sempre cliccabile anche quando la sfumatura
   e la lista commenti crescono. */
.fg-lightbox-heart, .fg-lightbox-heart:focus {
  position: absolute; right: 10px; bottom: 12px; z-index: 8;
  background: transparent; border-radius: 999px;
  width: 40px; height: 40px; display: flex; align-items:center; justify-content:center;
  cursor: pointer; font-size: 24px; line-height: 1; color: white; border: none;
  outline-width: 0;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.7));
}

/* Commenti sovrapposti in basso sulla foto: sfumatura da nero (in basso) a trasparente
   (verso l'alto), cosi' restano leggibili anche su foto chiare. Toccando la foto si
   nascondono/mostrano (gestito in JS con la classe .fg-hidden). z-index piu' basso del
   cuore (8) cosi' non lo copre mai anche quando la lista commenti cresce. */
.fg-comments-box {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-height: 55%;
  padding: 28px 14px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.6) 45%, rgba(0,0,0,0) 100%);
  z-index: 6;
  pointer-events: none;
}
.fg-comments-box.fg-hidden { display: none; }
.fg-lightbox-heart.fg-hidden,
.fg-lightbox-close.fg-hidden { display: none; }
.fg-comments-box * { pointer-events: auto; }

.fg-comments-list {
  overflow-y: auto;
  max-height: 140px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fg-comment-item { color: #fff; font-size: 13px; line-height: 1.35; word-break: break-word; display:flex; align-items:flex-start; gap:6px; }
.fg-comment-item .fg-comment-author { font-weight: bold; margin-right: 4px; }
.fg-comment-item .fg-comment-text { flex: 1; min-width: 0; }
.fg-comment-mine { cursor: pointer; }
.fg-comment-actions { display: none; align-items: center; gap: 2px; flex-shrink: 0; }
.fg-comment-mine.fg-comment-actions-open .fg-comment-actions { display: inline-flex; }
.fg-comment-edit, .fg-comment-delete {
  background: transparent; border: 0; color: rgba(255,255,255,.85); cursor: pointer;
  width: 22px; height: 22px; display:flex; align-items:center; justify-content:center; padding: 0;
}
.fg-comment-edit:hover, .fg-comment-delete:hover { color: #fff; }
.fg-comment-edit .dashicons, .fg-comment-delete .dashicons { font-size: 15px; width: 15px; height: 15px; }

.fg-comments-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #fff;
  border-radius: 999px;
  padding: 6px 6px 6px 14px;
  background: rgba(255,255,255,.1);
  /* accorciata per lasciare spazio al cuore, spostato in basso a destra della foto */
  margin-right: 46px;
}
#fg-comment-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
}
#fg-comment-input::placeholder { color: rgba(255,255,255,.75); }

.fg-comment-send {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
  padding: 0;
}
.fg-comments-input-row.has-text .fg-comment-send {
  display: flex;
}

.fg-lightbox-caption {
  text-align: center; color: #fff; font-size: .95rem;
}

/* Spinner di caricamento */
.fg-spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 3px solid #ccc;
  border-top-color: #111;
  border-radius: 50%;
  animation: fg-spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}
@keyframes fg-spin {
  to { transform: rotate(360deg); }
}

/* per centrare lo spinner nel box di stato */
#fg-upload-status.loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #555;
}

/* leggera morbidezza mentre è caricata la low-res */
.fg-img-soft {
  filter: blur(2px);
  transform: scale(1.01);
  transition: filter 200ms ease, transform 200ms ease;
}

/* Spinner già definito in alto (.fg-spinner) */

/* Sentinel/loader in fondo */
#fg-more.fg-more {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
}
#fg-more .fg-spinner {
  width: 24px; height: 24px;
  border-width: 3px;
}


/* Cuore preferiti*/
.fg-heart, .fg-heart:focus {
  position:absolute;
  right:9px; bottom:2px;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  border-radius:50%;
	border: none;
  background: transparent;
  cursor:pointer;
  z-index:6;
	color: white;
	outline-width: 0;
    outline-style: solid;
}
.fg-like-count {position:absolute; color: white; right:4px; bottom: 7px; font-size: 14px;}

/* Contatore commenti sulla card, posizionato subito sopra al cuore */
.fg-comment-badge {
  position: absolute;
  right: 9px; bottom: 40px;
  display: flex; align-items: center; gap: 3px;
  background: transparent;
  border: none;
  color: white;
  font-size: 13px;
  cursor: pointer;
  z-index: 6;
  padding: 0;
}
.fg-comment-badge .dashicons { font-size: 18px; width: 18px; height: 18px; }


/* Pill cuore nel gruppo tag */
.fg-favpill::before {content:'♥'; margin-right:6px; color: white;}
.fg-favpill.active {background: #111; color:#fff; }

/* pulsante che avvolge il thumbnail */
.fg-open {display:block; padding:0; margin:0; border:0; background:transparent; width:100%; cursor: zoom-in; outline: none;}
/* responsive */
@media (min-width: 640px) {
  .fg-grid.fg-masonry { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .fg-grid.fg-masonry { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1440px) {
  .fg-grid.fg-masonry { grid-template-columns: repeat(6, 1fr); }
}