body {
    background: #111;
    color: white;
    font-family: Arial, sans-serif;
    text-align: center;
}

h1 {
    font-size: 45px;
}

.albums {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.album {
    width: 300px;
    margin: 25px;
}

.album img {

    width:300px;
    aspect-ratio:1 / 1;

    object-fit:cover;

    border-radius:10px;

}



.main-photo {
    max-width: 90%;
    max-height: 80vh;
    object-fit: contain;
}

a {
    color: white;
    text-decoration: none;
}

@media (max-width: 800px) {
    .gallery {
        grid-template-columns: 1fr;
    }
}

button {

background:#222;
color:white;

border:none;

padding:10px 18px;

border-radius:8px;

font-size:15px;

cursor:pointer;

transition:0.2s;

}


button:hover {

background:#555;

transform:translateY(-2px);

}



input {

padding:10px;

border-radius:8px;

border:1px solid #ccc;

font-size:16px;

}



.album button {

margin-top:10px;

}



.editor-control {

display:flex;

gap:10px;

margin-top:15px;

}



hr {

border:none;

border-top:1px solid #ddd;

margin:30px 0;

}

/* EDITOR */

.editor-bar {

display:block;

}

.editor-button {

background:#222;
color:white;

border:none;

padding:12px 20px;

border-radius:10px;

cursor:pointer;

font-size:15px;

text-decoration:none;

display:inline-block;

}


.editor-button:hover {

background:#555;

}


.album-controls {

margin-top:15px;

display:flex;

gap:10px;

flex-wrap:wrap;

}


.photo-card {

text-align:center;

margin-bottom:30px;

}
.editor-photo img {

width:100%;
height:auto;

display:block;

border-radius:10px;

}
.editor-photo {

width:300px;
margin:15px;

}

#photos {
    display:flex !important;
    flex-wrap:wrap !important;
    gap:30px !important;
}

.editor-photo {
    width:300px !important;
    margin:0 !important;
}

.editor-photo img {
    width:100% !important;
    height:auto !important;
    display:block !important;
}

.album {

position:relative;
cursor:pointer;

}


.album-link {

display:block;
text-decoration:none;
color:inherit;

}

.photo-actions {

display:flex;
justify-content:center;
gap:10px;
margin-top:8px;

}


.photo-actions button {

font-size:18px;
padding:8px 12px;

}

.icon-button {

display:flex;
align-items:center;
gap:8px;

}


.icon-button img {

width:24px;
height:24px;

}


.icon-control {

background:none;
border:none;

padding:5px;

cursor:pointer;

}


.icon-control img {

width:22px;
height:22px;

}

.icon-control img {

width:20px;
height:20px;

object-fit:contain;

}
.photo-actions button {

font-size:14px;

padding:6px 10px;

border-radius:6px;

}

.photo-actions {

display:flex;
justify-content:center;
gap:6px;
margin-top:8px;

}
.photo-actions button {

padding:4px 8px !important;

font-size:12px !important;

border-radius:5px;

}
.icon-control {

padding:4px !important;

width:28px;

height:28px;

display:flex;

align-items:center;

justify-content:center;

}
.icon-control img {

width:14px !important;

height:14px !important;

display:block;

}

/* ===========================
   EDITOR V2
=========================== */

.editor-topbar{

display:flex;
justify-content:space-between;
align-items:center;

margin-bottom:25px;

}


.editor-back{

display:inline-flex;

align-items:center;

gap:10px;

text-decoration:none;

color:#b4b4b4;

padding:8px 14px;

border-radius:10px;

width:auto;

transition:
transform .15s ease,
color .15s ease;

}


.editor-back:hover{

background:transparent;

color:#b4b4b4;

transform:translateY(-2px);

}

.editor-back img{

width:20px;

height:20px;

}


.editor-actions{

display:flex;
align-items:center;
gap:12px;

}


.icon-button{

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;

}


.icon-button img{

width:32px;
height:32px;

}





.editor-photo{

margin:0 !important;

width:auto !important;

}


.photo-wrapper{

position:relative;

overflow:hidden;

border-radius:14px;

background:white;

box-shadow:
0 2px 10px rgba(0,0,0,.12);

transition:.2s;

}


.photo-wrapper:hover{

transform:translateY(-2px);

box-shadow:
0 8px 20px rgba(0,0,0,.18);

}


.photo-wrapper img{

display:block;

width:100%;

height:160px;
    
object-fit:cover;

}


.photo-toolbar{

position:absolute;

top:10px;

right:10px;

display:flex;

gap:8px;

}


.icon-control,
.photo-menu-button,
.menu-button{

background:white;

border:none;

border-radius:50%;

width:36px;

height:36px;

padding:0;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

box-shadow:
0 2px 8px rgba(0,0,0,.2);

}


