/* ==========================================================================
   BOAT DETAIL — GALLERY & META
   ========================================================================== */

/* ---- Main container spacing ---- */
body .main > .container { padding-top: 40px; }
@media (max-width: 767.98px) {
    body .main > .container { padding-top: 0; }
}
/* Only the boat detail page */
@media (min-width: 1400px){
    #boat-detail.container{ max-width: 1360px; }   /* try 1360–1440 */
}
@media (min-width: 1200px){
    #boat-detail .row{ --bs-gutter-x: 2rem; }      /* a touch more breathing room */
}

/* ---- Gallery sizing ---- */
#mainCarousel { margin-top: 20px; }
#mainCarousel, #thumbCarousel { width: 100%; max-width: 100%; }

#mainCarousel .f-carousel__slide { max-height: 573px; height: auto !important; overflow: hidden; }
@media (max-width: 767.98px) {
    #mainCarousel .f-carousel__slide { max-height: 250px !important; }
}
#mainCarousel .f-carousel__slide img {
    display: block; width: 100%; height: auto; object-fit: contain; object-position: center;
}

/* Improve touch behavior (manual fallback swipe) */
#mainCarousel .f-carousel__viewport { overflow: hidden; touch-action: pan-y; }

/* ---- Thumbnails ---- */
#thumbCarousel { margin-top: 20px; }
#thumbCarousel .f-carousel__track { gap: 10px; }
#thumbCarousel .f-carousel__slide { width: 120px !important; flex: 0 0 120px !important; }
#thumbCarousel .f-carousel__slide img {
    width: 100%; height: 80px; object-fit: cover; cursor: pointer; border-radius: 4px; transition: opacity .2s ease;
}
#thumbCarousel .f-carousel__slide img:hover { opacity: .8; }
/* Active thumb (support both class names) */
#thumbCarousel .f-carousel__slide.is-active img,
#thumbCarousel .f-carousel__slide.is-nav-selected img { border: 2px solid rgba(53,149,209,1); opacity: 1; }
#thumbCarousel .f-carousel__slide:not(.is-active):not(.is-nav-selected) img { opacity: .7; }

/* ---- Desktop-only nav arrows: bigger + reveal on hover ---- */
/* ---- Desktop-only nav arrows: bigger + reveal on hover (fixed) ---- */
@media (min-width: 992px) {
    /* Reset any theme button styles inside the carousel */
    #mainCarousel .f-carousel__nav,
    #mainCarousel .f-carousel__nav button,
    #mainCarousel .f-button,
    #mainCarousel .is-prev,
    #mainCarousel .is-next {
        appearance: none;
        -webkit-appearance: none;
        box-shadow: none !important;
        outline: none !important;
        border: 0;                 /* will be overridden below */
        background: transparent;   /* will be overridden below */
        padding: 0;
    }

    /* Actual arrow style */
    #mainCarousel .f-carousel__nav,
    #mainCarousel .is-prev,
    #mainCarousel .is-next {
        position: absolute; top: 50%; transform: translateY(-50%);
        width: 64px; height: 64px;
        color: #fff !important;
        font-size: 64px; line-height: 1;
        display: flex; align-items: center; justify-content: center;
        z-index: 10; opacity: 0; pointer-events: none;
        transition: opacity .2s ease, background .2s ease, transform .2s ease;
    }

    #mainCarousel .f-carousel__nav--prev, #mainCarousel .is-prev { left: 12px; }
    #mainCarousel .f-carousel__nav--next, #mainCarousel .is-next { right: 12px; }

    /* Reveal on hover/focus */
    #mainCarousel:hover .f-carousel__nav,
    #mainCarousel:hover .is-prev,
    #mainCarousel:hover .is-next,
    #mainCarousel .f-carousel__nav:focus-visible,
    #mainCarousel .is-prev:focus-visible,
    #mainCarousel .is-next:focus-visible {
        opacity: 1; pointer-events: auto;
    }

    #mainCarousel .f-carousel__nav:hover,
    #mainCarousel .is-prev:hover,
    #mainCarousel .is-next:hover,
    #mainCarousel .f-carousel__nav:focus-visible,
    #mainCarousel .is-prev:focus-visible,
    #mainCarousel .is-next:focus-visible {
        background: rgba(0,0,0,.55) !important;
        transform: translateY(-50%) scale(1.06);
    }

    /* If Fancyapps injects SVG icons, make them nice and big */
    #mainCarousel .f-carousel__nav svg,
    #mainCarousel .f-button svg {
        width: 28px; height: 28px; stroke-width: 2.5;
    }
}

