/* ============================================
   CRITICAL CSS - Prevent FOUC (Flash of Unstyled Content)
   ============================================ */
.yolo-yacht-details-v3 {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

/* Desktop padding - prevents content from being glued to left edge */
@media (min-width: 576px) {
    .yolo-yacht-details-v3 {
        padding-left: clamp(16px, 4vw, 48px) !important;
        padding-right: clamp(16px, 4vw, 48px) !important;
    }
}

.yolo-yacht-details-v3.loaded {
    opacity: 1;
}

/* Prevent layout shift during load */
.yolo-yacht-details-v3 .yacht-image-swiper {
    min-height: 250px;
    background: #f3f4f6;
}

@media (min-width: 768px) {
    .yolo-yacht-details-v3 .yacht-image-swiper {
        min-height: 400px;
    }
}

/* CSS Variables are now loaded via yacht-details-v3-styles.php */


.yolo-yacht-details-v3 *,
.yolo-yacht-details-v3 *::before,
.yolo-yacht-details-v3 *::after {
    box-sizing: border-box;
}

/* ============================================
   YACHT HEADER - Plugin 3 Version
   ============================================ */
.yolo-yacht-details-v3 .yacht-header {
    text-align: center;
    margin-bottom: clamp(20px, 4vw, 30px);
    margin-top: 0;
    padding: 0;
    background-color: var(--yolo-header-bg, #f8f9fa);
    border-radius: 8px;
    padding: 15px 20px;
}

.yolo-yacht-details-v3 .yacht-name {
    font-size: clamp(22px, 5vw, 32px);
    font-weight: 400;
    color: #666;
    margin: 0;
    letter-spacing: 0;
    line-height: 1.5;
    word-wrap: break-word;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}

.yolo-yacht-details-v3 .yacht-name .separator {
    color: #ccc;
    font-weight: 300;
    margin: 0 15px;
}

.yolo-yacht-details-v3 .yacht-name .model {
    font-weight: 400;
}

.yolo-yacht-details-v3 .yacht-title {
    font-weight: 700;
}

.yolo-yacht-details-v3 .yacht-name .location {
    font-size: clamp(20px, 4.5vw, 28px);
    font-weight: 400;
    color: #666;
    cursor: pointer;
    transition: color 0.3s;
}

.yolo-yacht-details-v3 .yacht-name .location:hover {
    color: #2563eb;
}

.yolo-yacht-details-v3 .yacht-name .location i {
    margin-right: 10px;
}

/* ============================================
   MAIN LAYOUT - Bootstrap Grid handles page layout
   ============================================ */
/* Page layout removed - Bootstrap Grid handles container/row/col */

/* Main Content Area - Just spacing */
.yolo-yacht-details-v3 .yacht-main-content {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 5vw, 40px);
}

/* ============================================
   STICKY SIDEBAR FIX - Research-backed solution
   ============================================
   PROBLEM: Bootstrap's .row uses display:flex with align-items:stretch,
            which makes columns equal height and breaks position:sticky
   SOLUTION: Use align-self:flex-start to prevent column stretching
   SOURCES: Bootstrap 5.3 docs + Stack Overflow validation
   ============================================ */

@media (min-width: 992px) {
    /* REMOVED: align-self on column was preventing sticky from working
       The column needs to stretch to full row height for sticky to work properly
       The sidebar itself will stick within the tall column */
    /* .col-lg-4:has(.yacht-booking-section) {
        align-self: flex-start !important;
    } */
}

/* Booking Sidebar - Sticky positioning */
/* v75.31: Removed max-height and overflow-y - let the box be as tall as needed */
.yolo-yacht-details-v3 .yacht-booking-section {
    position: sticky;
    top: 50px;                          /* Stick 100px from top of viewport */
}

/* Disable sticky on mobile/tablet (not needed when columns stack) */
@media (max-width: 991px) {
    .yolo-yacht-details-v3 .yacht-booking-section {
        position: static !important;
        align-self: auto;
    }
}

/* ============================================
   IMAGE CAROUSEL - SWIPER
   ============================================ */
.yolo-yacht-details-v3 .yacht-images-carousel {
    position: relative;
    background: var(--yolo-bg-lighter);
    border-radius: var(--yolo-radius-lg);
    overflow: hidden;
    width: 100%;
}

.yolo-yacht-details-v3 .yacht-image-swiper {
    width: 100%;
    aspect-ratio: 3 / 2;
}

.yolo-yacht-details-v3 .yacht-image-swiper .swiper-slide {
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.yolo-yacht-details-v3 .yacht-image-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Swiper Navigation - Custom styling */
.yolo-yacht-details-v3 .yacht-image-swiper .swiper-button-prev,
.yolo-yacht-details-v3 .yacht-image-swiper .swiper-button-next {
    background: rgba(0, 0, 0, 0.6);
    width: clamp(44px, 10vw, 56px);
    height: clamp(44px, 10vw, 56px);
    border-radius: 50%;
    transition: all var(--yolo-transition);
}

.yolo-yacht-details-v3 .yacht-image-swiper .swiper-button-prev:hover,
.yolo-yacht-details-v3 .yacht-image-swiper .swiper-button-next:hover {
    background: rgba(0, 0, 0, 0.85);
    transform: scale(1.05);
}

.yolo-yacht-details-v3 .yacht-image-swiper .swiper-button-prev::after,
.yolo-yacht-details-v3 .yacht-image-swiper .swiper-button-next::after {
    font-size: clamp(18px, 4vw, 24px);
    color: white;
    font-weight: bold;
}

/* Swiper Pagination - Custom styling */
.yolo-yacht-details-v3 .yacht-image-swiper .swiper-pagination {
    bottom: clamp(12px, 3vw, 20px) !important;
}

.yolo-yacht-details-v3 .yacht-image-swiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    transition: all var(--yolo-transition);
}

.yolo-yacht-details-v3 .yacht-image-swiper .swiper-pagination-bullet-active {
    background: white;
    transform: scale(1.3);
}

/* Lazy loading preloader */
.yolo-yacht-details-v3 .yacht-image-swiper .swiper-lazy-preloader {
    border-color: var(--yolo-primary);
    border-top-color: transparent;
}

.yolo-yacht-details-v3 .no-images {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(200px, 40vw, 400px);
    font-size: clamp(18px, 4vw, 24px);
    color: #9ca3af;
}

/* ============================================
   BOOKING SECTION (Sticky Sidebar)
   ============================================ */
.yolo-yacht-details-v3 .yacht-booking-section {
    background: var(--yolo-white);
    border: 2px solid var(--yolo-border);
    border-radius: var(--yolo-radius-lg);
    padding: clamp(16px, 4vw, 24px);
    box-shadow: var(--yolo-shadow-md);
}

.yolo-yacht-details-v3 .yacht-booking-section h3 {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--yolo-text-dark);
    margin: 0 0 20px 0;
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--yolo-border);
}

