/*
 Theme Name:   SportsCamps Child Theme
 Theme URI:    https://sportscamps.com
 Description:  Child theme for Flatsome - Custom modifications for SportsCamps booking platform. Includes custom camp pages, coach panels, multi-currency pricing, and responsive design.
 Author:       SportsCamps Team
 Author URI:   https://sportscamps.com
 Template:     flatsome
 Version:      2.4.9
 Text Domain:  sportscamp-child
 License:      Private
 Tags:         camps, booking, sports, volleyball, responsive
*/

/* Import Inter font family for premium typography */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Import Montserrat font family for titles - full weight range */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600;700;800;900&display=swap');

/* CSS Variables for consistent theming */
:root {
    /* Force Light Theme - Override Browser Dark Mode Preferences */
    /* This ensures consistent visibility across all browser color schemes */
    /* Essential for e-commerce sites not fully optimized for dark mode */
    color-scheme: light only;

    --sportscamp-accent-color: #01224d;
    --sportscamp-early-bird-color: #ff4757;
    --sportscamp-last-spots-color: #f39c12;
    --sportscamp-success-color: #22c55e;
    --sportscamp-danger-color: #ef4444;
    --sportscamp-text-primary: #01224d;
    --sportscamp-text-secondary: #6b7280;
    --sportscamp-border-radius: 12px;
    --sportscamp-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --sportscamp-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --sportscamp-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --sportscamp-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --sportscamp-heading-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Twoje własne style CSS możesz dodawać poniżej tego komentarza */

/* ==========================================================================
   Global Resets
   ========================================================================== */

/* Remove top margin from all ul elements */
ul {
    margin-top: 0 !important;
}

/* Reduce paragraph bottom margin in main content sections only */
.camp-main-content p {
    margin-bottom: 5px !important;  /* Zmniejszone z domyślnych 20px */
}

/* ==========================================================================
   Reset Flatsome Button Margins dla SportsCamps
   ========================================================================== */

/* Resetuj marginesy dla wszystkich przycisków w kontekście SportsCamps */
.single-camp button,
.single-camp .button,
.single-camp .btn,
.single-camp input[type="button"],
.single-camp input[type="submit"],
.sportscamp-booking-button,
.booking-cta-button,
.modal-booking-trigger-container button {
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

/* Gdy potrzebujesz marginesów, dodaj explicite */
.button-with-spacing {
  margin-right: 10px !important;
  margin-bottom: 10px !important;
}

/* ==========================================================================
   Camp Page Text Colors - Navy brand color
   ========================================================================== */

/* Apply navy color and Montserrat font to all text elements on camp pages */
.single-camp {
    font-family: var(--sportscamp-heading-font) !important;
}

.single-camp h1,
.single-camp h2,
.single-camp h3,
.single-camp h4,
.single-camp h5,
.single-camp h6 {
    color: #01224d;
    font-family: var(--sportscamp-heading-font) !important;
    /* Font-weight controlled by editor - default browser weight (usually 700 for headings) */
}

/* Higher specificity for editor content */
.single-camp p,
.single-camp .wp-block-paragraph,
.single-camp .entry-content p {
    color: #01224d;
    font-family: var(--sportscamp-heading-font) !important;
    /* Font-weight controlled by editor - default normal weight */
}

.single-camp strong,
.single-camp b {
    color: #01224d;
    font-family: var(--sportscamp-heading-font) !important;
    font-weight: 700; /* Bold for strong/b elements */
}

/* ==========================================================================
   Camp Single Page Styles
   ========================================================================== */

/* Hero Section - Clean without overlay or text */
.camp-hero {
    background-size: cover;
    /* background-position is set inline per camp (hero image crop control) */
    min-height: 70vh;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

/* ==========================================================================
   NEW CAMP INFO BANNER
   ========================================================================== */

/* Camp Info Banner - Floating Card */
.camp-info-banner {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 1200px;
    background: #01224d;
    border-radius: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(1, 34, 77, 0.1);
    z-index: 15;
    margin: 0;
    padding: 10px 0;
    min-height: 55px;
    color: white;
    overflow: visible;
}

.camp-info-banner-container {
    padding-left: 40px;
    padding-right: 20px;
    display: grid;
    grid-template-columns: max-content max-content max-content max-content auto;
    grid-template-rows: auto;
    gap: 15px;  /* Zmniejszona odległość między końcem tekstu a następną ikonką */
    align-items: center;  /* Wyrównanie do środka - ikonki będą na tej samej wysokości */
    min-height: 55px;
    padding-top: 8px;
    padding-bottom: 8px;
    grid-template-areas: "price duration destination travellers actions";
}

/* Past camp banner - adjusted padding when action buttons are hidden */
.camp-info-banner-container.past-camp-banner {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Date Badge - Perfectly positioned in corner */
.date-badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    height: auto;
    min-height: auto;
    padding: 0 12px !important;  /* Zmniejszone paddingi góra/dół z 4px na 0 - !important aby nadpisać info-banner-item */
    background: #ebc914;
    color: #ffffff;
    font-size: clamp(0.4rem, 2vw, 0.9rem);  /* Bardzo agresywne skalowanie dla długich dat - minimum 0.4rem (6.4px), max 0.9rem (14.4px) */
    font-weight: 700;
    min-width: 100px;
    max-width: 240px;  /* Zwiększone z 200px dla bardzo długich dat z dwoma miesiącami */
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.date-badge-content {
    background: transparent;
    color: inherit;
    padding: 0;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Desktop/Mobile visibility control */
.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

/* Info Items */
.info-banner-item {
    display: flex;
    align-items: center;
    text-align: left;
    justify-content: flex-start;
    height: auto;
    min-height: 30px;
    padding: 4px 12px;
    color: white;
}


.info-banner-item:not(.date-badge) {
    padding-left: 8px;
}

/* Uniwersalna formuła max-width dla elementów banera */
:root {
    --banner-universal-width: 163px; /* Default dla 1001-1200px - (1000px × 0.75 - 180px) ÷ 3.5 = 163px */
}

.info-banner-item:not(.info-banner-actions):not(.date-badge) {
    max-width: var(--banner-universal-width);
}

/* Responsive breakpoints - poprawna formuła z wagami 3.5 */
@media (max-width: 1000px) {
    :root {
        --banner-universal-width: 137px; /* (800px × 0.75 - 180px) ÷ 3.5 = 137px */
    }
}

@media (min-width: 1201px) {
    :root {
        --banner-universal-width: 206px; /* (1200px × 0.75 - 180px) ÷ 3.5 = 206px */
    }
}

@media (min-width: 1401px) {
    :root {
        --banner-universal-width: 249px; /* (1400px × 0.75 - 180px) ÷ 3.5 = 249px */
    }
}

@media (min-width: 1601px) {
    :root {
        --banner-universal-width: 291px; /* (1600px × 0.75 - 180px) ÷ 3.5 = 291px */
    }
}

.price-icon,
.duration-icon,
.destination-icon,
.travellers-icon {
    margin-right: 8px;
    display: flex;
    align-items: center;  /* Wyśrodkowanie ikonki w pionie */
    justify-content: center;  /* Wyśrodkowanie ikonki w poziomie */
}

.price-icon i,
.duration-icon i,
.destination-icon i,
.travellers-icon i {
    font-size: 36px;
    color: white;
    stroke-width: 1.5;
}

/* Positioning context for price and travellers items */
.price-info,
.travellers-info {
    position: relative;  /* Kontener dla absolutnego pozycjonowania notice/link */
}

.price-content,
.duration-content,
.destination-content {
    display: flex;
    align-items: center;  /* Wyśrodkowanie w pionie z ikonką */
    text-align: left;
    margin-left: 0;
    padding-left: 0;
}

.travellers-content {
    display: flex;
    align-items: center;  /* Wyśrodkowanie levels-wrapper względem ikony */
    text-align: left;
    margin-left: 0;
    padding-left: 0;
}

/* Levels wrapper for value only (no positioning) */
.levels-wrapper {
    display: flex;
    align-items: center;  /* Value wyrównany do ikony */
}

/* Desktop: Old working version - notice/link inside wrappers with absolute positioning */
.price-notice {
    position: absolute;
    top: 100%;  /* Poniżej całego .price-info (wylewa się poza banner) */
    left: 8px;  /* Uwzględnia padding-left: 8px z .info-banner-item */
    width: calc(100% - 8px); /* Pełna szerokość minus padding-left */
    font-size: 0.55rem !important;
    color: #ebc914 !important;
    margin-top: 0;
    line-height: 1.2;
    word-wrap: break-word;
    text-align: left;
}

.levels-description-link {
    position: absolute;
    top: 100%;  /* Poniżej całego .travellers-info (wylewa się poza banner) */
    left: 8px;  /* Uwzględnia padding-left: 8px z .info-banner-item */
    width: calc(100% - 8px); /* Pełna szerokość minus padding-left */
    font-size: 0.55rem !important;
    color: #ebc914 !important;
    text-decoration: none !important;
    margin-top: 0;
    line-height: 1.2;
    word-wrap: break-word;
    transition: opacity 0.3s ease;
}

.levels-description-link:hover {
    opacity: 0.8;
}

/* Price wrapper for value only (no positioning) */
.price-wrapper {
    display: flex;
    align-items: center;  /* Value wyrównany do ikony */
}

/* Labels removed from HTML - styles no longer needed */

.price-value,
.duration-value,
.destination-value,
.travellers-value {
    font-weight: 600;
    font-size: 0.9rem;
    color: white;
    line-height: 1.2;
}

/* Early Bird Price in Banner */
.price-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;  /* Zawsze w jednej linii */
}

/* Banner-specific early bird styles */
.info-banner-item .early-bird-price {
    color: #ebc914;
    font-weight: 600;  /* Zmienione z 700 */
    font-size: 0.9rem;  /* Zmienione z 1.1rem */
}

/* Banner-specific launch sale styles */
.info-banner-item .launch-sale-price {
    color: #ebc914;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Banner-specific promotional preview styles (Pre-Launch) */
.info-banner-item .promotional-preview-price {
    color: #ebc914;
    font-weight: 600;
    font-size: 0.9rem;
}

.info-banner-item .original-price {
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;  /* Zmienione z 0.85rem - taki sam jak early bird */
    font-weight: 600;  /* Dodane - taka sama waga */
    margin-left: 0px;  /* Usunięty margin */
}

/* Grid Areas for Banner Items */
.price-info { grid-area: price; }
.duration-info { grid-area: duration; }
.destination-info { grid-area: destination; }
.travellers-info { grid-area: travellers; }

/* Action Buttons in Banner */
.info-banner-actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: center;
    justify-content: center;
    align-items: center;
    justify-self: end;  /* Wyrównanie do prawej strony */
    height: 100%;
    padding: 0 10px;
}

/* Banner Button Styles - Matching target design */
/* Tournament categories list in info banner (v3.4.0) */
.info-banner-item.tournament-categories-info {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.info-banner-item.tournament-categories-info .tournament-categories-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
}
.info-banner-item.tournament-categories-info .tournament-category-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 2px 0;
}
.info-banner-item.tournament-categories-info .tournament-category-row.is-full {
    opacity: 0.55;
}
.info-banner-item.tournament-categories-info .category-name {
    font-weight: 500;
    color: inherit;
}
.info-banner-item.tournament-categories-info .category-capacity {
    color: rgba(255, 255, 255, 0.75);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.camp-info-banner-container .banner-pricing-trigger-container .kontra-pricing-btn,
.camp-info-banner-container .banner-booking-trigger-container .kontra-booking-btn,
.camp-info-banner-container .banner-pricing-trigger-placeholder .kontra-pricing-btn,
.camp-info-banner-container .banner-booking-trigger-placeholder .kontra-booking-btn {
    width: 120px !important;
    height: 32px !important;
    margin: 0 !important;
    text-align: center;
    font-size: 0.7rem !important;
    font-weight: 600;
    text-transform: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none !important;
    outline: none;
    display: flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.camp-info-banner-container .banner-pricing-trigger-container .kontra-pricing-btn,
.camp-info-banner-container .banner-pricing-trigger-placeholder .kontra-pricing-btn {
    background: white !important;
    color: #01224d !important;
}

.camp-info-banner-container .banner-booking-trigger-container .kontra-booking-btn,
.camp-info-banner-container .banner-booking-trigger-placeholder .kontra-booking-btn {
    background: #ebc914 !important;
    color: #01224d !important;
}

/* Placeholder disabled state - slightly dimmed */
.banner-pricing-trigger-placeholder .kontra-pricing-btn[disabled],
.banner-booking-trigger-placeholder .kontra-booking-btn[disabled] {
    opacity: 0.8;
    cursor: default;
}


/* ==========================================================================
   CAMP TITLE SECTION
   ========================================================================== */

.camp-title-section {
    padding: 110px 0 50px 0;  /* Top: 110px, Bottom: 50px */
    background: white;
}

/* Tournament pages don't have the overlapping hero info banner that justified
   camp's 110px top padding — tighten spacing so title sits close to hero. */
body.single-tournament .camp-title-section {
    padding-top: 20px;
    padding-bottom: 15px;
}

.camp-title-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

/* Premium Title/Subtitle Styling - Montserrat Typography */
.camp-main-title {
    font-size: 2.75rem;
    font-weight: 800; /* Extra Bold for main title */
    color: var(--sportscamp-text-primary);
    margin: 0 0 8px 0;
    font-family: var(--sportscamp-heading-font);
    line-height: 1.15;
    letter-spacing: -0.025em;
    text-transform: uppercase; /* Wielkie litery */
}

.camp-subtitle {
    font-size: 1.125rem;
    font-weight: 300;  /* Light weight */
    color: #01224d;    /* Zmiana koloru na #01224d */
    margin: 0;
    font-family: var(--sportscamp-heading-font);
    line-height: 1.5;
    letter-spacing: 0.01em;
    opacity: 1;        /* Usuń opacity dla pełnego koloru */
}

/* Mobile responsive for title/subtitle */
@media (max-width: 768px) {
    .camp-main-title {
        font-size: 28px;
        line-height: 1.2;
        margin-bottom: 6px;
    }

    .camp-subtitle {
        font-size: 16px;
    }
}

/* Main Content Layout */
.camp-content-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 12px 40px 12px;  /* Reduced top padding from 80px to 10px */
    position: relative;
}

.camp-content-grid {
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 40px;
    align-items: start;
    position: relative;
}

/* Main Content Sections */
.camp-description {
    margin-bottom: 40px;
}

/* ==========================================================================
   Camp Video Section - 1/3 Width of SCREEN, Centered
   ========================================================================== */

.camp-video-section {
    width: 100vw !important; /* Full viewport width */
    margin-left: calc(50% - 50vw) !important; /* Break out of container */
    margin-right: calc(50% - 50vw) !important;
    margin-bottom: 60px !important;
    padding: 0 !important;
}

.camp-video-container {
    position: relative;
    width: fit-content;
    max-width: 50vw;
    margin: 0 auto !important; /* Center horizontally */
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* WordPress block wrapper */
.camp-video-container .wp-block-sportscamp-video-section {
    width: 100%;
    height: auto;
}

/* WordPress core/video block - maintain aspect ratio */
.camp-video-container .wp-block-video,
.camp-video-container .wp-block-video video {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    display: block;
}

/* Direct video tag - ensure proper sizing, supports both landscape and portrait */
.camp-video-container video {
    max-width: 50vw;
    max-height: 50vh;
    width: auto;
    height: auto;
    display: block !important;
    margin: 0 !important;
}

/* WordPress core/embed block (YouTube, Vimeo, etc.) - responsive embed */
.camp-video-container .wp-block-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
    height: 0;
    overflow: hidden;
    margin: 0 !important;
}

.camp-video-container .wp-block-embed__wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.camp-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

/* WordPress core/html block - custom embeds */
.camp-video-container .wp-block-html {
    width: 100%;
    height: auto;
}

/* Tablet - increase to 50% width */
@media (max-width: 1024px) and (min-width: 769px) {
    .camp-video-container {
        width: 50%;
    }
}

/* Mobile - full width of content, maintain aspect ratio */
@media (max-width: 768px) {
    .camp-video-section {
        padding: 0 15px !important;
        margin-top: 30px !important;
        margin-bottom: 0 !important;
    }

    .camp-video-container {
        width: 100% !important; /* Full width on mobile */
        max-width: 100% !important;
        border-radius: 8px;
    }

    .camp-video-container video {
        width: 100% !important;
        max-width: 100%;
        max-height: none;
        height: auto !important;
    }
}

/* Camp Gallery Section */
.camp-gallery-section {
    margin-bottom: 40px;
    width: 100%;
}

/* FooGallery responsive overrides for camp galleries */
.camp-gallery-section .foogallery {
    margin: 0 !important;
}

.camp-gallery-section .foogallery-container {
    gap: 8px !important;
}

.camp-gallery-section .foogallery img {
    border-radius: 8px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.camp-gallery-section .foogallery img:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

/* Mobile responsive for gallery */
@media (max-width: 768px) {
    .camp-gallery-section {
        margin-bottom: 30px;
    }
    
    .camp-gallery-section .foogallery-container {
        gap: 4px !important;
    }
    
    .camp-gallery-section .foogallery img {
        border-radius: 6px !important;
    }
}

/* Priority section - Includes/Excludes moved to top - MODERNIZED */
.priority-section {
    order: -1; /* Move to top of flex container */
    margin-bottom: var(--sportscamp-spacing-6);
    padding: var(--sportscamp-spacing-4);
    background: var(--sportscamp-bg-secondary);
    border-radius: var(--sportscamp-radius-md);
    border: 1px solid var(--sportscamp-border-light);
}

.priority-section h2 {
    font-size: var(--sportscamp-font-size-lg);
    font-weight: var(--sportscamp-font-weight-semibold);
    margin-bottom: var(--sportscamp-spacing-4);
    color: var(--sportscamp-text-primary);
}

.pricing-table-link {
    text-align: center;
    margin-top: var(--sportscamp-spacing-4);
}

.camp-description-sections {
    margin-bottom: 40px;
}

.description-section {
    margin-bottom: 30px;
}

.description-section h2 {
    color: #01224d;  /* Zmiana koloru na #01224d */
    margin-bottom: 15px;
    font-size: 1.8rem;
}

.section-content {
    margin-bottom: 20px;
    line-height: 1.6;
}

.section-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.section-gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

/* Pricing Packages */
.camp-pricing-packages {
    margin-bottom: 40px;
}

.camp-pricing-packages h2 {
    color: #333;
    margin-bottom: 20px;
    font-size: 1.8rem;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.pricing-package {
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    background: #f9f9f9;
}

.pricing-package h3 {
    margin-bottom: 15px;
    color: #333;
    font-size: 1.3rem;
}

.package-prices {
    margin-bottom: 10px;
}

.price-pln {
    font-size: 1.2rem;
    font-weight: bold;
    color: #007cba;
}

.price-eur,
.price-usd {
    font-size: 1rem;
    color: #666;
}

/* ==========================================================================
   NEW INCLUDES/EXCLUDES LAYOUT - 4 COLUMNS COMPACT
   ========================================================================== */

.camp-includes-excludes {
    margin-bottom: 40px;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 30px;
    border: 1px solid #e9ecef;
}

/* Includes Section */
.includes-section {
    margin-bottom: 30px;
}

.includes-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 30px;
    align-items: start;
}

.includes-header h3 {
    color: var(--sportscamp-success-color);
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.includes-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px 20px;  /* Zmniejszony gap między wierszami z 8px na 5px */
}

.include-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.95rem;
    line-height: 1.3;
}

.include-icon {
    color: var(--sportscamp-success-color);
    font-weight: bold;
    font-size: 0.8rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.include-text {
    color: #374151;
}

/* Extras Section */
.extras-section {
    margin-bottom: 0;
}

.extras-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 30px;
    align-items: start;
}

.extras-header h3 {
    color: #f59e0b;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.extras-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px 20px;  /* Zmniejszony gap między wierszami z 8px na 5px */
}

.extra-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.95rem;
    line-height: 1.3;
}

.extra-icon {
    color: #f59e0b;
    font-weight: bold;
    font-size: 0.8rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.extra-text {
    color: #374151;
}

/* ==========================================================================
   TOURNAMENT PARTNERS STRIP
   Full-width logo strip under the hero, before the title. Auto-scrolling
   marquee with edge fade; animation pauses on hover. Works on mobile too.
   ========================================================================== */

/* Plain semi-transparent white strip overlapping the hero with its full
   height. No backdrop blur — hero image shows through evenly at 50% alpha. */
.tournament-partners-strip {
    background: rgba(255, 255, 255, 0.5);
    padding: 18px 0;
    border: none;
    overflow: hidden;
    margin-top: -108px;
    position: relative;
    z-index: 3;
}
.tournament-partners-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}
.tournament-partners-carousel {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.tournament-partners-track {
    display: flex;
    align-items: center;
    gap: 56px;
    width: max-content;
    animation: tournament-partners-marquee 32s linear infinite;
}
.tournament-partners-carousel:hover .tournament-partners-track {
    animation-play-state: paused;
}
/* Static mode — added by JS when originals fit in container. Centers logos
   without animation and hides the duplicate pass that exists for seamless loop. */
.tournament-partners-carousel.is-static {
    -webkit-mask-image: none;
    mask-image: none;
}
.tournament-partners-carousel.is-static .tournament-partners-track {
    animation: none !important;
    width: auto;
    justify-content: center;
    flex-wrap: nowrap;
}
.tournament-partners-carousel.is-static .tournament-partner-item[aria-hidden="true"] {
    display: none;
}
.tournament-partner-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
}
.tournament-partner-item img {
    height: 64px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
}
@keyframes tournament-partners-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
    /* Mobile total: 12px*2 + 44px = 68px → margin matches */
    .tournament-partners-strip {
        padding: 12px 0;
        margin-top: -68px;
    }
    .tournament-partners-container { padding: 0 16px; }
    .tournament-partners-track { gap: 36px; animation-duration: 24s; }
    .tournament-partner-item { height: 44px; }
    .tournament-partner-item img { height: 38px; max-width: 140px; }
}

/* ==========================================================================
   TOURNAMENT DESKTOP CTA ROW
   Centered Book Now + Full Pricing buttons between title and info banner.
   Desktop-only — mobile uses the sticky bottom bar instead.
   ========================================================================== */

.tournament-cta-row-section {
    max-width: 1240px;
    margin: 0 auto;
    padding: 8px 24px 28px;
    text-align: center;
}
.tournament-cta-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.tournament-cta-row .cta-row-booking-wrap,
.tournament-cta-row .cta-row-pricing-wrap {
    position: relative;
    display: inline-flex;
}
.tournament-cta-row .cta-row-booking-trigger,
.tournament-cta-row .cta-row-pricing-trigger {
    display: inline-flex;
}
/* Shared button geometry — Book Now (primary yellow) and Full Pricing
   (secondary light) are visually paired: same size, same shape. */
.tournament-cta-row .kontra-booking-btn,
.tournament-cta-row .kontra-pricing-btn,
.tournament-cta-row .sportscamp-booking-button,
.tournament-cta-row .sportscamp-pricing-button {
    min-width: 140px !important;
    height: 38px !important;
    padding: 0 18px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease !important;
}
/* Primary — Book Now: brand yellow on navy text */
.tournament-cta-row .kontra-booking-btn,
.tournament-cta-row .sportscamp-booking-button {
    background: #fbbf24 !important;
    color: #01224d !important;
    border-color: #fbbf24 !important;
}
.tournament-cta-row .kontra-booking-btn:hover,
.tournament-cta-row .sportscamp-booking-button:hover {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
}
/* Secondary — Full Pricing: light grey bg, navy text, subtle border */
.tournament-cta-row .kontra-pricing-btn,
.tournament-cta-row .sportscamp-pricing-button {
    background: #f3f4f6 !important;
    color: #01224d !important;
    border-color: #d1d5db !important;
}
.tournament-cta-row .kontra-pricing-btn:hover,
.tournament-cta-row .sportscamp-pricing-button:hover {
    background: #e5e7eb !important;
    border-color: #9ca3af !important;
}
.tournament-cta-row .kontra-booking-btn[disabled],
.tournament-cta-row .kontra-pricing-btn[disabled] {
    opacity: 0.85;
    cursor: default;
}

/* Hide the desktop CTA row on mobile — sticky bar handles it */
@media (max-width: 768px) {
    .tournament-cta-row-section { display: none; }
}

/* Tournament Book Now + Waitlist hybrid label.
   Two-line stack inside the button (primary on top, smaller "+ Waitlist"
   underneath) with tight line-height so it fits in the existing button
   height — no geometry change next to "Full pricing". */
.kontra-booking-btn--waitlist-hybrid {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    line-height: 1 !important;
}
.kontra-booking-btn--waitlist-hybrid .kontra-booking-btn__primary {
    line-height: 1.05;
    white-space: nowrap;
}
.kontra-booking-btn--waitlist-hybrid .kontra-booking-btn__secondary {
    font-size: 0.7em;
    opacity: 0.65;
    font-weight: 500;
    letter-spacing: 0.3px;
    white-space: nowrap;
    line-height: 1;
    text-transform: uppercase;
}

/* Tournament pages — hide the right sidebar (temporary for testing) and
   let main content take the full grid width. Camps are unaffected. */
body.single-tournament .camp-content-grid {
    grid-template-columns: 1fr !important;
}
body.single-tournament .sticky-sidebar {
    display: none !important;
}

/* Tournament description: match the navy info banner envelope (1100px max-width,
   24px gutters, centered) instead of spanning the full sidebar-less grid width.
   Wins over the base `.camp-description-sections { margin: 60px 0 }` on left/right
   via higher specificity — vertical margins are preserved. Camps are unaffected. */
body.single-tournament .camp-description-sections {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}
@media (max-width: 768px) {
    body.single-tournament .camp-description-sections {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Tournament pages on mobile: tighten the gap between the navy info banner
   and the first description section title. Camp template's 60px paddings +
   50px margins were sized to clear the overlapping hero info banner — for
   tournaments (no overlap) they collapse to a fraction of the original. */
@media (max-width: 768px) {
    body.single-tournament .camp-content-wrapper { padding-top: 12px; }
    body.single-tournament .camp-description-sections { margin: 0; }
    body.single-tournament .camp-description-sections > .description-section:first-child {
        margin-top: 12px;
    }
}

/* ==========================================================================
   TOURNAMENT INFO BANNER SECTION (wrapper)
   ========================================================================== */

.tournament-info-banner-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px 36px;
}
.tournament-info-banner-section .tournament-info-banner {
    margin-bottom: 0;
}
@media (max-width: 768px) {
    .tournament-info-banner-section { padding: 0 16px 24px; }
}

/* ==========================================================================
   TOURNAMENT INFO BANNER (.tournament-info-banner)
   Three zones: meta grid (Date+Location), admin pairs stack, categories grid.
   Grey sibling of .camp-includes-excludes; .tournament-info-banner.is-navy
   variant inverts the palette for tournament hero-adjacent placement.
   ========================================================================== */

.tournament-info-banner {
    --tib-bg: #f8f9fa;
    --tib-border: #e9ecef;
    --tib-label: #01224d;
    --tib-value: #374151;
    --tib-muted: #999;
    --tib-divider: #e9ecef;
    --tib-red: #ef4444;
    --tib-amber: #f59e0b;

    margin-bottom: 40px;
    background: var(--tib-bg);
    border-radius: 12px;
    padding: 22px 26px;
    border: 1px solid var(--tib-border);
    color: var(--tib-value);
}

/* Navy inverted variant — tournament page uses this. */
.tournament-info-banner.is-navy {
    --tib-bg: #01224d;
    --tib-border: rgba(255, 255, 255, 0.12);
    --tib-label: #fbbf24;
    --tib-value: #ffffff;
    --tib-muted: rgba(255, 255, 255, 0.65);
    --tib-divider: rgba(255, 255, 255, 0.18);
    --tib-red: #fca5a5;
    --tib-amber: #fcd34d;
}

/* Shared typography */
.tournament-info-banner .tib-label {
    margin: 0;
    color: var(--tib-label);
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}
.tournament-info-banner .tib-value {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--tib-value);
    white-space: pre-line;
}

/* All three zones share the same vertical rhythm so the banner reads as
   one uniform list rather than 3 visually separated blocks.
   Section spacing: 14px padding-top + 1px divider + 14px padding-bottom = 29px.
*/

/* Zone 1: Meta grid (Date + Location, 2-col card-style) */
.tournament-info-banner .tib-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 48px;
    padding: 14px 0;
}
.tournament-info-banner .tib-meta-grid .tib-pair-card .tib-label {
    margin-bottom: 4px;
}

/* Zone 2: Admin pairs stack (full-width label-left rows) */
.tournament-info-banner .tib-pairs-stack {
    border-top: 1px solid var(--tib-divider);
}
.tournament-info-banner .tib-pairs-stack .tib-pair-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 30px;
    align-items: start;
    padding: 14px 0;
}
.tournament-info-banner .tib-pairs-stack .tib-pair-row + .tib-pair-row {
    border-top: 1px solid var(--tib-divider);
}

