/**
 * Bootstrap 5 Mobile Best Practices - ALL Frontend Templates
 * Version: 20.7
 * 
 * Applies Bootstrap 5 best practices for ALL templates:
 * - Homepage / Search Widget
 * - Search Results
 * - Our Fleet
 * - Yacht Details
 * - Booking Confirmation
 * - Balance Payment
 * - Balance Confirmation
 * - Guest Login
 * - Guest Dashboard
 * 
 * Bootstrap 5 Breakpoints:
 * - xs: < 576px (phones)
 * - sm: ≥ 576px (phones landscape)
 * - md: ≥ 768px (tablets)
 * - lg: ≥ 992px (desktops)
 * - xl: ≥ 1200px (large desktops)
 * - xxl: ≥ 1400px (extra large)
 */

/* ============================================
   GLOBAL RESETS - ALL SCREEN SIZES
   ============================================ */

/* Ensure Bootstrap container-fluid has proper padding */
.yolo-ys-our-fleet .container-fluid,
.yolo-ys-search-results .container-fluid,
.yolo-yacht-details-v3 .container-fluid,
.yolo-booking-confirmation .container-fluid,
.yolo-balance-payment .container-fluid,
.yolo-guest-login-container .container-fluid,
.yolo-guest-dashboard .container-fluid {
    padding-left: var(--bs-gutter-x, 0.75rem);
    padding-right: var(--bs-gutter-x, 0.75rem);
}

/* Prevent horizontal overflow from breaking layouts */
/* Note: .yolo-yacht-details-v3 has its own rule at the end using overflow-x: clip */
.yolo-ys-our-fleet,
.yolo-ys-search-results,
.yolo-booking-confirmation,
.yolo-balance-payment,
.yolo-guest-login-container,
.yolo-guest-dashboard {
    overflow-x: clip; /* clip prevents scroll but doesn't break position:sticky like hidden does */
    /* max-width: 100%; REMOVED - This was conflicting with template-specific max-width rules */
}

/* ============================================
   MOBILE PHONES (< 576px) - EDGE TO EDGE
   ============================================ */