.yolo-yacht-details-v3 .yacht-booking-section h4 {
    font-size: clamp(14px, 3.5vw, 16px);
    font-weight: 600;
    color: var(--yolo-text-dark);
    margin: 20px 0 12px 0;
    text-align: center;
}

/* ============================================
   PRICE CAROUSEL - SWIPER
   ============================================ */
.yolo-yacht-details-v3 .yacht-price-carousel-section {
    padding: clamp(16px, 4vw, 24px);
    background: linear-gradient(135deg, var(--yolo-bg-light) 0%, #eef2ff 100%);
    border-radius: var(--yolo-radius-lg);
    border: 1px solid var(--yolo-border);
}

.yolo-yacht-details-v3 .yacht-price-carousel-section h3 {
    font-size: clamp(18px, 4vw, 24px);
    font-weight: 700;
    color: var(--yolo-text-dark);
    margin: 0 0 20px 0;
    text-align: center;
}

.yolo-yacht-details-v3 .price-swiper {
    position: relative;
    padding: 10px 50px 20px;
}

.yolo-yacht-details-v3 .price-swiper .swiper-wrapper {
    padding: 5px 0;
}

.yolo-yacht-details-v3 .price-swiper .swiper-slide {
    width: auto;
    height: auto;
}

.yolo-yacht-details-v3 .price-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(14px, 3vw, 20px);
    border: 2px solid var(--yolo-border);
    border-radius: var(--yolo-radius-md);
    background: var(--yolo-white);
    transition: all var(--yolo-transition);
    width: clamp(200px, 50vw, 260px);
    cursor: pointer;
    box-shadow: var(--yolo-shadow-sm);
}