.icon-control img{

width:16px !important;

height:16px !important;

display:block;

}


.popup-menu{

display:none;

position:absolute;

background:white;

border-radius:12px;

box-shadow:
0 10px 30px rgba(0,0,0,.25);

padding:8px;

min-width:200px;

z-index:1000;

}


.popup-menu button{

background:none;

color:#222;

border:none;

width:100%;

text-align:left;

padding:12px;

border-radius:8px;

}


.popup-menu button:hover{

background:#efefef;

}
/* Editor photo grid override */




#photos .editor-photo {

width:auto !important;

margin:0 !important;

}


#photos .photo-wrapper img {

width:100% !important;

height:140px !important;

object-fit:cover !important;

}
.photo-toolbar {

display:flex;

}
.photo-toolbar {

position:absolute;

top:10px;

right:10px;

display:flex;

gap:8px;

z-index:10;

}
/* Editor natural photo thumbnails */




#photos .photo-wrapper img {

width:100% !important;

height:auto !important;

object-fit:contain !important;

display:block !important;

}

.lightbox{

display:none;

position:fixed;

inset:0;

background:rgba(0,0,0,.9);

z-index:2000;

align-items:center;

justify-content:center;

}


.lightbox img {

    max-width: 92%;

    max-height: 72vh;

    object-fit: contain;

}


.lightbox-close{

position:absolute;

top:20px;

right:30px;

font-size:35px;

background:none;

color:white;

border:none;

}


.lightbox-actions{

position:absolute;

top:20px;

left:30px;

display:flex;

gap:10px;

}


.lightbox-actions .icon-control,
.lightbox-actions .menu-button{

background:white;

}

/* Match viewer lightbox style */

#lightbox .lightbox-close {

position:absolute;

top:20px;

left:25px;

right:auto;

font-size:35px;

color:white;

background:none;

border:none;

padding:0;

cursor:pointer;

z-index:2100;

}


#lightbox .lightbox-actions {

position:absolute;

top:20px;

right:25px;

left:auto;

display:flex;

gap:10px;

z-index:2100;

}


#lightbox .lightbox-prev,
#lightbox .lightbox-next {

position:absolute;

top:50%;

transform:translateY(-50%);

background:none;

border:none;

color:white;

font-size:60px;

padding:10px;

cursor:pointer;

z-index:2100;

}


#lightbox .lightbox-prev {

left:25px;

}


#lightbox .lightbox-next {

right:25px;

}


#lightbox .icon-control,
#lightbox .menu-button {

background:transparent;

color:white;

box-shadow:none;

}/* Photo menu above lightbox */

#photoMenu {

z-index:3000 !important;

}
.album-picker-overlay {

display:none;

position:fixed;

inset:0;

background:rgba(0,0,0,.85);

z-index:4000;

align-items:center;

justify-content:center;

}


.album-picker-box {

background:#222;

color:white;

width:90%;

max-width:800px;

max-height:80vh;

overflow:auto;

border-radius:18px;

padding:25px;

}


.album-picker-box h2 {

margin-top:0;

}


#albumList {

display:grid;

grid-template-columns:
repeat(auto-fill,minmax(180px,1fr));

gap:20px;

}


#albumList button {

background:#333;

color:white;

border-radius:12px;

padding:15px;

font-size:16px;

cursor:pointer;

}


#albumList button:hover {

background:#555;

}

#snackbar {

visibility:hidden;

min-width:250px;

background:#333;

color:white;

text-align:center;

border-radius:12px;

padding:14px;

position:fixed;

bottom:30px;

left:50%;

transform:translateX(-50%);

z-index:5000;

font-size:16px;

}


#snackbar.show {

visibility:visible;

animation:
fadein .3s,
fadeout .3s 2.5s;

}


@keyframes fadein {

from {
bottom:0;
opacity:0;
}

to {
bottom:30px;
opacity:1;
}

}


@keyframes fadeout {

from {
opacity:1;
}

to {
opacity:0;
}

}
.upload-drop-zone {

border:2px dashed #555;

border-radius:16px;

padding:20px;

display:flex;

align-items:center;

gap:15px;

color:#aaa;

transition:.2s;

}


.upload-drop-zone.dragover {

background:#222;

border-color:white;

color:white;

}


.upload-drop-zone p {

margin:0;

font-size:14px;

}

.album-title-row{

display:flex;

align-items:center;

justify-content:space-between;

margin-top:8px;

}


.album-title-row h3{

margin:0;

}


.album-menu-button{

width:32px;

height:32px;

font-size:20px;

}

.album-card{
position:relative;
}

