/* =========================================
   FONTS
========================================= */

@font-face {
    font-family: 'Wimzik';
    src: url('../fonts/wimzik/Wimzik.woff2') format('woff2'),
         url('../fonts/wimzik/Wimzik.woff') format('woff');
    font-display: swap;
}


@font-face {
    font-family:'Xiomara';
    src:url('../fonts//xiomara-font/Xiomara-wWLw.woff2') format('woff2');
    font-display:swap;
}

/* =========================================
   RESET
========================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

img{
    display:block;
    max-width:100%;
}

.cake-item,
.cake-itemboys,
.cake-itemgirls{
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

body{
    font-family:Arial,sans-serif;
    background-image:url('images/purple_clouds.jpg');
    background-size:cover;
    background-position:center;
    overflow-x:hidden;

    /* background-color:#000; */
}

/* =========================================
   NAVIGATION
========================================= */

#nav{
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    align-items:center;

    width:100%;

    padding:15px 0;

    margin:0;

    list-style:none;

    /* background:rgba(129, 126, 126, 0.238); */

    backdrop-filter:blur(3px);
}

#nav li{
    text-align:center;
    position:relative;
    flex:1;
}

/* Разпределение като оригинала */
#nav li:first-child{
    margin-right:auto;
    margin-left:15%;
}

#nav li:nth-child(2){
    margin-left:2%;
    margin-right:auto;
}

#nav li:nth-child(3){
    margin-left:5%;
    margin-right:auto;
}

#nav li:last-child{
    margin-left:auto;
    margin-right:10%;
}

#nav a{
    text-decoration:none;
    color:#333;
    font-size:18px;
    padding:10px 15px;
    display:inline-block;
    transition:color .3s ease;
}

#nav a:hover{
    color:#e34bb8;
}

/* GIRLS NAVIGATION */

.containergirls #nav{
    background:rgba(255, 105, 180, 0.25);

    backdrop-filter:blur(3px);
}

.containergirls #nav a{
    color:#5a2246;
}

.containergirls #nav a:hover{
    color:#ff1493;
}

/* BOYS NAVIGATION */

.containerboys #nav{
    background:rgb(102, 151, 212);

    backdrop-filter:blur(3px);
}

.containerboys #nav a{
    color:#ffffff;
}

.containerboys #nav a:hover{
    color:#7ec8ff;
}

/* =========================================
   HEADERS
========================================= */

header{
    text-align:center;
    margin:40px 0;
}

h1{
    font-size:2.5rem;
    color:#333;
}

#h1title{
    font-family:'Xiomara';
    color:#e34bb8;
    font-size:3rem;
    padding-top:20px;

    text-align:center;

    width:100%;

    display:block;

    margin:0 auto;

    margin-bottom:40px;
    margin-top:-40px;
}

#h1titleboys{
    font-family:'Xiomara';
    font-size:3rem;
    padding-top:20px;

    text-align:center;

    width:100%;

    display:block;

    margin:0 auto;

    margin-bottom:40px;
    margin-top:-40px;
}

#h1titleboys2{
    font-family:'Xiomara';
    font-size:3rem;

    text-align:center;

    width:100%;

    display:block;

    margin:0 auto;

    margin-bottom:0px;
    margin-top:-60px;
}

header{
    text-align:center;
}

/* =========================================
   CONTAINERS
========================================= */

.containergirls,
.containerboys{
    width:100%;
}

.containerboys{
    background-image:url("images/gray_clouds.jpg");
    background-size:cover;
}

/* =========================================
   GALLERIES BACKGROUND
========================================= */

#girls-gallery,
#boys-gallery{

    min-height:100vh;

    padding:60px 0;

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    background-attachment:fixed;
}

#girls-gallery{
    background-image:url('images/back.jpg');
}

#boys-gallery{
    background-image:url('images/confetti.jpg');
}

/* =========================================
   GRID SYSTEM
========================================= */

.cake-pics,
.cake-picsboys,
.categories-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(230px,230px));

    justify-content:center;

    gap:35px;

    padding:0 60px 60px;

    width:100%;
}

/* girls */

.cake-picsgirls,
.categories-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(230px,230px));

    justify-content:center;

    gap:35px;

    padding:0 60px 60px;

    width:100%;
}

/* =========================================
   CARDS
========================================= */