/* Hide nav on mobile */
@media (max-width: 991.98px) {
    #mainCarousel .f-carousel__nav,
    #mainCarousel .is-prev,
    #mainCarousel .is-next { display: none !important; }
}

/* ---- Product header/meta ---- */
.product-slider-wrap { box-shadow: none !important; }
.product-detail .vessel-meta { padding: 0 !important; }
.product-detail .vessel-meta .title,
.product-detail .vessel-meta .location,
.product-detail .vessel-meta .price { margin: 0 !important;  font-family: "Poppins", Sans-serif; }
.product-detail .vessel-meta .location{ font-size: 16px; }
#boat-detail .product-detail .vessel-meta svg { margin-right: 5px; }

/* ==========================================================================
   FALLBACK LIGHTBOX (used by manual JS when Fancybox not present)
   ========================================================================== */
.boat-lightbox {
    position: fixed; inset: 0; background: rgba(0,0,0,.95);
    z-index: 9999; display: flex; align-items: center; justify-content: center;
    animation: fadeIn .3s ease;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.lightbox-container {
    position: relative; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.lightbox-track { max-width: 90vw; max-height: 90vh; }
.lightbox-slide { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.lightbox-slide img { max-width: 90vw; max-height: 90vh; object-fit: contain; user-select: none; }

.lightbox-close {
    position: absolute; top: 20px; right: 30px;
    background: none; border: none; color: #fff; font-size: 40px;
    cursor: pointer; z-index: 10001; opacity: .8; transition: opacity .2s;
    line-height: 1; padding: 0; width: 40px; height: 40px;
}
.lightbox-close:hover { opacity: 1; }

.lightbox-prev, .lightbox-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    /*background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.3);*/
    color: #fff; font-size: 30px; width: 50px; height: 50px; border-radius: 50%;
    cursor: pointer; z-index: 10001; opacity: .7; transition: all .2s;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
.lightbox-prev:hover, .lightbox-next:hover { opacity: 1; background: rgba(255,255,255,.2); }
.lightbox-prev { left: 20px; } .lightbox-next { right: 20px; }
.lightbox-counter {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    color: #fff; font-size: 16px; background: rgba(0,0,0,.5); padding: 8px 16px; border-radius: 20px; z-index: 10001;
}
@media (max-width: 768px) {
    .lightbox-prev, .lightbox-next { width: 40px; height: 40px; font-size: 24px; }
    .lightbox-close { font-size: 30px; top: 10px; right: 15px; }
}

/* ==========================================================================
   SIDEBAR / INFO BOXES / BUTTONS / SPECS
   ========================================================================== */
#boat-detail .inner-table { width: 100%; display: block; background: #fff; }
#boat-detail .inner-table ul { width: 100%; display: block; padding: 0; margin: 0; }
#boat-detail .inner-table ul li {
    width: 100%; display: inline-block; background: #fff; padding: 15px 30px;
}
#boat-detail .inner-table ul li:nth-child(odd) { background: #f1f3f7; }
#boat-detail .inner-table ul li span { width: 50%; float: left; color: #288dc1; }
#boat-detail .inner-table strong { font-weight: 300; font-size: 14px; }
#boat-detail .listing-meta .button:first-of-type {
    margin-bottom: 6px; display: inline-block; color: #fff; width: 100%; text-align: center; border-radius: 0;
}

#boat-detail .contact-box {
    background-color: #f1f3f7; border: 1px solid #f1f3f7; padding: 20px; margin-bottom: 20px;
}
#boat-detail .contact-box h6 { font-size: 1.25em; color: #333; }
#boat-detail .contact-box img { width: 125px; }
#boat-detail .contact-box .contact-info { padding: 12px; }
#boat-detail .listing-meta .inner-table li span {
    color: var(--e-global-color-primary); font-size: 14px; font-weight: 600;
}

/* Boat detail – center broker card on small screens */
@media (max-width: 767.98px) {
    .listing-meta .contact-box .row {
        justify-content: center;
        text-align: center;
    }
    .listing-meta .contact-box .avatar {
        text-align: center;
    }
    .listing-meta .contact-box img.rounded-circle {
        display: block;
        margin: 0 auto;
    }
    .listing-meta .contact-box .contact-info {
        text-align: center;
    }
    .listing-meta .contact-box .contact-info .tel,
    .listing-meta .contact-box .contact-info div {
        display: inline-flex;
        justify-content: center;
        width: 100%;
    }
}