@media (min-width: 768px) {
    .yolo-yacht-details-v3 .price-slide {
        width: clamp(220px, 22vw, 260px);
    }
}

.yolo-yacht-details-v3 .price-slide:hover {
    border-color: var(--yolo-primary);
    box-shadow: var(--yolo-shadow-md);
    transform: translateY(-3px);
}

.yolo-yacht-details-v3 .price-slide.active {
    border-color: var(--yolo-primary);
    background: linear-gradient(to bottom, #eff6ff 0%, var(--yolo-white) 100%);
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.15);
}

.yolo-yacht-details-v3 .price-week {
    font-size: clamp(12px, 2.8vw, 14px);
    font-weight: 600;
    color: var(--yolo-text-dark);
    margin-bottom: 8px;
}

.yolo-yacht-details-v3 .price-product {
    font-size: clamp(10px, 2.2vw, 11px);
    color: var(--yolo-text-light);
    margin-bottom: 8px;
}

.yolo-yacht-details-v3 .price-original {
    margin-bottom: 5px;
}

.strikethrough {
    text-decoration: line-through;
    color: #9ca3af;
    font-size: clamp(13px, 2.8vw, 15px);
}

.yolo-yacht-details-v3 .price-discount-badge {
    background: var(--yolo-warning-bg);
    color: var(--yolo-warning);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: clamp(10px, 2.2vw, 11px);
    font-weight: 600;
    margin-bottom: 10px;
    display: inline-block;
}

.yolo-yacht-details-v3 .price-final {
    font-size: clamp(18px, 4.5vw, 24px);
    font-weight: 700;
    color: var(--yolo-success);
    margin-bottom: 12px;
}

.yolo-yacht-details-v3 .price-select-btn {
    background: var(--yolo-primary);
    color: white;
    border: none;
    padding: clamp(12px, 3vw, 14px);
    border-radius: var(--yolo-radius-sm);
    font-size: clamp(12px, 2.8vw, 14px);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--yolo-transition);
    width: 100%;
    min-height: 48px;
}

.yolo-yacht-details-v3 .price-select-btn:hover {
    background: var(--yolo-primary-hover);
}

/* Price Carousel Arrows - Swiper */
.yolo-yacht-details-v3 .price-swiper .swiper-button-prev,
.yolo-yacht-details-v3 .price-swiper .swiper-button-next {
    background: var(--yolo-primary);
    width: clamp(40px, 9vw, 48px);
    height: clamp(40px, 9vw, 48px);
    border-radius: 50%;
    box-shadow: var(--yolo-shadow-md);
    transition: all var(--yolo-transition);
}

.yolo-yacht-details-v3 .price-swiper .swiper-button-prev::after,
.yolo-yacht-details-v3 .price-swiper .swiper-button-next::after {
    font-size: clamp(16px, 3.5vw, 20px);
    color: white;
    font-weight: bold;
}

.yolo-yacht-details-v3 .price-swiper .swiper-button-prev:hover,
.yolo-yacht-details-v3 .price-swiper .swiper-button-next:hover {
    background: var(--yolo-primary-hover);
    transform: scale(1.1);
}

.yolo-yacht-details-v3 .price-swiper .swiper-button-prev {
    left: 5px;
}

.yolo-yacht-details-v3 .price-swiper .swiper-button-next {
    right: 5px;
}

/* Hide navigation when disabled */
.yolo-yacht-details-v3 .price-swiper .swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ============================================
   DATE PICKER
   ============================================ */
.yolo-yacht-details-v3 .date-picker-section {
    margin-bottom: 20px;
    position: relative;
    z-index: 100;
}

.yolo-yacht-details-v3 .litepicker {
    z-index: 9999 !important;
}