.album-menu-button{

position:absolute;

top:10px;
right:10px;

background:white;
color:#222;

border:none;

width:36px;
height:36px;

border-radius:50%;

font-size:24px;

cursor:pointer;

z-index:5;

box-shadow:
0 2px 8px rgba(0,0,0,.3);

display:flex;
align-items:center;
justify-content:center;

}
/* Remove white backgrounds from all three-dot buttons */

.menu-button,
.album-menu-button,
.photo-menu-button {

    background: transparent !important;
    color: white;

    box-shadow: none !important;

    border: none;

}


/* Keep the three dots clean and visible */

.menu-button,
.album-menu-button,
.photo-menu-button {

    font-size: 28px;

    width:36px;
    height:36px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

}


/* Album cover dots */

.album-menu-button {

    color:white;

}


/* Lightbox three dots */

.lightbox-actions .menu-button {

    background:transparent !important;

    color:white;

}


/* Photo thumbnail dots */

.photo-menu-button {

    background:transparent !important;

    color:white;

}

.confirm-overlay{

display:none;

position:fixed;

inset:0;

background:rgba(0,0,0,.65);

z-index:5000;

align-items:center;

justify-content:center;

}


.confirm-dialog{

background:white;

color:#222;

padding:30px;

border-radius:16px;

width:320px;

text-align:center;

box-shadow:0 10px 40px rgba(0,0,0,.4);

}


.confirm-buttons{

display:flex;

justify-content:center;

gap:15px;

margin-top:20px;

}


.confirm-buttons button{

background:#222;

color:white;

padding:10px 20px;

border-radius:8px;

}
.danger-button {

background:#d93025 !important;
color:white !important;

}

.danger-button:hover {

background:#b3261e !important;

}

body.dragging {
    opacity:0.8;
}

#dropOverlay {

position:fixed;
inset:0;

background:rgba(255,255,255,0.18);

backdrop-filter:blur(2px);

display:none;

align-items:center;
justify-content:center;

z-index:9999;

}


.drop-message {

text-align:center;

font-size:24px;

font-weight:600;

color:#333;

}


.drop-message p {

margin-top:10px;

}


.arrow {

font-size:60px;

animation:moveArrow 1s infinite ease-in-out;

}


@keyframes moveArrow {

0% {
transform:translateY(10px);
}

50% {
transform:translateY(-10px);
}

100% {
transform:translateY(10px);
}

}
.icon-button {

transition:
transform 0.15s ease;

}


.icon-button:hover {

transform:translateY(-3px);

}

.upload-status {

position:fixed;

bottom:20px;
left:20px;

background:white;

color:#222;

padding:15px 18px;

border-radius:12px;

box-shadow:0 4px 20px rgba(0,0,0,0.18);

display:none;

z-index:10000;

width:240px;

}


.upload-status h3 {

margin:0 0 8px 0;

font-size:18px;

color:#222;

}


.upload-status p {

margin:5px 0 12px;

color:#333;

}


.upload-status button {

background:#333;

color:white;

border:none;

padding:8px 12px;

border-radius:6px;

cursor:pointer;

}


.upload-status button:hover {

transform:translateY(-2px);

}
.confirm-buttons button:first-child {
    background: #d32f2f;
    color: white;
    border: none;
}

.confirm-buttons button:first-child:hover {
    background: #b71c1c;
    transform: translateY(-2px);
}

.editor-layout {

display:flex;
align-items:flex-start;
gap:30px;

}


.editor-sidebar {

width:250px;

padding:20px;

border-right:1px solid #ddd;

min-height:80vh;

}


.logout-button {

width:100%;

margin-bottom:20px;

}


.create-section {

display:flex;

flex-direction:column;

gap:10px;

}


.storage-card {

margin-top:40px;

}


.storage-title {

display:flex;

align-items:center;

gap:10px;

font-size:18px;

font-weight:600;

margin-bottom:15px;

}


.storage-title img {

width:28px;

height:28px;

}


.storage-bar {

height:12px;

background:#e5e5e5;

border-radius:10px;

overflow:hidden;

}


#storageUsed {

height:100%;

width:0%;

background:#66a9d9;

border-radius:10px;

}


.storage-card p {

font-size:14px;
margin-top:10px;
color:#b4b4b4;

}

.editor-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 30px;
}


.editor-sidebar {
    flex: 0 0 250px;
    width: 250px;
    min-height: calc(100vh - 150px);
    padding: 20px;
    box-sizing: border-box;
    border-right: 1px solid #ddd;
}


.editor-layout > .albums {
    flex: 1;
}
.editor-layout {
    display:flex !important;
    flex-direction:row !important;
    gap:30px !important;
}