.cake-item,
.cake-itemboys,
.category-card{

    width:230px;

    aspect-ratio:5 / 6;

    overflow:hidden;

    border-radius:14px;

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

    position:relative;

    transition:transform .3s ease;
}

.cake-item{
    background-image:url('images/pinc_cloud.png');
    background-size:cover;
}

.cake-itemboys,
.category-card{
    background-image:url('images/night_sky.jpg');
    background-size:cover;
    background-position:center;
}

.cake-item:hover,
.cake-itemboys:hover,
.category-card:hover{
    transform:translateY(-5px);
}


/* girls */

.cake-itemgirls,
.category-cardgirls{

    width:230px;

    aspect-ratio:5 / 6;

    overflow:hidden;

    border-radius:14px;

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

    position:relative;

    transition:transform .3s ease;
}

.cake-itemgirls{
    background-image:url('images/pinc_cloud.png');
    background-size:cover;
}

.cake-itemgirls,
.category-cardgirls{
    background-image:url('images/pinc_cloud.png');
    background-size:cover;
    background-position:center;
}

.category-cardgirls{
    position:relative;
}

.cake-itemgirls:hover,
.cake-itemgirls:hover,
.category-cardgirls:hover{
    transform:translateY(-5px);
}

/* =========================================
   CARD IMAGES
========================================= */

.cake-item img,
.cake-itemboys img,
.category-card img{

    width:100%;
    height:100%;

    object-fit:contain;

    transition:transform .4s ease;
}

.cake-item img:hover,
.cake-itemboys img:hover,
.category-card img:hover{
    transform:scale(1.05);
}

/* girls */
.cake-itemgirls img,
.category-cardgirls img{

    width:100%;
    height:100%;

    object-fit:contain;

    transition:transform .4s ease;
}

.cake-itemgirls img:hover,
.cake-itemgirls img:hover,
.category-cardgirls img:hover{
    transform:scale(1.05);
}

/* =========================================
   CATEGORY OVERLAY
========================================= */

.category-overlay{
    position:absolute;
    inset:0;

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

    padding-bottom:15px;

    pointer-events:none;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.45) 0%,
        rgba(0,0,0,.1) 35%,
        transparent 100%
    );
}

.category-overlay h3{
    color:#fff;

    font-size:28px;

    font-family:'Xiomara';

    text-shadow:0 3px 8px rgba(0,0,0,.7);
}

/* =========================================
   STANDARD GALLERY
========================================= */

.gallery{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin-top:20px;
}

.gallery-item img{
    border-radius:10px;

    transition:transform .3s ease;
}

.gallery-item img:hover{
    transform:scale(1.03);
}

/* =========================================
   SLIDER
========================================= */

#sliderOverlay{
    position:fixed;
    inset:0;

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

    display:none;

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

    z-index:9999;
    touch-action:none;
}

.slider-container{
    position:relative;

    width:100%;
    height:100vh;

    overflow:hidden;
}

#sliderImages{
    width:100%;
    height:100%;

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

#sliderImages img{
    width:100%;
    height:100%;

    object-fit:contain;

    flex-shrink:0;

    pointer-events:none;
}

/* =========================================
   SLIDER BUTTONS
========================================= */

#prevBtn,
#nextBtn,
#prevBtn2,
#nextBtn2{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

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

    color:white;

    border:none;

    padding:12px 16px;

    font-size:2rem;

    cursor:pointer;

    z-index:10;

    border-radius:8px;
}

#prevBtn,
#prevBtn2{
    left:20px;
}

#nextBtn,
#nextBtn2{
    right:20px;
}

.close-btn{
    position:absolute;

    top:max(20px, env(safe-area-inset-top));

    right:20px;

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

    color:white;

    border:none;

    padding:10px 15px;

    font-size:20px;

    cursor:pointer;

    border-radius:8px;

    z-index:20;
}

/* =========================================
   TABLET
========================================= */