@media (max-width: 575.98px) {
    
    /* -----------------------------------------
       Global Mobile Container Overrides
       ----------------------------------------- */
    body .container,
    body .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* Full-width sections - edge to edge */
    .yolo-ys-our-fleet,
    .yolo-ys-search-results,
    .yolo-yacht-details-v3,
    .yolo-booking-confirmation,
    .yolo-balance-payment,
    .yolo-guest-login-container,
    .yolo-guest-dashboard {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* -----------------------------------------
       HOMEPAGE SEARCH WIDGET
       ----------------------------------------- */
    .yolo-ys-search-widget {
        padding: 16px !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    .yolo-ys-search-widget .yolo-ys-search-form {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .yolo-ys-search-widget .yolo-ys-form-field {
        width: 100% !important;
        flex: none !important;
    }
    
    .yolo-ys-search-widget .yolo-ys-field-select select,
    .yolo-ys-search-widget .yolo-ys-field-date input {
        width: 100% !important;
        height: 52px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
    }
    
    .yolo-ys-search-widget .yolo-ys-field-select select {
        padding: 12px 16px !important;
    }
    
    /* Date input needs extra left padding for the calendar icon */
    .yolo-ys-search-widget .yolo-ys-field-date input {
        padding: 12px 16px 12px 45px !important; /* 45px left for icon */
    }
    
    .yolo-ys-search-widget .yolo-ys-search-button {
        width: 100% !important;
        height: 52px !important;
        font-size: 16px !important;
    }
    
    /* -----------------------------------------
       SEARCH RESULTS PAGE
       ----------------------------------------- */
    .yolo-ys-search-results {
        padding: 0 !important;
    }
    
    .yolo-ys-search-results .container-fluid {
        padding: 0 12px !important;
    }
    
    /* Search Form at top of results */
    .yolo-ys-results-search-form {
        margin: 0 0 20px 0 !important;
        padding: 20px 16px !important;
        border-radius: 0 !important;
    }
    
    .yolo-ys-results-search-form .yolo-ys-search-form {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .yolo-ys-results-search-form .yolo-ys-field-select,
    .yolo-ys-results-search-form .yolo-ys-field-date,
    .yolo-ys-results-search-form .yolo-ys-field-button {
        width: 100% !important;
        flex: none !important;
    }
    
    .yolo-ys-results-search-form .yolo-ys-field-select select,
    .yolo-ys-results-search-form .yolo-ys-field-date input,
    .yolo-ys-results-search-form .yolo-ys-search-button {
        height: 52px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
    }
    
    /* Results Grid */
    .yolo-ys-results-header {
        padding: 16px !important;
        margin-bottom: 16px !important;
    }
    
    .yolo-ys-results-header h2 {
        font-size: 22px !important;
    }
    
    .yolo-ys-section-header {
        padding: 0 16px !important;
        margin: 24px 0 16px !important;
    }
    
    .yolo-ys-section-header h3 {
        font-size: 18px !important;
    }
    
    /* -----------------------------------------
       SEARCH RESULTS PAGE - Match Our Fleet styling
       v88.1 Fix: High specificity selectors to override theme
       ----------------------------------------- */
    body .yolo-ys-search-results,
    #content .yolo-ys-search-results,
    .entry-content .yolo-ys-search-results,
    main .yolo-ys-search-results,
    .site-content .yolo-ys-search-results {
        padding: 0 !important;
    }
    
    body .yolo-ys-search-results .container-fluid,
    #content .yolo-ys-search-results .container-fluid,
    .entry-content .yolo-ys-search-results .container-fluid,
    main .yolo-ys-search-results .container-fluid,
    .site-content .yolo-ys-search-results .container-fluid {
        padding: 0 !important;
    }
    
    /* Keep search form with some padding */
    body .yolo-ys-search-results #yolo-ys-results-search-form,
    #content .yolo-ys-search-results #yolo-ys-results-search-form,
    .entry-content .yolo-ys-search-results #yolo-ys-results-search-form,
    main .yolo-ys-search-results #yolo-ys-results-search-form,
    .site-content .yolo-ys-search-results #yolo-ys-results-search-form {
        margin: 0 10px 15px 10px !important;
    }
    
    /* Keep filters with padding */
    body .yolo-ys-search-results .yolo-ys-filters-toggle-container,
    #content .yolo-ys-search-results .yolo-ys-filters-toggle-container,
    .entry-content .yolo-ys-search-results .yolo-ys-filters-toggle-container,
    main .yolo-ys-search-results .yolo-ys-filters-toggle-container,
    .site-content .yolo-ys-search-results .yolo-ys-filters-toggle-container {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
    
    /* Section headers need padding */
    body .yolo-ys-search-results .yolo-ys-section-header,
    #content .yolo-ys-search-results .yolo-ys-section-header,
    .entry-content .yolo-ys-search-results .yolo-ys-section-header,
    main .yolo-ys-search-results .yolo-ys-section-header,
    .site-content .yolo-ys-search-results .yolo-ys-section-header {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
    
    /* Yacht grid rows - match Our Fleet */
    body .yolo-ys-search-results .yolo-ys-yacht-grid.row,
    #content .yolo-ys-search-results .yolo-ys-yacht-grid.row,
    .entry-content .yolo-ys-search-results .yolo-ys-yacht-grid.row,
    main .yolo-ys-search-results .yolo-ys-yacht-grid.row,
    .site-content .yolo-ys-search-results .yolo-ys-yacht-grid.row {
        --bs-gutter-x: 0;
        margin-left: -5px !important;
        margin-right: -5px !important;
    }
    
    body .yolo-ys-search-results .yolo-ys-yacht-grid.row > [class*="col-"],
    #content .yolo-ys-search-results .yolo-ys-yacht-grid.row > [class*="col-"],
    .entry-content .yolo-ys-search-results .yolo-ys-yacht-grid.row > [class*="col-"],
    main .yolo-ys-search-results .yolo-ys-yacht-grid.row > [class*="col-"],
    .site-content .yolo-ys-search-results .yolo-ys-yacht-grid.row > [class*="col-"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin-bottom: 10px !important;
    }
    
    /* -----------------------------------------
       OUR FLEET PAGE
       ----------------------------------------- */
    .yolo-ys-our-fleet {
        padding: 0 !important;
    }
    
    .yolo-ys-our-fleet .container-fluid {
        padding: 0 12px !important;
    }
    
    .yolo-ys-fleet-title {
        font-size: 20px !important;
        padding: 16px !important;
        margin: 0 !important;
        text-align: center !important;
    }
    
    .yolo-ys-fleet-badge {
        font-size: 11px !important;
        padding: 4px 10px !important;
        display: block !important;
        margin-bottom: 8px !important;
    }
    
    .yolo-ys-our-fleet .row {
        --bs-gutter-x: 0;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .yolo-ys-our-fleet [class*="col-"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-bottom: 16px !important;
    }
    
    /* -----------------------------------------
       YACHT CARDS - Mobile Optimized
       ----------------------------------------- */
    .yolo-ys-yacht-card {
        border-radius: 12px !important;
        margin: 0 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    .yolo-ys-yacht-image {
        height: 200px !important;
        border-radius: 12px 12px 0 0 !important;
    }
    
    .yolo-ys-yacht-content {
        padding: 16px !important;
    }
    
    .yolo-ys-yacht-name {
        font-size: 18px !important;
    }
    
    .yolo-ys-yacht-model {
        font-size: 14px !important;
    }
    
    .yolo-ys-yacht-specs-grid .row {
        --bs-gutter-x: 8px;
        --bs-gutter-y: 8px;
    }
    
    .yolo-ys-spec-value {
        font-size: 15px !important;
    }
    
    .yolo-ys-spec-label {
        font-size: 11px !important;
    }
    
    .yolo-ys-yacht-price-container {
        padding: 12px !important;
        margin-bottom: 12px !important;
    }
    
    .yolo-ys-details-btn {
        padding: 14px 16px !important;
        font-size: 14px !important;
        min-height: 48px !important;
    }
    
    /* -----------------------------------------
       YACHT DETAILS PAGE
       ----------------------------------------- */
    .yolo-yacht-details-v3 {
        padding: 0 !important;
    }
    
    .yolo-yacht-details-v3 .yacht-header {
        padding: 16px !important;
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center !important;
    }
    
    .yolo-yacht-details-v3 .yacht-name {
        font-size: 20px !important;
        flex-direction: column !important;
        gap: 4px !important;
    }
    
    .yolo-yacht-details-v3 .separator {
        display: none !important;
    }
    
    .yolo-yacht-details-v3 .yacht-main-content {
        padding: 0 !important;
    }
    
    .yolo-yacht-details-v3 .yacht-image-swiper {
        border-radius: 0 !important;
    }
    
    .yolo-yacht-details-v3 .yacht-section,
    .yolo-yacht-details-v3 .yacht-specs,
    .yolo-yacht-details-v3 .yacht-equipment-section,
    .yolo-yacht-details-v3 .yacht-extras-combined,
    .yolo-yacht-details-v3 .yacht-description,
    .yolo-yacht-details-v3 .yacht-map-section {
        padding: 20px 16px !important;
        margin: 0 0 1px 0 !important;
        border-radius: 0 !important;
    }
    
    /* Booking sidebar on mobile - full width */
    .yolo-yacht-details-v3 .yacht-booking-sidebar {
        position: relative !important;
        top: auto !important;
        margin: 16px 0 !important;
        border-radius: 0 !important;
    }
    
    .yolo-yacht-details-v3 .booking-sidebar-content {
        padding: 20px 16px !important;
    }
    
    .yolo-yacht-details-v3 #selectedPriceFinal {
        font-size: 28px !important;
    }
    
    .yolo-yacht-details-v3 .book-now-btn,
    .yolo-yacht-details-v3 .request-quote-btn {
        padding: 16px !important;
        font-size: 16px !important;
        min-height: 52px !important;
    }
    
    /* -----------------------------------------
       BOOKING CONFIRMATION
       ----------------------------------------- */
    .yolo-booking-confirmation {
        padding: 0 !important;
    }
    
    .yolo-booking-confirmation .confirmation-header {
        padding: 24px 16px !important;
        text-align: center !important;
    }
    
    .yolo-booking-confirmation .confirmation-header h1 {
        font-size: 22px !important;
    }
    
    .yolo-booking-confirmation .confirmation-content {
        padding: 0 !important;
    }
    
    .yolo-booking-confirmation .booking-details-card,
    .yolo-booking-confirmation .payment-details-card,
    .yolo-booking-confirmation .customer-details-card,
    .yolo-booking-confirmation .next-steps-card,
    .yolo-booking-confirmation .payment-summary-card {
        margin: 0 0 1px 0 !important;
        padding: 20px 16px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border-bottom: 1px solid #e5e7eb !important;
    }
    
    .yolo-booking-confirmation .detail-row {
        flex-direction: column !important;
        gap: 4px !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid #f3f4f6 !important;
    }
    
    .yolo-booking-confirmation .detail-label {
        font-size: 13px !important;
        color: #6b7280 !important;
    }
    
    .yolo-booking-confirmation .detail-value {
        font-size: 15px !important;
        font-weight: 600 !important;
    }
    
    .yolo-booking-confirmation .action-buttons {
        padding: 20px 16px !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .yolo-booking-confirmation .action-buttons .btn {
        width: 100% !important;
        padding: 14px !important;
        font-size: 16px !important;
        min-height: 48px !important;
    }
    
    .yolo-booking-confirmation .next-steps-list {
        padding-left: 20px !important;
    }
    
    .yolo-booking-confirmation .next-steps-list li {
        font-size: 14px !important;
        margin-bottom: 12px !important;
        line-height: 1.5 !important;
    }
    
    /* -----------------------------------------
       BALANCE PAYMENT & CONFIRMATION
       ----------------------------------------- */
    .yolo-balance-payment {
        padding: 0 !important;
    }
    
    .yolo-balance-payment .payment-header {
        padding: 24px 16px !important;
        text-align: center !important;
    }
    
    .yolo-balance-payment .payment-header h1 {
        font-size: 22px !important;
    }
    
    .yolo-balance-payment .payment-subtitle {
        font-size: 14px !important;
    }
    
    .yolo-balance-payment .payment-content {
        padding: 0 !important;
    }
    
    .yolo-balance-payment .booking-summary-card,
    .yolo-balance-payment .payment-details-card,
    .yolo-balance-payment .payment-info {
        margin: 0 0 1px 0 !important;
        padding: 20px 16px !important;
        border-radius: 0 !important;
    }
    
    .yolo-balance-payment .summary-row,
    .yolo-balance-payment .payment-row {
        flex-direction: column !important;
        gap: 4px !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid #f3f4f6 !important;
    }
    
    .yolo-balance-payment .btn-pay-now {
        width: 100% !important;
        padding: 16px !important;
        font-size: 18px !important;
        min-height: 52px !important;
    }
    
    .yolo-balance-payment .payment-info {
        font-size: 13px !important;
    }
    
    /* -----------------------------------------
       GUEST LOGIN
       ----------------------------------------- */
    .yolo-guest-login-container {
        padding: 20px 16px !important;
        min-height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .yolo-guest-login-box {
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px 20px !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    }
    
    .yolo-guest-login-header h2 {
        font-size: 24px !important;
        margin-bottom: 8px !important;
    }
    
    .yolo-guest-login-header p {
        font-size: 14px !important;
    }
    
    .yolo-guest-login-form .yolo-form-group {
        margin-bottom: 16px !important;
    }
    
    .yolo-guest-login-form .yolo-form-group label {
        font-size: 14px !important;
        margin-bottom: 6px !important;
        display: block !important;
    }
    
    .yolo-guest-login-form .yolo-form-control {
        width: 100% !important;
        padding: 14px 16px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
        border-radius: 10px !important;
        min-height: 48px !important;
    }
    
    .yolo-guest-login-form .yolo-form-hint {
        font-size: 12px !important;
        margin-top: 6px !important;
    }
    
    .yolo-guest-login-form .yolo-btn {
        width: 100% !important;
        padding: 14px !important;
        font-size: 16px !important;
        min-height: 48px !important;
        border-radius: 10px !important;
    }
    
    .yolo-login-footer {
        margin-top: 20px !important;
        text-align: center !important;
    }
    
    .yolo-login-footer a {
        font-size: 14px !important;
    }
    
    .yolo-login-help {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
    
    /* -----------------------------------------
       GUEST DASHBOARD
       ----------------------------------------- */
    .yolo-guest-dashboard {
        padding: 0 !important;
    }
    
    .yolo-guest-header {
        padding: 24px 16px !important;
        text-align: center !important;
        position: relative !important;
    }
    
    .yolo-guest-header h1 {
        font-size: 22px !important;
        margin-bottom: 4px !important;
    }
    
    .yolo-guest-subtitle {
        font-size: 14px !important;
        margin-bottom: 16px !important;
    }
    
    .yolo-logout-btn {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        display: inline-block !important;
        padding: 8px 16px !important;
        font-size: 14px !important;
    }
    
    /* No Bookings Message */
    .yolo-no-bookings {
        padding: 40px 16px !important;
        text-align: center !important;
    }
    
    .yolo-no-bookings h3 {
        font-size: 20px !important;
    }
    
    .yolo-no-bookings p {
        font-size: 14px !important;
    }
    
    /* Bookings List */
    .yolo-bookings-list {
        padding: 0 !important;
    }
    
    .yolo-booking-card {
        margin: 0 0 16px 0 !important;
        border-radius: 0 !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    }
    
    .yolo-booking-header {
        padding: 16px !important;
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center !important;
    }
    
    .yolo-booking-header h2 {
        font-size: 18px !important;
    }
    
    .yolo-booking-status {
        font-size: 12px !important;
        padding: 4px 12px !important;
    }
    
    .yolo-booking-details {
        padding: 0 !important;
    }
    
    /* Booking Info Grid - 2 columns on mobile */
    .yolo-booking-info {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1px !important;
        background: #e5e7eb !important;
        padding: 0 !important;
    }
    
    .yolo-info-item {
        padding: 12px !important;
        background: white !important;
    }
    
    .yolo-info-label {
        font-size: 11px !important;
        text-transform: uppercase !important;
        color: #6b7280 !important;
        margin-bottom: 4px !important;
    }
    
    .yolo-info-value {
        font-size: 14px !important;
        font-weight: 600 !important;
    }
    
    /* Accordion Sections */
    .yolo-accordion-section {
        border-top: 1px solid #e5e7eb !important;
    }
    
    .yolo-section-toggle {
        width: 100% !important;
        padding: 16px !important;
        font-size: 14px !important;
        text-align: left !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        min-height: 52px !important;
    }
    
    .yolo-section-content {
        padding: 16px !important;
    }
    
    /* License Grid - Stack on mobile */
    .yolo-license-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .yolo-license-item {
        width: 100% !important;
    }
    
    .yolo-license-preview {
        max-height: 150px !important;
    }
    
    .yolo-license-preview img {
        max-height: 150px !important;
        object-fit: contain !important;
    }
    
    .yolo-upload-btn {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
        min-height: 44px !important;
    }
    
    /* Crew Cards - Full width stack */
    .yolo-crew-cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .yolo-crew-card {
        width: 100% !important;
    }
    
    .yolo-crew-card-header {
        padding: 12px !important;
    }
    
    .yolo-crew-fields {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 12px !important;
    }
    
    .yolo-crew-field {
        width: 100% !important;
    }
    
    .yolo-crew-field.full-width {
        grid-column: 1 / -1 !important;
    }
    
    .yolo-crew-field label {
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }
    
    .yolo-crew-field input,
    .yolo-crew-field select {
        width: 100% !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        min-height: 40px !important;
    }
    
    .yolo-save-crew-btn {
        width: 100% !important;
        padding: 14px !important;
        font-size: 16px !important;
        min-height: 48px !important;
        margin-top: 16px !important;
    }
    
    /* Document Lists */
    .yolo-checkin-doc-item,
    .yolo-checkout-doc-item,
    .yolo-incoming-doc-item {
        padding: 16px !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .yolo-doc-header {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }
    
    .yolo-doc-header h4 {
        font-size: 15px !important;
    }
    
    .yolo-doc-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    .yolo-view-doc-btn,
    .yolo-download-doc-btn,
    .yolo-sign-doc-btn {
        flex: 1 !important;
        min-width: calc(50% - 4px) !important;
        padding: 10px !important;
        font-size: 13px !important;
        text-align: center !important;
        min-height: 40px !important;
    }
    
    /* Signature Modal - Full screen on mobile */
    .yolo-signature-modal-content {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    
    .yolo-signature-pad-wrapper {
        height: 200px !important;
    }
    
    .yolo-signature-canvas {
        width: 100% !important;
        height: 100% !important;
    }
    
    .yolo-signature-modal-footer {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .yolo-signature-modal-footer button {
        width: 100% !important;
        min-height: 44px !important;
    }
    
    /* -----------------------------------------
       ERROR/SUCCESS MESSAGES
       ----------------------------------------- */
    .yolo-payment-error,
    .yolo-payment-success,
    .yolo-login-error,
    .yolo-login-success {
        margin: 16px !important;
        padding: 16px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
    }
    
    .yolo-payment-error h2,
    .yolo-payment-success h2 {
        font-size: 18px !important;
    }
}

/* ============================================
   TABLET PORTRAIT (576px - 767px)
   ============================================ */
@media (min-width: 576px) and (max-width: 767.98px) {
    
    /* Search Form - 2 columns */
    .yolo-ys-results-search-form .yolo-ys-search-form {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    
    .yolo-ys-results-search-form .yolo-ys-field-button {
        grid-column: 1 / -1 !important;
    }
    
    /* Yacht Cards */
    .yolo-ys-yacht-card {
        border-radius: 12px !important;
    }
    
    .yolo-ys-yacht-image {
        height: 220px !important;
    }
    
    /* Booking Info Grid - 3 columns */
    .yolo-booking-info {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* Crew Fields - 3 columns */
    .yolo-crew-fields {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* Action buttons side by side */
    .yolo-booking-confirmation .action-buttons,
    .yolo-balance-payment .payment-actions {
        flex-direction: row !important;
    }
    
    .yolo-booking-confirmation .action-buttons .btn {
        flex: 1 !important;
    }
}

/* ============================================
   TABLET LANDSCAPE (768px - 991px)
   ============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
    
    /* Search Form - inline */
    .yolo-ys-results-search-form .yolo-ys-search-form {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
    }
    
    .yolo-ys-results-search-form .yolo-ys-field-select {
        flex: 0 0 200px !important;
    }
    
    .yolo-ys-results-search-form .yolo-ys-field-date {
        flex: 1 !important;
    }
    
    .yolo-ys-results-search-form .yolo-ys-field-button {
        flex: 0 0 150px !important;
    }
    
    /* Yacht Details - Two column layout */
    .yolo-yacht-details-v3 .yacht-booking-sidebar {
        position: sticky !important;
        top: 100px !important;
    }
    
    /* Guest Dashboard - Better grid */
    .yolo-booking-info {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .yolo-license-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }
    
    .yolo-crew-fields {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ============================================
   ENSURE TOUCH-FRIENDLY TARGETS
   Minimum 44px (Apple HIG) / 48px (Material)
   ============================================ */
@media (max-width: 991.98px) {
    
    /* All interactive elements */
    button,
    .btn,
    [type="submit"],
    [type="button"],
    .yolo-ys-details-btn,
    .yolo-btn,
    .btn-pay-now,
    .book-now-btn,
    .request-quote-btn,
    .yolo-upload-btn,
    .yolo-section-toggle,
    .yolo-save-crew-btn,
    .yolo-view-doc-btn,
    .yolo-download-doc-btn,
    .yolo-sign-doc-btn {
        min-height: 44px !important;
        cursor: pointer !important;
    }
    
    /* Form inputs - prevent iOS zoom with 16px font */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        min-height: 44px !important;
        font-size: 16px !important;
    }
    
    /* Links in content areas */
    a {
        padding: 2px 0 !important;
    }
}

/* ============================================
   PREVENT HORIZONTAL SCROLL
   ============================================ */
/* REMOVED in v20.9 - overflow-x: hidden on html/body breaks position:sticky
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}
*/

/* Prevent horizontal scroll on specific containers without breaking sticky */
.yolo-ys-our-fleet,
.yolo-ys-search-results,
.yolo-booking-confirmation,
.yolo-balance-payment,
.yolo-guest-dashboard {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Yacht details needs overflow-x:clip for sticky sidebar to work */
/* overflow:hidden breaks position:sticky, but clip works correctly */
.yolo-yacht-details-v3 {
    overflow-x: clip !important; /* Prevent horizontal scroll without breaking sticky */
    max-width: 100vw !important;
}