#dateRangePicker {
    width: 100%;
    padding: clamp(14px, 3.5vw, 16px);
    border: 2px solid #212529;
    border-radius: var(--yolo-radius-sm);
    font-size: clamp(14px, 3.5vw, 16px);
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    background: var(--yolo-white);
    transition: all 0.2s;
    min-height: 52px;
}

#dateRangePicker:hover {
    transform: translateY(-2px);
    box-shadow: var(--yolo-shadow-sm);
}

#dateRangePicker:focus {
    outline: none;
    border-color: var(--yolo-primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.15);
}

/* ============================================
   SELECTED PRICE DISPLAY
   ============================================ */
.selected-price-display {
    background: linear-gradient(135deg, #f0f9ff 0%, #eff6ff 100%);
    border: 2px solid var(--yolo-primary-light);
    border-radius: var(--yolo-radius-md);
    padding: clamp(14px, 3.5vw, 20px);
    margin-bottom: 20px;
    text-align: center;
}

.selected-price-original {
    font-size: clamp(13px, 3vw, 14px);
    color: var(--yolo-text-light);
    margin-bottom: 6px;
}

.selected-price-discount {
    background: var(--yolo-warning-bg);
    color: var(--yolo-warning);
    font-size: clamp(11px, 2.5vw, 12px);
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 10px;
}

.selected-price-final {
    font-size: clamp(26px, 7vw, 32px);
    font-weight: 700;
    color: var(--yolo-primary);
}

/* ============================================
   BOOK NOW BUTTON
   ============================================ */
.yolo-yacht-details-v3 .btn-book-now {
    width: 100%;
    padding: clamp(16px, 4vw, 20px);
    background: linear-gradient(135deg, var(--yolo-secondary) 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: var(--yolo-radius-md);
    font-size: clamp(16px, 4vw, 18px);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--yolo-transition);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-height: 70px;
    box-shadow: 0 4px 14px rgba(185, 28, 28, 0.25);
}

.yolo-yacht-details-v3 .btn-book-now .btn-main-text {
    font-size: clamp(16px, 4vw, 18px);
    font-weight: 700;
    letter-spacing: 1.5px;
}

.yolo-yacht-details-v3 .btn-book-now .btn-sub-text {
    font-size: clamp(12px, 2.8vw, 14px);
    font-weight: 500;
    opacity: 0.95;
}

.yolo-yacht-details-v3 .btn-book-now:hover {
    background: linear-gradient(135deg, #991b1b 0%, #b91c1c 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(185, 28, 28, 0.35);
}

/* ============================================
   QUOTE SECTION & FORM
   ============================================ */
.quote-section {
    text-align: center;
    margin-bottom: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--yolo-border);
}

.quote-label {
    font-size: clamp(13px, 3vw, 14px);
    color: var(--yolo-text-light);
    margin: 0 0 12px 0;
}

.yolo-yacht-details-v3 .btn-request-quote {
    width: 100%;
    padding: clamp(14px, 3.5vw, 16px);
    background: var(--yolo-primary);
    color: white;
    border: none;
    border-radius: var(--yolo-radius-sm);
    font-size: clamp(14px, 3.5vw, 16px);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--yolo-transition);
    min-height: 52px;
}

.yolo-yacht-details-v3 .btn-request-quote:hover {
    background: var(--yolo-primary-hover);
    transform: translateY(-2px);
}

.quote-form {
    margin-top: 20px;
    padding: clamp(16px, 4vw, 20px);
    background: var(--yolo-bg-light);
    border-radius: var(--yolo-radius-md);
}

.quote-form h4 {
    font-size: clamp(16px, 4vw, 18px);
    font-weight: 700;
    color: var(--yolo-text-dark);
    margin: 0 0 16px 0;
    text-align: center;
}

/* form-row now uses Bootstrap Grid (row g-2 with col-12 col-sm-6) */
.form-row {
    margin-bottom: 10px;
}

/* form-row responsive behavior handled by Bootstrap Grid */

.form-field {
    margin-bottom: 10px;
}