.editor-sidebar {
    width:250px !important;
    min-width:250px !important;
    min-height:calc(100vh - 150px);

    padding:20px;

    background:transparent !important;

    border-right:none !important;

    box-sizing:border-box;
}


.editor-layout > .albums {
    flex:1 !important;
}
.create-album-button {

background:none !important;
border:none;

display:flex;
align-items:center;

gap:10px;

color:#b4b4b4;

font-size:16px;

padding:8px;

cursor:pointer;

}


.create-album-button img {

width:28px;
height:28px;

}


.create-album-button:hover {

transform:translateY(-3px);

}
.notifications-button:hover,
.logout-button:hover {

transform:translateY(-3px);

}
.empty-album-message {

grid-column:1/-1;

text-align:center;

padding:80px 20px;

color:#b4b4b4;

}


.empty-album-message h2 {

font-size:28px;

font-weight:500;

margin-bottom:10px;

color:#d0d0d0;

}


.empty-album-message p {

font-size:18px;

color:#999;

}
.anna-logo {

width:260px;

height:auto;

display:block;

margin:5px auto;

}
.empty-message {

text-align:center;

font-size:24px;

color:#b4b4b4;

margin-top:80px;

}

#lightbox .icon-control {

background:transparent !important;

box-shadow:none !important;

}

#lightbox .icon-control img {

background:transparent !important;

}

.album.dragging{

opacity:.5;

}
.viewer-back {
    position: fixed;
    top: 25px;
    left: 25px;
    z-index: 1000;
}

.cover-mode .photo-wrapper img {

outline:4px solid white;
cursor:pointer;

}


.cover-mode #photos::before {

content:"Select a photo for the album cover";

display:block;

grid-column:1/-1;

font-size:22px;

color:#fff;

margin-bottom:20px;

}
.success-button {
    background: #2e9d46 !important;
    color: white !important;
    border: none;
}

.success-button:hover {
    background: #247c38 !important;
}


.name-error {
    color:red;
    font-size:14px;
    margin:8px 0 0;
    min-height:18px;
}
.public-button img{
    width:32px;
    height:32px;
}

.public-button:hover{
    transform:translateY(-3px);
}
.public-button {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0;
}

.public-button:hover {
    background: transparent !important;
}

.public-button img {
    display: block;
}
/* FINAL ALBUM TEXT STYLE OVERRIDE */

.album-card h3 {
    text-align: left !important;
    margin: 8px 0 2px 0 !important;
    font-size: 18px !important;
    color: white !important;
}

.album-count {
    text-align: left !important;
    margin: 0 !important;
    font-size: 14px !important;
    color: #b4b4b4 !important;
}
.album h3 {
    text-align:left;
    margin:8px 0 0;
    font-size:20px;
}
.album {
    text-align:left;
}
.album-count,
.album-info {
    font-size: 13px !important;
    color: #b4b4b4 !important;
    text-align: left !important;
    margin-top: 4px !important;
}
/* Viewer photography gallery */

.gallery {

    columns: 4 280px;
    column-gap:20px;
    padding:20px;

}


.gallery img {

    width:100%;
    height:auto;

    margin-bottom:20px;

    border-radius:12px;

    cursor:pointer;

    display:block;

    break-inside:avoid;

    object-fit:contain;

}
#languageButton {

position: absolute;

top: 20px;

right: 25px;

background: transparent;

border: none;

color: white;

padding: 8px 12px;

font-size: 15px;

cursor: pointer;

transition:
transform 0.2s ease,
opacity 0.2s ease;

}


#languageButton:hover {

transform: translateY(-3px);

opacity: 0.75;

}


body {
position: relative;
}
#lightboxCaption {

    position: absolute;

bottom: 25px;
    left: 50%;

    transform: translateX(-50%);

    width: 80%;

    max-width: 900px;

    color: white;

    text-align: center;

    font-size: 18px;

    line-height: 1.5;

    padding: 8px 15px;

    background: rgba(0,0,0,.45);

    border-radius: 10px;

    text-shadow: 0 2px 8px black;

    z-index: 1000;

}
#captionEditor {

    position: absolute;

    bottom: 25px;

    left: 50%;

    transform: translateX(-50%);

    width: min(700px, 85%);

    background: rgba(255,255,255,0.96);

    padding: 18px 22px;

    border-radius: 18px;

    box-shadow: 0 8px 30px rgba(0,0,0,.35);

    display: flex;

    flex-direction: column;

    gap: 8px;

    z-index: 20;

}


