/* ==========================================================
   BOOKING / SETLIST BUILDER
========================================================== */


/* ==========================================================
   Hero
========================================================== */

.booking-hero{

    padding:9rem 1.5rem 4rem;

    text-align:center;
}

.booking-container{

    width:100%;

    max-width:1300px;

    margin:0 auto;
}

.booking-hero h1{

    font-size:
        clamp(2.5rem,4vw,4rem);

    margin-bottom:1rem;
}

.booking-hero p{

    max-width:700px;

    margin:0 auto;

    font-size:1.15rem;

    color:rgba(255,255,255,.8);
}

/* ==========================================================
   Booking Options
========================================================== */

.booking-options{

    display:grid;

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

    gap:24px;

    margin-bottom:32px;
}


/* ==========================================================
   Planner
========================================================== */

.planner-section{
    padding:2rem 1.5rem 6rem;
}


/* ==========================================================
   Cards
========================================================== */

.planner-card{

    background:rgba(255,255,255,.04);

    border:1px solid rgba(212,175,55,.18);

    border-radius:18px;

    padding:1.5rem;

    margin-bottom:0;

    backdrop-filter:blur(12px);
}

.planner-card h2{

    font-size:1.2rem;

    margin-bottom:1rem;

    color:var(--gold);
}

.request-layout .request-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
}


.set-duration-summary{
    margin-top:1rem;
    padding-top:1rem;

    border-top:
        1px solid rgba(212,175,55,.12);

    color:rgba(255,255,255,.6);

    font-size:.9rem;
}

.set-duration-summary strong{
    display:block;

    margin-top:.25rem;

    color:var(--gold);

    font-size:1.05rem;
}


/* ==========================================================
   Radio Buttons
========================================================== */

.option-group{

    display:flex;

    flex-direction:column;

    gap:12px;
}

.radio-option{

    display:flex;

    align-items:center;

    gap:12px;

    cursor:pointer;

    padding:.75rem 1rem;

    border-radius:12px;

    transition:.25s;
}

.radio-option:hover{
    background:rgba(255,255,255,.05);
}

.radio-option input{

    accent-color:var(--gold);

    width:18px;

    height:18px;
}

/* ==========================================================
   Main Song Builder
========================================================== */

.song-main-grid{

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:24px;

    margin-bottom:32px;
}


.song-main-grid .song-picker,
.song-main-grid .selected-songs{

    background:
        rgba(255,255,255,.03);

    border:
        1px solid rgba(212,175,55,.15);

    border-radius:18px;

    min-height:520px;

    overflow:hidden;
}


/* ==========================================================
   Duration
========================================================== */

.time-display{

    font-size:2.8rem;

    font-weight:700;

    color:var(--gold);

    margin:.5rem 0 1rem;
}

.progress-bar{

    width:100%;

    height:10px;

    background:rgba(255,255,255,.08);

    border-radius:999px;

    overflow:hidden;

    margin-bottom:1rem;
}

.progress-fill{

    width:0%;

    height:100%;

    background:var(--gold);

    transition:.35s ease;
}

.remaining-time{

    color:rgba(255,255,255,.8);

    font-size:.95rem;
}


/* ==========================================================
   Main Song Selection Panel
========================================================== */

.song-selection{

    background:rgba(255,255,255,.03);

    border:1px solid rgba(212,175,55,.15);

    border-radius:18px;

    padding:0;

    display:flex;

    flex-direction:column;

    min-height:0;

    overflow:hidden;

    box-sizing:border-box;
}


/* ==========================================================
   Song Header
========================================================== */

.song-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:2rem;

    flex-wrap:wrap;
}

.song-header h2{
    font-size:2rem;
}

.song-header input{

    flex:1;

    min-width:260px;

    padding:14px 18px;

    border-radius:12px;

    border:1px solid rgba(212,175,55,.2);

    background:#17213F;

    color:white;

    font-size:1rem;
}

.song-header input::placeholder{
    color:rgba(255,255,255,.45);
}


/* ==========================================================
   Song Picker
========================================================== */

.song-picker{

    flex:1 1 0;

    min-height:0;

    padding:2rem;

    padding-top:1.5rem;

    display:flex;

    flex-direction:column;

    box-sizing:border-box;

    border-top:
        1px solid rgba(212,175,55,.15);
}

