/* ===========================================
   BOOKING PAGE - PART 1
   Premium Glass UI
=========================================== */

:root{
    --primary:#0D6EFD;
    --primary-dark:#084298;
    --secondary:#00B4D8;

    --gold:#FFD166;
    --gold-dark:#F4B400;

    --white:#ffffff;
    --black:#1b1b1b;

    --text:#2E3A59;
    --text-light:#6B7280;

    --bg:#F5F8FC;

    --glass:rgba(255,255,255,.18);
    --glass-border:rgba(255,255,255,.25);

    --shadow:
        0 20px 50px rgba(0,0,0,.10);

    --radius:24px;

    --transition:.35s ease;
}

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Poppins",sans-serif;

    background:
    linear-gradient(
    180deg,
    #7CC7FF 0%,
    #B8E4FF 100%);

    color:var(--text);

    overflow-x:hidden;

}

/* ========================= */

.container{

    width:min(1180px,92%);

    margin:auto;

}

/* ========================= */

.page-hero{

    position:relative;

    overflow:hidden;

    padding:130px 20px 90px;

    text-align:center;

    background:

    linear-gradient(
    135deg,
    rgba(13,110,253,.95),
    rgba(0,180,216,.85));

}

/* glow */

.page-hero::before{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    background:

    radial-gradient(circle,
    rgba(255,255,255,.35),
    transparent 70%);

    top:-120px;
    right:-120px;

    border-radius:50%;

}

.page-hero::after{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    background:

    radial-gradient(circle,
    rgba(255,209,102,.45),
    transparent 70%);

    bottom:-120px;
    left:-120px;

    border-radius:50%;

}

.hero-content{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:auto;

}

.badge-pill{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

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

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

    backdrop-filter:blur(15px);

    border-radius:50px;

    color:#fff;

    font-size:.9rem;

    margin-bottom:22px;

}

.badge-pill i{

    color:#25D366;

}

.page-hero h1{

    font-size:3rem;

    font-weight:700;

    color:#fff;

    margin-bottom:18px;

    line-height:1.2;

}

.page-hero p{

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

    line-height:1.8;

    font-size:1.05rem;

}

/* ========================= */

.booking-section{

    margin-top:-70px;

    position:relative;

    z-index:10;

    padding-bottom:80px;

}

.booking-section .container{

    display:grid;

    grid-template-columns:

    2fr 1fr;

    gap:35px;

    align-items:start;

}

/* ========================= */

.tile{

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

    backdrop-filter:blur(20px);

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

    border-radius:28px;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.tile:hover{

    transform:translateY(-5px);

}

.booking-box{

    padding:40px;

}

.booking-box h2{

    font-size:2rem;

    margin-bottom:8px;

    color:var(--primary-dark);

}

.booking-box>p{

    color:var(--text-light);

    margin-bottom:35px;

    line-height:1.7;

}

/* ===========================================
   BOOKING PAGE - PART 2
   FORM PREMIUM
=========================================== */

#bookingForm{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.form-row{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
}

.field{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.field label{
    font-size:.95rem;
    font-weight:600;
    color:var(--primary-dark);
    letter-spacing:.3px;
}

.field input,
.field select,
.field textarea{

    width:100%;
    padding:16px 18px;

    border:2px solid transparent;

    border-radius:18px;

    background:#fff;

    font-size:15px;

    font-family:inherit;

    color:var(--text);

    transition:all .3s ease;

    box-shadow:
    0 8px 20px rgba(0,0,0,.05);

}

.field textarea{

    min-height:150px;

    resize:vertical;

    line-height:1.7;

}

.field input::placeholder,
.field textarea::placeholder{

    color:#9ca3af;

}

.field input:hover,
.field select:hover,
.field textarea:hover{

    border-color:rgba(13,110,253,.18);

}

.field input:focus,
.field select:focus,
.field textarea:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:
    0 0 0 5px rgba(13,110,253,.12),
    0 15px 35px rgba(13,110,253,.15);

    transform:translateY(-2px);

}

/* Date & Time */

input[type="date"],
input[type="time"]{

    cursor:pointer;

}

/* Select */