#captionEditor textarea {


    width: 100%;

    box-sizing: border-box;

    resize: vertical;

    min-height: 65px;

    max-height: 150px;

    padding: 14px 16px;


    border-radius: 12px;

    border: 1px solid #ddd;


    font-family:
    "Segoe UI",
    Arial,
    sans-serif;


    font-size: 16px;

    line-height: 1.5;


    outline: none;

    transition:
    border .2s,
    box-shadow .2s;


}


#captionEditor textarea:focus {

    border-color: #888;

    box-shadow:
    0 0 0 3px rgba(0,0,0,.08);

}



#englishCount,
#chineseCount {

    margin: -4px 5px 5px;

    text-align: right;

    font-size: 13px;

    color: #777;

}



.caption-save-button {


    align-self: center;


    background: #222;

    color:white;


    border:none;


    padding:12px 35px;


    border-radius:25px;


    font-size:16px;


    cursor:pointer;


    transition:
    transform .15s,
    background .15s;


}


.caption-save-button:hover {

    background:#444;

    transform:translateY(-2px);

}
/* Caption editor under photo */

#captionEditor {

    position: relative;

    width: 90%;

    max-width: 900px;

    margin: 12px auto 0;

    padding:0;

    background:transparent;

    box-shadow:none;

}


.caption-row {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}


.caption-row textarea {

    flex:1;

    height:34px;

    min-height:34px;

    max-height:34px;

    resize:none;

    padding:7px 12px;

    border-radius:8px;

    border:1px solid #bbb;

    font-size:14px;

    font-family:Arial,sans-serif;

    box-sizing:border-box;

}


.caption-row textarea:focus {

    outline:none;

    border-color:#777;

}


.caption-row button {

    flex:none;

    height:34px;

    width:70px;

    padding:0;

    border-radius:8px;

    background:#333;

    color:white;

    font-size:13px;

}


.caption-counts {

    display:flex;

    justify-content:space-between;

    padding:3px 90px 0 0;

    font-size:11px;

    color:#aaa;

}


#englishCount,
#chineseCount {

    margin:0;

}
/* Caption editor final override */

#captionEditor {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;

    width: 100% !important;
    margin-top: 12px !important;
    padding: 8px 0 !important;

    background: transparent !important;
    box-shadow: none !important;
}


.caption-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    gap: 10px !important;
}


.caption-row textarea {

    flex: 1 !important;

    width: auto !important;

    height: 42px !important;

    min-height: 42px !important;
    max-height: 42px !important;
overflow:hidden !important;
    resize: none !important;
line-height:1.3 !important;
    padding: 8px 12px !important;

    font-size: 14px !important;

    border-radius: 10px !important;

}


.caption-row button {

    width: auto !important;

    height: 42px !important;

    padding: 0 14px !important;

    font-size: 14px !important;

    border-radius: 10px !important;

}


.caption-counts {

    display:flex !important;

    justify-content:space-between !important;

    font-size:12px !important;

    margin-top:4px !important;

}
/* Caption editor layout fix */

.lightbox-content {

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    justify-content:center !important;

    max-width:90vw;

    max-height:95vh;

}


#lightbox-image {

    max-width:90vw !important;

    max-height:75vh !important;

    object-fit:contain;

}


#captionEditor {

    position:static !important;

    transform:none !important;

    width:90vw !important;

    max-width:900px !important;

    margin-top:15px !important;

    padding:0 !important;

    background:none !important;

    box-shadow:none !important;

}


.caption-row {

    display:flex !important;

    width:100% !important;

    gap:10px !important;

}


.caption-row textarea {

    height:42px !important;

    min-height:42px !important;

    max-height:42px !important;

    resize:none !important;

    flex:1 !important;

}


.caption-row button {

    width:70px !important;

    min-width:70px !important;

    height:42px !important;

    padding:0 !important;

}


.caption-counts {

    display:flex !important;

    justify-content:space-between !important;

    width:calc(100% - 80px);

    margin-top:4px;

}
/* Smaller editor caption area */

#captionEditor {

    width: 85vw !important;
    max-width: 750px !important;

    margin-top: 8px !important;

}


.caption-row textarea {

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    padding: 6px 10px !important;

    font-size: 14px !important;

}


.caption-row button {

    height: 34px !important;

    width: 60px !important;
    min-width: 60px !important;

    padding: 0 !important;

    font-size: 13px !important;

}


.caption-counts {

    font-size: 11px !important;

    margin-top: 2px !important;

}


/* Give the photo more room */

#lightbox-image {

    max-height: 82vh !important;

}
.confirm-dialog input + input {

    margin-top: 8px !important;

}
.viewer-logo {

    width:260px;

    height:auto;

    display:block;

    margin:10px auto 20px;

}