.form-field input,
.form-field textarea {
    width: 100%;
    padding: clamp(12px, 3vw, 14px);
    border: 1px solid #d1d5db;
    border-radius: var(--yolo-radius-sm);
    font-size: clamp(14px, 3.5vw, 16px);
    font-family: inherit;
    min-height: 48px;
    -webkit-appearance: none;
}

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--yolo-primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
}

.form-field textarea {
    min-height: 100px;
    resize: vertical;
}

.form-note {
    font-size: 12px;
    color: var(--yolo-text-light);
    margin: 10px 0 5px 0;
}

.form-tagline {
    font-size: 13px;
    color: var(--yolo-text-medium);
    margin: 0 0 15px 0;
    text-align: center;
}

.yolo-yacht-details-v3 .btn-submit-quote {
    width: 100%;
    padding: clamp(14px, 3.5vw, 16px);
    background: var(--yolo-primary);
    color: white;
    border: none;
    border-radius: var(--yolo-radius-sm);
    font-size: clamp(14px, 3.5vw, 16px);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--yolo-transition);
    min-height: 50px;
}

.yolo-yacht-details-v3 .btn-submit-quote:hover {
    background: var(--yolo-primary-hover);
}

/* ============================================
   QUICK SPECS
   ============================================ */
/* yacht-quick-specs now uses Bootstrap Grid (row g-3 with col-6 col-sm-6 col-md-3) */
.yolo-yacht-details-v3 .yacht-quick-specs {
    /* No grid styles needed - Bootstrap handles layout */
}

.yolo-yacht-details-v3 .spec-item {
    text-align: center;
    padding: clamp(16px, 4vw, 24px);
    background: var(--yolo-white);
    border: 1px solid var(--yolo-border);
    border-radius: var(--yolo-radius-lg);
    transition: all var(--yolo-transition);
    box-shadow: var(--yolo-shadow-sm);
    min-height: 180px; /* Ensure all spec boxes have same height as Refit box */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.yolo-yacht-details-v3 .spec-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--yolo-shadow-md);
    border-color: var(--yolo-primary-light);
}

.yolo-yacht-details-v3 .spec-icon {
    margin-bottom: clamp(10px, 2.5vw, 14px);
}

.yolo-yacht-details-v3 .spec-icon i {
    font-size: clamp(28px, 6vw, 36px);
    color: var(--yolo-primary);
}

.yolo-yacht-details-v3 .spec-value {
    font-size: clamp(18px, 4.5vw, 24px);
    font-weight: 700;
    color: var(--yolo-text-dark);
    margin-bottom: 5px;
}

.yolo-yacht-details-v3 .spec-value .refit {
    display: block;
    font-size: clamp(11px, 2.5vw, 12px);
    font-weight: 400;
    color: var(--yolo-text-light);
    margin-top: 4px;
}

.yolo-yacht-details-v3 .spec-label {
    font-size: clamp(12px, 3vw, 14px);
    color: var(--yolo-text-light);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================
   DESCRIPTION SECTION
   ============================================ */
.yolo-yacht-details-v3 .yacht-description-section {
    margin-bottom: 0;
}

.yolo-yacht-details-v3 .yacht-description-section h3 {
    font-size: clamp(20px, 5vw, 26px);
    font-weight: 700;
    color: var(--yolo-text-dark);
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--yolo-primary);
}

.yolo-yacht-details-v3 .yacht-description-content {
    font-size: clamp(14px, 3.5vw, 16px);
    line-height: 1.8;
    color: var(--yolo-text-medium);
    background: var(--yolo-white);
    padding: clamp(16px, 4vw, 24px);
    border-radius: var(--yolo-radius-md);
    border-left: 4px solid var(--yolo-primary);
    box-shadow: var(--yolo-shadow-sm);
}

.description-preview,
.description-full {
    margin-bottom: 0;
}

.description-toggle {
    background: none;
    border: none;
    color: var(--yolo-primary);
    font-size: clamp(14px, 3.5vw, 16px);
    font-weight: 600;
    cursor: pointer;
    padding: 12px 0;
    margin-top: 10px;
    text-decoration: underline;
    transition: color 0.2s;
    min-height: 44px;
    display: inline-block;
}