select{

    appearance:none;

    -webkit-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23084298' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-size:18px;

    background-position:right 18px center;

}

/* Checkbox */

.consent{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-top:5px;

    padding:18px;

    border-radius:18px;

    background:rgba(13,110,253,.05);

    border:1px solid rgba(13,110,253,.08);

    color:var(--text);

    line-height:1.8;

    cursor:pointer;

}

.consent input{

    width:20px;

    height:20px;

    margin-top:2px;

    accent-color:var(--primary);

    flex-shrink:0;

}

/* Button */

.btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    border:none;

    border-radius:60px;

    padding:18px 28px;

    cursor:pointer;

    text-decoration:none;

    font-weight:700;

    font-size:1rem;

    color:#fff;

    background:
    linear-gradient(
    135deg,
    #25D366,
    #18B957);

    box-shadow:
    0 18px 35px rgba(37,211,102,.28);

    transition:all .35s ease;

}

.btn:hover{

    transform:
    translateY(-4px)
    scale(1.02);

    box-shadow:
    0 25px 45px rgba(37,211,102,.38);

}

.btn:active{

    transform:scale(.98);

}

.btn i{

    font-size:1.15rem;

}

.btn-block{

    width:100%;

}

/* Animasi */

.field{

    animation:fadeUp .7s ease both;

}

.field:nth-child(2){animation-delay:.05s;}
.field:nth-child(3){animation-delay:.10s;}
.field:nth-child(4){animation-delay:.15s;}
.field:nth-child(5){animation-delay:.20s;}
.field:nth-child(6){animation-delay:.25s;}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===========================================
   BOOKING PAGE - PART 3
   BOOKING SUMMARY
=========================================== */

.booking-summary{

    position:sticky;

    top:100px;

    padding:35px 30px;

    overflow:hidden;

}

.booking-summary::before{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    background:
    radial-gradient(circle,
    rgba(255,209,102,.35),
    transparent 70%);

    top:-120px;
    right:-120px;

    border-radius:50%;

}

.booking-summary h3{

    position:relative;

    z-index:2;

    font-size:1.6rem;

    color:var(--primary-dark);

    margin-bottom:28px;

    display:flex;

    align-items:center;

    gap:12px;

}

.booking-summary h3::before{

    content:"📋";

    font-size:1.3rem;

}

/* ========================= */

.summary-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    padding:16px 0;

    border-bottom:1px dashed rgba(0,0,0,.08);

}

.summary-row:last-of-type{

    border-bottom:none;

}

.summary-row span:first-child{

    color:var(--text-light);

    font-size:.95rem;

}

.summary-row span:last-child{

    font-weight:600;

    color:var(--primary-dark);

    text-align:right;

}

/* ========================= */

.summary-total{

    margin-top:28px;

    padding:22px;

    border-radius:22px;

    background:

    linear-gradient(
    135deg,
    #0D6EFD,
    #00B4D8);

    color:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:

    0 18px 35px rgba(13,110,253,.25);

}

.summary-total span:first-child{

    font-size:1rem;

    font-weight:500;

}

.summary-total span:last-child{

    font-size:1.9rem;

    font-weight:700;

    color:var(--gold);

    text-shadow:

    0 2px 10px rgba(0,0,0,.15);

}

/* ========================= */

.summary-note{

    margin-top:20px;

    padding:18px;

    border-radius:18px;

    background:

    rgba(13,110,253,.05);

    border:

    1px solid rgba(13,110,253,.08);

    color:var(--text-light);

    line-height:1.7;

    font-size:.92rem;

}

.summary-note i{

    color:var(--primary);

    margin-right:8px;

}

/* ========================= */

.booking-summary:hover{

    transform:translateY(-6px);

    box-shadow:

    0 30px 60px rgba(0,0,0,.12);

}

/* ========================= */

.booking-summary .summary-row{

    transition:.25s ease;

}

.booking-summary .summary-row:hover{

    padding-left:8px;

    padding-right:8px;

    background:

    rgba(13,110,253,.04);

    border-radius:12px;

}

/* ========================= */

#totalPrice{

    transition:.3s;

}