#languageButton {

    position:absolute;

    top:20px;

    right:25px;

    background:transparent;

    border:none;

    color:white;

    font-size:15px;

    cursor:pointer;

}
@media(max-width:700px){

.gallery {

    gap:12px;

}

.gallery img {

    height:180px;

}

}
/* ============================
   FINAL EDITOR PHOTO GRID
============================ */

#photos {

    display:grid !important;

    grid-template-columns:
    repeat(auto-fill, minmax(220px, 1fr)) !important;

    gap:20px !important;

    align-items:start;

}


/* Individual editor cards */

#photos .editor-photo {

    width:auto !important;

    margin:0 !important;

}


/* Photo box */

#photos .photo-wrapper {

    width:100%;

    border-radius:14px;

    overflow:hidden;

}


/* Preserve photo proportions */

#photos .photo-wrapper img {

    width:100% !important;

    height:auto !important;

    aspect-ratio:auto !important;

    object-fit:contain !important;

    display:block;

}
/* ============================
   FINAL VIEWER LIGHTBOX SIZE
============================ */

#lightbox #largeImage {

    max-width:95vw !important;

    max-height:88vh !important;

    width:auto;

    height:auto;

    object-fit:contain;

}
/* ============================
   EDITOR MASONRY PHOTO VIEW
============================ */

#photos {

    display:block !important;

    columns:4 280px;

    column-gap:20px;

    padding:20px;

}


#photos .editor-photo {

    display:inline-block;

    width:100% !important;

    margin:0 0 20px 0 !important;

    break-inside:avoid;

}


#photos .photo-wrapper {

    width:100%;

    overflow:hidden;

    border-radius:14px;

}


#photos .photo-wrapper img {

    width:100% !important;

    height:auto !important;

    object-fit:contain !important;

    display:block;

}



/* Responsive */

@media(max-width:1200px){

    #photos {

        column-count:3;

    }

}


@media(max-width:800px){

    #photos {

        column-count:2;

    }

}


@media(max-width:500px){

    #photos {

        column-count:1;

    }

}
/* ============================
   LIGHTBOX CAPTION BELOW PHOTO
============================ */

#lightboxCaption {

    position: static !important;

width:90%;
max-width:900px;
    margin-top: 12px;

    color: white;

    text-align: center;

    font-size: 18px;

    line-height: 1.5;

    padding: 8px 15px;

    background: rgba(0,0,0,.45);

    border-radius: 10px;

    text-shadow: 0 2px 8px black;

}
/* Arrange lightbox photo + caption vertically */

#lightbox {

    flex-direction: column !important;

}
/* Center lightbox caption */

#lightboxCaption {

    text-align: center !important;

    margin-left: auto !important;

    margin-right: auto !important;

}
#lightbox {

    align-items: center !important;

}

#lightboxCaption {

    align-self: center !important;

}
.site-footer {

    width:100%;

    text-align:center;

    padding:30px 10px;

    margin-top:60px;

    color:#888;

    font-size:13px;

    letter-spacing:.5px;

}
/* Prevent horizontal scrolling */

* {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
}
/* FINAL LIGHTBOX CENTER FIX */

#lightbox {
    display:none;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
}

#lightbox #largeImage {
    display:block;
    margin:0 auto;
}

#lightboxCaption {
    display:block;
    position:static !important;
    width:min(90vw,900px);
    margin:15px auto 0 !important;
    text-align:center !important;
    align-self:center !important;
}
/* FINAL viewer lightbox caption */

#lightboxCaption {

    position: static !important;

    display: block !important;

    width: fit-content !important;

    max-width: 90vw !important;

    margin: 12px auto 0 auto !important;

    padding: 8px 18px !important;

    text-align: center !important;

    color: white !important;

    font-size: 18px;

    line-height: 1.5;

    background: rgba(0,0,0,.45);

    border-radius: 10px;

    text-shadow: 0 2px 8px black;

    align-self: center !important;

}
.notification button {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 5px;
}

.notification button img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain;
}
.notifications-button img {

width: 32px;
height: 32px;
object-fit: contain;

}
.notification-thumb {

    width: 120px;

    height: 120px;

    object-fit: cover;

    border-radius: 10px;

    display: block;

    margin: 10px auto;

}
.notification-dialog {

    max-width: 500px;

    max-height: 80vh;

    overflow-y: auto;

}
/* Editor sidebar layout */

.editor-sidebar {

display:flex;
flex-direction:column;
gap:15px;

}


/* Notifications - no surrounding box */

.notifications-button {

background:none;
border:none;
box-shadow:none;

display:flex;
align-items:center;
gap:10px;

padding:10px;

cursor:pointer;

}


.notifications-button span {

color:#b4b4b4;

}



/* Logout - no surrounding box */