/* “Sold” label */
#boat-detail .product .custom_label_div .sold {
    background: #0879dc; position: absolute; left: 0; top: 0; color: #fff; padding: 6px;
}

/* Product description & specs */
#boat-detail .product-description-wrap { margin-top: 60px; }
#boat-detail .product-description-wrap h3 {
    font-weight: 300; margin: 15px 0; padding-bottom: 8px; border-bottom: 1px solid #333;
}
#boat-detail .product-specifications { margin-top: 60px; }
#boat-detail .product-specifications dl { border-bottom: 1px solid #eaeaea; }
#boat-detail .product-specifications dt { font-size: 16px; font-weight: 300; }
#boat-detail .product-specifications dd {
    font-weight: 100; margin-bottom: .5rem; font-size: 13px; margin-left: 0; min-height: 20px;
}

/* Buttons */
#boat-detail a.button.blue {
    background-color: var(--e-global-color-primary);
    color: #fff; border: 1px solid #fff; text-transform: uppercase;
}
#boat-detail a.button.blue:hover {
    background-color: #fff; border: 1px solid var(--e-global-color-primary); color: var(--e-global-color-primary);
}
@media (max-width: 544px) {
    #boat-detail a.button.blue { padding: 17px 30px; }
}
.gold-btn,
#boat-detail #emailBrokerBtn {
    background-color: var(--e-global-color-secondary);
    font-family: "Open Sans", Sans-serif; font-size: 15px; font-weight: 400; text-transform: uppercase; line-height: 1.4em;
    border-style: solid; border-color: var(--e-global-color-secondary); border-radius: 2px; padding: 12px 30px;
}
#boat-detail #emailBrokerBtn:hover { opacity: 0.8; background-color: var(--e-global-color-primary); }

/* Make the toolbar look like the “classic” row */
.fancybox__toolbar {
    background: rgba(0,0,0,.35);
    padding: 8px 12px;
}

/* Bigger, softer nav buttons */
.fancybox__nav .f-button {
    width: 44px; height: 44px;
    border-radius: 999px;
    background: rgba(0,0,0,.35);
}

/* Keep the counter visible and readable */
.fancybox__counter {
    font-weight: 600;
}

/* Fancybox overlay — bigger arrows, show on hover (desktop only) */
@media (min-width: 992px) {
    .fancybox__container .fancybox__nav .f-button {
        width: 64px; height: 64px;
        border-radius: 999px;
        background: rgba(0,0,0,.35);
        color: #fff;
        opacity: 0;
        transition: opacity .2s, background .2s, transform .2s;
    }
    .fancybox__container:hover .fancybox__nav .f-button { opacity: 1; }
    .fancybox__nav .is-prev { left: 16px; }
    .fancybox__nav .is-next { right: 16px; }
    .fancybox__nav .f-button svg { width: 28px; height: 28px; }
    .fancybox__nav .f-button:hover { background: rgba(0,0,0,.5); transform: scale(1.06); }
}

/* Optional: hide overlay arrows on mobile */
@media (max-width: 991.98px) {
    .fancybox__container .fancybox__nav .f-button { display: none; }
}

/* Move/center the counter at the bottom */
.fancybox__counter {
    position: absolute;
    left: 50%;
    bottom: 12px;
    top: auto;
    transform: translateX(-50%);
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0,0,0,.5);
    color: #fff;
    font-size: 13px;
}

/* (Optional) put toolbar at bottom-center too */
.fancybox__toolbar {
    top: auto;
    bottom: 12px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    background: transparent;
    gap: 6px;
}
.fancybox__toolbar .f-button { background: rgba(0,0,0,.35); color:#fff; }
.fancybox__toolbar .f-button:hover { background: rgba(0,0,0,.5); }

.modal-content textarea,
.modal-content input[type="text"]{
    background-color: #fff !important;
}
.modal-content input.button{
    background-color: var(--e-global-color-primary);
}
.modal-content .btn-close{
    color: var(--e-global-color-secondary);
}
.contact-info h6{
    font-size: 24px;
    margin-bottom: 0;
}
.avatar{
    margin-top:16px;
}
.small-text{
    line-height:18px;
    margin-top:4px;
}
.staff-title{
    line-height: 22px;
    margin-bottom: 12px;
    margin-top: 0;
}