/* Zone 3: Categories (single column with two small column headers) */
.tournament-info-banner .tib-cat-section {
    margin-top: 0;
    padding-top: 14px;
    border-top: 1px solid var(--tib-divider);
}
/* Two small headers: "Categories" left, "Max Teams" right.
   Smaller than the big section heads — they're table column labels, not zone titles.
   Both headers and the category list below are constrained to ~50% of the
   banner so they read as a compact left-aligned table, not a sparse full-width row. */
/* Categories takes remaining space, Max Teams reserves a fixed width sized
   to fit the worst-case content so the header "MAX TEAMS" lines up flush-left
   with each row's value below. 200px measured against the longest everyday cell
   across all five languages: PL "26 drużyn (Wyprzedane)" needs 185px, IT/FR/DE
   ~176px, EN 150px. At 170px everything except English wrapped to two lines.
   The table's total width is pinned by max-width below, so widening this column
   only borrows from the name column — measured: name line counts unchanged. */
.tournament-info-banner .tib-cat-headers {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 18px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--tib-divider);
    margin-bottom: 4px;
    max-width: 50%;
}
.tournament-info-banner .tib-cat-h-name,
.tournament-info-banner .tib-cat-h-max {
    margin: 0;
    color: var(--tib-label);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1;
    text-align: left;
}
.tournament-info-banner .tib-cat-block {
    display: flex;
    flex-direction: column;
    max-width: 50%;
}