.logout-button {

background:none;
border:none;
box-shadow:none;

padding:10px;

color:#b4b4b4;

cursor:pointer;

font-size:16px;

text-align:left;

}


.notifications-button {
    margin-left: -5px;
}
.storage-title span {
    color: #b4b4b4;
}
#lightbox {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.9);
}

#lightbox #largeImage {
    max-width:90vw !important;
    max-height:75vh !important;
    object-fit:contain;
    margin:0;
}

#lightboxCaption {
    background:transparent !important;
    margin-top:15px !important;
    padding:0 !important;
    width:90% !important;
    max-width:900px;
    color:white;
    text-align:center;
}
/* ============================
   VIEWER LIGHTBOX MATCH EDITOR
============================ */

#lightbox {

display:none;

position:fixed;

inset:0;

background:rgba(0,0,0,.94);

z-index:9999;

align-items:center;

justify-content:center;

}


.viewer-lightbox-content {

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

max-width:95vw;

max-height:95vh;

}


.viewer-photo-area {

position:relative;

display:flex;

align-items:center;

justify-content:center;

}


#largeImage {

max-width:90vw;

max-height:82vh;

object-fit:contain;

display:block;

}


/* heart exactly at photo bottom-right */

.like-area {

position:absolute;

right:0;

bottom:0;

transform:translateY(50%);

display:flex;

align-items:center;

gap:8px;

}


#likeButton {

background:none;

border:none;

padding:0;

}


#likeButton img {

width:38px;

height:38px;

}


#likeCount {

color:white;

font-size:18px;

}


/* caption below photo */

#lightboxCaption {

margin-top:35px;

width:min(90vw,900px);

padding:10px 18px;

text-align:center;

color:white;

font-size:18px;

line-height:1.5;

background:rgba(0,0,0,.45);

border-radius:10px;

}


/* navigation */

.previous-button {

left:25px;

}


.next-button {

right:25px;

}
/* FINAL HEART + LIKE COUNT SEPARATION */

#lightbox .like-area {

    position:absolute !important;

    bottom:15px !important;

    right:15px !important;

    display:flex !important;

    flex-direction:row !important;

    align-items:center !important;

    justify-content:center !important;

    gap:15px !important;

}


#lightbox #likeButton {

    position:relative !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    width:40px !important;

    height:40px !important;

}


#lightbox #likeButton img {

    position:static !important;

    width:34px !important;

    height:34px !important;

}


#lightbox #likeCount {

    position:static !important;

    display:block !important;

    width:auto !important;

    height:auto !important;

    margin:0 !important;

    padding:0 !important;

    line-height:1 !important;

}
/* ============================
   LIGHTBOX POPUPS ABOVE LIGHTBOX
============================ */


/* Delete confirmation above lightbox */
.confirm-overlay {

    z-index:20000 !important;

}


/* Photo three-dot menu above lightbox */
#photoMenu {

    z-index:20000 !important;

}


/* Any album/photo popup menus */
.popup-menu {

    z-index:20000 !important;

}
/* ============================
   VIEWER LIGHTBOX CAPTION GAP FIX
============================ */

#lightboxCaption {

    margin-top: 70px !important;

}
/* Album picker above lightbox */

.album-picker-overlay {

    z-index:20000 !important;

}
/* All viewer/editor notifications above lightbox */

#snackbar,
.snackbar,
.upload-status,
.notification-dialog {

    z-index:30000 !important;

}
/* FINAL FIX: move viewer caption lower */

#lightbox .viewer-lightbox-content {
    justify-content:flex-start !important;
    padding-top:40px !important;
}


#lightbox #lightboxCaption {
    margin-top:30px !important;
}
/* Move like button outside photo, bottom right */

.viewer-photo-area {
    display:flex;
    flex-direction:column;
    align-items:flex-end;
}

.like-area {

    position:static !important;

    margin-top:10px;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:8px;

}


#likeButton img {

    width:38px;

    height:38px;

}


#likeCount {

    color:white;

    font-size:18px;

}
.notification-icon {
    width:18px;
    height:18px;
    object-fit:contain;
    flex-shrink:0;
}
.notification {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.25);
}

.notification:last-child {
    border-bottom: none;
}
#notificationOverlay .notification-dialog {
    background: #111;
    color: white;
}
.notification-date {
    font-size: 11px;
    color: #aaa;
    margin-top: 4px;
}
.notification {
    position: relative;
}

.notification-delete {
    position: absolute;
    top: 12px;
    right: 8px;
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
}

.notification-delete img {
    width: 11px;
    height: 11px;
    opacity: 0.7;
}

.notification-delete:hover img {
    opacity: 1;
}
.notification-delete {
    position: absolute;
    top: 18px;
    right: 8px;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer;
}