@media (max-width:1200px){

    /* FIXED BACKGROUND */

    #girls-gallery,
    #boys-gallery{

        position:relative;

        min-height:100vh;

        padding:40px 0 80px;

        overflow:hidden;

        background:none !important;
    }

    #girls-gallery::before,
    #boys-gallery::before{

        content:"";

        position:fixed;

        inset:0;

        z-index:-1;

        background-size:cover;

        background-position:center center;

        background-repeat:no-repeat;

        transform:translateZ(0);

        will-change:transform;
    }

    #girls-gallery::before{
        background-image:url('images/mobile_pin_sky.jpg');
    }

    #boys-gallery::before{
        background-image:url('images/boys_back.png');
    }

    /* NAV */

    #nav{
        justify-content:center;

        gap:20px;

        flex-wrap:wrap;

        padding:12px 20px;
    }

    #nav li{
        flex:none;

        margin:0 !important;
    }

    #nav a{
        font-size:17px;

        padding:8px 12px;
    }

    /* GRID */

    .cake-pics,
    .cake-picsgirls,
    .cake-picsboys,
    .categories-grid{

    grid-template-columns:
    repeat(auto-fit,minmax(200px,1fr));

    justify-content:center;

    gap:24px;

    padding:0 30px 50px;
}

    /* CARDS */

    .cake-item,
    .cake-itemboys,
    .cake-itemgirls,
    .category-card,
    .category-cardgirls{
        width:100%;

        max-width:240px;

        margin:auto;
    }

    /* HEADER */

    #boys-gallery header{
        margin:0;
        padding:0;
    }

    #h1title,
    #h1titleboys,
    #h1titleboys2{

        margin-top:-15px;

        padding-top:15px;
    }

    .close-btn{
        top:35px;
        right:20px;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width:768px){

    /* FIXED MOBILE BACKGROUND */

    #girls-gallery,
    #boys-gallery{

        position:relative;

        min-height:100vh;

        overflow:hidden;

        background:none !important;
    }

    #girls-gallery::before,
    #boys-gallery::before{

        content:"";

        position:fixed;

        inset:0;

        z-index:-1;

        background-size:cover;

        background-position:center center;

        background-repeat:no-repeat;

        transform:translateZ(0);

        will-change:transform;
    }

    #girls-gallery::before{
        background-image:url('images/pink_present_mobile.jpg');
    }

    #boys-gallery::before{
        background-image:url('images/boys_back.png');
    }

    header{
        margin:20px 0;
    }

    h1{
        font-size:2rem;
    }

    #boys-gallery header{
        margin:0;
        padding:0;
    }

    /* GIRLS */

#h1title{

    margin-top:-30px;

    padding-top:15px;

    font-size:1.8rem;

    width:100%;

    max-width:95%;

    margin-left:auto;
    margin-right:auto;

    text-align:center;

    line-height:1.2;

    word-break:break-word;
}

    /* BOYS */

   /* FIRST BOYS TITLE */

#h1titleboys{

    margin-top:-20px;

    padding-top:10px;

    font-size:1.8rem;

    width:100%;

    max-width:95%;

    margin-left:auto;
    margin-right:auto;

    text-align:center;

    line-height:1.1;

    word-break:break-word;
}

/* SECOND BOYS TITLE */

#h1titleboys2{

    margin-top:-5px;

    padding-top:10px;

    font-size:1.8rem;

    width:100%;

    max-width:95%;

    margin-left:auto;
    margin-right:auto;

    text-align:center;

    line-height:1.1;

    word-break:break-word;

    margin-bottom:20px;
}

    .cake-pics,
    .cake-picsboys,
    .cake-picsgirls,
    .categories-grid{

        grid-template-columns:
        repeat(auto-fit,minmax(150px,1fr));

        gap:16px;

        padding:0 15px 35px;
    }

    .cake-item,
    .cake-itemboys,
    .cake-itemgirls,
    .category-card,
    .category-cardgirls{

        width:100%;

        max-width:180px;

        margin:auto;
    }

    .gallery{
        grid-template-columns:1fr;
    }

    .category-overlay h3{
        font-size:20px;
    }

    #prevBtn,
    #nextBtn,
    #prevBtn2,
    #nextBtn2{
        font-size:1.3rem;
        padding:8px;
    }

    #nav{
        justify-content:center;

        gap:10px;

        padding:12px 10px;

        flex-wrap:wrap;
    }

    #nav li{
        flex:none;

        margin:0 !important;
    }

    #nav a{
        font-size:15px;

        padding:7px 9px;
    }

    .close-btn{
        top:40px;
        right:15px;
    }
}

#boys-gallery header{
    background:none !important;
    background-image:none !important;
}

.album-title{
    background:none !important;
    margin:0;
    padding:0;
    text-align:center;
}