/* Day-group cell (multi-day case) */
.tournament-info-banner .tib-cat-group {
    margin-top: 14px;
}
.tournament-info-banner .tib-cat-group:first-child {
    margin-top: 0;
}
.tournament-info-banner .tib-cat-group-date {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tib-muted);
    padding: 0 0 6px;
    border-bottom: 1px solid var(--tib-divider);
    margin-bottom: 2px;
}

/* Category row — same column template as headers (1fr + fixed Max Teams).
   Names take remaining space on left, Max Teams cell sits on the right
   with text-aligned left so values stack flush under the column header. */
.tournament-info-banner .tib-cat-row {
    display: grid;
    grid-template-columns: 1fr 200px;
    column-gap: 18px;
    padding: 5px 0;
    border-top: 1px solid var(--tib-divider);
    font-size: 0.95rem;
    align-items: baseline;
}
.tournament-info-banner .tib-cat-block > .tib-cat-row:first-child,
.tournament-info-banner .tib-cat-group-items > .tib-cat-row:first-child {
    border-top: none;
}

.tournament-info-banner .tib-cat-row .tib-cat-name { color: var(--tib-value); font-weight: 500; }
.tournament-info-banner .tib-cat-row .tib-cat-max {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--tib-value);
    text-align: left;
}
.tournament-info-banner .tib-cat-row .tib-cat-left {
    font-variant-numeric: tabular-nums;
    color: var(--tib-muted);
    font-size: 0.82rem;
    font-weight: 500;
    margin-left: 4px;
}
.tournament-info-banner .tib-cat-row.is-full .tib-cat-left { color: var(--tib-red); font-weight: 600; }
.tournament-info-banner .tib-cat-row.is-low  .tib-cat-left { color: var(--tib-amber); font-weight: 600; }
/* Available shares the amber of "N left" on purpose: one accent colour for every
   availability state, rather than a third hue competing on the navy banner. */
.tournament-info-banner .tib-cat-row.is-available .tib-cat-left { color: var(--tib-amber); font-weight: 600; }

/* Mobile: all grids collapse to single column */
@media (max-width: 768px) {
    .tournament-info-banner {
        padding: 20px 18px;
    }
    .tournament-info-banner .tib-meta-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    /* cat-block on mobile: tiny 2px row-gap, zero column-gap, no margin below */
    .tournament-info-banner .tib-cat-block {
        gap: 0;
        row-gap: 2px;
        column-gap: 0;
        margin-bottom: 0;
    }
    .tournament-info-banner .tib-meta-grid {
        padding-bottom: 16px;
    }
    .tournament-info-banner .tib-pairs-stack .tib-pair-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 10px 0;
    }
    /* Pair labels (Date, Location, Playing System, etc.) — 14px on mobile */
    .tournament-info-banner .tib-label {
        font-size: 14px;
        letter-spacing: 0.14em;
    }
    /* Pair values (text under each label) — 12px */
    .tournament-info-banner .tib-value { font-size: 12px; }
    .tournament-info-banner .tib-cat-section { padding-top: 12px; }
    .tournament-info-banner .tib-cat-h-name,
    .tournament-info-banner .tib-cat-h-max {
        font-size: 13px;
        letter-spacing: 0.14em;
    }
    /* Mobile: half-width constraint feels cramped on 320px screens — go full width */
    .tournament-info-banner .tib-cat-headers,
    .tournament-info-banner .tib-cat-block {
        max-width: 100%;
    }
    /* Category rows: 12px content. Both numbers are measured, and they are coupled:
       IT "26 squadre (Disponibili)" needs 147px or it wraps, but at the old 10px gap
       that left too little for names and the PL row gained a third line. Narrowing
       the gap to 6px pays for the wider column, so status fits on one line in every
       language AND name line counts stay where they were. Verified live on the PL
       and IT pages at 390px. Do not raise the gap without re-measuring both. */
    .tournament-info-banner .tib-cat-headers,
    .tournament-info-banner .tib-cat-row {
        grid-template-columns: 1fr 148px;
        column-gap: 6px;
    }
    .tournament-info-banner .tib-cat-row {
        padding: 0;
    }
    .tournament-info-banner .tib-cat-row .tib-cat-name { font-size: 12px; }
    .tournament-info-banner .tib-cat-row .tib-cat-max { font-size: 12px; }
    .tournament-info-banner .tib-cat-row .tib-cat-left { font-size: 11px; }
}

/* ==========================================================================
   STICKY SIDEBAR & UNIFIED CONTAINER
   ========================================================================== */

/* Sticky Sidebar Implementation */
.sticky-sidebar {
    position: sticky;
    bottom: 20px;  /* Zmiana z top na bottom - sidebar przyklei się dołem */
    align-self: flex-end;  /* Wyrównanie do dołu kontenera */
    height: fit-content;
    z-index: 10;  /* Niski z-index żeby chował się pod menu (menu ma zwykle 999-9999) */
}

/* Unified Sidebar Container */
.sidebar-container {
    background: var(--sportscamp-bg-primary);
    border-radius: var(--sportscamp-radius-md);
    box-shadow: var(--sportscamp-shadow-md);
    overflow: visible; /* Allow tooltips to extend outside container */
    border: 1px solid var(--sportscamp-border-light);
}

/* Sidebar Sections */
.coaches-panel,
.camp-info-panel,
.booking-cta-panel,
.camp-main-gallery {
    padding: var(--sportscamp-spacing-5);
    border-bottom: 1px solid var(--sportscamp-border-light);
}

.camp-main-gallery:last-child,
.booking-cta-panel:last-child {
    border-bottom: none;
}

/* Coaches Panel Styling */
.coaches-panel {
    background: transparent;
    border-radius: 0;
    margin-bottom: 0;
}

.coaches-panel h3 {
    color: var(--sportscamp-text-primary);
    margin-bottom: var(--sportscamp-spacing-4);
    font-size: var(--sportscamp-font-size-lg);
    font-weight: var(--sportscamp-font-weight-semibold);
    text-align: center;
    border-bottom: 2px solid var(--sportscamp-border-light);
    padding-bottom: var(--sportscamp-spacing-2);
}

.coach-item {
    display: flex;
    align-items: center;
    margin-bottom: var(--sportscamp-spacing-3);
    padding: 0;
    background: var(--sportscamp-bg-secondary);
    border-radius: var(--sportscamp-radius);
    transition: var(--sportscamp-transition);
    border: 1px solid transparent;
}

/* .coach-item:hover {
    background: var(--sportscamp-bg-primary);
    border-color: var(--sportscamp-border);
    transform: translateY(-1px);
} */

.coach-image {
    margin-right: 15px;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
}

.coach-image img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
    aspect-ratio: 1;
}

.coach-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

.coach-info h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #01224d;
}

.coach-short-bio {
    margin: 0;
    font-size: 11px;
    color: #666;
    line-height: 1.3;
}

.head-coach-badge {
    display: block;
    margin-top: 2px;
    margin-left: 0;
    font-size: 0.7rem;
    background: #d63384;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.coach-item.head-coach {
    border-left: 3px solid #d63384;
}

/* ==========================================================================
   COACHES EMPTY STATE AND MORE COMING STYLES
   ========================================================================== */

/* Empty coaches placeholder */
.coaches-coming-soon {
    padding: 24px 16px;
    text-align: center;
    color: #6b7280;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px dashed #d1d5db;
    margin-top: 10px;
}

.coaches-placeholder-text {
    margin: 0;
    line-height: 1.5;
    font-size: 0.9rem;
    font-style: italic;
}

/* More coaches coming */
.more-coaches-coming {
    margin-top: 16px;
    padding: 12px 16px;
    text-align: center;
    background: #f0f9ff;
    border-radius: 6px;
    border: 1px solid #0ea5e9;
}

.more-coaches-text {
    margin: 0;
    color: #0369a1;
    font-weight: 500;
    font-size: 0.85rem;
    font-style: italic;
}

/* ==========================================================================
   ENHANCED BOOKING CTA PANEL WITH EARLY BIRD
   ========================================================================== */

.booking-cta-panel {
    background: #01224d;
    border-radius: 0;
    padding: var(--sportscamp-spacing-5);
    color: white;
    text-align: center;
    position: relative;
}

/* Early Bird Pricing Display */
.early-bird-pricing {
    display: flex;
    flex-direction: column;  /* Badge nad cenami na desktop */
    align-items: center;
    gap: 0;  /* Brak odstępu między badge a cenami na desktop */
    margin-bottom: var(--sportscamp-spacing-4);
}

/* Override booking-modal styles for CTA panel */
.booking-cta-panel .early-bird-pricing {
    justify-content: center !important;  /* Nadpisz flex-end z booking-modal dla wyśrodkowania */
}

.early-bird-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
}

/* Price comparison - single line */
.price-comparison {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    font-size: 1.2rem;
}

.price-comparison .original-price {
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
}

.price-comparison .promo-price {
    color: #ebc914;
    font-weight: 700;
    font-size: 1.4rem;
}

.early-bird-badge-small {
    background: linear-gradient(125deg, var(--sportscamp-early-bird), var(--sportscamp-early-bird-light));
    box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--sportscamp-early-bird) 50%, transparent);
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    display: block;
    width: 100%;
}

/* ==========================================================================
   Launch Sale Pricing Display (Sidebar)
   ========================================================================== */

.launch-sale-pricing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: var(--sportscamp-spacing-4);
}

.booking-cta-panel .launch-sale-pricing {
    justify-content: center !important;
}

.launch-sale-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
    gap: 6px;
}

.launch-sale-badge-small {
    background: linear-gradient(125deg, var(--sportscamp-launch-sale), var(--sportscamp-launch-sale-light));
    box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--sportscamp-launch-sale) 50%, transparent);
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    display: block;
    width: 100%;
}

.launch-sale-countdown-small {
    background: linear-gradient(125deg, var(--sportscamp-launch-sale), var(--sportscamp-launch-sale-light));
    box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--sportscamp-launch-sale) 50%, transparent);
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.savings-badge {
    background: var(--sportscamp-success);
    color: white;
    padding: var(--sportscamp-spacing-1) var(--sportscamp-spacing-2);
    border-radius: var(--sportscamp-radius-sm);
    font-size: var(--sportscamp-font-size-xs);
    font-weight: var(--sportscamp-font-weight-semibold);
}


.price-comparison .original-price {
    text-decoration: line-through;
    opacity: 0.9;
    font-size: var(--sportscamp-font-size-base);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.price-comparison .promo-price {
    font-size: var(--sportscamp-font-size-2xl);
    font-weight: var(--sportscamp-font-weight-bold);
    color: var(--sportscamp-secondary);
}

/* Promotional Preview Pricing Display (Pre-Launch - no badge) */
.promotional-preview-pricing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: var(--sportscamp-spacing-4);
}

.booking-cta-panel .promotional-preview-pricing {
    justify-content: center !important;
}

/* Standard Pricing Display */
.standard-pricing {
    margin-bottom: var(--sportscamp-spacing-4);
    display: flex;
    align-items: center;  /* Wyśrodkowanie w pionie */
    justify-content: center;  /* Wyśrodkowanie w poziomie */
    gap: 0.5rem;
    position: relative;  /* For positioning price notice */
    flex-wrap: wrap;  /* Allow wrapping for notice below */
}

.price-label {
    font-size: var(--sportscamp-font-size-sm);
    opacity: 0.8;
    display: inline-block;  /* Zmiana z block na inline-block */
    margin-bottom: 0;  /* Usunięcie marginesu */
}

.price-amount {
    font-size: var(--sportscamp-font-size-2xl);
    font-weight: var(--sportscamp-font-weight-bold);
    color: var(--sportscamp-text-inverse);
    display: inline-block;
}

/* Price notice in sidebar (below price amount) */
.price-notice-sidebar {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: #ebc914;
    font-style: italic;
    margin-top: -6px;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
}

.booking-cta-button {
    background: #28a745;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    margin-bottom: 20px;
    transition: background 0.3s ease;
}

.booking-cta-button:hover {
    background: #218838;
}

/* ==========================================================================
   HERO SECTION WITH EARLY BIRD BADGE
   ========================================================================== */