.description-toggle:hover {
    color: var(--yolo-primary-hover);
}

/* ============================================
   EQUIPMENT SECTION
   ============================================ */
.yolo-yacht-details-v3 .yacht-equipment-section h3 {
    font-size: clamp(20px, 5vw, 26px);
    font-weight: 700;
    color: var(--yolo-text-dark);
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--yolo-primary);
}

/* equipment-grid now uses Bootstrap Grid (row g-3 with col-12 col-sm-6) */
.yolo-yacht-details-v3 .equipment-grid {
    /* No grid styles needed - Bootstrap handles layout */
}

/* equipment-grid responsive behavior handled by Bootstrap Grid */

.yolo-yacht-details-v3 .equipment-item {
    display: flex;
    align-items: center;
    gap: clamp(12px, 3vw, 16px);
    padding: clamp(14px, 3.5vw, 18px);
    background: var(--yolo-white);
    border-radius: var(--yolo-radius-md);
    font-size: clamp(14px, 3.5vw, 15px);
    color: var(--yolo-text-dark);
    border: 1px solid var(--yolo-border);
    transition: all 0.2s ease;
    box-shadow: var(--yolo-shadow-sm);
}

.yolo-yacht-details-v3 .equipment-item:hover {
    background: var(--yolo-bg-light);
    border-color: var(--yolo-primary-light);
    transform: translateX(5px);
}

/* Equipment Icon Box */
.yolo-yacht-details-v3 .equipment-item i {
    font-size: clamp(20px, 4.5vw, 24px);
    min-width: clamp(44px, 10vw, 52px);
    height: clamp(44px, 10vw, 52px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--yolo-primary);
    background: var(--yolo-primary-light);
    border-radius: var(--yolo-radius-md);
    flex-shrink: 0;
}

.yolo-yacht-details-v3 .equipment-item span {
    font-weight: 500;
}

/* ============================================
   MAP SECTION
   ============================================ */
.yolo-yacht-details-v3 .yacht-map-section h3 {
    font-size: clamp(20px, 5vw, 26px);
    font-weight: 700;
    color: var(--yolo-text-dark);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--yolo-primary);
}

.yolo-yacht-details-v3 .map-container {
    position: relative;
    width: 100%;
    padding-bottom: 50%;
    height: 0;
    overflow: hidden;
    border-radius: var(--yolo-radius-lg);
    box-shadow: var(--yolo-shadow-md);
}

.yolo-yacht-details-v3 .map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ============================================
   TECHNICAL CHARACTERISTICS
   ============================================ */
.yolo-yacht-details-v3 .yacht-technical h3 {
    font-size: clamp(20px, 5vw, 26px);
    font-weight: 700;
    color: var(--yolo-text-dark);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--yolo-primary);
}

/* tech-grid now uses Bootstrap Grid (row g-3 with col-12 col-sm-6) */
.yolo-yacht-details-v3 .tech-grid {
    /* No grid styles needed - Bootstrap handles layout */
}

/* tech-grid responsive behavior handled by Bootstrap Grid */

.yolo-yacht-details-v3 .tech-item {
    background: var(--yolo-white);
    padding: clamp(16px, 4vw, 20px);
    border-radius: var(--yolo-radius-md);
    display: flex;
    align-items: center;
    gap: clamp(14px, 3.5vw, 18px);
    border: 1px solid var(--yolo-border);
    box-shadow: var(--yolo-shadow-sm);
    transition: all var(--yolo-transition);
}

.yolo-yacht-details-v3 .tech-item:hover {
    border-color: var(--yolo-primary-light);
    transform: translateY(-2px);
    box-shadow: var(--yolo-shadow-md);
}