#totalPrice.updated{

    animation:pricePop .4s ease;

}

@keyframes pricePop{

    0%{

        transform:scale(.85);

        opacity:.5;

    }

    70%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

/* ===========================================
   BOOKING PAGE - PART 4
   FOOTER + FLOATING + RESPONSIVE
=========================================== */

/* =========================
   FOOTER
========================= */

footer{

    margin-top:90px;

    background:
    linear-gradient(
    180deg,
    #0B3760 0%,
    #082B4A 100%);

    color:#fff;

    padding:70px 0 25px;

    position:relative;

    overflow:hidden;

}

footer::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    top:-200px;
    right:-180px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(255,255,255,.08),
    transparent 70%);

}

.footer-grid{

    display:grid;

    grid-template-columns:
    2fr
    1fr
    1fr
    1fr;

    gap:40px;

    position:relative;

    z-index:2;

}

.footer-col h2,
.footer-col h3{

    margin-bottom:18px;

    color:#fff;

}

.footer-col p{

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

    line-height:1.8;

}

.footer-col a{

    display:block;

    margin:10px 0;

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

    text-decoration:none;

    transition:.3s;

}

.footer-col a:hover{

    color:var(--gold);

    padding-left:6px;

}

.footer-contact{

    list-style:none;

}

.footer-contact li{

    margin:14px 0;

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

}

.footer-contact i{

    width:24px;

    color:var(--gold);

}

/* ========================= */

.social-row{

    display:flex;

    gap:14px;

    margin-top:25px;

}

.social-row a{

    width:46px;
    height:46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:#fff;

    transition:.35s;

}

.social-row a:hover{

    background:var(--gold);

    color:#000;

    transform:
    translateY(-4px)
    rotate(10deg);

}

/* ========================= */

.copyright{

    margin-top:55px;

    padding-top:22px;

    border-top:

    1px solid rgba(255,255,255,.12);

    text-align:center;

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

    font-size:.9rem;

}

/* =========================
   FLOATING BUTTONS
========================= */

.floating-wa,
.back-to-top{

    position:fixed;

    right:25px;

    width:58px;
    height:58px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:1.4rem;

    text-decoration:none;

    z-index:999;

    transition:.35s;

    box-shadow:

    0 12px 28px rgba(0,0,0,.18);

}

.floating-wa{

    bottom:95px;

    background:

    linear-gradient(
    135deg,
    #25D366,
    #17B857);

}

.back-to-top{

    bottom:25px;

    background:

    linear-gradient(
    135deg,
    #0D6EFD,
    #00B4D8);

}

.floating-wa:hover,
.back-to-top:hover{

    transform:
    translateY(-5px)
    scale(1.08);

}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1100px){

.footer-grid{

grid-template-columns:
1fr
1fr;

}

.booking-section .container{

grid-template-columns:1fr;

}

.booking-summary{

position:relative;

top:0;

}

}

@media(max-width:768px){

.page-hero{

padding:110px 20px 70px;

}

.page-hero h1{

font-size:2.2rem;

}

.page-hero p{

font-size:.95rem;

}

.form-row{

grid-template-columns:1fr;

}

.booking-box{

padding:25px;

}

.booking-summary{

margin-top:25px;

padding:25px;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.social-row{

justify-content:center;

}

.footer-contact{

padding:0;

}

.footer-contact li{

justify-content:center;

}

.floating-wa,
.back-to-top{

width:52px;
height:52px;

font-size:1.2rem;

right:18px;

}

}

@media(max-width:480px){

.page-hero h1{

font-size:1.8rem;

}

.badge-pill{

font-size:.8rem;

padding:8px 15px;

}

.booking-box h2{

font-size:1.6rem;

}

.summary-total{

flex-direction:column;

gap:8px;

text-align:center;

}

.summary-total span:last-child{

font-size:1.6rem;

}

.btn{

padding:16px;

font-size:.95rem;

}

}

/* =========================
   ANIMATION
========================= */

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.tile{

animation:fadeIn .8s ease both;

}

.booking-summary{

animation-delay:.2s;

}

.booking-box{

animation-delay:.1s;

}