/* Hero Early Bird Badge */
.hero-early-bird-badge {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.early-bird-text {
    background: var(--sportscamp-early-bird);
    color: white;
    padding: var(--sportscamp-spacing-2) var(--sportscamp-spacing-4);
    border-radius: var(--sportscamp-radius-lg);
    font-size: var(--sportscamp-font-size-sm);
    font-weight: var(--sportscamp-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--sportscamp-shadow-md);
    animation: subtle-pulse 3s infinite;
}

.early-bird-custom-message {
    background: var(--sportscamp-early-bird);
    color: white;
    padding: var(--sportscamp-spacing-2) var(--sportscamp-spacing-3);
    border-radius: var(--sportscamp-radius-lg);
    font-size: var(--sportscamp-font-size-xs);
    font-weight: var(--sportscamp-font-weight-medium);
    text-transform: none;
    letter-spacing: 0.25px;
    box-shadow: var(--sportscamp-shadow-md);
    text-align: center;
    line-height: 1.3;
}

/* Mobile-specific font size for main early bird badge */
@media (max-width: 767px) {
    .hero-early-bird-badge {
        top: 15px;
        left: 15px;
    }

    .early-bird-text {
        font-size: 12px;
        font-weight: 600;
        padding: 0 8px;
    }

    .early-bird-custom-message {
        padding: 0 8px;
    }
}

/* Desktop-specific font size for early bird badges */
@media (min-width: 768px) {
    .early-bird-text {
        font-size: 20px;
    }

    .early-bird-custom-message {
        font-size: 14px;
    }
}

/* ==========================================================================
   HERO SECTION WITH LAUNCH SALE BADGE
   ========================================================================== */

/* Hero Launch Sale Badge */
.hero-launch-sale-badge {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 3;
}

.hero-launch-sale-badge .launch-sale-text {
    display: inline-block;
    background: var(--sportscamp-launch-sale);
    color: white;
    padding: 8px 16px;
    border-radius: var(--sportscamp-radius-lg);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--sportscamp-shadow-md);
    animation: subtle-pulse 3s infinite;
}

/* Separate countdown element below badge */
.hero-launch-sale-countdown {
    position: absolute;
    top: 75px;
    left: 30px;
    z-index: 3;
    background: var(--sportscamp-launch-sale);
    color: white;
    padding: 8px 16px;
    border-radius: var(--sportscamp-radius-lg);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: var(--sportscamp-shadow-md);
    font-family: var(--sportscamp-font-family);
}

/* Keep old class for backwards compatibility */
.launch-sale-countdown {
    background: var(--sportscamp-launch-sale);
    color: white;
    padding: var(--sportscamp-spacing-2) var(--sportscamp-spacing-3);
    border-radius: var(--sportscamp-radius-lg);
    font-size: var(--sportscamp-font-size-xs);
    font-weight: var(--sportscamp-font-weight-semibold);
    text-transform: none;
    letter-spacing: 0.25px;
    box-shadow: var(--sportscamp-shadow-md);
    text-align: center;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

/* Mobile-specific styles for Launch Sale badges */
@media (max-width: 767px) {
    .hero-launch-sale-badge {
        top: 15px;
        left: 15px;
    }

    .hero-launch-sale-badge .launch-sale-text {
        font-size: 12px;
        padding: 6px 12px;
    }

    .hero-launch-sale-countdown {
        top: 55px;
        left: 15px;
        font-size: 20px;
        padding: 6px 12px;
    }

    /* Old countdown class */
    .launch-sale-countdown {
        padding: 0 8px;
        font-size: 11px;
    }
}

/* Desktop-specific styles for Launch Sale badges */
@media (min-width: 768px) {
    .hero-launch-sale-badge .launch-sale-text {
        font-size: 16px;
    }

    .hero-launch-sale-countdown {
        font-size: 26px;
    }

    /* Old countdown class */
    .launch-sale-countdown {
        font-size: 14px;
    }
}

/* Hero Last Spots Badge */
.hero-last-spots-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 3;
}

.last-spots-text {
    background: var(--sportscamp-last-spots-color);
    color: white;
    padding: var(--sportscamp-spacing-2) var(--sportscamp-spacing-4);
    border-radius: var(--sportscamp-radius-lg);
    font-size: var(--sportscamp-font-size-sm);
    font-weight: var(--sportscamp-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--sportscamp-shadow-md);
    animation: subtle-pulse 3s infinite;
}

/* ==========================================================================
   Pre-Launch Badge Styles
   ========================================================================== */

/* Hero Pre-Launch Badge */
.hero-pre-launch-badge {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hero-pre-launch-badge .pre-launch-text {
    display: inline-block;
    background: var(--sportscamp-pre-launch, #01224d);
    color: white;
    padding: 8px 16px;
    border-radius: var(--sportscamp-radius-lg);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--sportscamp-shadow-md);
}

.hero-pre-launch-badge .pre-launch-custom-message {
    display: inline-block;
    background: var(--sportscamp-pre-launch-message, #22c55e);
    color: white;
    padding: var(--sportscamp-spacing-2) var(--sportscamp-spacing-4);
    border-radius: var(--sportscamp-radius-lg);
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--sportscamp-shadow-md);
}

/* Mobile-specific styles for Pre-Launch badges */
@media (max-width: 767px) {
    .hero-pre-launch-badge {
        top: 15px;
        left: 15px;
    }

    .hero-pre-launch-badge .pre-launch-text {
        font-size: 12px;
        padding: 6px 12px;
    }

    .hero-pre-launch-badge .pre-launch-custom-message {
        font-size: 12px;
        font-weight: 600;
        padding: 0 8px;
    }
}

/* Desktop-specific styles for Pre-Launch badges */
@media (min-width: 768px) {
    .hero-pre-launch-badge .pre-launch-text {
        font-size: 16px;
    }
}

/* ==========================================================================
   PAST CAMP BADGE
   ========================================================================== */

/* Hero Past Camp Badge */
.hero-past-camp-badge {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.hero-past-camp-badge > span {
    display: inline-block;
    background: #6b7280;
    color: white;
    font-weight: 700;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: var(--sportscamp-radius-md, 6px);
    letter-spacing: 0.05em;
    box-shadow: var(--sportscamp-shadow-md);
}

/* Mobile-specific styles for Past Camp badge */
@media (max-width: 767px) {
    .hero-past-camp-badge {
        top: 15px;
        left: 15px;
    }

    .hero-past-camp-badge > span {
        font-size: 12px;
        padding: 6px 12px;
    }
}

@keyframes subtle-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ==========================================================================
   GRADIENT GLOW BADGES — integrated pill, 1:1 with mockup V2
   One pill per state: [icon] [label] [divider] [sub] [countdown], gradient +
   colored glow (glow-pulse) + sliding shimmer (::before, under the content).
   Colors stay semantic per state; Launch Sale + Early Booking share the red.
   Inner parts use the kb-* prefix to avoid clashing with theme/Flatsome classes.
   ========================================================================== */

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 8px 22px -4px var(--glow-c, rgba(239, 68, 68, .55)); }
    50%      { box-shadow: 0 10px 34px 0  var(--glow-c, rgba(239, 68, 68, .55)); }
}

@keyframes badge-shimmer {
    0%       { transform: translateX(-120%); }
    60%, 100% { transform: translateX(320%); }
}

/* ---- pill container (one per state) ---- */
.hero-launch-sale-badge .launch-sale-text,
.hero-early-bird-badge .early-bird-text,
.hero-last-spots-badge .last-spots-text,
.hero-pre-launch-badge .pre-launch-custom-message,
.hero-past-camp-badge > span {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    border: none;
    border-radius: 11px;
    padding: .5rem .9rem;
    color: #fff;
    font-weight: 800;
    font-size: .95rem;
    line-height: 1.1;
    text-transform: none;   /* reset inherited uppercase; only .kb-lab uppercases */
    letter-spacing: normal;
}

/* ---- inner parts ---- */
.kb-main { display: contents; }   /* desktop: transparent wrapper → one integrated pill */
/* fixed-height icon box so a tall emoji (e.g. ✓) can't inflate the pill height */
.kb-ico { display: inline-flex; align-items: center; justify-content: center; line-height: 1; height: 1em; font-size: 1.05rem }
.kb-lab { text-transform: uppercase; letter-spacing: .04em; white-space: nowrap }
.kb-sub { font-weight: 600; text-transform: none; letter-spacing: 0 }
.kb-divider { width: 1px; height: 18px; background: rgba(255, 255, 255, .4); margin: 0 .15rem; flex: none }
.kb-cd {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--sportscamp-font-family-mono, ui-monospace, 'SF Mono', Consolas, monospace);
    background: rgba(0, 0, 0, .16);
    border-radius: 7px;
    padding: .2rem .5rem;
    font-size: .82rem;
}
.kb-cd b { font-weight: 700; font-variant-numeric: tabular-nums; color: #fff }
.kb-cd i { font-style: normal; opacity: .6; font-size: .72em; margin-right: 2px }
/* keep all inner parts above the shimmer */
.kb-ico, .kb-lab, .kb-sub, .kb-divider, .kb-cd { position: relative; z-index: 1 }

/* ---- shimmer bar — under the content (::before) ---- */
.hero-launch-sale-badge .launch-sale-text::before,
.hero-early-bird-badge .early-bird-text::before,
.hero-last-spots-badge .last-spots-text::before,
.hero-pre-launch-badge .pre-launch-custom-message::before,
.hero-past-camp-badge > span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: translateX(-120%);
    animation: badge-shimmer 3.6s cubic-bezier(.4, 0, .2, 1) infinite;
    pointer-events: none;
    z-index: 0;
}

/* ---- per-state gradient + glow (Launch Sale + Early Bird = same red) ---- */
.hero-launch-sale-badge .launch-sale-text {
    background: linear-gradient(125deg, var(--sportscamp-launch-sale), var(--sportscamp-launch-sale-light));
    --glow-c: color-mix(in srgb, var(--sportscamp-launch-sale) 55%, transparent);
    box-shadow: 0 8px 22px -4px var(--glow-c);
    animation: glow-pulse 3.2s cubic-bezier(.4, 0, .2, 1) infinite;
}
.hero-early-bird-badge .early-bird-text {
    background: linear-gradient(125deg, var(--sportscamp-early-bird), var(--sportscamp-early-bird-light));
    --glow-c: color-mix(in srgb, var(--sportscamp-early-bird) 55%, transparent);
    box-shadow: 0 8px 22px -4px var(--glow-c);
    animation: glow-pulse 3.2s cubic-bezier(.4, 0, .2, 1) infinite;
}
.hero-last-spots-badge .last-spots-text {
    background: linear-gradient(125deg, var(--sportscamp-last-spots-color), var(--sportscamp-last-spots-light));
    --glow-c: color-mix(in srgb, var(--sportscamp-last-spots-color) 55%, transparent);
    box-shadow: 0 8px 22px -4px var(--glow-c);
    animation: glow-pulse 3.2s cubic-bezier(.4, 0, .2, 1) infinite;
}
/* Pre-Launch + Past: gradient + static glow + shimmer, no pulse (calmer states) */
.hero-pre-launch-badge .pre-launch-custom-message {
    background: linear-gradient(125deg, var(--sportscamp-pre-launch-message), var(--sportscamp-pre-launch-message-light));
    box-shadow: 0 8px 22px -4px color-mix(in srgb, var(--sportscamp-pre-launch-message) 55%, transparent);
}
.hero-past-camp-badge > span {
    background: linear-gradient(125deg, var(--sportscamp-past), var(--sportscamp-past-light));
    box-shadow: 0 8px 22px -4px rgba(107, 114, 128, .45);
}

/* ---- mobile: shrink type; launch/early split into auto-wrapping separate pills ---- */
@media (max-width: 767px) {
    .hero-last-spots-badge .last-spots-text,
    .hero-pre-launch-badge .pre-launch-custom-message,
    .hero-past-camp-badge > span {
        flex-wrap: wrap;
        font-size: .8rem;
        padding: .45rem .7rem;
    }

    /* Launch + Early: the outer span becomes a transparent flex-wrap row; each part
       (main = icon+label, sub, countdown) is its OWN pill. They sit inline when they
       fit and wrap to a new line when they don't — works for ANY message length. */
    .hero-launch-sale-badge .launch-sale-text,
    .hero-early-bird-badge .early-bird-text {
        background: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        overflow: visible;
        flex-wrap: wrap;
        gap: 6px;
        animation: none !important;
    }
    .hero-launch-sale-badge .launch-sale-text::before,
    .hero-early-bird-badge .early-bird-text::before { display: none !important; }
    .hero-launch-sale-badge .kb-divider,
    .hero-early-bird-badge .kb-divider { display: none; }

    /* each part = its own pill */
    .hero-launch-sale-badge .kb-main,
    .hero-launch-sale-badge .kb-sub,
    .hero-launch-sale-badge .kb-cd,
    .hero-early-bird-badge .kb-main,
    .hero-early-bird-badge .kb-sub {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .42rem .7rem;
        border-radius: 11px;
        font-size: .8rem;
    }
    /* launch pills = red */
    .hero-launch-sale-badge .kb-main,
    .hero-launch-sale-badge .kb-sub,
    .hero-launch-sale-badge .kb-cd {
        background: linear-gradient(125deg, var(--sportscamp-launch-sale), var(--sportscamp-launch-sale-light));
        box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--sportscamp-launch-sale) 50%, transparent);
    }
    /* early pills = red */
    .hero-early-bird-badge .kb-main,
    .hero-early-bird-badge .kb-sub {
        background: linear-gradient(125deg, var(--sportscamp-early-bird), var(--sportscamp-early-bird-light));
        box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--sportscamp-early-bird) 50%, transparent);
    }
    .hero-launch-sale-badge .kb-cd { font-size: .74rem; }
    /* launch: countdown next to the label (fixed width → always fits on line 1);
       message ALWAYS drops to its own pill below */
    .hero-launch-sale-badge .kb-main { order: 1; }
    .hero-launch-sale-badge .kb-cd   { order: 2; }
    .hero-launch-sale-badge .kb-sub  { order: 3; flex-basis: 100%; }
}

/* ---- a11y: kill heavy badge motion for reduced-motion users ---- */
@media (prefers-reduced-motion: reduce) {
    .hero-launch-sale-badge .launch-sale-text,
    .hero-early-bird-badge .early-bird-text,
    .hero-last-spots-badge .last-spots-text {
        animation: none !important;
    }
    .hero-launch-sale-badge .launch-sale-text::before,
    .hero-early-bird-badge .early-bird-text::before,
    .hero-last-spots-badge .last-spots-text::before,
    .hero-pre-launch-badge .pre-launch-custom-message::before,
    .hero-past-camp-badge > span::before {
        display: none !important;
    }
}

/* Enhanced Hero Section */
.camp-hero-subtitle {
    margin-top: 15px;
    font-size: 1.2rem;
    opacity: 0.9;
}

.camp-dates {
    font-weight: 600;
}

.camp-location {
    font-weight: 400;
}

/* Info Bar Highlights */
.camp-info-bar {
    background: #f8f9fa;
    padding: 40px 0;
    border-bottom: 1px solid #e0e0e0;
}