.yolo-yacht-details-v3 .tech-icon {
    width: clamp(50px, 12vw, 60px);
    height: clamp(50px, 12vw, 60px);
    background: linear-gradient(135deg, var(--yolo-primary) 0%, #2563eb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(30, 58, 138, 0.3);
}

.yolo-yacht-details-v3 .tech-icon i {
    font-size: clamp(20px, 5vw, 26px);
    color: var(--yolo-white);
}

.yolo-yacht-details-v3 .tech-content {
    flex: 1;
    min-width: 0;
}

.yolo-yacht-details-v3 .tech-label {
    font-size: clamp(11px, 2.5vw, 12px);
    font-weight: 700;
    color: var(--yolo-text-light);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}

.yolo-yacht-details-v3 .tech-value {
    font-size: clamp(16px, 4vw, 20px);
    font-weight: 600;
    color: var(--yolo-primary);
}

/* ============================================
   EXTRAS SECTION
   ============================================ */
.yolo-yacht-details-v3 .yacht-extras-combined h3 {
    font-size: clamp(20px, 5vw, 26px);
    font-weight: 700;
    color: var(--yolo-text-dark);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--yolo-primary);
}

.yolo-yacht-details-v3 .yacht-extras-combined .extras-note {
    font-size: clamp(13px, 3vw, 14px);
    font-weight: 400;
    color: var(--yolo-text-light);
    font-style: italic;
}

/* extras-two-column now uses Bootstrap Grid (row g-4 with col-12 col-md-6) */
.yolo-yacht-details-v3 .extras-two-column {
    /* No grid styles needed - Bootstrap handles layout */
}

.yolo-yacht-details-v3 .extras-column h4 {
    font-size: clamp(16px, 4vw, 18px);
    font-weight: 600;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.yolo-yacht-details-v3 .extras-column:first-child h4 {
    color: var(--yolo-danger);
}

.yolo-yacht-details-v3 .extras-column:last-child h4 {
    color: var(--yolo-primary);
}

/* extras-grid is a simple vertical list - no grid needed */
.yolo-yacht-details-v3 .extras-grid {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2.5vw, 12px);
}

.yolo-yacht-details-v3 .extra-item {
    padding: clamp(14px, 3.5vw, 18px);
    background: var(--yolo-white);
    border-radius: var(--yolo-radius-md);
    border: 1px solid var(--yolo-border);
    box-shadow: var(--yolo-shadow-sm);
}

.yolo-yacht-details-v3 .extra-item.obligatory {
    background: var(--yolo-danger-bg);
    border-color: #fecaca;
    border-left: 4px solid var(--yolo-danger);
}

.yolo-yacht-details-v3 .extra-item.optional {
    background: #f0f9ff;
    border-color: #bfdbfe;
    border-left: 4px solid var(--yolo-primary);
}

.yolo-yacht-details-v3 .extra-name {
    font-size: clamp(14px, 3.5vw, 16px);
    color: var(--yolo-text-dark);
    font-weight: 600;
}

.yolo-yacht-details-v3 .extra-price {
    font-size: clamp(15px, 3.5vw, 17px);
    font-weight: 700;
    color: var(--yolo-success);
    margin-top: 8px;
}

.yolo-yacht-details-v3 .price-unit {
    font-size: clamp(11px, 2.5vw, 12px);
    font-weight: 400;
    color: var(--yolo-text-light);
    margin-left: 4px;
}

.payment-location {
    font-size: clamp(11px, 2.5vw, 12px);
    color: var(--yolo-text-light);
    display: block;
    margin-top: 4px;
}

/* ============================================
   BACK BUTTON
   ============================================ */
.yolo-yacht-details-v3 .yacht-actions {
    margin-top: clamp(30px, 6vw, 50px);
    text-align: center;
}

.yolo-yacht-details-v3 .btn-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: clamp(14px, 3.5vw, 16px) clamp(28px, 6vw, 40px);
    background: #6b7280;
    color: white;
    text-decoration: none;
    border-radius: var(--yolo-radius-md);
    font-weight: 600;
    font-size: clamp(14px, 3.5vw, 16px);
    transition: all var(--yolo-transition);
    min-height: 52px;
}

.yolo-yacht-details-v3 .btn-back:hover {
    background: #4b5563;
    transform: translateY(-2px);
    color: white;
}

/* Mobile swipe hint removed - Swiper has intuitive touch behavior */

/* ============================================
   INFO CARDS (Security Deposit, Cancellation, Check-in)
   ============================================ */
