/* ============================================
   EasyImage Gallery Enhancement
   现代化瀑布流广场页样式
   ============================================ */

/* --- Gallery Header --- */
.gallery-header {
    text-align: center;
    padding: 28px 0 16px;
}
.gallery-header .gh-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 6px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
}
.gallery-header .gh-subtitle {
    color: #64748b;
    font-size: 13px;
    margin: 0;
}

/* --- Masonry Waterfall Layout --- */
.cards.listNum {
    column-count: 4;
    column-gap: 16px;
    padding: 0;
    margin: 0;
}
@media (max-width: 1200px) { .cards.listNum { column-count: 3; } }
@media (max-width: 768px)  { .cards.listNum { column-count: 2; } }
@media (max-width: 480px)  { .cards.listNum { column-count: 1; } }

.cards.listNum > div[class*="col-"] {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    width: 100%;
    margin-bottom: 16px;
    padding: 0;
    float: none;
}

/* --- Card --- */
.card {
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s ease !important;
    border: none !important;
    position: relative;
    background: #fff;
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0,0,0,0.14) !important;
}

/* --- Image --- */
.listNum img,
#viewjs img {
    width: 100% !important;
    height: auto !important;
    max-height: 420px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1) !important;
    cursor: pointer;
}
.listNum img:hover,
#viewjs img:hover {
    transform: scale(1.06) !important;
    position: relative;
    z-index: 1 !important;
}

/* --- Bottom Action Bar --- */
.bottom-bar {
    opacity: 0 !important;
    width: 100%;
    position: absolute;
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, transparent 100%) !important;
    transition: opacity 0.3s ease !important;
    padding: 40px 10px 8px !important;
    border-radius: 0 0 14px 14px;
}
.card:hover .bottom-bar {
    opacity: 1 !important;
}
.bottom-bar a {
    color: #fff !important;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.2s ease;
}
.bottom-bar a:hover {
    transform: scale(1.25);
}
.bottom-bar .text-primary {
    color: #fff !important;
}
.bottom-bar label {
    color: #fff !important;
}

/* --- Filter Toolbar --- */
.gallery-toolbar {
    background: #fff;
    border-radius: 16px;
    padding: 14px 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.btn-toolbar .btn {
    border-radius: 20px !important;
    padding: 5px 14px !important;
    font-size: 12px;
    margin: 0 2px 4px;
    transition: all 0.2s ease;
    border: none !important;
    font-weight: 500;
}
.btn-warning {
    background: linear-gradient(135deg, #f0ad4e, #ec971f) !important;
    color: #fff !important;
}
.btn-danger {
    background: linear-gradient(135deg, #d9534f, #c9302c) !important;
    color: #fff !important;
}
.btn-primary {
    background: linear-gradient(135deg, #337ab7, #2e6da4) !important;
    color: #fff !important;
}
.btn-toolbar .btn:not(.btn-warning):not(.btn-danger):not(.btn-primary) {
    background: #f0f0f0 !important;
    color: #666 !important;
}
.btn-toolbar .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* --- Empty State --- */
.alert-danger {
    text-align: center !important;
    padding: 48px 20px !important;
    border-radius: 16px !important;
    border: 2px dashed #e0e0e0 !important;
    background: #fafafa !important;
    color: #aaa !important;
    font-size: 15px;
    box-shadow: none !important;
}
.alert-info {
    border-radius: 12px !important;
}

/* --- Card Entrance Animation --- */
.cards.listNum > div[class*="col-"] {
    animation: cardFadeIn 0.5s ease forwards;
    opacity: 0;
}
.cards.listNum > div[class*="col-"]:nth-child(1) { animation-delay: 0.05s; }
.cards.listNum > div[class*="col-"]:nth-child(2) { animation-delay: 0.10s; }
.cards.listNum > div[class*="col-"]:nth-child(3) { animation-delay: 0.15s; }
.cards.listNum > div[class*="col-"]:nth-child(4) { animation-delay: 0.20s; }
.cards.listNum > div[class*="col-"]:nth-child(5) { animation-delay: 0.25s; }
.cards.listNum > div[class*="col-"]:nth-child(6) { animation-delay: 0.30s; }
.cards.listNum > div[class*="col-"]:nth-child(7) { animation-delay: 0.35s; }
.cards.listNum > div[class*="col-"]:nth-child(8) { animation-delay: 0.40s; }
.cards.listNum > div[class*="col-"]:nth-child(n+9) { animation-delay: 0.45s; }

@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Loading Shimmer --- */
#viewjs li img[src*="loading"] {
    background: linear-gradient(110deg, #f0f0f0 30%, #e8e8e8 50%, #f0f0f0 70%);
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite linear;
    min-height: 200px;
}
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* --- Back to Top --- */
.btn-back-to-top {
    border-radius: 50% !important;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* --- Date Picker Form --- */
.form-date {
    border-radius: 20px !important;
}
.input-group-btn .btn {
    border-radius: 0 20px 20px 0 !important;
}
.input-group-addon {
    border-radius: 20px 0 0 20px !important;
}