.camp-info-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.info-highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.info-highlight-item {
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.highlight-icon {
    width: 60px;
    height: 60px;
    background: #007cba;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.highlight-icon i {
    font-size: 24px;
    color: white;
}

.highlight-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.highlight-subtitle {
    font-size: 0.9rem;
    color: #666;
}

/* Enhanced Description Sections */
.description-section {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e0e0e0;
}

.description-section:last-child {
    border-bottom: none;
}

/* Image-Text Layouts */
.section-image-text-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 20px;
}

.section-image-column img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.section-text-column {
    padding: 0;
}

.layout-image_right .section-image-text-layout {
    grid-template-columns: 1fr 1fr;
}

.layout-image_left .section-image-text-layout {
    grid-template-columns: 1fr 1fr;
}

/* Additional Options */
.camp-additional-options {
    margin-bottom: 40px;
}

.camp-additional-options h2 {
    color: #333;
    margin-bottom: 20px;
    font-size: 1.8rem;
}

.additional-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.additional-option {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    background: #f9f9f9;
}

.additional-option h4 {
    margin-bottom: 10px;
    color: #333;
    font-size: 1.2rem;
}

.option-description {
    margin-bottom: 15px;
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
}

.option-pricing {
    margin-top: 15px;
}

.pricing-type {
    font-size: 0.85rem;
    color: #666;
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
}

.option-prices {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.option-prices span {
    font-weight: 600;
    padding: 4px 8px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
}

/* Camp Info Panel */
.camp-info-panel {
    background: transparent;
    border-radius: 0;
    padding: var(--sportscamp-spacing-5);
    margin-bottom: 0;
    border: none;
}

.camp-info-panel h4 {
    margin-bottom: 10px;
    color: #333;
    font-size: 1.1rem;
}

/* Centered Camp Dates Title */
.camp-dates-title {
    text-align: center !important;
    margin-bottom: 15px !important;
    color: var(--sportscamp-text-primary) !important;
    font-size: var(--sportscamp-font-size-lg) !important;
    font-weight: var(--sportscamp-font-weight-semibold) !important;
    border-bottom: 2px solid var(--sportscamp-border-light) !important;
    padding-bottom: var(--sportscamp-spacing-2) !important;
}

.dates-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 5px;
    text-align: center;
    flex-wrap: nowrap;  /* Zapobiega łamaniu dat na kilka linii */
}

.start-date, .end-date {
    font-weight: 600;
    color: #01224d;
    white-space: nowrap;  /* Zapobiega łamaniu tekstu wewnątrz elementu */
    flex-shrink: 0;  /* Zapobiega kurczeniu się elementów */
    font-size: 15px;
}

.date-separator {
    color: #666;
}

.duration {
    font-size: 14px;
    color: #666;
    font-style: italic;
    text-align: center;
}

/* Pre-Camp WhatsApp panel (sidebar, between dates and pricing) */
.precamp-whatsapp-panel {
    margin: 0 5px;
    padding: 18px 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.precamp-whatsapp-text {
    margin: 0 0 14px;
    font-size: 0.62rem;
    line-height: 1.4;
    color: #01224d;
    text-align: justify;
}

.precamp-whatsapp-text strong {
    font-weight: 700;
}

.precamp-whatsapp-cta {
    text-align: center;
}

/* Now a <button>, not an <a>: the invite URL is fetched on click, so there is no href to
   hang on a link. The reset below neutralises the UA/Flatsome button defaults. */
.precamp-whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #01224d;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    border: none;
    border-radius: 0.5rem;
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.sportscamp-community-join.is-error {
    background: #ef4444;
}

.precamp-whatsapp-btn:hover,
.precamp-whatsapp-btn:focus {
    background: #02306b;
    color: #fff;
    transform: translateY(-1px);
}

.precamp-whatsapp-btn-text {
    color: #fbbf24;
}

.precamp-whatsapp-icon {
    display: inline-flex;
    line-height: 0;
}

.precamp-whatsapp-icon svg {
    display: block;
}

/* Mobile: sidebar is full-width, so the text has room for a larger, more readable size */
@media (max-width: 768px) {
    .precamp-whatsapp-text {
        font-size: 12px;
    }
}

.available-spots {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
}

.spots-count {
    font-size: 1.5rem;
    font-weight: bold;
    color: #28a745;
}

/* Main Gallery */
.camp-main-gallery {
    margin-bottom: 0;
    background: transparent;
    border-radius: 0;
}

.camp-main-gallery h3 {
    color: var(--sportscamp-text-primary);
    margin-bottom: var(--sportscamp-spacing-4);
    font-size: var(--sportscamp-font-size-lg);
    font-weight: var(--sportscamp-font-weight-semibold);
    text-align: center;
    border-bottom: 2px solid var(--sportscamp-border-light);
    padding-bottom: var(--sportscamp-spacing-2);
}

.main-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.gallery-item img:hover {
    transform: scale(1.05);
}

/* ==========================================================================
   MOBILE IMAGE-TEXT SECTIONS REORDERING
   ========================================================================== */

/* Mobile Image-Text Layout Fix */
@media (max-width: 768px) {
    .section-image-text-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--sportscamp-spacing-4) !important;
    }
    
    .section-image-column {
        order: 1 !important; /* Always show image first */
    }
    
    .section-text-column {
        order: 2 !important; /* Always show text second */
    }
}

/* ==========================================================================
   STYLISH MOBILE STICKY CTA
   ========================================================================== */

/* Hide mobile-only elements on desktop */
.mobile-only {
    display: none;
}

/* Hide mobile CTA on desktop */
.mobile-sticky-cta {
    display: none;
}