.song-picker .song-header{
    margin-bottom:1.25rem;
}

.song-picker .song-header h2{

    font-size:1.4rem;

    color:var(--gold);
}


/* ==========================================================
   Song List
========================================================== */

.song-list{

    flex:1 1 0;

    min-height:0;

    overflow-y:auto;
}

.song-row{

    display:grid;

    grid-template-columns:1fr 70px 28px;

    align-items:center;

    gap:10px;

    padding:7px 14px;

    border-radius:10px;

    transition:.25s;

    cursor:pointer;

    border:1px solid transparent;
}

.song-row:hover{

    background:rgba(255,255,255,.04);

    border-color:
        rgba(212,175,55,.18);
}

.song-info{

    display:flex;

    align-items:baseline;

    gap:6px;

    min-width:0;
}

.song-info strong{
    font-size:1rem;
}

.song-info span{

    color:rgba(255,255,255,.6);

    font-size:.9rem;
}

.song-length{

    text-align:right;

    color:var(--gold);

    font-weight:600;
}

.song-row input{

    width:18px;

    height:18px;

    accent-color:var(--gold);
}


/* ==========================================================
   Selected Setlist
========================================================== */

.selected-songs{

    flex:1 1 0;

    min-height:0;

    padding:2rem;

    display:flex;

    flex-direction:column;

    box-sizing:border-box;
}

.selected-songs-header{

    display:grid;

    grid-template-columns:
        1fr
        auto
        auto;

    align-items:center;

    gap:20px;

    margin-bottom:1rem;
}

.selected-songs-header h2{

    font-size:2rem;

    margin:0;
}

#selected-song-count{

    color:var(--gold);

    font-size:.9rem;

    font-weight:600;
}

#selected-songs-empty{

    color:rgba(255,255,255,.55);

    margin:0;
}

.selected-song-list{

    flex:1 1 0;

    min-height:0;

    overflow-y:auto;
}


/* ==========================================================
   Selected Song
========================================================== */

.selected-song{

    display:grid;

    grid-template-columns:
        36px 1fr auto auto;

    align-items:center;

    gap:5px;

    padding:5px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(212,175,55,.12);

    border-radius:10px;

    animation:selectedSongIn .2s ease;
}

.selected-duration{

    display:flex;

    align-items:center;

    gap:8px;

    white-space:nowrap;
}


.selected-duration-label{

    color:
        rgba(255,255,255,.55);

    font-size:.8rem;
}


.selected-duration strong{

    color:var(--gold);

    font-size:1.2rem;
}

.selected-song-number{

    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(212,175,55,.1);

    color:var(--gold);

    font-size:.85rem;

    font-weight:700;
}

.selected-song-info{

    display:flex;

    align-items:baseline;

    gap:6px;

    min-width:0;
}

.selected-song-info strong{
    font-size:1rem;
}

.selected-song-info span{

    color:rgba(255,255,255,.55);

    font-size:.9rem;

    margin:0;
}

.selected-song-length{

    color:var(--gold);

    font-size:.9rem;

    font-weight:600;
}

.remove-song{

    border:0;

    background:transparent;

    color:rgba(255,255,255,.45);

    width:32px;

    height:32px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:8px;

    cursor:pointer;

    font-size:1.2rem;

    transition:.2s ease;
}

.remove-song:hover{

    background:rgba(255,255,255,.08);

    color:white;
}

.selected-progress{

    margin-bottom:1.25rem;
}


.selected-progress .progress-bar{

    margin-bottom:.5rem;
}


.selected-progress .remaining-time{

    margin:0;

    text-align:right;

    font-size:.8rem;
}

@media (max-width:768px){

    .selected-songs-header{

        grid-template-columns:
            1fr
            auto;

        gap:8px 12px;
    }


    .selected-songs-header h2{

        grid-column:1 / -1;
    }


    .selected-duration{

        justify-self:start;
    }


    #selected-song-count{

        justify-self:end;
    }

}

/* ==========================================================
   SONG REQUEST SECTION
========================================================== */

.request-picker{

    padding:2rem;

    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,.045),
            rgba(255,255,255,.015)
        );

    border:
        1px solid rgba(212,175,55,.18);

    border-radius:18px;
}

