/* =========================================
   Izziekitty's Saloon - Scrapbook Styles
   ========================================= */

body, html {
    background-color: #fab1a0; 
    background-image: radial-gradient(#ffeaa7 15%, transparent 16%), radial-gradient(#ffeaa7 15%, transparent 16%);
    background-size: 30px 30px; 
    background-position: 0 0, 15px 15px; 
    overflow: hidden;
}

.scrapbook-page {
    position: relative; width: 85vw; max-width: 1200px; height: 85vh; 
    margin: 4vh auto 0 auto; background: #fdf5e6; border-radius: 10px;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.05), 10px 10px 20px rgba(0,0,0,0.2);
    padding: 40px; box-sizing: border-box; overflow: hidden;
}

.photo-wrapper {
    position: absolute; background: white; padding: 15px 15px 45px 15px; 
    box-shadow: 5px 8px 20px rgba(0,0,0,0.3); cursor: pointer;
    transform: rotate(var(--rot)); transition: transform 0.3s ease, box-shadow 0.2s;
}
.photo-wrapper:hover {
    box-shadow: 10px 15px 30px rgba(0,0,0,0.4); transform: scale(1.08) rotate(var(--rot)); z-index: 50 !important; 
}
.photo-wrapper img { width: 100%; height: auto; object-fit: cover; border: 1px solid #ddd; }
.photo-caption { text-align: center; font-size: 1.4rem; color: #2d3436; margin-top: 15px; font-weight: bold; }

.tape { position: absolute; width: 80px; height: 25px; background-color: rgba(255, 255, 255, 0.6); box-shadow: 0 1px 3px rgba(0,0,0,0.2); backdrop-filter: blur(2px); opacity: 0.8; z-index: 5; }
.tape-top-left { top: -10px; left: -20px; transform: rotate(-45deg); }
.tape-top-right { top: -10px; right: -20px; transform: rotate(45deg); }
.tape-bottom-left { bottom: -10px; left: -20px; transform: rotate(45deg); }
.tape-bottom-right { bottom: -10px; right: -20px; transform: rotate(-45deg); }

/* --- Navigation Buttons --- */
.nav-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: #0984e3; color: white; border: 4px solid #74b9ff; border-radius: 50%; 
    width: 70px; height: 70px; cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.3); 
    transition: transform 0.2s; z-index: 50; display: flex; justify-content: center; align-items: center; 
}
.nav-btn:hover { background: #74b9ff; transform: translateY(-50%) scale(1.1); }
.nav-btn:disabled { background: #ccc; border-color: #999; cursor: not-allowed; transform: translateY(-50%); opacity: 0.5; }
.prev-btn { left: 2%; }
.next-btn { right: 2%; }

/* SVG Masks for Prev/Next Buttons */
.nav-btn::before {
    content: ""; display: inline-block; width: 32px; height: 32px; background-color: currentColor;
}
.prev-btn::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.next-btn::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Page Layouts */
.layout-2 .pos-0 { top: 12%; left: 8%; width: 42%; z-index: 1; }
.layout-2 .pos-1 { bottom: 12%; right: 8%; width: 42%; z-index: 2; }
.layout-3 .pos-0 { top: 6%; left: 6%; width: 38%; z-index: 1; }
.layout-3 .pos-1 { top: 18%; right: 6%; width: 38%; z-index: 2; }
.layout-3 .pos-2 { bottom: 6%; left: 28%; width: 38%; z-index: 3; }
.layout-4 .pos-0 { top: 5%; left: 5%; width: 35%; z-index: 1; }
.layout-4 .pos-1 { top: 8%; right: 5%; width: 34%; z-index: 2; }
.layout-4 .pos-2 { bottom: 5%; left: 8%; width: 35%; z-index: 3; }
.layout-4 .pos-3 { bottom: 8%; right: 6%; width: 33%; z-index: 4; }

/* --- LIGHTBOX & COMMENTS LAYOUT --- */
#lightbox {
    display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: rgba(0, 0, 0, 0.95); z-index: 200; 
}

.lightbox-back-btn {
    position: absolute; top: 20px; left: 20px;
    background-color: #d63031; color: white; border: 4px solid white; border-radius: 30px; padding: 12px 24px; font-size: 1.3rem; font-weight: bold; cursor: pointer; font-family: inherit; z-index: 210; box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    display: inline-flex; align-items: center; gap: 6px; transition: transform 0.2s;
}
.lightbox-back-btn:hover { background-color: #ff7675; transform: scale(1.05); }
.lightbox-back-btn::before {
    content: ""; display: inline-block; width: 18px; height: 18px; background-color: currentColor; 
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.lightbox-comments-btn {
    position: absolute; top: 20px; right: 20px;
    background-color: #0984e3; color: white; border: 4px solid white; border-radius: 30px; padding: 12px 24px; font-size: 1.3rem; font-weight: bold; cursor: pointer; font-family: inherit; z-index: 210; box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    display: inline-flex; align-items: center; gap: 8px; transition: transform 0.2s;
}
.lightbox-comments-btn:hover { background-color: #74b9ff; transform: scale(1.05); }
.icon-chat::before {
    content: ""; display: inline-block; width: 18px; height: 18px; background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* The Split-Screen Layout */
#lightbox-inner {
    display: flex; width: 100vw; height: 100vh; padding-top: 80px; box-sizing: border-box; cursor: zoom-out;
}

.lightbox-img-pane {
    flex: 1; display: flex; justify-content: center; align-items: center; padding: 20px; transition: all 0.3s ease;
}
.lightbox-img-pane img {
    max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 0 30px rgba(255,255,255,0.2); border: 5px solid white; border-radius: 5px; cursor: default;
}

.lightbox-comments-pane {
    width: 0; background: #fdf5e6; overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; cursor: default;
}

/* When Comments are active, shift the widths! */
#lightbox.show-comments .lightbox-comments-pane {
    width: 40%; min-width: 350px; padding: 20px; border-left: 5px solid #0984e3; box-shadow: -5px 0 20px rgba(0,0,0,0.5);
}
#lightbox.show-comments .lightbox-img-pane {
    width: 60%; flex: none;
}

.empty-state { text-align: center; color: #d63031; font-size: 2rem; font-weight: bold; margin-top: 20%; text-shadow: 1px 1px 2px rgba(255,255,255,0.8); display: flex; justify-content: center; align-items: center; gap: 10px; }

/* --- ADMIN UI STYLES --- */
#admin-open-btn {
    position: fixed; top: 20px; right: 20px; background-color: #0984e3; color: white; border: 3px solid #74b9ff; border-radius: 30px; padding: 10px 20px; font-weight: bold; font-size: 1.1rem; cursor: pointer; z-index: 100; box-shadow: 0 4px 6px rgba(0,0,0,0.2); transition: transform 0.2s; display: none; font-family: inherit;
    align-items: center; gap: 8px; /* Prep for flex/svg */
}
#admin-open-btn:hover { transform: scale(1.05); }

#admin-modal {
    display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.8); z-index: 300; justify-content: center; align-items: center;
}
.admin-panel {
    background: white; width: 90%; max-width: 800px; height: 80vh; border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 20px; border: 5px solid #0984e3; box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}
.admin-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px dashed #b2bec3; padding-bottom: 15px; }
.admin-header h2 { margin: 0; color: #0984e3; display: flex; align-items: center; gap: 10px; }
.close-admin-btn { background: #ff4757; color: white; border: none; border-radius: 10px; padding: 8px 15px; font-weight: bold; cursor: pointer; font-size: 1rem; }

.upload-section { background: #f1f2f6; padding: 20px; border-radius: 15px; border: 2px solid #dfe4ea; display: flex; gap: 15px; align-items: center; }
.upload-section input[type="file"] { flex: 1; }
.upload-section input[type="text"] { flex: 2; padding: 10px; border-radius: 10px; border: 1px solid #b2bec3; font-family: inherit; }
.upload-section button { background: #00b894; color: white; font-weight: bold; border: none; border-radius: 10px; padding: 10px 20px; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 8px; }

.photo-list { flex: 1; overflow-y: auto; background: #f8f9fa; border-radius: 15px; padding: 15px; border: 2px solid #dfe4ea; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
.admin-photo-card { background: white; padding: 10px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.admin-photo-card img { width: 100%; height: 120px; object-fit: cover; border-radius: 5px; }
.admin-photo-card input[type="text"] { width: 90%; padding: 5px; font-family: inherit; text-align: center; border: 1px dashed #ccc; border-radius: 5px; }
.admin-controls { display: flex; justify-content: space-between; width: 100%; align-items: center; }
.toggle-label { font-size: 0.9rem; font-weight: bold; color: #2d3436; display: flex; align-items: center; gap: 5px; cursor: pointer;}
.toggle-label input { width: 18px; height: 18px; cursor: pointer; }

/* --- CUSTOM SVG ICONS FOR SCRAPBOOK --- */
.sb-icon { display: inline-block; width: 1.2em; height: 1.2em; background-color: currentColor; vertical-align: text-bottom; }

.icon-tools {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.icon-camera {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") no-repeat center / contain;
}
.icon-upload {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E") no-repeat center / contain;
}
.icon-sad {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M16 16s-1.5-2-4-2-4 2-4 2'/%3E%3Cpath d='M9 9h.01'/%3E%3Cpath d='M15 9h.01'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M16 16s-1.5-2-4-2-4 2-4 2'/%3E%3Cpath d='M9 9h.01'/%3E%3Cpath d='M15 9h.01'/%3E%3C/svg%3E") no-repeat center / contain;
}