@media (max-width: 768px) {
    /* Mobile visibility control - hide desktop, show mobile */
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }

    /* Mobile Hero - smaller height */
    .camp-hero {
        min-height: 30vh;  /* Mniejsza wysokość hero na mobile */
    }

    /* Mobile Banner - absolute positioning at bottom of hero */
    .camp-info-banner {
        position: absolute;  /* Zachowujemy absolute */
        top: 100%;          /* Zaczyna się dokładnie na końcu hero */
        bottom: auto;       /* Reset bottom */
        left: 5%;           /* 5% od lewej */
        transform: none;    /* Reset transform z desktop */
        width: 90%;
        margin-top: -40px;  /* Przesuwa 40px w górę - nachodzi na hero */
        padding: 20px 0 10px 0;  /* Zwiększony padding dolny na 10px */
        min-height: auto;
        background: linear-gradient(135deg, #01224d 0%, #1e3a8a 50%, #01224d 100%); /* Lekki gradient */
    }
    
    .camp-info-banner-container {
        grid-template-columns: 1fr 1fr;  /* Dwie kolumny */
        grid-template-rows: auto auto auto auto auto;  /* 5 wierszy: główne itemy + notice/link */
        grid-template-areas:
            "price destination"
            "price-notice ."
            "duration travellers"
            ". travellers-link"
            "actions actions";  /* Przyciski przez całą szerokość */
        gap: 6px;  /* Zmniejszone na 6px */
        height: auto;
        padding: 20px 10px 5px 10px;  /* góra, prawo (10px), dół (5px), lewo (10px) */
    }
    
    .info-banner-item {
        height: auto;
        min-height: auto;
        padding: 3px 0;  /* Zmniejszone na 3px */
        flex-direction: row;  /* Układ poziomy */
        align-items: center;  /* Wyrównanie w pionie */
        justify-content: flex-start;
        gap: 12px;  /* Odstęp między ikonką a tekstem */
    }

    .info-banner-item:not(.date-badge):not(.category-badge) {
        padding-left: 0;
    }

    .price-icon,
    .duration-icon,
    .destination-icon,
    .travellers-icon {
        margin: 0;
        flex-shrink: 0;  /* Ikonka nie zmniejsza rozmiaru */
        align-self: center;
        display: flex;
        align-items: center;  /* Wyśrodkowanie ikonki w pionie */
        justify-content: center;  /* Wyśrodkowanie ikonki w poziomie */
    }

    .price-content,
    .duration-content,
    .destination-content,
    .travellers-content {
        flex: 1;
        text-align: left;  /* Tekst wyrównany do lewej */
        display: flex;
        align-items: center;  /* Wyśrodkowanie w pionie z ikonką */
    }

    .price-label,
    .duration-label,
    .destination-label,
    .travellers-label {
        display: none;  /* Ukryj etykiety na mobile */
    }

    .price-value,
    .duration-value,
    .destination-value,
    .travellers-value {
        font-size: 0.9rem;
        font-weight: 600;
    }

    /* Wyrównanie cen do lewej na mobile */
    .price-value {
        justify-content: flex-start;  /* Do lewej zamiast center */
    }

    /* Automatyczny układ cen dla Early Bird na mobile */
    .info-banner-item .price-value {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 2px 8px;
    }

    /* Rozmiary czcionek dla Early Bird na mobile */
    .info-banner-item .early-bird-price {
        font-size: 0.9rem;  /* Taki sam jak inne wartości */
    }

    .info-banner-item .original-price {
        font-size: 0.8rem;  /* Taki sam jak labels */
    }
    
    .info-banner-actions {
        justify-content: center;
        align-items: center;
        flex-direction: column;  /* Przyciski jeden pod drugim */
        gap: 6px;  /* Odstęp między przyciskami */
        margin-top: 20px;  /* Zwiększony odstęp przed przyciskami na mobile */
        justify-self: stretch !important;  /* Reset justify-self z desktop - rozciągnij na całą szerokość */
    }

    .banner-booking-trigger-container,
    .banner-pricing-trigger-container {
        width: 100%;  /* Pełna szerokość */
        display: flex;  /* Flexbox dla centrowania */
        justify-content: center;  /* Wyśrodkowanie w poziomie */
    }

    .camp-info-banner-container .banner-booking-trigger-container .kontra-booking-btn,
    .camp-info-banner-container .banner-pricing-trigger-container .kontra-pricing-btn {
        width: 80% !important;  /* Zmniejszenie o 20% */
        padding: 8px 16px !important;  /* Większy padding */
        font-size: 0.75rem !important;  /* Trochę większa czcionka */
        text-align: center !important;
        white-space: nowrap !important;
        margin: 0 !important;  /* Reset margin dodawanego przez inne style */
    }

    /* Mobile: Notice and link as separate grid items (no absolute positioning) */
    .price-notice-item {
        grid-area: price-notice;
        position: static;  /* Reset absolute positioning z desktop */
        width: 100%;
        margin-top: -3px;
        padding-left: 0;
        font-size: 0.55rem !important;
        color: #ebc914 !important;
        line-height: 1.2;
        text-align: left;
    }

    .travellers-link-item {
        grid-area: travellers-link;
        position: static;  /* Reset absolute positioning z desktop */
        width: 100%;
        margin-top: -3px;
        padding-left: 0;
        font-size: 0.55rem !important;
        color: #ebc914 !important;
        text-decoration: none !important;
        line-height: 1.2;
        text-align: left;
    }

    /* Mobile content wrapper adjustment */
    .camp-content-wrapper {
        padding-top: 60px;
    }
    
    /* Mobile title section adjustment */
    .camp-title-section {
        padding-top: 240px;  /* Zmniejszony zapas dla banera */
        padding-bottom: 0;   /* Bez paddingu dolnego */
    }
    
    .date-badge {
        justify-self: center;
        border-radius: 0;  /* Prostokąt bez zaokrągleń */
        color: #ffffff;    /* Biała czcionka */
        font-weight: 600;  /* Taki sam jak inne wartości */
        font-size: clamp(0.55rem, 3vw, 0.8rem); /* Agresywne skalowanie: min 0.55rem (8.8px), preferowane 3% szerokości, max 0.8rem (12.8px) */
        padding: 4px 8px !important;  /* Przywracamy padding góra/dół dla mobile - !important żeby nadpisać desktop */
        max-width: 185px; /* Zwiększone z 160px - więcej miejsca dla dłuższych dat */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center; /* Centrowanie tekstu w środku */
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .date-badge-content {
        width: 100%;        /* Zajmij całą szerokość rodzica */
        text-align: center; /* Wycentruj tekst wewnątrz */
    }

    /* Show mobile-only elements */
    .mobile-only {
        display: block;
    }

    /* Category Badge - prawy górny róg, identyczny styl jak date badge */
    .category-badge {
        position: absolute;
        top: 0;
        right: 0;  /* Po prawej stronie zamiast lewej */
        z-index: 20;
        background: #ebc914;  /* Ten sam żółty kolor */
        color: #ffffff;
        font-weight: 600;
        font-size: clamp(10px, 2.5vw, 11px);
        padding: 4px 8px;
        max-width: 160px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
        border-radius: 0;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .category-badge-content {
        width: 100%;
        text-align: center;
    }

    .info-banner-actions {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    /* Mobile Title - removed duplicate (defined earlier with 28px) */
    
    /* Mobile Includes/Excludes */
    .includes-row,
    .extras-row {
        grid-template-columns: 1fr;
        gap: 15px;
        text-align: center;
    }
    
    .includes-content,
    .extras-content {
        grid-template-columns: 1fr;
        gap: 3px;  /* Zmniejszony gap z 6px na 3px */
        text-align: left;
    }
    
    /* Mobile Sidebar Buttons */
    .sidebar-action-buttons {
        flex-direction: column;
        gap: 10px;
    }

    /* Show mobile CTA */
    .mobile-sticky-cta {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #01224d;
        color: white;
        padding: var(--sportscamp-spacing-3) var(--sportscamp-spacing-4);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        z-index: var(--sportscamp-z-sticky);
        align-items: center;
        gap: var(--sportscamp-spacing-3);
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Mobile Pricing Summary */
    .mobile-pricing-summary {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .mobile-early-bird {
        display: flex;
        align-items: center;
        gap: var(--sportscamp-spacing-2);
    }

    /* Mobile Launch Sale Styles (same as Early Bird - no badge) */
    .mobile-launch-sale {
        display: flex;
        align-items: center;
        gap: var(--sportscamp-spacing-2);
    }

    /* Mobile Promotional Preview Styles (Pre-Launch - same layout) */
    .mobile-promotional-preview {
        display: flex;
        align-items: center;
        gap: var(--sportscamp-spacing-2);
    }

    .mobile-original-price {
        text-decoration: line-through;
        opacity: 0.7;
        font-size: var(--sportscamp-font-size-sm);
        color: rgba(255, 255, 255, 0.7);
    }
    
    .mobile-promo-price {
        font-size: var(--sportscamp-font-size-lg);
        font-weight: var(--sportscamp-font-weight-bold);
        color: #ebc914;
    }
    
    .mobile-standard-price {
        display: flex;
        align-items: center;
        gap: var(--sportscamp-spacing-2);
    }
    
    .mobile-price-label {
        font-size: var(--sportscamp-font-size-sm);
        opacity: 0.8;
    }
    
    .mobile-price {
        font-size: var(--sportscamp-font-size-lg);
        font-weight: var(--sportscamp-font-weight-bold);
    }
    
    /* Mobile booking button container */
    .mobile-booking-trigger-container {
        flex-shrink: 0;
    }
    
    /* Style for React-generated mobile booking button */
    .mobile-booking-trigger-container .sportscamp-booking-button {
        background: #ebc914 !important;
        color: #01224d !important;
        padding: var(--sportscamp-spacing-1) var(--sportscamp-spacing-4) !important; /* Mniejszy padding góra/dół */
        font-size: var(--sportscamp-font-size-xs) !important; /* Mniejsza czcionka */
        font-weight: var(--sportscamp-font-weight-bold) !important;
        border-radius: 0 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        min-width: 100px !important;
        white-space: nowrap !important;
        box-shadow: 0 2px 8px rgba(235, 201, 20, 0.3) !important;
        margin-bottom: 0 !important; /* Nadpisz Flatsome margin-bottom: 1em */
    }
    
    .mobile-booking-trigger-container .sportscamp-booking-button:hover {
        background: #d4a815 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(235, 201, 20, 0.4) !important;
    }

    /* Tournament mobile sticky CTA: Full Pricing pinned to the LEFT edge,
       Book Now pinned to the RIGHT edge of the sticky bar (opposite ends).
       row-reverse + space-between achieves this while keeping DOM order
       (Book Now is first / semantically primary). */
    body.single-tournament .mobile-sticky-cta .mobile-pricing-summary {
        display: none;
    }
    .mobile-sticky-cta .mobile-cta-actions {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        flex-direction: row-reverse;
        justify-content: space-between;
        width: 100%;
        margin-left: 0;
    }
    .mobile-sticky-cta .mobile-pricing-trigger-container {
        flex-shrink: 0;
    }
    .mobile-sticky-cta .mobile-pricing-trigger-container .kontra-pricing-btn,
    .mobile-sticky-cta .mobile-pricing-trigger-container .sportscamp-pricing-button {
        background: transparent !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.45) !important;
        padding: var(--sportscamp-spacing-1) var(--sportscamp-spacing-3) !important;
        font-size: var(--sportscamp-font-size-xs) !important;
        font-weight: var(--sportscamp-font-weight-semibold) !important;
        border-radius: 0 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.4px !important;
        min-width: 90px !important;
        white-space: nowrap !important;
        margin-bottom: 0 !important;
    }
    .mobile-sticky-cta .mobile-pricing-trigger-container .kontra-pricing-btn:hover,
    .mobile-sticky-cta .mobile-pricing-trigger-container .sportscamp-pricing-button:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.7) !important;
    }

    /* Add bottom padding to content to prevent overlap with sticky CTA */
    .camp-content-wrapper {
        padding-bottom: 100px;
    }
    
    /* Disable sticky sidebar on mobile */
    .sticky-sidebar {
        position: static;
    }
    
    /* Mobile responsive grid */
    .camp-content-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .camp-hero h1 {
        font-size: 2rem;
    }
    
    .camp-hero-subtitle {
        font-size: 1rem;
    }
    
    .includes-excludes-grid {
        grid-template-columns: 1fr;
        gap: var(--sportscamp-spacing-4);
    }
    
    /* Mobile: single column lists inside each section */
    .includes-excludes-grid ul {
        grid-template-columns: 1fr;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    
    .section-gallery {
        grid-template-columns: 1fr;
    }
    
    /* Mobile Layout for Image-Text Sections - handled above */
    
    .info-highlights-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .additional-options-grid {
        grid-template-columns: 1fr;
    }
    
    .main-gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Mobile-only layout reorder (max-width: 768px)
   Source DOM order:    gallery -> includes/extras -> descriptions -> [sidebar]
   Desired mobile order: includes/extras -> [sidebar] -> descriptions -> gallery
   Flatten .camp-main-content (display:contents) so its children share the flex
   context with .camp-sidebar, then reorder with `order`. Desktop is untouched.
   ========================================================================== */
@media (max-width: 768px) {
    .camp-content-grid {
        display: flex;
        flex-direction: column;
    }

    /* Flatten wrapper so its children become siblings of the sidebar */
    .camp-main-content {
        display: contents;
    }

    .camp-includes-excludes    { order: 1; }
    .camp-sidebar              { order: 2; }
    .camp-description-sections { order: 3; }
    .camp-gallery-section      { order: 4; }
}

@media (max-width: 480px) {
    .info-highlights-grid {
        grid-template-columns: 1fr;
    }
    
    .option-prices {
        flex-direction: column;
        gap: 8px;
    }
    
    .dates-display {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }
}

/* ==========================================================================
   React Booking Button Styles
   ========================================================================== */

/* Booking trigger container styles */
.booking-trigger-container {
    margin-top: 20px;
}

/* React booking button (generated by JavaScript) */
.sportscamp-booking-button {
    background: #fbbf24 !important;
    color: #1f2937 !important;
    border: none !important;
    padding: 10px 20px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px rgba(251, 191, 36, 0.3) !important;
    letter-spacing: 0.5px !important;
}

.sportscamp-booking-button:hover {
    background: #f59e0b !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(251, 191, 36, 0.4) !important;
}

.sportscamp-booking-button:active {
    transform: translateY(0) !important;
}

/* Booking modal overlay (when modal opens) */
.sportscamp-booking-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

/* Booking modal container */
.sportscamp-booking-modal {
    background: white;
    border-radius: 12px;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    position: relative;
}

/* ==========================================================================
   SIDEBAR ACTION BUTTONS - DUAL LAYOUT
   ========================================================================== */

.sidebar-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 5px;  /* Mocno obniżone - przyciski będą znacznie bliżej ceny */
}

.sidebar-pricing-trigger-container,
.sidebar-booking-trigger-container {
    flex: 1;
}

/* Sidebar Button Styles - Using new React classes */
.sidebar-pricing-trigger-container .kontra-pricing-btn,
.sidebar-booking-trigger-container .kontra-booking-btn,
.sidebar-pricing-trigger-placeholder .kontra-pricing-btn,
.sidebar-booking-trigger-placeholder .kontra-booking-btn {
    width: 100% !important;
    text-align: center !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: capitalize !important;
    padding: 2px 20px !important;  /* Zmniejszony padding górny/dolny z 10px na 2px */
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: none !important;
    outline: none !important;
    display: block !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: 8px !important;
}

.sidebar-booking-trigger-container .kontra-booking-btn,
.sidebar-booking-trigger-placeholder .kontra-booking-btn {
    background: #ebc914 !important;
    color: #01224d !important;
}

.sidebar-pricing-trigger-container .kontra-pricing-btn,
.sidebar-pricing-trigger-placeholder .kontra-pricing-btn {
    background: white !important;
    color: #01224d !important;
}

/* Placeholder disabled state - slightly dimmed */
.sidebar-pricing-trigger-placeholder .kontra-pricing-btn[disabled],
.sidebar-booking-trigger-placeholder .kontra-booking-btn[disabled] {
    opacity: 0.8;
    cursor: default;
}

.sidebar-booking-trigger-container .kontra-booking-btn:hover {
    background: #d4a815 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(235, 201, 20, 0.3) !important;
}

.sidebar-pricing-trigger-container .kontra-pricing-btn:hover {
    background: #f8f9fa !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ==========================================================================
   CENTERED SECTION TITLES
   ========================================================================== */

.section-title-centered {
    text-align: center !important;
    margin-bottom: 30px !important;
    color: #01224d !important;  /* Zmiana koloru na #01224d */
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    position: relative !important;
}

.section-title-centered::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--sportscamp-accent-color);
    border-radius: 2px;
}

/* Enhanced loading state for booking button */
.sportscamp-booking-button.loading {
    opacity: 0.8;
    cursor: not-allowed;
    pointer-events: none;
    position: relative;
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
}

.sportscamp-booking-button.loading::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    border: 2px solid #ffffff;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Error state for booking button */
.sportscamp-booking-button.error {
    background: #ef4444;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loading spinner for modal */
.loading-spinner {
    position: relative;
}

.loading-spinner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border: 3px solid #e5e7eb;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: -1;
    border: 2px solid #1f2937;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
    margin-left: 10px;
}

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

/* ==========================================================================
   Pricing Table Modal Styles
   ========================================================================== */

/* Modal backdrop */
.pricing-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    padding: 20px;
}

/* Modal container */
.pricing-modal {
    background: white;
    border-radius: 12px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* Modal header - hidden */
.pricing-modal-header {
    display: none;
}

.modal-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.modal-close-button {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #666;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modal-close-button:hover {
    background: #e9ecef;
    color: #333;
}

/* Modal content */
.pricing-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.pricing-table-container {
    padding: 0;
}

/* Pricing table */
.pricing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.pricing-table thead {
    display: none;
}

.pricing-table th {
    padding: 16px 20px;
    text-align: left;
    font-weight: 600;
    color: #495057;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table-header-name {
    width: 30%;
}

.table-header-description {
    width: 50%;
}

.table-header-price {
    width: 20%;
    text-align: right;
}

.pricing-table tbody tr {
    border-bottom: 1px solid #e9ecef;
    transition: background-color 0.2s ease;
}

.pricing-table tbody tr:hover:not(.section-header) {
    background: #f8f9fa;
}

.pricing-table td {
    padding: 8px 20px;
    vertical-align: top;
    line-height: 1.4;
}

/* Section headers */
.section-header {
    background: #e9ecef !important;
}

.section-header:hover {
    background: #e9ecef !important;
}

.section-title {
    font-weight: 600;
    color: #495057;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 4px 20px !important;
}

/* Table cells */
.table-cell-name {
    font-weight: 600;
    color: #333;
}

.table-cell-description {
    color: #666;
    line-height: 1.4;
}

.table-cell-price {
    text-align: right;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

/* Special badges and indicators */
.default-badge {
    background: #28a745;
    color: white;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    font-weight: 600;
    text-transform: uppercase;
}

.included-text {
    color: #28a745;
    font-weight: 600;
    font-style: italic;
}

.per-person-text {
    color: #666;
    font-size: 0.8rem;
    font-style: italic;
}

/* Early Bird Pricing in Table */
.pricing-table .early-bird-pricing {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.current-price {
    font-weight: 700;
    color: #22c55e;
    font-size: 1rem;
}

.original-price-crossed {
    text-decoration: line-through;
    color: #9ca3af;
    font-size: 1rem;
    opacity: 0.8;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 40px 20px !important;
    color: #666;
}

/* Modal footer */
.pricing-modal-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
}

.footer-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Modal Book Now Button */
.modal-booking-trigger-container .sportscamp-booking-button {
    background: #fbbf24 !important;
    color: #1f2937 !important;
    border: none !important;
    padding: 12px 24px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    letter-spacing: 0.5px !important;
    min-width: 120px !important;
}

.modal-booking-trigger-container .sportscamp-booking-button:hover {
    background: #f59e0b !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4) !important;
}

.footer-actions .btn {
    padding: 10px 24px;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.footer-actions .btn-primary {
    background: #007cba;
    color: white;
}

.footer-actions .btn-primary:hover {
    background: #005a87;
}

/* Loading spinner in modal */
.pricing-modal .animate-spin {
    animation: spin 1s linear infinite;
}

/* ==========================================================================
   MOBILE STACK LAYOUT FOR PRICING TABLE
   ========================================================================== */

/* Responsive design for pricing modal */
@media (max-width: 768px) {
    .pricing-modal-backdrop {
        padding: 0;
        align-items: center;
        justify-content: center;
    }
    
    .pricing-modal {
        max-width: 100vw;
        max-height: 90vh;
        margin: 0;
        border-radius: 12px;
    }
    
    .pricing-modal-content {
        max-height: calc(90vh - 120px);
        padding: 10px;
    }
    
    .pricing-table-container {
        padding: 0;
    }
    
    .pricing-modal-header {
        padding: 20px;
    }
    
    .modal-title {
        font-size: 1.3rem;
    }

    /* Hide table headers on mobile */
    .pricing-table thead {
        display: none;
    }

    /* Stack layout - hide table structure on mobile */
    .pricing-table,
    .pricing-table tbody {
        display: block;
        width: 100%;
    }

    /* Section headers remain as is */
    .pricing-table .section-header {
        display: block;
        width: 100%;
        margin: 20px 0 10px 0;
        background: #e9ecef !important;
        border-radius: 8px;
    }

    .pricing-table .section-header td {
        display: block;
        width: 100%;
        text-align: center;
        padding: 12px 16px !important;
        border-radius: 8px;
    }

    /* Transform table rows into cards */
    .pricing-table tbody tr:not(.section-header) {
        display: block;
        width: 100%;
        background: white;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        margin-bottom: 15px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all 0.2s ease;
    }

    .pricing-table tbody tr:not(.section-header):hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        background: white;
    }

    /* Stack layout for table cells */
    .pricing-table td {
        display: block;
        width: 100%;
        text-align: left;
        padding: 0;
        border: none;
        margin-bottom: 8px;
    }

    .pricing-table td:last-child {
        margin-bottom: 0;
    }

    /* Card content styling */
    .table-cell-name {
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        color: #1f2937 !important;
        margin-bottom: 8px !important;
        line-height: 1.3 !important;
    }

    .table-cell-description {
        font-size: 0.9rem !important;
        color: #6b7280 !important;
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
    }

    .table-cell-price {
        font-size: 1.4rem !important;
        font-weight: 700 !important;
        color: var(--sportscamp-accent-color) !important;
        text-align: right !important;
        margin-top: auto !important;
    }

    /* Early bird pricing in mobile cards */
    .early-bird-pricing {
        flex-direction: row !important;  /* Na mobile z powrotem w jednej linii */
        gap: 10px !important;  /* Odstęp między badge a cenami na mobile */
        margin-top: 8px !important;
    }

    .current-price {
        font-size: 14px !important;
        display: inline !important;
        margin-bottom: 0 !important;
    }

    .original-price-crossed {
        font-size: 1.1rem !important;
        display: block !important;
    }

    /* Exception: Keep inline in pricing table modal */
    .pricing-modal .original-price-crossed {
        display: inline !important;
    }

    /* Special styling for different option types */
    .default-badge {
        font-size: 0.7rem !important;
        margin-left: 0 !important;
        margin-top: 4px !important;
        display: inline-block !important;
    }

    .pricing-modal .included-text {
        font-size: 11px !important;
        color: #22c55e !important;
        font-weight: 600 !important;
    }

    .per-person-text {
        display: inline !important;
        margin-top: 0 !important;
        font-size: 10px !important;
        color: #9ca3af !important;
        text-align: right !important;
    }
    
    .pricing-modal-footer {
        padding: 15px 20px;
        flex-direction: column;
        gap: 15px;
    }
    
    .footer-actions {
        margin-left: 0;
        width: 100%;
    }
    
    .footer-actions .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    /* Smaller mobile adjustments for stack layout */
    .pricing-table tbody tr:not(.section-header) {
        padding: 12px !important;
        margin-bottom: 12px !important;
    }
    
    .table-cell-name {
        font-size: 1.1rem !important;
    }
    
    .table-cell-description {
        font-size: 0.85rem !important;
        margin-bottom: 10px !important;
    }
    
    .table-cell-price {
        font-size: 1.3rem !important;
    }

    .current-price {
        font-size: 1.3rem !important;
    }

    .original-price-crossed {
        font-size: 1rem !important;
    }
    
    .section-title {
        font-size: 0.8rem !important;
        padding: 10px 12px !important;
    }
}

/* ==========================================================================
   Plugin-Managed Styles Notice
   ========================================================================== */

/*
 * NOTICE: Camp List Styles Moved to Plugin
 * 
 * All camp list styling (.sportscamp-list-container, .sportscamp-camp-card, etc.)
 * has been moved to the plugin's CSS build system for better architecture:
 * 
 * Location: plugin/assets/css/camp-lists.css
 * Built to: plugin/assets/dist/css/frontend-styles.css 
 * 
 * This ensures the shortcode [camp_list] works with any theme.
 * Theme-specific customizations can be added below if needed.
 */

/* Dark mode support removed to ensure consistent visibility across all browser themes */

/* ==========================================================================
   COACH TOOLTIP OVERLAY SYSTEM
   ========================================================================== */

/* Coach item positioning context */
.coach-item {
    position: relative;
}

/* Base tooltip styles - hidden by default */
.coach-tooltip {
    position: absolute;
    left: -320px;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    max-width: 90vw;
    
    /* Visual styling */
    background: var(--sportscamp-bg-primary);
    border: 1px solid var(--sportscamp-border-light);
    border-radius: var(--sportscamp-radius-md);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    
    /* Smooth animations */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tooltip header with image and title */
.tooltip-header {
    display: flex;
    align-items: center;
    padding: var(--sportscamp-spacing-4);
    border-bottom: 1px solid var(--sportscamp-border-light);
    gap: 10%;
    position: relative;
}

.tooltip-image {
    flex: 0 0 45%;
}

.tooltip-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: var(--sportscamp-radius-md);
    object-fit: cover;
}

.tooltip-placeholder {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--sportscamp-radius-md);
    background: var(--sportscamp-bg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sportscamp-text-secondary);
    font-weight: var(--sportscamp-font-weight-semibold);
    font-size: 2rem;
}

.tooltip-info {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.tooltip-info h4 {
    margin: 0 0 var(--sportscamp-spacing-1) 0;
    font-size: var(--sportscamp-font-size-base);
    font-weight: var(--sportscamp-font-weight-semibold);
    color: var(--sportscamp-text-primary);
    line-height: var(--sportscamp-line-height-tight);
}

.coach-role {
    font-size: var(--sportscamp-font-size-xs);
    color: var(--sportscamp-text-secondary);
    text-transform: uppercase;
    font-weight: var(--sportscamp-font-weight-medium);
    letter-spacing: 0.5px;
}

.tooltip-close {
    position: absolute;
    top: var(--sportscamp-spacing-3);
    right: var(--sportscamp-spacing-3);
    background: none;
    border: none;
    color: var(--sportscamp-text-secondary);
    cursor: pointer;
    padding: var(--sportscamp-spacing-2);
    font-size: 1.4rem;
    line-height: 1;
    border-radius: var(--sportscamp-radius-sm);
    transition: var(--sportscamp-transition-colors);
    display: none; /* Hidden on desktop */
    z-index: 1;
}

.tooltip-close:hover {
    background: var(--sportscamp-bg-muted);
    color: var(--sportscamp-text-primary);
}

/* Tooltip content */
.tooltip-content {
    padding: var(--sportscamp-spacing-4);
}

.tooltip-content p {
    margin: 0;
    font-size: var(--sportscamp-font-size-sm);
    line-height: var(--sportscamp-line-height-normal);
    color: var(--sportscamp-text-secondary);
    text-align: justify;
}

/* ==========================================================================
   DESKTOP HOVER BEHAVIOR
   ========================================================================== */

@media (min-width: 769px) {
    /* Show tooltip on hover */
    .coach-item:hover .coach-tooltip {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(-50%) translateX(-10px);
    }
    
    /* All tooltips appear on the left consistently */
    
    /* Hide close button on desktop */
    .tooltip-close {
        display: none !important;
    }
    
    /* Desktop smart positioning adjustments */
    .coach-tooltip.tooltip-adjust-up {
        top: auto;
        bottom: 50%;
        transform: translateY(50%);
    }
    
    .coach-tooltip.tooltip-adjust-down {
        top: 50%;
        transform: translateY(-25%);
    }
    
    .coach-item:hover .coach-tooltip.tooltip-adjust-up {
        transform: translateY(50%) translateX(-10px);
    }
    
    .coach-item:hover .coach-tooltip.tooltip-adjust-down {
        transform: translateY(-25%) translateX(-10px);
    }
    
    
    /* Show close button when mobile-active */
    .coach-tooltip.mobile-active .tooltip-close {
        display: block !important;
    }
}

/* Hover effects disabled globally for coach items */

/* Desktop padding for coaches panel */
@media (min-width: 768px) {
    .coaches-panel {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ==========================================================================
   MOBILE FULLSCREEN OVERLAY
   ========================================================================== */

@media (max-width: 768px) {
    /* Mobile active state */
    .coach-tooltip.mobile-active {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90vw;
        max-width: 400px;
        max-height: 80vh;
        overflow-y: auto;
        
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        z-index: 50001;
        
        /* Enhanced styling for modal */
        background: white;
        border-radius: var(--sportscamp-radius-lg);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    }
    
    /* Mobile header layout adjustments */
    .coach-tooltip.mobile-active .tooltip-header {
        gap: 5%;
    }
    
    .coach-tooltip.mobile-active .tooltip-image {
        flex: 0 0 45%;
    }
    
    .coach-tooltip.mobile-active .tooltip-info {
        flex: 0 0 50%;
    }
    
    /* Show close button on mobile with absolute positioning */
    .coach-tooltip.mobile-active .tooltip-close {
        display: block;
        position: absolute;
        top: var(--sportscamp-spacing-2);
        right: var(--sportscamp-spacing-2);
    }
    
    /* Mobile animation */
    .coach-tooltip.mobile-active {
        animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

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

@media (max-width: 480px) {
    .coach-tooltip.mobile-active {
        width: 95vw;
        max-width: none;
    }
    
    .tooltip-header {
        padding: var(--sportscamp-spacing-3);
    }
    
    .tooltip-content {
        padding: var(--sportscamp-spacing-3);
    }
    
    /* Usunięte sztywne rozmiary - niech zdjęcie wypełnia 45% szerokości kontenera */
    .tooltip-image img,
    .tooltip-placeholder {
        width: 100%;  /* Wypełnia całe 45% kontenera */
        height: auto;
        aspect-ratio: 1;  /* Zachowuje proporcje 1:1 */
    }
    
    .tooltip-title h4 {
        font-size: var(--sportscamp-font-size-sm);
    }
}

/* Print styles */
@media print {
    .sportscamp-camp-card {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    .camp-cta {
        display: none;
    }
    
    .early-bird-badge {
        background: #000 !important;
        color: #fff !important;
    }
    
    .coach-tooltip {
        display: none !important;
    }
}

/* ===============================================
   Enhanced Description Sections - Frontend Styles
   =============================================== */

/* Base description section styling */
.camp-description-sections {
    margin: 60px 0;
}

/* Mobile: drop the top gap above description sections */
@media (max-width: 768px) {
    .camp-description-sections {
        margin-top: 0;
    }
}

.description-section {
    margin: 50px 0;
    padding: 0;
}

.description-section:last-child {
    margin-bottom: 0;
}

/* Section titles */
.section-title-centered {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: #01224d;  /* Zmiana koloru na #01224d */
    margin: 0 0 40px 0;
    font-family: var(--sportscamp-font-family);
    letter-spacing: -0.025em;
}

/* ===== TEXT ONLY LAYOUT ===== */
.description-section.layout-text_only .section-content-wrapper {
    max-width: 100%;
}

.description-section.layout-text_only .section-content-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.description-section.layout-text_only .section-content.single-column {
    max-width: 800px;
    margin: 0 auto;
}

/* ===== IMAGE LEFT/RIGHT LAYOUTS ===== */
.section-image-text-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
    margin: 30px 0;
}

.section-image-text-layout.image-right {
    grid-template-columns: 1fr 1fr;
}

.section-image-text-layout .section-image-column img {
    width: 100%;
    height: auto;
    border-radius: var(--sportscamp-border-radius);
    box-shadow: var(--sportscamp-shadow);
    transition: var(--sportscamp-transition);
}

.section-image-text-layout .section-image-column img:hover {
    box-shadow: var(--sportscamp-shadow-hover);
    transform: translateY(-2px);
}

.section-image-text-layout .section-text-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ===== IMAGE ABOVE/BELOW LAYOUTS ===== */
.section-image-above-layout,
.section-image-below-layout {
    margin: 30px 0;
}

.section-image-top,
.section-image-bottom {
    text-align: center;
    margin: 30px 0;
}

.section-image-top img,
.section-image-bottom img {
    max-width: 100%;
    height: auto;
    border-radius: var(--sportscamp-border-radius);
    box-shadow: var(--sportscamp-shadow);
    transition: var(--sportscamp-transition);
}

.section-image-top img:hover,
.section-image-bottom img:hover {
    box-shadow: var(--sportscamp-shadow-hover);
    transform: translateY(-2px);
}

/* ===== TWO COLUMN TEXT LAYOUTS ===== */
.text-columns-2 .section-content-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.text-columns-1 .section-content.single-column {
    max-width: 800px;
    margin: 0 auto;
}

/* ===== RICH TEXT CONTENT STYLING ===== */
/* Fixed readability - higher specificity to override Flatsome theme */
.single-camp .camp-description-sections .description-section .section-content,
.single-camp .camp-description-sections .description-section .section-content p,
.description-section .section-content {
    font-family: var(--sportscamp-font-family) !important;
    line-height: 1.8 !important;
    font-size: 1rem !important;
    color: #111827 !important;
    /* Word breaking for long content */
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

.section-content p {
    margin: 0 0 20px 0;
}

.section-content p:last-child {
    margin-bottom: 0;
}

.section-content strong {
    font-weight: 600;
    color: var(--sportscamp-accent-color);
}

.section-content em {
    font-style: italic;
    color: var(--sportscamp-text-secondary);
}

.section-content u {
    text-decoration: underline;
    text-decoration-color: var(--sportscamp-accent-color);
    text-underline-offset: 3px;
}

.section-content s {
    text-decoration: line-through;
    color: var(--sportscamp-text-secondary);
}

.section-content a {
    color: var(--sportscamp-accent-color);
    text-decoration: none;
    font-weight: 500;
    transition: var(--sportscamp-transition);
    border-bottom: 2px solid transparent;
}

.section-content a:hover {
    border-bottom-color: var(--sportscamp-accent-color);
    text-decoration: none;
}

/* Lists in rich text */
.section-content ul,
.section-content ol {
    margin: 20px 0;
    padding-left: 30px;
}

.section-content li {
    margin-bottom: 0px;
    line-height: 1.7;
}

.section-content ul li {
    list-style-type: none;
    position: relative;
}

.section-content ul li::before {
    content: "•";
    color: inherit;
    font-weight: bold;
    position: absolute;
    left: -20px;
    top: -0.2em;
    font-size: 1.2em;
}

.section-content ol li {
    list-style-type: decimal;
    color: var(--sportscamp-text-primary);
}

/* ===== LIST SPACING OPTIONS ===== */
/* Custom spacing for lists based on editor selection - MAXIMUM SPECIFICITY */
body.single-camp .camp-description-sections .description-section .section-content ul.spacing-none li,
body.single-camp .camp-description-sections .description-section .section-content ol.spacing-none li {
    margin-bottom: 0px !important;
}

body.single-camp .camp-description-sections .description-section .section-content ul.spacing-tight li,
body.single-camp .camp-description-sections .description-section .section-content ol.spacing-tight li {
    margin-bottom: 5px !important;
}

body.single-camp .camp-description-sections .description-section .section-content ul.spacing-normal li,
body.single-camp .camp-description-sections .description-section .section-content ol.spacing-normal li {
    margin-bottom: 10px !important;
}

body.single-camp .camp-description-sections .description-section .section-content ul.spacing-wide li,
body.single-camp .camp-description-sections .description-section .section-content ol.spacing-wide li {
    margin-bottom: 20px !important;
}

/* Fallback for any missing class chain */
.section-content ul.spacing-none li,
.section-content ol.spacing-none li {
    margin-bottom: 0px !important;
}

.section-content ul.spacing-tight li,
.section-content ol.spacing-tight li {
    margin-bottom: 5px !important;
}

.section-content ul.spacing-normal li,
.section-content ol.spacing-normal li {
    margin-bottom: 10px !important;
}

.section-content ul.spacing-wide li,
.section-content ol.spacing-wide li {
    margin-bottom: 20px !important;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .section-title-centered {
        font-size: 2rem;
        margin-bottom: 30px;
        text-align: left;
        padding: 0 20px;
    }
    
    /* Make image-text layouts stack on mobile */
    .section-image-text-layout {
        grid-template-columns: 1fr;
        gap: 30px;
        align-items: start; /* Maintain top alignment on mobile */
    }
    
    /* Stack text columns on mobile */
    .section-content-columns,
    .text-columns-2 .section-content-columns {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    /* Reduce spacing on mobile */
    .description-section {
        margin: 35px 0;
    }
    
    .section-content {
        font-size: 1rem;
        line-height: 1.7;
        padding: 0 20px;
    }
    
    /* Remove extra padding for two-column sections to maintain consistent width */
    .text-columns-2 .section-content-columns .section-content {
        padding: 0;
    }
    
    .section-image-top,
    .section-image-bottom {
        margin: 20px 0;
        padding: 0 20px;
    }
    
    .section-image-above-layout .section-content-wrapper,
    .section-image-below-layout .section-content-wrapper {
        padding: 0 20px;
    }
    
    /* Consistent width for two-column content in image layouts */
    .section-image-above-layout .text-columns-2 .section-content-columns .section-content,
    .section-image-below-layout .text-columns-2 .section-content-columns .section-content {
        padding: 0;
    }
}

@media (max-width: 480px) {
    .section-title-centered {
        font-size: 1.75rem;
    }
    
    .section-content {
        font-size: 0.95rem;
        padding: 0 15px;
    }
    
    /* Remove extra padding for two-column sections on smaller mobile */
    .text-columns-2 .section-content-columns .section-content {
        padding: 0;
    }
    
    .section-content ul,
    .section-content ol {
        padding-left: 25px;
    }
    
    .section-image-top,
    .section-image-bottom {
        padding: 0 15px;
    }
}

/* ===== LAYOUT-SPECIFIC ENHANCEMENTS ===== */

/* Text-only sections - max width for readability */
.layout-text_only .section-content.single-column {
    max-width: 700px;
    margin: 0 auto;
}

/* Image layouts - ensure proper spacing */
.layout-image_left .section-image-text-layout,
.layout-image_right .section-image-text-layout {
    margin: 40px 0;
}

.layout-image_above .section-image-above-layout,
.layout-image_below .section-image-below-layout {
    margin: 40px 0;
}

/* Enhanced visual separation between sections */
.description-section + .description-section {
    border-top: 1px solid #f0f0f0;
    padding-top: 50px;
}

.description-section:first-child {
    margin-top: 30px;
}

/* Print styles for content */
@media print {
    .section-image-text-layout {
        grid-template-columns: 1fr;
    }
    
    .section-content-columns {
        grid-template-columns: 1fr;
    }
    
    .section-content a {
        color: #000;
        text-decoration: underline;
    }
}

/* Dark mode CSS removed - site now forces light mode via color-scheme: light only */
/* This prevents text readability issues when browser uses dark mode preference */

/* ==========================================================================
   MOBILE FIX - Link Breaking
   ========================================================================== */

@media (max-width: 768px) {
    /* Wymuś łamanie długich linków na mobile */
    .section-content a {
        word-break: break-all !important;      /* Łamie URL w dowolnym miejscu */
        overflow-wrap: break-word !important;  /* Łamie długie wyrazy */
        max-width: 100% !important;            /* Link nie może być szerszy niż kontener */
        display: inline-block !important;      /* Umożliwia kontrolę szerokości */
    }
}

/* ==========================================================================
   LIST SPACING OPTIONS - HIGH SPECIFICITY
   ========================================================================== */

/* High specificity rules for list spacing options */
body.single-camp .camp-description-sections .description-section .section-content ul.spacing-none li {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}

body.single-camp .camp-description-sections .description-section .section-content ol.spacing-none li {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}

body.single-camp .camp-description-sections .description-section .section-content ul.spacing-tight li {
    margin-bottom: 5px !important;
    padding-bottom: 0px !important;
}

body.single-camp .camp-description-sections .description-section .section-content ol.spacing-tight li {
    margin-bottom: 5px !important;
    padding-bottom: 0px !important;
}

body.single-camp .camp-description-sections .description-section .section-content ul.spacing-normal li {
    margin-bottom: 10px !important;
    padding-bottom: 0px !important;
}

body.single-camp .camp-description-sections .description-section .section-content ol.spacing-normal li {
    margin-bottom: 10px !important;
    padding-bottom: 0px !important;
}

body.single-camp .camp-description-sections .description-section .section-content ul.spacing-wide li {
    margin-bottom: 20px !important;
    padding-bottom: 0px !important;
}

body.single-camp .camp-description-sections .description-section .section-content ol.spacing-wide li {
    margin-bottom: 20px !important;
    padding-bottom: 0px !important;
}

/* NEW SYSTEM: Camp Sections Patterns Responsive CSS */
/* ==========================================================================
   HELPER CLASSES FOR MOBILE COLUMN ORDERING
   Użycie: Dodaj klasę w polu "Additional CSS Classes" dla bloku Columns
   ========================================================================== */

@media (max-width: 768px) {
    /* Kontrola odstępów między kolumnami Gutenberg na mobile */
    .camp-description-sections .wp-block-columns.is-layout-flex {
        gap: 10px !important; /* Zmniejszony z domyślnych ~32px na 10px */
    }

    /* mobile-text-first: tekst na górze, zdjęcie na dole (standardowa kolejność) */
    .mobile-text-first .wp-block-columns {
        flex-direction: column !important;
    }
    
    /* mobile-image-first: zdjęcie na górze, tekst na dole (odwrócona kolejność) */
    .mobile-image-first .wp-block-columns {
        flex-direction: column-reverse !important;
    }
    
    /* mobile-reverse: odwrócona kolejność kolumn na mobile */
    .mobile-reverse .wp-block-columns {
        flex-direction: column-reverse !important;
    }
    
    /* mobile-stack: wymuś układanie w kolumnie (domyślne, ale czasem przydatne) */
    .mobile-stack .wp-block-columns {
        flex-direction: column !important;
    }
    
    /* Zapewnienie że kolumny zajmują pełną szerokość na mobile */
    .mobile-text-first .wp-block-column,
    .mobile-image-first .wp-block-column,
    .mobile-reverse .wp-block-column,
    .mobile-stack .wp-block-column {
        flex-basis: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Zachowanie odstępów między kolumnami */
    .mobile-text-first .wp-block-column:not(:last-child),
    .mobile-image-first .wp-block-column:not(:last-child),
    .mobile-reverse .wp-block-column:not(:last-child),
    .mobile-stack .wp-block-column:not(:last-child) {
        margin-bottom: 1.5rem !important;
    }
    
    /* STARE ROZWIĄZANIE (zachowane dla kompatybilności wstecznej) */
    .camp-main-content .text-left-image-right {
        flex-direction: column-reverse !important;
    }
}

/* Fallback rules for broader compatibility */
.section-content ul.spacing-none li,
.section-content ol.spacing-none li {
    margin-bottom: 0px !important;
}

.section-content ul.spacing-tight li,
.section-content ol.spacing-tight li {
    margin-bottom: 5px !important;
}

.section-content ul.spacing-normal li,
.section-content ol.spacing-normal li {
    margin-bottom: 10px !important;
}

.section-content ul.spacing-wide li,
.section-content ol.spacing-wide li {
    margin-bottom: 20px !important;
}

/* ==========================================================================
   UPCOMING CAMPS WIDGET - Blog Sidebar (product_list_widget style)
   ========================================================================== */

ul.upcoming-camps-widget {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.upcoming-camps-widget li.upcoming-camp-item {
    list-style: none;
    margin-bottom: 0;
    min-height: 65px;
    overflow: hidden;
    padding: 8px 0 8px 78px;
    position: relative;
}

ul.upcoming-camps-widget li.upcoming-camp-item a {
    text-decoration: none !important;
    color: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 55px;
}

ul.upcoming-camps-widget li.upcoming-camp-item a:hover {
    text-decoration: none !important;
}

ul.upcoming-camps-widget li.upcoming-camp-item img {
    height: 55px;
    width: auto;
    max-width: 70px;
    left: 0;
    object-fit: cover;
    object-position: 50% 50%;
    position: absolute;
    top: 8px;
    border-radius: 4px;
}

ul.upcoming-camps-widget li.upcoming-camp-item .upcoming-camp-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sportscamp-text-primary, #01224d);
    line-height: 1.4;
    margin-bottom: 4px;
    transition: color 0.2s ease;
}

ul.upcoming-camps-widget li.upcoming-camp-item a:hover .upcoming-camp-title {
    color: var(--sportscamp-accent-color, #3b82f6);
}

ul.upcoming-camps-widget li.upcoming-camp-item .upcoming-camp-date {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
}

/* ==========================================================================
   BLOG POST SIDEBAR WIDTH OVERRIDE - Flatsome 25% → 20%
   ========================================================================== */

@media (min-width: 850px) {
    /* Override Flatsome Foundation grid for blog posts */
    body.single-post .large-3,
    body.single-post .shop-sidebar.large-3 {
        width: 20% !important;
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }

    body.single-post .large-9 {
        width: 80% !important;
        flex: 0 0 80% !important;
        max-width: 80% !important;
    }

    /* Alternative targeting for has-sidebar class */
    body.single-post.has-sidebar .row > .large-3 {
        width: 20% !important;
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }

    body.single-post.has-sidebar .row > .large-9 {
        width: 80% !important;
        flex: 0 0 80% !important;
        max-width: 80% !important;
    }
}

/* ==========================================================================
   BLOG POST FEATURED IMAGE - Height limit and centering
   ========================================================================== */

.single-post .entry-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.single-post .entry-image img {
    max-height: 50vh;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

/* ==========================================================================
   MOBILE BLOG CONTENT WIDTH - Full width with padding
   ========================================================================== */

@media (max-width: 849px) {
    /* Blog post content area - full width on mobile (exclude sidebar) */
    .single-post .large-9,
    .single-post .entry-content,
    body.single-post .row > .col:not(.post-sidebar) {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    /* Sidebar stacks below content on mobile - with padding */
    .single-post .large-3.post-sidebar,
    .single-post .post-sidebar,
    body.single-post .shop-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-top: 30px;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Ensure content wrapper has proper padding */
    .single-post .page-wrapper,
    .single-post .container {
        padding-left: 0px;
        padding-right: 0px;
    }

    /* Entry content text improvements */
    .single-post .entry-content {
        font-size: 1rem;
        line-height: 1.7;
    }

    .single-post .entry-content p {
        margin-bottom: 1.2em;
    }
}

/* ==========================================================================
   Pre-Launch "Prices soon" - hide_prices flag
   ========================================================================== */

/* Hero banner price area */
.info-banner-item .price-value.price-soon {
    font-style: italic;
    opacity: 0.9;
}

/* Sidebar pricing panel */
.standard-pricing.price-soon-sidebar .price-amount {
    font-style: italic;
    color: #666;
}

/* Mobile sticky CTA */
.mobile-pricing-summary .mobile-price-soon .mobile-price {
    font-style: italic;
    color: #01224d;
}

/* Camp list card */
.camp-pricing.camp-pricing-soon {
    color: #666;
}
.camp-pricing-soon .price-soon {
    font-style: italic;
    font-weight: 500;
}

/* Pricing modal - hide_prices message */
.pricing-sections-container.pricing-soon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
}
.prices-soon-message {
    text-align: center;
    padding: 32px 24px;
    color: #01224d;
    font-size: 1.1rem;
    font-style: italic;
}

/* ==========================================================================
   Ultimate Member - My Camps Tab Styling

   NOTE: Styles for .user-camp-item moved to plugin/assets/css/um-integration.css
   Plugin is now self-contained and works with any theme.
   ========================================================================== */

/* ==========================================================================
   Ultimate Member - date picker (pickadate) on the registration form

   WHY: a collision between two third-party stylesheets, not our own bug.
   Flatsome styles EVERY <select> globally with `display: block`
   (flatsome.css, the .select-resize-ghost/select/textarea group). The year
   dropdown inside pickadate's header is such a select, and as a block element
   it (a) breaks onto its own line, pushing the month name below it, and
   (b) ignores the header's `text-align: center`, so it sticks to the left edge
   - landing exactly on top of .picker__nav--prev (position: absolute; left: 0).
   Because that arrow is drawn as a white CSS triangle and the select has a
   white background, the "previous month" arrow becomes invisible: users could
   not navigate backwards at all, which on a birth-date field matters.

   Restoring inline-block fixes all three symptoms at once - no z-index needed
   (raising the arrow above the select would not have helped anyway: white on
   white stays invisible).

   Fixed in the child theme so a UM or Flatsome update cannot revert it.
   Specificity is deliberately one level above UM's own rules, because the load
   order of this stylesheet vs um.min.css is not guaranteed - um.min.css wins
   ties, which is why .picker__weekday below is scoped through .picker__table.
   ========================================================================== */

.um .picker__header .picker__select--year,
.um .picker__header .picker__select--month {
    display: inline-block;
    width: auto;
    min-width: 5.5em;
    height: auto;
    margin: 0 0.35em;
    padding: 0.2em 0.45em;
    font-size: 15px;
    line-height: 1.5;
    color: #01224d;
    border-radius: 4px;
    box-shadow: none;
    vertical-align: middle;
}

/* Contrast: day numbers inherited dark grey on the #3ba1da panel (~2.5:1,
   below the WCAG AA 4.5:1 threshold). Navy scores ~5.7:1 and matches the brand. */
.um .picker__day,
.um .picker__day--infocus {
    color: #01224d;
}

/* Adjacent-month days stay readable but clearly secondary */
.um .picker__day--outfocus {
    color: #01224d;
    opacity: 0.5;
}

/* Weekday headers: white on #44b0ec is only ~2.8:1 */
.um .picker__table .picker__weekday {
    color: #01224d;
    opacity: 0.9;
}

/* "Today" is meaningless on a birth date - and actively harmful: one click sets
   today's date, which PASSES validation because max == today, so the easiest
   button to hit quietly injects garbage into the field.

   Hiding it also fixes "Close". pickadate renders three footer buttons, but UM
   sizes only its own two at width:50%, filling the row - so "Close" wrapped to
   a second line and, because the footer has a hard height:50px, spilled below
   the panel entirely. Flex keeps the two remaining buttons on one line whatever
   their label lengths across the five languages ("Usuń"/"Zamknij" vs
   "Réinitialiser"/"Fermer").

   Note: this applies to every UM date picker on the front end. Today that is
   only the birth date field; if a future field ever needs "today" (an arrival
   date, say), this rule has to be scoped down. */
.um .picker__footer .picker__button--today {
    display: none;
}

.um .picker__footer {
    display: flex;
    align-items: center;
}

/* margin:0 - Flatsome puts a bottom margin on buttons and UM zeroes it only for
   its own two, which left "Close" sitting 8px above "Clear" in the flex row */
.um .picker__footer .picker__button--clear,
.um .picker__footer .picker__button--close {
    flex: 1 1 0;
    width: auto;
    margin: 0;
}