.info-card {
    background: var(--yolo-white);
    border: 1px solid var(--yolo-border);
    border-radius: var(--yolo-radius-lg);
    padding: clamp(20px, 4vw, 30px);
    box-shadow: var(--yolo-shadow-sm);
    transition: all var(--yolo-transition);
}

.info-card:hover {
    box-shadow: var(--yolo-shadow-md);
    transform: translateY(-2px);
}

/* Security Deposit Card */
.deposit-amount-large {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    color: var(--yolo-primary);
    margin-bottom: 20px;
    text-align: center;
}

.deposit-card p {
    margin-bottom: 15px;
    line-height: 1.6;
    color: var(--yolo-text);
}

.deposit-note {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--yolo-border);
    font-size: 0.95em;
}

/* Cancellation Policy Card */
.cancellation-timeline {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 25px;
}

.timeline-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px;
    background: var(--yolo-light-bg);
    border-radius: var(--yolo-radius-md);
    transition: all var(--yolo-transition);
}

.timeline-item:hover {
    background: var(--yolo-primary-light);
    transform: translateX(5px);
}

.timeline-icon {
    font-size: 32px;
    color: var(--yolo-primary);
    flex-shrink: 0;
}

.timeline-content {
    flex: 1;
}

.timeline-label {
    font-weight: 600;
    color: var(--yolo-text);
    margin-bottom: 5px;
}

.timeline-value {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--yolo-primary);
}

.cancellation-note {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--yolo-border);
    font-size: 0.95em;
    color: var(--yolo-text);
}

/* Check-in/Check-out Cards */
.checkin-card,
.checkout-card,
.checkin-day-card {
    text-align: center;
    padding: clamp(20px, 4vw, 30px);
}

.card-icon {
    font-size: 48px;
    color: var(--yolo-primary);
    margin-bottom: 15px;
}

.card-label {
    font-size: 0.9em;
    color: var(--yolo-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    font-weight: 600;
}

.card-value {
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 700;
    color: var(--yolo-text-dark);
}

.checkout-card .card-icon {
    color: var(--yolo-danger);
}

.checkin-day-card .card-icon {
    color: var(--yolo-success);
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .cancellation-timeline {
        gap: 15px;
    }
    
    .timeline-item {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .timeline-icon {
        font-size: 28px;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .yolo-yacht-details-v3 .yacht-booking-sidebar,
    .yolo-yacht-details-v3 .swiper-button-prev,
    .yolo-yacht-details-v3 .swiper-button-next,
    .yolo-yacht-details-v3 .swiper-pagination {
        display: none !important;
    }
    
    /* Bootstrap Grid handles layout */
}

/* ============================================
   LOADING SPINNER
   ============================================ */
.yolo-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: yolo-spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

@keyframes yolo-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Larger spinner for price display */
#selectedPriceFinal .yolo-spinner {
    width: 20px;
    height: 20px;
    border-width: 3px;
}


/* ============================================
   CHARTER PACK INCLUDED SECTION
   ============================================ */
.charter-pack-included {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #22c55e;
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
}

.charter-pack-title {
    color: #166534;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.charter-pack-title i {
    color: #22c55e;
    font-size: 1em;
}

.charter-pack-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.charter-pack-item {
    background: #ffffff;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.charter-pack-item-free {
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border: 1px solid #facc15;
}

.pack-item-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
}

.charter-pack-item-free .pack-item-icon {
    background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
}

.pack-item-content {
    flex: 1;
    min-width: 0;
}

.pack-item-content h6 {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 2px 0;
    line-height: 1.3;
}

.pack-item-content p {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}

.free-badge {
    display: inline-block;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
    margin-left: 4px;
}

/* Responsive adjustments for Charter Pack */
@media (max-width: 767.98px) {
    .charter-pack-included {
        padding: 12px;
        margin-top: 12px;
    }
    
    .charter-pack-title {
        font-size: 0.9rem;
    }
    
    .charter-pack-item {
        padding: 10px;
        gap: 8px;
    }
    
    .pack-item-icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    
    .pack-item-content h6 {
        font-size: 0.8rem;
    }
    
    .pack-item-content p {
        font-size: 0.7rem;
    }
}