.notification-delete img {
    width: 10px !important;
    height: 10px !important;
    max-width: 10px !important;
    max-height: 10px !important;
    object-fit: contain;
    opacity: 0.7;
}
.logout-button {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logout-button img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
/* Match Create Album hover style */

.notifications-button:hover,
.logout-button:hover {

    background: transparent !important;
    transform: translateY(-3px) !important;

}


/* Keep text/icon colors unchanged */

.notifications-button,
.logout-button {

    transition: transform 0.15s ease;

}
/* Notification window */

.notification-dialog {

    position: relative;

    max-height: 80vh;

    overflow-y: auto;

}


/* X button fixed to top-right of notification box */

.notification-close-x {

    position: sticky;

    float: right;

    top: 0;

    right: 0;

    z-index: 100;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    color: white;

    font-size: 32px;

    line-height: 1;

    padding: 0;

    margin: -10px -10px 0 0;

    cursor: pointer;

}


.notification-close-x:hover {

    background: transparent !important;

    transform: translateY(-2px);

}
#notificationOverlay {

    z-index: 25000 !important;

}
/* Make delete confirmation appear above notification overlay */

#confirmBox {
    z-index:30000 !important;
}
.loading-spinner {

    width:35px;
    height:35px;

    border:4px solid #555;
    border-top:4px solid white;

    border-radius:50%;

    animation:spin 0.8s linear infinite;

    margin:30px auto;

}


@keyframes spin {

    from {
        transform:rotate(0deg);
    }

    to {
        transform:rotate(360deg);
    }

}
.viewer-button{

display:flex;

align-items:center;

gap:12px;

background:none;

border:none;

padding:12px 10px;

color:#b4b4b4;

font-size:16px;

cursor:pointer;

width:100%;

transition:
transform .2s ease,
color .2s ease;

}


.viewer-button img{

width:24px;

height:24px;

opacity:.8;

}


.viewer-button:hover{

transform:translateY(-3px);

color:white;

}
.viewer-button:hover {

    transform: translateY(-3px);

    background: transparent !important;

    color: white;

}
/* Drop upload text color override */
#dropOverlay .drop-message,
#dropOverlay .drop-message p,
#dropOverlay .arrow {
    color: #b4b4b4 !important;
}
/* Move viewer like button + count lower */
#lightbox .like-area {
    position: absolute !important;
    right: 15px !important;
    bottom: -35px !important;
    transform: none !important;
}
/* Lower caption slightly to line up with like button */

#lightboxCaption {

    margin-top: 28px !important;

}
/* Force caption lower */

#lightbox #lightboxCaption {
    margin-top: 42px !important;
}

/* Like button below photo, aligned right */

.viewer-photo-area {
    display:flex;
    flex-direction:column;
    align-items:flex-end;
}


.like-area {

    position:static !important;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:10px;

    margin-top:10px;

}


#likeButton {

    background:none;
    border:none;
    padding:0;

}


#likeButton img {

    width:38px;
    height:38px;

}


#likeCount {

    color:white;

    font-size:18px;

}#mapButton {

    position:absolute;

    top:22px;

    right:90px;

    background:none;

    border:none;

    padding:8px 12px;

    font-size:16px;

    cursor:pointer;

    color:#F2F2F2;

    transition:transform .2s ease;

}
#mapButton:hover {

    transform:translateY(-3px);

}
/* Map page language button - match main header */

#mapLanguageButton {

    position:absolute;

    top:20px;

    right:20px;

    background:none !important;

    border:none !important;

    padding:8px 12px;

    font-size:16px;

    cursor:pointer;

    color:inherit;

    transition:transform .2s ease;

}


#mapLanguageButton:hover {

    transform:translateY(-3px);

}
.viewer-back {

position:absolute;

top:24px;

left:20px;

display:flex;

align-items:center;

gap:8px;

cursor:pointer;

color:inherit;

text-decoration:none;

transition:transform .2s ease;

font-size:16px;

}


.viewer-back:hover {

transform:translateY(-3px);

}


.viewer-back img {

width:22px;

height:22px;

}
#mapButton,
#languageButton {

    display:flex;
    align-items:center;
    justify-content:center;

}
/* Align map and language buttons perfectly */

#mapButton,
#languageButton {

    position:absolute;

    top:20px;

    height:36px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:transparent !important;
    border:none !important;

    color:white;

    padding:0 12px;

    font-size:16px;

    line-height:1;

    cursor:pointer;

}


#languageButton {
    right:20px;
}


#mapButton {
    right:95px;
}


#mapButton:hover,
#languageButton:hover {

    transform:translateY(-3px);

}