/*****************************************************************/
/* Gallery Page Styles */
/*****************************************************************/

.gallery-index-header {
    font-family: Arapey-Italic;
    font-size: 40px;
    color: #999;
}

.gallery-header {
    font-family: Arapey-Italic;
    font-size: 48px;
    color: #868686;
    padding: 0px 0px 0px 00px; /*top right bottom left*/
}

.gallery-container {
    max-width: 1500px;
    /*background-color: #f7f5f4;*/
    /*background-color:#f2f2f2;*/
    /*background-color: #f9f9f9; snow white*/
    /*background-color: white;*/
    /*background-color: #f9f9f9;*/
    /*border: 1px solid #f7f5f4;*/
    padding: 5px;
    margin-top: 0px;
    border-radius: 5px 5px;
}

.gallery-card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* or use margin on .admin-card if you prefer */
    justify-content: start; /* or center, or space-between depending on your design */
    margin-top: 1rem;
}

/*bdc = birthday cake*/
.gallery-cat-img {
    width: 190px;
    height: 190px;
    display: block; /* removes that descender whitespace */
    margin: 0; /* kills any default margins */
    padding: 0;
    border: none !important;
    text-decoration: none;
    /*background: url('/images/app/BDayCake.jpg') no-repeat center;*/
    background: var(--img-default) no-repeat center;
    background-size: cover;
    transition: background-image .3s ease-in-out;
}

    .gallery-cat-img:hover {
        /*background-image: url('/images/app/BDayCakeColor.jpg');*/
        background-image: var(--img-hover);
    }

.gallery-item {
    cursor: pointer;
    /*max-width: 312px;*/
    max-width: 160px;
    height: 210px;
    padding: 8px;
    /*font-size: 14px;*/
    text-align: center;
    margin-right: 15px;
    margin-bottom: 20px;
    color: #666666;
    /*background-color: #efefef;*/
    background-color: #f2f2f2;
    border-radius: 5px 5px;
    /*box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;*/
    /*border:3px solid transparent;*/
    /*border: 1px solid #E0E0E0;*/
    outline: none;
    transition: .3s ease-in-out;
}

    .gallery-item:hover {
        /*font-size: 14px;*/
        color:black;
        /*background-color: #507333; Green*/
        background-color: white;
        border-radius: 5px 5px;
        /*box-shadow: 0 0 0 2px #5F8A3D;  Deep green */
        /*box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;*/
        box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 12px;
        /*border-color:green;*/
    }

.gallery-item-img {
    /*width:290px;
    height:290px;*/
    /*width: 220px;
    height: 220px;*/
    width: 140px;
    height: 140px;
    border-radius: 5px 5px;
    /*width:180px;
    height:180px;*/
    /*border-bottom: 1px solid lightgrey;*/
}

.gallery-img-item-name {
    font-family:Roboto-Light;
    font-size:14px;
}

.gallery-img-item-title {
    font-family: Roboto-Thin;
    /*font-weight:bold;*/
    font-size: 46px;
    padding-bottom:0px !important;
    margin-bottom:-25px !important;
    color: #838383;
}

.gallery-multi-img-upload {
    width: 140px;
    height: 140px;
}

.gallery-breadcrumb {
    margin-left: 10px;
    font-family: Roboto-Light;
    font-size: 16px;
    color: #666666;
}

.gallery-shortcut {
    margin-left: 10px;
    font-family: Roboto-Light;
    font-size: 12px;
}

.gallery-link {
    text-decoration: none;
}

:root {
    --nav-size: 56px; /* button size */
    --icon-size: 28px; /* chevron size */
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--nav-size);
    height: var(--nav-size);
    border: 0;
    border-radius: 9999px;
    cursor: pointer;
    background: rgba(255,255,255,.9);
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    user-select: none;
}

    .gallery-nav.prev {
        left: .75rem;
    }

    .gallery-nav.next {
        right: .75rem;
    }

    .gallery-nav:hover {
        background: #fff;
    }

.nav-icon {
    width: var(--icon-size);
    height: var(--icon-size);
    color: #111; /* inherits as stroke via currentColor */
}

.gallery-img-limits {
    font-family: Roboto-Light;
    font-size: 14px;
    color: #666666;
}

.upload-steps {
    margin-left: 5px;
    font-family: Roboto-Light;
    font-size: 18px;
    color: #B7B7B7;
}

.gallery-queued-files {
    background-color:white;
    display: inline-block; /* shrink to content */
    width: max-content; /* modern shrink-wrap */
    max-width: 100%; /* don’t overflow small screens */
    padding: 10px;
    border-radius: 5px 5px;
    border: 1px solid #D6D6D6;
}

/* For Manage Gallery Images */
.img-faded {
    opacity: 0.45;
    filter: grayscale(20%);
    pointer-events: none;
}