/* ==========================================================
   Song Request Layout
========================================================== */

.request-layout{

    display:grid;

    grid-template-columns:
        320px
        1fr;

    gap:24px;

    align-items:stretch;

    margin-bottom:32px;
}

@media (max-width:900px){

    .booking-options{

        grid-template-columns:1fr;
    }


    .song-main-grid{

        grid-template-columns:1fr;
    }


    .request-layout{

        grid-template-columns:1fr;
    }

}


/* ==========================================================
   Request Heading
========================================================== */

.request-heading{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    justify-content:flex-start;
    text-align:left;
    gap:14px;
    margin-bottom:1.5rem;
    width:100%;
}

.request-heading > div:last-child{
    flex:1;
    min-width:0;
}

.request-heading p{
    margin:0;
    max-width:none;
    color:rgba(255,255,255,.58);
    font-size:.9rem;
    line-height:1.55;
}

.request-icon{
    flex-shrink:0;

    width:42px;
    height:42px;

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

    border-radius:12px;

    background:rgba(212,175,55,.1);

    border:1px solid rgba(212,175,55,.2);

    color:var(--gold);

    font-size:1.4rem;
}

.request-heading h2{
    margin:0;

    font-size:1.5rem;

    color:var(--gold);
}

.request-heading p{
    margin:0;

    color:rgba(255,255,255,.58);

    font-size:.9rem;

    line-height:1.55;
}


/* ==========================================================
   Requested Songs
========================================================== */

