/* =========================
DETAIL PAGE
========================= */

.notes-title{

    font-size:26px;

    font-weight:800;

    color:#082038;

    margin-bottom:30px;

    display:flex;

    align-items:center;

    gap:14px;

}

.notes-title::before{

    content:"i";

    width:24px;

    height:24px;

    border-radius:50%;

    background:#1ca3d8;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:14px;

    font-weight:700;

    flex-shrink:0;

}

.activity-detail{

    background:#f5f7fb;

    padding:80px 40px;

}

.activity-container{

    max-width:1500px;

    margin:auto;

    display:grid;

    grid-template-columns:
    1.3fr 0.72fr 0.82fr;

    gap:35px;

    align-items:stretch;
        margin-top: 2rem;

}

.activity-middle,
.activity-sidebar{

    display:flex;

    flex-direction:column;

    gap:24px;

}


/* =========================
IMAGE
========================= */

.activity-image{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.slider{

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    box-shadow:
    0 10px 40px rgba(0,0,0,0.08);

}

.slide{

    width:100%;

    height:720px;

    object-fit:cover;

    display:none;

}

.slide.active{

    display:block;

}

.bullets{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-top:8px;

}

.bullet{

    width:10px;

    height:10px;

    border-radius:50%;

    

}

.bullet.active{

    background:#1684ad;

}


/* =========================
NOTES
========================= */

.activity-notes{

    background:#fff;

    border-radius:24px;

    padding:30px;

    box-shadow:
    0 10px 35px rgba(0,0,0,0.05);

}

.activity-notes p{

    font-size:15px;

    line-height:1.9;

    color:#56606d;

    margin-bottom:14px;

}


/* =========================
RIGHT COLUMN
========================= */

.activity-info{

    display:flex;

    flex-direction:column;

    gap:24px;

}


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

.boat-card{

    background:#fff;

    border-radius:24px;

    padding:32px;

    box-shadow:
    0 10px 35px rgba(0,0,0,0.05);

}


/* =========================
HEADER CARD
========================= */

.boat-main-card{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.boat-badge{

       display:inline-block;
    margin-top:8px;
    padding:6px 12px;

    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;

    color:#fff;
    background:linear-gradient(135deg,#0d6efd,#091133);

    border-radius:30px;

    box-shadow:
        0 3px 8px rgba(0,0,0,.15);

    transition:.3s ease;

}

.boat-title{

    font-size:46px;

    line-height:1;

    font-weight:900;

    color:#0f1720;

}

.boat-description{

    font-size:15px;

    line-height:1.9;

    color:#66707d;

}


/* =========================
DETAILS CARD
========================= */

.boat-details-card{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.boat-detail-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

}

.boat-detail-icon{

    width:52px;

    height:52px;

    border-radius:16px;

    background:#f4f8fb;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

}

.boat-detail-item h4{

    font-size:15px;

    margin-bottom:6px;

    color:#111;

}

.boat-detail-item p{

    font-size:14px;

    color:#66707d;

    line-height:1.7;

}


/* =========================
BOOKING CARD
========================= */

.booking-card{

    background:#fff;

    border-radius:24px;

    padding:28px;

    box-shadow:
    0 6px 20px rgba(15,23,42,0.04);

}


/* =========================
TITLE
========================= */

.booking-title{
    display:inline-block;
    margin-top:8px;
    padding:6px 12px;

    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;

    color:#fff;
    background:linear-gradient(135deg,#0d6efd,#091133);

    border-radius:30px;

    box-shadow:
        0 3px 8px rgba(0,0,0,.15);

    transition:.3s ease;
}


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

.booking-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

.booking-full{

    grid-column:1/-1;

}


/* =========================
LABEL
========================= */

.booking-section label{

    display:block;

    margin-bottom:10px;

    font-size:14px;

    font-weight:700;

    color:#17324b;

}


/* =========================
INPUT ICON
========================= */

.booking-input-icon{

    position:relative;

}

.booking-input-icon i{

    position:absolute;

    left:18px;

    top:25%;

    transform:translateY(-25%);

    font-size:18px;

    color:#4f6b85;

    z-index:2;

}


/* =========================
INPUTS
========================= */

.calendar,
select{

    width:100%;

    height:58px;

    border-radius:14px;

    border:1px solid #d9e3ea;

    background:#fff;

    padding:0 18px 0 52px;

    font-size:14px;

    color:#17324b;

    outline:none;

    transition:.3s;

}

.calendar:focus,
select:focus{

    border-color:#1ca3d8;

    box-shadow:
    0 0 0 4px rgba(28,163,216,0.08);

}


/* =========================
HELP
========================= */

.booking-help{

    margin-top:-20px;

    font-size:13px;

    color:#6c7b89;

}


/* =========================
SUMMARY
========================= */

.booking-summary{

    margin-top:24px;

    background:#f7fafc;

    border-radius:18px;

    padding:22px;

}

.booking-summary-title{

    font-size:18px;

    font-weight:800;

    color:#07233d;

    margin-bottom:20px;

}


/* =========================
LINES
========================= */

.summary-line{

    display:flex;

    justify-content:space-between;

    margin-bottom:14px;

    font-size:14px;

    color:#31465c;

}


/* =========================
TOTAL
========================= */

.summary-total{

    margin-top:20px;

    padding-top:18px;

    border-top:1px solid #dbe5ec;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.summary-total span{

    font-size:16px;

    font-weight:800;

    color:#07233d;

}

.summary-price{

    font-size:28px;

    font-weight:900;

    color:#07233d;

}


/* =========================
BTN
========================= */

.reserve-btn{

    width:100%;

    height:60px;

    border:none;

    border-radius:14px;

    background:#ffc107;

    color:#111;

    font-size:16px;

    font-weight:800;

    cursor:pointer;

    margin-top:22px;

    transition:.3s;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    box-shadow:
    0 8px 20px rgba(255,193,7,0.22);

}

.reserve-btn:hover{

    transform:translateY(-2px);

}


/* =========================
BTN ICON
========================= */

.reserve-btn i{

    font-size:18px;

}


/* =========================
PRICING CARD
========================= */

.pricing-card{

    background:#fff;

    border-radius:24px;

    padding:28px;

    box-shadow:
    0 6px 20px rgba(15,23,42,0.04);

}


/* =========================
TITLE
========================= */

.pricing-title{

        display:inline-flex;
    margin-top:8px;
    padding:6px 12px;

    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;

    color:#fff;
    background:linear-gradient(135deg,#0d6efd,#091133);

    border-radius:30px;

    box-shadow:
        0 3px 8px rgba(0,0,0,.15);

    transition:.3s ease;

}


/* =========================
TABLE
========================= */

.price-table{

    width:100%;

    border-collapse:separate;

    border-spacing:0;

    overflow:hidden;

    border-radius:14px;

    border:1px solid #dbe5ec;

}


/* HEADER */

.price-table th{

    background:#f7fafc;

    color:#17324b;

    font-size:14px;

    font-weight:700;

    text-align:left;

    padding:16px 18px;

    border-bottom:1px solid #dbe5ec;

}


/* CELLS */

.price-table td{

    padding:15px 18px;

    border-bottom:1px solid #edf2f7;

    font-size:14px;

    color:#31465c;

}


/* LAST ROW */

.price-table tr:last-child td{

    border-bottom:none;

}


/* PRICE */

.price-table td:last-child{

    font-weight:800;

    color:#07233d;

}


/* INFO */

.price-info{

    margin-top:18px;

    display:flex;

    align-items:center;

    gap:10px;

    font-size:13px;

    color:#5f7082;

    line-height:1.7;

}


/* ICON */

.price-info i{

    font-size:20px;

    color:#17324b;

    flex-shrink:0;

}


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

@media(max-width:1200px){

    .activity-container{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .activity-detail{

        padding:40px 20px;

    }

    .slide{

        height:420px;

    }

    .booking-grid{

        grid-template-columns:1fr;

    }

    .boat-title{

        font-size:34px;

    }

    .boat-card{

        padding:24px;

    }

}


/* =========================
LEFT COLUMN
========================= */

.activity-image{

    display:flex;

    flex-direction:column;

    gap:22px;

}


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

.slider{

    position:relative;

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    padding:14px;

    box-shadow:
    0 10px 35px rgba(0,0,0,0.05);

}

.slides{

    position:relative;

}

.slide{

    width:100%;

    height:620px;

    object-fit:cover;

    border-radius:20px;

    display:none;

}

.slide.active{

    display:block;

}


/* =========================
ARROWS
========================= */

.slider-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#16324a;

    font-size:42px;

    cursor:pointer;

    z-index:10;

    box-shadow:
    0 4px 14px rgba(0,0,0,0.08);

}

.slider-arrow.prev{

    left:28px;

}

.slider-arrow.next{

    right:28px;

}


/* =========================
THUMBNAILS
========================= */

.gallery-thumbs{

    display:flex;

    gap:12px;

}

.gallery-thumb{

    width:110px;

    height:80px;

    border-radius:14px;

    overflow:hidden;

    cursor:pointer;

    border:3px solid transparent;

    transition:.3s;

    flex-shrink:0;

}

.gallery-thumb.active{

    border-color:#1ca3d8;

}

.gallery-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

}


/* =========================
BULLETS
========================= */

.bullets{

    display:flex;

    justify-content:center;

    gap:12px;

}

.bullet{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#d7dde4;

}

.bullet.active{

    background:#1ca3d8;

}


/* =========================
NOTES
========================= */

.activity-notes{

    background:#fff;

    border-radius:28px;

    padding:34px;

    box-shadow:
    0 10px 35px rgba(0,0,0,0.05);

}

.notes-title{

        display:inline-flex;
    margin-top:8px;
    padding:6px 12px;

    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;

    color:#fff;
    background:linear-gradient(135deg,#0d6efd,#091133);

    border-radius:30px;

    box-shadow:
        0 3px 8px rgba(0,0,0,.15);

    transition:.3s ease;

}


/* =========================
LIST
========================= */

.notes-list{

    display:flex;

    flex-direction:column;

    gap:18px;

    list-style:none;

    padding:0;

    margin:0;

}

.notes-list li{

    font-size:17px;

    color:#31465c;

    line-height:1.7;

}


/* =========================
BOTTOM BOX
========================= */

.notes-bottom{

    margin-top:35px;

    background:#f2f9fd;

    border-radius:20px;

    padding:22px;

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.notes-bottom-icon{

    font-size:34px;

}

.notes-bottom strong{

    display:block;

    margin-bottom:6px;

    color:#16324a;

}

.notes-bottom p{

    margin:0;

    color:#5a6b7d;

    line-height:1.7;

}


.boat-separator{

    width:100%;

    height:1px;

    background:#e8edf2;

    margin-top:10px;

}

.boat-advice{

    margin-top:10px;

    background:#f2f9fd;

    border-radius:22px;

    padding:24px;

    display:flex;

    gap:18px;

}

.boat-advice-icon{

    font-size:28px;

}


/* =========================
COLUMN FIX
========================= */




/* FORCE VISUAL BALANCE */

.activity-middle .boat-card{

    flex:1;

}


/* RIGHT COLUMN */

.activity-sidebar{

    position:relative;

}


/* SAME CARD SPACING */

.activity-sidebar .boat-card{

    margin:0;

}

.briefing-alert{

    margin-top:20px;

    background:#fff8e8;

    border:1px solid #ffe2a8;

    border-radius:18px;

    padding:18px;

    display:flex;

    gap:14px;

    align-items:flex-start;

}

.briefing-icon{

    font-size:26px;

    flex-shrink:0;

}

.briefing-alert strong{

    display:block;

    font-size:14px;

    font-weight:800;

    color:#7a4d00;

    margin-bottom:6px;

}

.briefing-alert p{

    margin:0;

    font-size:13px;

    line-height:1.6;

    color:#6b5a32;

}


.other-boats-box{
margin-top:25px;
background:#fff;
border-radius:18px;
padding:20px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.other-boats-title{
    display:inline-flex;
    margin-top:8px;
    padding:6px 12px;

    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;

    color:#fff;
    background:linear-gradient(135deg,#0d6efd,#091133);

    border-radius:30px;

    box-shadow:
        0 3px 8px rgba(0,0,0,.15);

    transition:.3s ease;
}

.other-boats-list{
display:flex;
flex-direction:column;
gap:14px;
}

.other-boat-item{
display:flex;
align-items:center;
gap:14px;
padding:10px;
border-radius:12px;
text-decoration:none;
color:#111;
border:1px solid #eee;
transition:.2s;
}

.other-boat-item:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.other-boat-thumb{
width:90px;
height:70px;
overflow:hidden;
border-radius:10px;
flex-shrink:0;
}

.other-boat-thumb img{
width:100%;
height:100%;
object-fit:cover;
}

.other-boat-content{
font-size:15px;
font-weight:600;
}