.request-items{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.request-item{

    display:grid;

    grid-template-columns:
        36px 1fr auto auto;

    align-items:center;

    gap:5px;

    padding:5px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(212,175,55,.12);

    border-radius:10px;

    animation:selectedSongIn .2s ease;
}


.request-number{

    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(212,175,55,.1);

    color:var(--gold);

    font-size:.85rem;

    font-weight:700;
}


.request-info-text{

    display:flex;

    align-items:baseline;

    gap:6px;

    min-width:0;
}


.request-info-text strong{

    font-size:1rem;

}


.request-info-text span{

    color:rgba(255,255,255,.55);

    font-size:.9rem;

}


.request-item .request-price{

    margin:0;

    padding:0;

    border:0;

    background:transparent;

    color:var(--gold);

    font-size:.9rem;

    font-weight:600;

    white-space:nowrap;
}


.remove-request{

    border:0;

    background:transparent;

    color:rgba(255,255,255,.45);

    width:32px;

    height:32px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:8px;

    cursor:pointer;

    font-size:1.2rem;

    transition:.2s ease;
}


.remove-request:hover{

    background:rgba(255,255,255,.08);

    color:white;

}


/* ==========================================================
   Request Form
========================================================== */

.request-form{
    display:grid;

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

    align-items:end;

    gap:14px;

    padding:1.25rem;

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

    border:1px solid rgba(255,255,255,.06);

    border-radius:14px;
}


/* ==========================================================
   Request Inputs
========================================================== */

.request-input-group{
    display:flex;

    flex-direction:column;

    gap:6px;
}

.request-input-group label{
    color:rgba(255,255,255,.75);

    font-size:.8rem;

    font-weight:600;

    text-align:left;
}

.request-input-group input{
    width:100%;

    padding:11px 13px;

    border-radius:9px;

    border:1px solid rgba(212,175,55,.18);

    background:#17213F;

    color:white;

    font-family:inherit;

    font-size:.9rem;

    outline:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.request-input-group input::placeholder{
    color:rgba(255,255,255,.35);
}

.request-input-group input:focus{
    border-color:var(--gold);

    background:#1a2545;

    box-shadow:
        0 0 0 3px rgba(212,175,55,.08);
}


/* ==========================================================
   Add Request Button
========================================================== */

.request-button{
    display:flex;

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

    gap:7px;

    height:42px;

    padding:0 18px;

    border:1px solid var(--gold);

    border-radius:9px;

    background:var(--gold);

    color:var(--navy);

    font-family:inherit;

    font-size:.9rem;

    font-weight:700;

    cursor:pointer;

    white-space:nowrap;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.request-button span{
    font-size:1.1rem;
    line-height:1;
}

.request-button:hover{
    transform:translateY(-2px);

    background:#e1bd42;

    box-shadow:
        0 6px 18px rgba(212,175,55,.18);
}

.request-button:active{
    transform:translateY(0);
}


/* ==========================================================
   Request Summary
========================================================== */

.request-summary{
    margin-top:1.5rem;

    padding-top:1.25rem;

    border-top:1px solid rgba(255,255,255,.07);
}

.request-summary-header{
    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:.75rem;
}

.request-summary-header h3{
    margin:0;

    font-size:1rem;

    font-weight:600;
}

#request-count{
    color:var(--gold);

    font-size:.8rem;

    font-weight:600;
}


/* ==========================================================
   Request Items
========================================================== */

.request-items{
    display:flex;

    flex-direction:column;

    gap:6px;
}

.no-requests{
    margin:0;

    padding:.8rem 1rem;

    border-radius:9px;

    background:rgba(255,255,255,.025);

    color:rgba(255,255,255,.4);

    font-size:.85rem;

    text-align:center;
}


/* ==========================================================
   Request Price
========================================================== */

.request-price{
    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:1rem;

    padding:.8rem 1rem;

    border-radius:10px;

    background:rgba(212,175,55,.06);

    border:1px solid rgba(212,175,55,.12);
}

.request-item-price{

    color:var(--gold);

    font-size:.9rem;

    font-weight:600;

    white-space:nowrap;
}

.request-price span{
    color:rgba(255,255,255,.65);

    font-size:.85rem;
}

.request-price strong{
    color:var(--gold);

    font-size:1rem;
}


/* ==========================================================
   Mobile
========================================================== */

@media (max-width:768px){

    .request-picker{
        padding:1.25rem;
    }

    .request-heading{
        gap:12px;
    }

    .request-icon{
        width:36px;
        height:36px;

        font-size:1.2rem;
    }

    .request-heading h2{
        font-size:1.3rem;
    }

    .request-form{
        grid-template-columns:1fr;

        padding:1rem;
    }

    .request-button{
        width:100%;
    }

}

/* ==========================================================
   Booking Enquiry
========================================================== */

.booking-submit{
    margin-top:2rem;
}

.booking-enquiry-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:16px;

    margin-top:1rem;
    margin-bottom:1.5rem;
}

.booking-enquiry-wide{
    grid-column:1 / -1;
}

.booking-submit .request-button{
    margin-top:1rem;
}

@media (max-width:768px){

    .booking-enquiry-grid{
        grid-template-columns:1fr;
    }

    .booking-enquiry-wide{
        grid-column:auto;
    }

}


/* ==========================================================
   Scrollbars
========================================================== */

.selected-song-list::-webkit-scrollbar{
    width:6px;
}

.selected-song-list::-webkit-scrollbar-track{

    background:rgba(255,255,255,.03);

    border-radius:10px;
}

.selected-song-list::-webkit-scrollbar-thumb{

    background:rgba(212,175,55,.35);

    border-radius:10px;
}


/* ==========================================================
   Animation
========================================================== */

@keyframes selectedSongIn{

    from{

        opacity:0;

        transform:translateY(-5px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }

}


/* ==========================================================
   Mobile
========================================================== */

@media (max-width:900px){

    .planner-grid{

        grid-template-columns:1fr;
    }

    .planner-sidebar{

        display:grid;

        gap:20px;
    }

    .planner-card{
        margin-bottom:0;
    }

    .song-selection{
        min-height:700px;
    }

}


@media (max-width:768px){

    .booking-hero{
        padding-top:7rem;
    }

    .song-row{

        grid-template-columns:
            1fr 55px 24px;

        gap:12px;

        padding:12px;
    }

    .song-header h2{
        font-size:1.6rem;
    }

    .time-display{
        font-size:2.2rem;
    }

    .song-header input{
        min-width:100%;
    }

    .selected-songs-header{

        align-items:flex-start;

        flex-direction:column;

        gap:6px;
    }

    .selected-songs-header h2{
        font-size:1.6rem;
    }

    .selected-song{

        grid-template-columns:
            30px 1fr auto;

        gap:10px;

        padding:10px;
    }

    .selected-song-length{
        display:none;
    }

    .selected-song-number{

        width:28px;

        height:28px;
    }

}