<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <?php wp_head(); ?>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script src="https://js.stripe.com/v3/"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.min.js"></script>
    <style>
    /* Daily Program Styles */
    .tour-daily-program {
        margin: 3rem 0;
        padding: 2.5rem;
        background-color: #f8f9fa;
        border-radius: 12px;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .tour-daily-program h2 {
        color: var(--dark);
        margin-bottom: 2rem;
        text-align: center;
        font-size: 1.8rem;
        position: relative;
        padding-bottom: 1rem;
    }

    .tour-daily-program h2:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background-color: var(--accent);
        border-radius: 2px;
    }

    .daily-program-list {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding: 1rem;
        max-width: 700px;
        margin: 0 auto;
    }

    .program-day {
        background: white;
        padding: 1.5rem;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        margin-bottom: 0;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .program-day:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .day-header {
        display: flex;
        align-items: center;
        gap: 1.2rem;
        margin-bottom: 1rem;
        padding: 0;
    }

    .day-number {
        background-color: var(--accent);
        color: white;
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 1.2rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .day-header h3 {
        margin: 0;
        color: #1F2937;
        font-size: 1.3rem;
        font-weight: 600;
    }

    .program-day p {
        margin: 0;
        margin-left: 4.2rem;
        color: #4B5563;
        line-height: 1.8;
        font-size: 1.1rem;
    }

    /* Hero Section Styles */
    .tour-hero {
        position: relative;
        height: 80vh;
        overflow: hidden;
    }

    .tour-hero img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .tour-hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.5) 50%,
            rgba(0, 0, 0, 0.7) 100%
        );
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tour-hero-content {
        text-align: center;
        color: white;
        padding: 2rem;
        max-width: 800px;
        width: 100%;
    }

    .tour-hero-content h1 {
        font-size: 3.5rem;
        font-weight: 700;
        margin-bottom: 2rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        word-wrap: break-word;
        hyphens: auto;
    }

    .tour-hero-meta {
        display: flex;
        gap: 2rem;
        align-items: center;
        margin-top: 1.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .tour-hero-meta span {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #fff;
        font-size: 1.1rem;
    }

    .tour-price {
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(5px);
        padding: 0.5rem 1.5rem;
        border-radius: 50px;
        font-weight: 600;
        font-size: 1.4rem !important;
        color: #fff !important;
        border: 2px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
    }

    .tour-price:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    }

    .tour-hero-meta i {
        font-size: 1.4rem;
    }

    @media (max-width: 768px) {
        .tour-hero-content h1 {
            font-size: 2.2rem;
            margin-bottom: 1.5rem;
            line-height: 1.2;
            padding: 0 0.5rem;
        }
        
        .tour-hero-meta {
            flex-direction: column;
            gap: 1rem;
            width: 100%;
            padding: 0 1rem;
        }
        
        .tour-hero-meta span {
            justify-content: center;
            width: 100%;
            font-size: 1rem;
            text-align: center;
            word-break: break-word;
        }

        .tour-price {
            font-size: 1.2rem !important;
            padding: 0.4rem 1.2rem;
        }

        .tour-hero-meta i {
            font-size: 1.2rem;
        }

        .tour-location {
            max-width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .tour-daily-program {
            padding: 1rem;
            margin: 2rem 0;
        }

        .tour-daily-program h2 {
            font-size: 1.6rem;
            margin-bottom: 1.5rem;
        }

        .daily-program-list {
            padding: 0;
            margin: 0 -0.5rem;
            width: calc(100% + 1rem);
        }

        .program-day {
            padding: 1.2rem;
            margin: 0 0.5rem 1rem 0.5rem;
        }

        .day-header {
            gap: 1rem;
        }

        .day-number {
            width: 2.5rem;
            height: 2.5rem;
            font-size: 1.1rem;
        }

        .day-header h3 {
            font-size: 1.2rem;
        }

        .program-day p {
            margin-left: 3.5rem;
            font-size: 1rem;
            line-height: 1.6;
        }
    }

    @media (max-width: 480px) {
        .tour-hero-content h1 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
        }
        
        .tour-hero-content {
            padding: 1rem;
        }
        
        .tour-price {
            font-size: 1.1rem !important;
            padding: 0.3rem 1rem;
        }
        
        .tour-hero-meta span {
            font-size: 0.9rem;
        }
        
        .tour-hero-meta i {
            font-size: 1.1rem;
        }
    }

    .tour-content-wrapper {
        max-width: 1200px;
        margin: 2rem auto;
        padding: 0 1rem;
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 2rem;
    }

    .tour-info h2 {
        color: #1F2937;
        margin-bottom: 1rem;
        font-size: 1.8rem;
        word-wrap: break-word;
        hyphens: auto;
    }

    .tour-description {
        margin-bottom: 2rem;
    }

    .tour-description p {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .included-list, .not-included-list, .available-extras-list {
        display: grid;
        gap: 1rem;
    }

    .included-item, .not-included-item, .available-extra-item {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
    }

    .included-item i, .not-included-item i, .available-extra-item i {
        min-width: 16px;
        margin-top: 0.3rem;
    }

    .included-item span, .not-included-item span, .available-extra-item span {
        flex: 1;
        word-wrap: break-word;
    }

    .included-item i {
        color: #10B981;
    }

    .not-included-item i {
        color: #EF4444;
    }

    .available-extra-item i {
        color: #9b59b6;
    }

    /* Booking Form Styles */
    .booking-sidebar {
        position: sticky;
        top: 2rem;
    }
    
    .booking-form {
        background-color: white;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    }
    
    .booking-form h3 {
        color: #1F2937;
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
        text-align: center;
        position: relative;
        padding-bottom: 1rem;
    }
    
    .booking-form h3:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 3px;
        background: var(--accent);
    }
    
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: #333;
    }
    
    .form-group .price-label {
        color: #666;
        font-size: 14px;
        margin-bottom: 5px;
    }
    
    .form-group input {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #E5E7EB;
        border-radius: 6px;
        font-size: 1rem;
        transition: all 0.3s ease;
    }
    
    .form-group input:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(0, 121, 140, 0.1);
    }
    
    .form-group textarea {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #E5E7EB;
        border-radius: 6px;
        font-size: 1rem;
        transition: all 0.3s ease;
        resize: vertical;
        min-height: 100px;
        font-family: inherit;
    }
    
    .form-group textarea:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(0, 121, 140, 0.1);
    }
    
    .price-summary {
        background: #F9FAFB;
        padding: 1rem;
        border-radius: 6px;
        margin-bottom: 1.5rem;
    }
    
    .price-label {
        color: #6B7280;
        font-size: 0.875rem;
        margin-bottom: 0.25rem;
    }
    
    .base-price {
        color: #1F2937;
        font-size: 1.5rem;
        font-weight: 600;
    }
    
    .btn-book {
        width: 100%;
        padding: 1rem;
        background: var(--accent);
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 1rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .btn-book:hover {
        background: var(--accent-dark);
        transform: translateY(-1px);
    }
    
    .btn-book i {
        font-size: 1.125rem;
    }

    /* Popup Styles */
    .popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(5px);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        padding: 20px;
        overflow-y: auto;
    }
    
    .popup-content {
        background: white;
        padding: 2rem;
        border-radius: 16px;
        width: 95%;
        max-width: 550px;
        max-height: 90vh;
        position: relative;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }
    
    .popup-header {
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .popup-header h3 {
        font-size: 1.5rem;
        color: #1a202c;
        font-weight: 600;
        margin: 0;
    }
    
    .close-popup {
        background: none;
        border: none;
        color: #64748b;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0.5rem;
        border-radius: 50%;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
    }
    
    .close-popup:hover {
        background: #f1f5f9;
        color: #1e293b;
    }
    
    .tour-summary {
        background: #f8fafc;
        padding: 1.5rem;
        border-radius: 12px;
        margin-bottom: 2rem;
    }
    
    .tour-details {
        display: grid;
        gap: 1rem;
    }
    
    .tour-details p {
        display: flex;
        justify-content: space-between;
        margin: 0;
        padding: 0.5rem 0;
        color: #475569;
        gap: 1rem;
    }
    
    .tour-details p span:first-child {
        color: #1e293b;
        font-weight: 500;
        min-width: 100px;
    }
    
    .tour-details p span:last-child {
        color: #1e293b;
        text-align: right;
    }
    
    .extras-section {
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 1.5rem;
        margin: 1.5rem 0;
    }
    
    .extras-section h4 {
        color: #1e293b;
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 1.25rem;
    }
    
    .popup-extras-list {
        display: grid;
        gap: 1rem;
    }
    
    .popup-extra-item {
        background: #f8fafc;
        padding: 1rem 1.25rem;
        border-radius: 10px;
        border: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        gap: 1rem;
        transition: all 0.2s ease;
    }
    
    .popup-extra-item:hover {
        background: #f1f5f9;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
    
    .popup-extra-item input[type="checkbox"] {
        width: 20px;
        height: 20px;
        border-radius: 6px;
        border: 2px solid #cbd5e1;
        accent-color: var(--accent);
        cursor: pointer;
    }
    
    .popup-extra-item label {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        font-weight: 500;
        color: #334155;
        margin: 0;
    }
    
    .popup-extra-item .extra-price {
        color: var(--accent);
        font-weight: 600;
    }
    
    .single-supplement-notice {
        text-align: left;
        background: #f0f9ff;
        border: 1px solid #bae6fd;
        padding: 1rem 1.25rem;
        border-radius: 10px;
        margin-top: 1.5rem;
        display: flex;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .single-supplement-notice i {
        color: #0284c7;
        font-size: 1.25rem;
        margin-top: 0.2rem;
        flex-shrink: 0;
    }
    
    .single-supplement-notice span {
        color: #0369a1;
        font-size: 0.95rem;
        line-height: 1.5;
        text-align: left;
    }
    
    .total-price {
        background: white;
        margin-top: 1.5rem;
        padding: 1rem 1.5rem;
        border-top: 1px solid #e5e7eb;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .total-price .price-label {
        font-size: 1.1rem;
        color: #475569;
        font-weight: 500;
    }
    
    .total-price .price-amount {
        font-size: 1.5rem;
        color: var(--accent);
        font-weight: 700;
    }
    
    .payment-section {
        margin-top: 2rem;
        padding: 1.5rem;
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
    }
    
    .payment-section h4 {
        color: #1e293b;
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 1.25rem;
    }
    
    #card-element {
        padding: 1rem;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        background: #f8fafc;
        transition: all 0.2s ease;
    }
    
    #card-element.StripeElement--focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 2px rgba(0, 121, 140, 0.1);
    }
    
    #card-element.StripeElement--invalid {
        border-color: #ef4444;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
    }
    
    .payment-error {
        color: #dc2626;
        font-size: 0.9rem;
        margin-top: 0.75rem;
        padding: 0.5rem;
        background: #fef2f2;
        border-radius: 6px;
        border: 1px solid #fecaca;
        display: none;
    }
    
    .payment-error.visible {
        display: block;
        animation: fadeIn 0.3s ease-in;
    }
    
    @keyframes fadeIn {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }
    
    .btn-confirm-payment {
        width: 100%;
        padding: 1rem;
        background: var(--accent);
        color: white;
        border: none;
        border-radius: 10px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 2rem;
    }
    
    .btn-confirm-payment:hover {
        background: var(--accent-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .spinner {
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top: 2px solid white;
        width: 20px;
        height: 20px;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    .spinner.hidden {
        display: none;
    }
    
    @media (max-width: 640px) {
        .popup-overlay {
            padding: 0;
        }

        .popup-content {
            width: 100%;
            height: 100%;
            max-height: 100vh;
            border-radius: 0;
            margin: 0;
        }

        .popup-header {
            padding: 1rem 1.5rem;
            margin: -2rem -2rem 1.5rem;
        }

        .popup-body {
            padding: 0 1rem;
        }

        .total-price {
            margin: 1.5rem -1rem;
            border-radius: 0;
        }

        .btn-confirm-payment {
            margin: 2rem -1rem 0;
            border-radius: 0;
        }
    }

    /* Payment Success Page */
    .payment-success {
        text-align: center;
        padding: 4rem 2rem;
        max-width: 600px;
        margin: 0 auto;
    }

    .payment-success i {
        font-size: 4rem;
        color: #28a745;
        margin-bottom: 2rem;
    }

    .payment-success h2 {
        color: #333;
        margin-bottom: 1rem;
    }

    .payment-success p {
        color: #666;
        margin-bottom: 2rem;
    }

    .btn-return {
        display: inline-block;
        padding: 1rem 2rem;
        background-color: var(--primary);
        color: white;
        text-decoration: none;
        border-radius: 4px;
        transition: background-color 0.3s ease;
    }

    .btn-return:hover {
        background-color: var(--secondary);
    }

    @media (max-width: 768px) {
        .tour-content-wrapper {
            grid-template-columns: 1fr;
            padding: 0 0.8rem;
        }
        
        .tour-info {
            order: 1;
        }
        
        .tour-booking {
            order: 0;
            margin-bottom: 2rem;
        }
        
        .booking-form {
            position: static;
            margin-top: 0;
        }
        
        .booking-sidebar {
            position: static;
        }

        .tour-info h2 {
            font-size: 1.6rem;
            text-align: center;
            margin-top: 2rem;
        }

        .included-item, .not-included-item, .available-extra-item {
            align-items: flex-start;
        }

        .included-item i, .not-included-item i, .available-extra-item i {
            margin-top: 0.2rem;
        }
    }

    @media (max-width: 480px) {
        .tour-content-wrapper {
            margin: 1rem auto;
            padding: 0 0.5rem;
            gap: 1rem;
        }

        .tour-info h2 {
            font-size: 1.4rem;
        }

        .tour-booking {
            margin-bottom: 1.5rem;
        }

        .booking-form {
            padding: 1.5rem 1rem;
        }

        .included-list, .not-included-list, .available-extras-list {
            gap: 0.8rem;
        }
    }

    /* Galerija na strani */
    .tour-gallery {
        margin: 3rem 0;
    }

    .tour-gallery h2 {
        color: #1F2937;
        margin-bottom: 1rem;
        font-size: 1.8rem;
    }

    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1rem;
        margin-top: 1rem;
    }

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

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

    /* Gallery Modal */
    .gallery-modal {
        display: none;
        position: fixed;
        z-index: 9999;
        padding: 0;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: rgba(0, 0, 0, 0.95);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .gallery-modal.show {
        opacity: 1;
    }

    .modal-content {
        margin: auto;
        display: block;
        max-width: 90%;
        max-height: 90vh;
        object-fit: contain;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.9);
        transition: transform 0.3s ease;
    }

    .gallery-modal.show .modal-content {
        transform: translate(-50%, -50%) scale(1);
    }

    .close-modal {
        position: absolute;
        right: 25px;
        top: 15px;
        color: #f1f1f1;
        font-size: 35px;
        font-weight: bold;
        cursor: pointer;
        z-index: 1000;
        transition: color 0.3s ease;
    }

    .close-modal:hover {
        color: var(--accent);
    }

    .prev,
    .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 30px;
        transition: all 0.3s ease;
        user-select: none;
        -webkit-user-select: none;
        background-color: rgba(0, 0, 0, 0.8);
        border-radius: 50%;
        opacity: 0.7;
    }

    .prev {
        left: 20px;
    }

    .next {
        right: 20px;
    }

    .prev:hover,
    .next:hover {
        opacity: 1;
        background-color: var(--accent);
    }

    .image-counter {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        color: white;
        font-size: 16px;
        background-color: rgba(0, 0, 0, 0.7);
        padding: 8px 16px;
        border-radius: 20px;
    }

    @media (max-width: 768px) {
        .prev,
        .next {
            width: 40px;
            height: 40px;
            font-size: 20px;
        }

        .prev {
            left: 10px;
        }

        .next {
            right: 10px;
        }

        .close-modal {
            right: 15px;
            top: 10px;
            font-size: 30px;
        }
    }

    /* Added styles for error handling */
    .error {
        border-color: #ff0000 !important;
        box-shadow: 0 0 0 1px #ff0000 !important;
        background-color: rgba(255, 0, 0, 0.03) !important;
    }
    .card-errors.visible {
        display: block;
        color: #ff0000;
        margin-top: 10px;
        font-size: 14px;
    }
    .payment-error {
        color: #ff0000;
        margin-top: 10px;
        display: none;
    }
    .payment-error.visible {
        display: block;
    }

    .price-on-request {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1.2rem;
        color: var(--accent);
        padding: 0.5rem;
        background: rgba(0, 121, 140, 0.1);
        border-radius: 6px;
    }

    .price-on-request i {
        font-size: 1.4rem;
    }

    .price-on-request span {
        font-weight: 500;
    }

    /* Guide Info Styles - More Specific */
    .tour-hero .guide-info-container {
        background: rgba(255, 255, 255, 0.95);
        padding: 1.5rem;
        border-radius: 12px;
        margin-top: 2rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        position: absolute;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }

    .tour-hero .guide-info {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 1.5rem;
        align-items: center;
    }

    .tour-hero .guide-image {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid var(--accent);
    }

    .tour-hero .guide-details {
        flex: 1;
    }

    .tour-hero .guide-name {
        font-size: 1.2rem;
        font-weight: 600;
        color: #003d5b;
        margin: 0;
    }

    .tour-hero .guide-title {
        color: #666;
        font-size: 0.9rem;
        margin-top: 0.2rem;
    }

    .tour-hero .guide-contact {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
    }

    .tour-hero .contact-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #003d5b;
    }

    .tour-hero .contact-item i {
        width: 20px;
        color: var(--accent);
    }

    .tour-hero .contact-item a {
        color: #003d5b;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .tour-hero .contact-item a:hover {
        color: var(--accent);
    }

    .tour-hero .guide-message {
        margin-top: 1rem;
        font-size: 0.95rem;
        color: #444;
        line-height: 1.4;
        text-align: center;
        border-top: 1px solid #eee;
        padding-top: 1rem;
    }

    @media (max-width: 768px) {
        .tour-hero .guide-info-container {
            position: relative;
            bottom: auto;
            left: auto;
            transform: none;
            margin: 1rem;
            width: calc(100% - 2rem);
        }

        .tour-hero .guide-info {
            grid-template-columns: 1fr;
            text-align: center;
        }

        .tour-hero .guide-image {
            margin: 0 auto;
        }

        .tour-hero .guide-contact {
            margin-top: 1rem;
        }
    }

    /* Guide Info v Book Now obrazcu */
    .guide-info-container {
        margin-bottom: 20px;
        padding: 20px;
        background: #f9f9f9;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        max-width: 600px;
    }

    .guide-info {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 20px;
        align-items: center;
    }

    .guide-image {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #fff;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .guide-details {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .guide-name {
        margin: 0;
        font-size: 18px;
        color: #333;
        font-weight: 600;
    }

    .guide-title {
        margin: 0;
        font-size: 14px;
        color: #666;
    }

    .guide-contact {
        display: flex;
        gap: 15px;
        margin-top: 10px;
    }

    .contact-item {
        display: flex;
        align-items: center;
        gap: 5px;
        color: #666;
        text-decoration: none;
        font-size: 14px;
        transition: color 0.2s ease;
    }

    .contact-item:hover {
        color: var(--accent);
    }

    .guide-message {
        margin-top: 12px;
        font-style: italic;
        color: #666;
        font-size: 14px;
        line-height: 1.4;
    }

    @media (max-width: 768px) {
        .guide-info {
            grid-template-columns: 1fr;
            text-align: center;
            gap: 15px;
        }

        .guide-image {
            margin: 0 auto;
        }

        .guide-contact {
            justify-content: center;
        }
    }

    .guide-info-container {
        background: #fff;
        padding: 1.5rem;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
        max-width: 600px;
    }

    .guide-info {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 2rem;
    }

    .guide-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .guide-image-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .guide-image {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .guide-name {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: #333;
    }

    .guide-contact {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
    }

    .contact-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #333;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .contact-item:hover {
        color: var(--accent);
    }

    .contact-item i {
        width: 20px;
        text-align: center;
        color: var(--accent);
    }

    .contact-item span {
        font-size: 0.9rem;
    }

    @media (max-width: 768px) {
        .guide-info {
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
        }
        
        .guide-contact {
            width: 100%;
            align-items: center;
        }
        
        .contact-item {
            justify-content: center;
        }
    }

    .tour-faq {
        padding: 4rem 0;
        background-color: #f9f9f9;
    }

    .tour-faq .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 0 1rem;
    }

    .tour-faq h2 {
        text-align: center;
        margin-bottom: 3rem;
        color: #333;
        font-size: 2.5rem;
    }

    .faq-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .faq-item {
        background: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .faq-question {
        padding: 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .faq-question:hover {
        background-color: #f8f9fa;
    }

    .faq-question h3 {
        margin: 0;
        font-size: 1.1rem;
        color: #333;
        font-weight: 500;
    }

    .faq-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        color: var(--accent);
    }

    .faq-toggle .fa-minus {
        display: none;
    }

    .faq-answer {
        padding: 0 1.5rem;
        max-height: 0;
        overflow: hidden;
        transition: all 0.3s ease;
        opacity: 0;
    }

    .faq-item.active .faq-question {
        background-color: #f8f9fa;
    }

    .faq-item.active .faq-toggle .fa-plus {
        display: none;
    }

    .faq-item.active .faq-toggle .fa-minus {
        display: block;
    }

    .faq-item.active .faq-answer {
        padding: 1.5rem;
        max-height: 500px;
        opacity: 1;
    }

    .no-faqs {
        text-align: center;
        padding: 2rem;
        background: white;
        border-radius: 8px;
        color: #666;
    }

    @media (max-width: 768px) {
        .tour-faq h2 {
            font-size: 2rem;
        }
        
        .faq-question h3 {
            font-size: 1rem;
        }
    }
    </style>
</head>
<body <?php body_class(); ?>>

<?php get_header(); ?>

<style>
.error {
    border-color: #ff0000 !important;
    box-shadow: 0 0 0 1px #ff0000 !important;
    background-color: rgba(255, 0, 0, 0.03) !important;
}
.card-errors.visible {
    display: block;
    color: #ff0000;
    margin-top: 10px;
    font-size: 14px;
}
.payment-error {
    color: #ff0000;
    margin-top: 10px;
    display: none;
}
.payment-error.visible {
    display: block;
}
</style>

<!-- Booking Popup -->
<div id="bookingPopup" class="popup-overlay" style="display: none;">
    <div class="popup-content">
        <div class="popup-header">
            <h3>Complete Your Booking</h3>
            <button class="close-popup">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <div class="popup-body">
            <div class="tour-summary">
                <h4 id="popupTourName" style="margin-top: 0; margin-bottom: 1rem; color: #1e293b; font-size: 1.2rem;"></h4>
                <div class="tour-details">
                    <p>
                        <span>Date: </span>
                        <span id="popupDate"></span>
                    </p>
                    <p>
                        <span>Participants: </span>
                        <span id="popupParticipants"></span>
                    </p>
                </div>
            </div>

            <div id="single-supplement-notice" style="display: none;" class="single-supplement-notice">
                <i class="fas fa-info-circle"></i>
                <span style="text-align: left;">For single travelers, a supplement of €100 per day (<span id="single-supplement-total"></span> total for <span id="tour-duration-display"></span> days) has been automatically added to the price.</span>
            </div>

            <div class="total-price">
                <span class="price-label">Total Amount</span>
                <span class="price-amount">€<span id="popupTotalPrice">0.00</span></span>
            </div>

            <!-- Promocijska koda -->
            <div class="popup-promo-container">
                <label for="popup-promo-code">Do you have a promotional code?</label>
                <div class="promo-code-input">
                    <input type="text" id="popup-promo-code" name="popup-promo-code" placeholder="Enter your code">
                    <button type="button" id="popup-apply-promo">Apply Code</button>
                </div>
                <div id="popup-promo-message"></div>
            </div>
            
            <div id="payment-options" style="display: none; margin-bottom: 15px; padding: 15px; background-color: #f9f9f9; border-radius: 8px;">
                <h4 style="margin-top: 0; margin-bottom: 10px;">Payment Options</h4>
                <div class="payment-option">
                    <input type="radio" id="full-payment" name="payment-type" value="full" checked>
                    <label for="full-payment">Full payment (€<span id="full-payment-amount">0.00</span>)</label>
                </div>
                <div class="payment-option">
                    <input type="radio" id="partial-payment" name="payment-type" value="partial">
                    <label for="partial-payment">30% deposit now (€<span id="deposit-amount">0.00</span>), 70% balance before tour</label>
                </div>
                <div class="payment-note" style="margin-top: 10px; font-size: 0.9em; color: #666;">
                    <i class="fas fa-info-circle"></i> Partial payment available only for bookings at least 2 months in advance.
                </div>
            </div>

            <div class="payment-section">
                <h4>Payment Details</h4>
                <div id="card-element"></div>
                <div id="card-errors" role="alert" class="payment-error"></div>
            </div>

            <button type="submit" class="btn-confirm-payment" id="submit-payment">
                <span id="button-payment-text">Confirm Payment</span>
                <div id="spinner" class="spinner hidden"></div>
            </button>
        </div>
    </div>
</div>

<!-- Success Popup -->
<div id="successPopup" class="popup-overlay" style="display: none;">
    <div class="popup-content" style="max-width: 400px;">
        <div class="popup-header">
            <h3>Success!</h3>
            <button class="close-popup">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="popup-body" style="text-align: center;">
            <i class="fas fa-check-circle" style="font-size: 3rem; color: #10B981; margin-bottom: 1rem;"></i>
            <h4 style="margin-bottom: 1rem;">Inquiry Sent Successfully</h4>
            <p style="color: #4B5563; margin-bottom: 1.5rem;">Thank you for your inquiry. We will get back to you as soon as possible.</p>
            <button class="btn-book" onclick="closeSuccessPopup()" style="max-width: 200px; margin: 0 auto;">
                Close
            </button>
        </div>
    </div>
</div>

<?php while (have_posts()) : the_post(); 
    $price = get_post_meta(get_the_ID(), '_tour_price', true);
    $duration = get_post_meta(get_the_ID(), '_tour_duration', true);
    $location = get_post_meta(get_the_ID(), '_tour_location', true);
    $daily_program = get_post_meta(get_the_ID(), '_daily_program', true);
    $included_items = get_post_meta(get_the_ID(), '_included_items', true);
    $not_included_items = get_post_meta(get_the_ID(), '_not_included_items', true);
?>

<!-- Hero Section -->
<div class="tour-hero">
    <?php 
    $hero_image_id = get_post_meta(get_the_ID(), '_hero_image', true);
    $hero_image_url = wp_get_attachment_image_url($hero_image_id, 'full');
    
    if ($hero_image_url) :
    ?>
        <img src="<?php echo esc_url($hero_image_url); ?>" alt="<?php echo esc_attr(get_the_title()); ?>">
    <?php elseif (has_post_thumbnail()) : ?>
        <?php the_post_thumbnail('full', array('alt' => get_the_title())); ?>
    <?php endif; ?>
    <div class="tour-hero-overlay">
        <div class="tour-hero-content">
            <h1><?php the_title(); ?></h1>
            <div class="tour-hero-meta">
                <?php if ($price): ?>
                    <div class="tour-price">od <?php echo esc_html($price); ?>€</div>
                <?php endif; ?>
                <?php if ($duration) : ?>
                    <span class="tour-duration"><i class="far fa-clock"></i> <?php echo esc_html($duration); ?> days</span>
                <?php endif; ?>
                <?php if ($location) : ?>
                    <span class="tour-location"><i class="fas fa-map-marker-alt"></i> <?php echo esc_html($location); ?></span>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <?php
    // Pridobi podatke o vodiču
    $guide_image = get_post_meta(get_the_ID(), '_guide_image', true);
    $guide_name = get_post_meta(get_the_ID(), '_guide_name', true);
    $guide_title = get_post_meta(get_the_ID(), '_guide_title', true);

    // Odstranimo prikaz kartice iz hero sekcije
    ?>
</div><!-- .tour-hero -->

        <!-- Tour Content -->
<main class="tour-content-wrapper">
    <!-- Left Column - Tour Information -->
                <div class="tour-info">
                    <div class="tour-description">
            <h2>About This Tour</h2>
                        <?php the_content(); ?>
                    </div>

        <!-- Tour Gallery -->
                    <?php 
        $gallery_images = get_post_meta(get_the_ID(), '_tour_gallery', true);
        if (!empty($gallery_images)) :
        ?>
        <div class="tour-gallery">
            <h2>Photo Gallery</h2>
            <div class="gallery-grid">
                <?php
                foreach ($gallery_images as $image_id) :
                    $image_url = wp_get_attachment_image_url($image_id, 'large');
                    if ($image_url) :
                ?>
                    <img src="<?php echo esc_url($image_url); ?>" 
                         alt="<?php echo esc_attr(get_the_title()); ?> Gallery Image"
                         onclick="openGalleryModal(this)">
                <?php
                    endif;
                endforeach;
                ?>
                        </div>
                        </div>

        <!-- Gallery Modal -->
        <div id="galleryModal" class="gallery-modal">
            <span class="close-modal">&times;</span>
            <img id="modalImage" class="modal-content">
            <a class="prev" onclick="changeImage(-1)">&#10094;</a>
            <a class="next" onclick="changeImage(1)">&#10095;</a>
            <div class="image-counter">
                <span id="currentImageNum">1</span> / <span id="totalImages">1</span>
                            </div>
                                            </div>
                                        <?php endif; ?>
                                        
        <?php if (!empty($daily_program)) : ?>
        <div class="tour-daily-program">
            <h2>Daily Program</h2>
            <div class="daily-program-list">
                <?php 
                $day_type_label = get_post_meta(get_the_ID(), '_day_type_label', true);
                if (empty($day_type_label)) $day_type_label = 'Day';
                
                foreach ($daily_program as $index => $day) : 
                ?>
                <div class="program-day">
                    <div class="day-header">
                        <div class="day-number"><?php echo esc_html($index + 1); ?></div>
                        <h3><?php echo esc_html($day_type_label); ?> <?php echo esc_html($index + 1); ?>: <?php echo esc_html($day['title']); ?></h3>
                    </div>
                                        <p><?php echo wp_kses_post($day['description']); ?></p>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    <?php endif; ?>

        <?php if (!empty($included_items) || !empty($not_included_items)) : ?>
        <div class="tour-included">
            <h2>Included in Price</h2>
            <div class="included-list">
                <?php if (!empty($included_items)) : ?>
                    <?php foreach ($included_items as $item) : ?>
                    <div class="included-item">
                        <i class="fas fa-check"></i>
                        <span><?php echo esc_html($item); ?></span>
                            </div>
                    <?php endforeach; ?>
                        <?php endif; ?>

                <?php if (!empty($not_included_items)) : ?>
                    <?php foreach ($not_included_items as $item) : ?>
                    <div class="not-included-item">
                        <i class="fas fa-times"></i>
                        <span><?php echo esc_html($item); ?></span>
                            </div>
                    <?php endforeach; ?>
                        <?php endif; ?>
                    </div>
                </div>
        <?php endif; ?>

        <!-- Available Extras -->
        <?php
        $available_extras = get_post_meta(get_the_ID(), '_available_extras', true);
        if (!empty($available_extras)) :
        ?>
        <div class="tour-section">
            <h2>Available Extras</h2>
            <div class="available-extras-list">
                <?php foreach ($available_extras as $extra) : ?>
                    <div class="available-extra-item">
                        <i class="fas fa-plus-circle"></i>
                        <span><?php echo esc_html($extra['name']); ?></span>
            </div>
                <?php endforeach; ?>
        </div>
        </div>
        <?php endif; ?>
                </div>

    <!-- Right Column - Booking Form -->
    <div class="tour-booking">
        <div class="booking-form">
            <h3><?php echo get_post_meta(get_the_ID(), '_tour_price', true) ? 'Book Now' : 'Send Inquiry'; ?></h3>
            
            <!-- Guide Information -->
            <?php
            $guide_image = get_post_meta(get_the_ID(), '_guide_image', true);
            $guide_name = get_post_meta(get_the_ID(), '_guide_name', true);
            $guide_title = get_post_meta(get_the_ID(), '_guide_title', true);
            
            if ($guide_image || $guide_name) : ?>
            <div class="guide-info-container">
                <div class="guide-info">
                    <?php if ($guide_image): ?>
                        <img src="<?php echo esc_url($guide_image); ?>" alt="<?php echo esc_attr($guide_name); ?>" class="guide-image">
                    <?php endif; ?>
                    
                    <div class="guide-details">
                        <?php if ($guide_name): ?>
                            <h4 class="guide-name"><?php echo esc_html($guide_name); ?></h4>
                        <?php endif; ?>
                        <?php if ($guide_title): ?>
                            <div class="guide-title"><?php echo esc_html($guide_title); ?></div>
                        <?php endif; ?>
                    </div>

                    <div class="guide-contact">
                        <div class="contact-item">
                            <i class="fas fa-phone"></i>
                            <a href="tel:+38631356333">+386 31 356 333</a>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-envelope"></i>
                            <a href="mailto:info@europewonder.com">info@europewonder.com</a>
                        </div>
                        <div class="contact-item">
                            <i class="fab fa-whatsapp"></i>
                            <a href="https://wa.me/38631356333" target="_blank">WhatsApp</a>
                        </div>
                    </div>
                </div>
                
                <div class="guide-message">
                    Pošljite nam povpraševanje in pomagali vam bomo načrtovati vaše potovanje.
                </div>
            </div>
            <?php endif; ?>
            
            <form id="payment-form" data-tour-id="<?php echo esc_attr(get_the_ID()); ?>" data-tour-name="<?php echo esc_attr(get_the_title()); ?>" data-tour-price="<?php echo esc_attr(get_post_meta(get_the_ID(), '_tour_price', true)); ?>">
                <input type="hidden" id="tour-duration" value="<?php echo esc_attr(get_post_meta(get_the_ID(), '_tour_duration', true)); ?>">
                <input type="hidden" id="base-price" value="<?php echo esc_attr(get_post_meta(get_the_ID(), '_tour_price', true)); ?>">
                <input type="hidden" id="tour_total_price" name="tour_total_price" value="">
                <input type="hidden" id="selected_extras" name="selected_extras" value="">
                    <div class="form-group">
                        <label for="name">Full Name</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" id="email" name="email" required>
                    </div>
                    <div class="form-group">
                    <label for="date">Departure Date</label>
                    <input type="date" id="date" name="date" required>
                    </div>
                    <div class="form-group">
                    <label for="participants">Number of Participants</label>
                    <input type="number" id="number-of-people" name="participants" min="1" value="1" required>
                    </div>

                    <div id="initial-single-supplement-notice" class="single-supplement-notice" style="display: none; background: #FEE2E2; border: 1px solid #FCA5A5; padding: 1rem 1.25rem; border-radius: 10px; margin-bottom: 1.5rem;">
                        <i class="fas fa-info-circle" style="color: #DC2626;"></i>
                        <span style="color: #B91C1C;">For single travelers, a supplement of €100 per day will be added to the price.</span>
                    </div>

                    <?php if (get_post_meta(get_the_ID(), '_tour_price', true)) : ?>
                    <div class="form-group">
                    <label class="price-label">Total Price</label>
                    <div class="total-price">
                        <i class="fas fa-tag"></i>
                        <div class="price-wrapper">
                            <span id="total-price"><?php echo number_format(floatval(get_post_meta(get_the_ID(), '_tour_price', true)), 2); ?></span>
                            <span class="currency">€</span>
                        </div>
                    </div>
                    </div>
                    <?php else: ?>
                    <div class="form-group">
                        <label class="price-label">Price</label>
                        <div class="price-on-request">
                            <i class="fas fa-envelope"></i>
                            <span>Per Request</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="message">Message (optional)</label>
                        <textarea id="message" name="message" rows="4" placeholder="Enter any additional questions or special requirements..."></textarea>
                    </div>
                    <?php endif; ?>

                <button type="submit" class="btn-book" id="submit-button">
                    <span id="button-text"><?php echo get_post_meta(get_the_ID(), '_tour_price', true) ? 'Proceed to Payment' : 'Send Inquiry'; ?></span>
                </button>
                </form>
            </div>
        </div>
</main>

<!-- FAQ Section -->
<section class="tour-faq">
    <div class="container">
        <h2>Frequently Asked Questions</h2>
        <?php
        $faqs = get_post_meta(get_the_ID(), '_tour_faqs', true);
        if (is_array($faqs) && !empty($faqs)) :
        ?>
        <div class="faq-container">
            <?php foreach ($faqs as $faq) : ?>
            <div class="faq-item">
                <div class="faq-question">
                    <h3><?php echo esc_html($faq['question']); ?></h3>
                    <span class="faq-toggle">
                        <i class="fas fa-plus"></i>
                        <i class="fas fa-minus"></i>
                    </span>
                </div>
                <div class="faq-answer">
                    <?php echo wp_kses_post($faq['answer']); ?>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <?php else : ?>
        <p class="no-faqs">Currently no frequently asked questions for this tour.</p>
        <?php endif; ?>
    </div>
</section>

<style>
.tour-faq {
    padding: 4rem 0;
    background-color: #f9f9f9;
}

.tour-faq .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
}

.tour-faq h2 {
    text-align: center;
    margin-bottom: 3rem;
    color: #333;
    font-size: 2.5rem;
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.faq-question {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background-color: #f8f9fa;
}

.faq-question h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #333;
    font-weight: 500;
}

.faq-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--accent);
}

.faq-toggle .fa-minus {
    display: none;
}

.faq-answer {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    opacity: 0;
}

.faq-item.active .faq-question {
    background-color: #f8f9fa;
}

.faq-item.active .faq-toggle .fa-plus {
    display: none;
}

.faq-item.active .faq-toggle .fa-minus {
    display: block;
}

.faq-item.active .faq-answer {
    padding: 1.5rem;
    max-height: 500px;
    opacity: 1;
}

.no-faqs {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 8px;
    color: #666;
}

@media (max-width: 768px) {
    .tour-faq h2 {
        font-size: 2rem;
    }
    
    .faq-question h3 {
        font-size: 1rem;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const faqItems = document.querySelectorAll('.faq-item');
    
    faqItems.forEach(item => {
        const question = item.querySelector('.faq-question');
        
        question.addEventListener('click', () => {
            const isActive = item.classList.contains('active');
            
            // Zapri vsa ostala vprašanja
            faqItems.forEach(otherItem => {
                if (otherItem !== item) {
                    otherItem.classList.remove('active');
                }
            });
            
            // Preklopi trenutno vprašanje
            item.classList.toggle('active', !isActive);
        });
    });
});
</script>

<?php endwhile; ?>

<script>
jQuery(document).ready(function($) {
    // ---------- INICIALIZACIJA OSNOVNIH SPREMENLJIVK ----------
    const form = $('#payment-form');
    const tourPrice = parseFloat(form.data('tour-price'));
    const participantsInput = $('#number-of-people');
    const totalPriceElement = $('#total-price');
    const submitButton = $('#submit-button');
    const buttonText = $('#button-text');
    const popup = $('#bookingPopup');
    const closePopupBtn = $('.close-popup');
    const singleSupplementNotice = $('#single-supplement-notice');
    const SINGLE_SUPPLEMENT_PER_DAY = 100;
    const tourDuration = parseInt($('#tour-duration').val());
    
    // Inicializacija Stripe samo če ima tura ceno
    let stripe, elements, cardElement;
    if (tourPrice) {
        stripe = Stripe('pk_live_51QDX5ED0QTWuqIH7U57GyAlPbkDeLoLmMOU3EHZs7e6W56nLGRzZUa5mx60xrO4eyWxZG0gQGnIsrJmEA3SbYKD200EcUZUqD1');
        elements = stripe.elements();
        cardElement = elements.create('card');
        cardElement.mount('#card-element');
    }
    
    // Variable to store form data in closure scope
    let storedFormData = null;
    
    // Odstrani razred napake, ko uporabnik začne vnašati podatke
    form.find('[required]').on('input', function() {
        $(this).removeClass('error');
    });
    
    // ---------- FUNKCIJA ZA ZAPIRANJE POPUPA ----------
    function closePopup() {
        popup.fadeOut(300);
        if (cardElement) {
            cardElement.clear();
        }
        $('#card-errors').text('').removeClass('visible');
    }

    // ---------- NASTAVITEV DATUMA IN VALIDACIJA OBRAZCA ----------
    // Nastavi današnji datum kot minimalni datum
    const today = new Date().toISOString().split('T')[0];
    $('#date').attr('min', today);
    
    // Obvezna validacija ob pošiljanju obrazca
    form.on('submit', function(e) {
        e.preventDefault();
        console.log('Form submit event triggered');
        
        // Preveri, če so vsa obvezna polja izpolnjena
        let isValid = true;
        let firstInvalidField = null;
        let missingFields = [];
        
        form.find('[required]').each(function() {
            const $field = $(this);
            const fieldValue = $field.val().trim();
            const fieldId = $field.attr('id');
            const fieldLabel = $field.prev('label').text();
            
            if (!fieldValue) {
                isValid = false;
                $field.addClass('error');
                missingFields.push(fieldLabel);
                if (!firstInvalidField) {
                    firstInvalidField = $field;
                }
            } else {
                $field.removeClass('error');
            }
        });
        
        if (!isValid) {
            alert('Please fill in all required fields: ' + missingFields.join(', '));
            if (firstInvalidField) {
                firstInvalidField.focus();
            }
            return false;
        }

        // Če tura nima cene, pošlji povpraševanje
        if (!tourPrice) {
            const formData = {
                action: 'send_tour_inquiry',
                security: '<?php echo wp_create_nonce("send_tour_inquiry"); ?>',
                tour_id: form.data('tour-id'),
                tour_name: form.data('tour-name'),
                name: $('#name').val(),
                email: $('#email').val(),
                date: $('#date').val(),
                participants: $('#number-of-people').val(),
                message: $('#message').val()
            };

            $.ajax({
                url: '<?php echo admin_url("admin-ajax.php"); ?>',
                type: 'POST',
                data: formData,
                success: function(response) {
                    if (response.success) {
                        // Prikaži success popup namesto preusmeritve
                        $('#successPopup').fadeIn(300);
                        // Počisti obrazec
                        form[0].reset();
                    } else {
                        alert(response.data.message || 'An error occurred while sending your inquiry. Please try again.');
                    }
                },
                error: function() {
                    alert('An error occurred while sending your inquiry. Please try again.');
                }
            });
            return false;
        }

        // Če ima tura ceno, nadaljuj s plačilnim procesom
        console.log('Vsa polja so izpolnjena, prikazujem popup');
        
        $('#popupTourName').text(form.data('tour-name'));
        $('#popupDate').text($('#date').val());
        $('#popupParticipants').text($('#number-of-people').val());
        
        $('.popup-extras-list input[type="checkbox"]').prop('checked', false);
        
        const totalPrice = updateTotalPrice();
        
        const selectedDate = new Date($('#date').val());
        const today = new Date();
        const twoMonthsFromNow = new Date();
        twoMonthsFromNow.setMonth(today.getMonth() + 2);
        
        if (selectedDate >= twoMonthsFromNow) {
            $('#payment-options').show();
        } else {
            $('#payment-options').hide();
            $('#full-payment').prop('checked', true);
        }

        popup.fadeIn(300);
    });
    
    // ---------- FUNKCIJA ZA POSODOBITEV SKUPNE CENE ----------
    function updateTotalPrice() {
        const basePrice = parseFloat($('#base-price').val());
        const participants = parseInt(participantsInput.val());
        const tourDuration = parseInt($('#tour-duration').val());
        let totalPrice = basePrice * participants;
        
        // Preveri če je samo en udeleženec - prikaži single supplement obvestilo
        if (participants === 1) {
            const singleSupplement = SINGLE_SUPPLEMENT_PER_DAY * tourDuration;
            totalPrice += singleSupplement;
            singleSupplementNotice.show();
            // Posodobi prikaz števila dni in skupnega zneska za single supplement
            $('#tour-duration-display').text(tourDuration);
            $('#single-supplement-total').text('€' + singleSupplement);
        } else {
            singleSupplementNotice.hide();
        }
        
        // Dodaj cene dodatkov
        const extras = getSelectedExtras();
        let hasPriceOnRequest = false;
        
        extras.forEach(function(extra) {
            if (extra.is_price_per_request) {
                hasPriceOnRequest = true;
                console.log(`Dodatek "${extra.name}" ima ceno na zahtevo - ne dodajam k skupni vsoti`);
            } else if (extra.is_per_day_per_person === "true") {
                totalPrice += extra.price * tourDuration * participants;
            } else {
                totalPrice += extra.price;
            }
        });
        
        // Posodobi prikazano ceno v obrazcu in popupu
        totalPriceElement.text(totalPrice.toFixed(2));
        
        // Posodobi cene možnosti plačila
        $('#full-payment-amount').text(totalPrice.toFixed(2));
        $('#deposit-amount').text((totalPrice * 0.3).toFixed(2));
        
        // Posodobi hidden polje
        $('#tour_total_price').val(totalPrice.toFixed(2));
        
        // Posodobi prikaz cene v popupu glede na izbrani način plačila
        const paymentType = $('input[name="payment-type"]:checked').val();
        if (paymentType === 'partial') {
            $('#popupTotalPrice').text((totalPrice * 0.3).toFixed(2));
        } else {
            $('#popupTotalPrice').text(totalPrice.toFixed(2));
        }
        
        // Če obstaja kak dodatek s ceno na zahtevo, dodaj opombo
        if (hasPriceOnRequest) {
            // Preveri če opomba že obstaja
            if ($('#price-request-note').length === 0) {
                // Dodaj opombo pod Total Amount
                const note = $('<div id="price-request-note" style="font-size: 0.85rem; color: #666; margin-top: 5px;"><i class="fas fa-info-circle"></i> Some extras require price confirmation</div>');
                $('.total-price').append(note);
            }
        } else {
            // Odstrani opombo, če ni dodatkov s ceno na zahtevo
            $('#price-request-note').remove();
        }
        
        return totalPrice;
    }
    
    // ---------- EVENT LISTENERS ----------
    // Event Listener za spremembo števila udeležencev in dodatkov
    participantsInput.on('change', function() {
        console.log('Sprememba števila udeležencev na:', $(this).val());
        updateTotalPrice();
        
        // Prikaži ali skrij obvestilo o single supplement
        const participants = parseInt($(this).val());
        if (participants === 1) {
            $('#initial-single-supplement-notice').slideDown(300);
        } else {
            $('#initial-single-supplement-notice').slideUp(300);
        }
    });
    
    // Event listener za spremembo checkboxov za dodatke
    $('.popup-extras-list input[type="checkbox"]').on('change', function() {
        const extraName = $(this).data('name');
        const isChecked = $(this).is(':checked');
        console.log(`Dodatek "${extraName}" ${isChecked ? 'izbran' : 'odstranjen'}`);
        updateTotalPrice();
    });
    
    // Event listener za spremembo načina plačila
    $('input[name="payment-type"]').on('change', function() {
        const paymentType = $(this).val();
        const totalAmount = updateTotalPrice();
        console.log(`Spremenjen način plačila na: ${paymentType}`);
        
        // Posodobi prikazan znesek glede na izbrani način plačila
        if (paymentType === 'partial') {
            const depositAmount = parseFloat((totalAmount * 0.3).toFixed(2));
            $('#popupTotalPrice').text(depositAmount.toFixed(2));
            console.log(`Prikazan znesek posodobljen na polog: €${depositAmount.toFixed(2)}`);
        } else {
            $('#popupTotalPrice').text(totalAmount.toFixed(2));
            console.log(`Prikazan znesek posodobljen na celoten znesek: €${totalAmount.toFixed(2)}`);
        }
    });
    
    // Inicializacija cene pri nalaganju strani
    updateTotalPrice();
    
    // Zapiranje popupa
    closePopupBtn.on('click', closePopup);
    
    $(window).on('click', function(e) {
        if ($(e.target).is(popup)) {
            closePopup();
        }
    });

    // ---------- GALERIJA MODAL ----------
    let currentImageIndex = 0;
    const galleryImages = <?php echo json_encode(array_values(array_filter(array_map(function($image_id) {
        return wp_get_attachment_image_url($image_id, 'large');
    }, $gallery_images ?? [])))); ?>;

    window.openGalleryModal = function(img) {
        const modal = document.getElementById('galleryModal');
        const modalImg = document.getElementById('modalImage');
        currentImageIndex = Array.from(img.parentElement.children).indexOf(img);
        
        modal.style.display = "block";
        setTimeout(() => modal.classList.add('show'), 10);
        
        updateModalImage();
    }

    function updateModalImage() {
        const modalImg = document.getElementById('modalImage');
        const currentNum = document.getElementById('currentImageNum');
        const totalImages = document.getElementById('totalImages');
        
        modalImg.src = galleryImages[currentImageIndex];
        currentNum.textContent = currentImageIndex + 1;
        totalImages.textContent = galleryImages.length;
    }

    function changeImage(direction) {
        currentImageIndex = (currentImageIndex + direction + galleryImages.length) % galleryImages.length;
        updateModalImage();
    }

    function closeGalleryModal() {
        const modal = document.getElementById('galleryModal');
        modal.classList.remove('show');
        setTimeout(() => modal.style.display = "none", 300);
    }

    // Event Listeners za galerijo
    $('.close-modal').on('click', closeGalleryModal);

    // Close modal on escape key and arrow navigation
    $(document).on('keydown', function(e) {
        const modal = document.getElementById('galleryModal');
        if (modal.style.display === "block") {
            if (e.key === 'Escape') {
                closeGalleryModal();
            } else if (e.key === 'ArrowLeft') {
                changeImage(-1);
            } else if (e.key === 'ArrowRight') {
                changeImage(1);
            }
        }
    });

    // Prevent scrolling when modal is open
    $('#galleryModal').on('wheel', function(e) {
        if (this.style.display === "block") {
            e.preventDefault();
        }
    });

    // Touch swipe support for mobile
    let touchStartX = 0;
    let touchEndX = 0;

    $('#galleryModal').on('touchstart', function(e) {
        touchStartX = e.originalEvent.changedTouches[0].screenX;
    });

    $('#galleryModal').on('touchend', function(e) {
        touchEndX = e.originalEvent.changedTouches[0].screenX;
        handleSwipe();
    });

    function handleSwipe() {
        const swipeThreshold = 50;
        const swipeDistance = touchEndX - touchStartX;
        
        if (Math.abs(swipeDistance) > swipeThreshold) {
            if (swipeDistance > 0) {
                // Swipe right - previous image
                changeImage(-1);
            } else {
                // Swipe left - next image
                changeImage(1);
            }
        }
    }

    // Add click handlers for navigation buttons
    $('.prev').on('click', function() {
        changeImage(-1);
    });
    
    $('.next').on('click', function() {
        changeImage(1);
    });

    // ---------- OBDELAVA PLAČILA ----------
    $('#submit-payment').on('click', function(e) {
        e.preventDefault();
        console.log('Payment submission initiated');
        
        // Počisti prejšnja sporočila o napakah
        $('#card-errors').text('').removeClass('visible');
        
        const button = $(this);
        const buttonPaymentText = $('#button-payment-text');
        const spinner = $('#spinner');
        
        // Preveri, če je Stripe polje izpolnjeno
        if (!cardElement._complete) {
            $('#card-errors').text('Please enter your card details.').addClass('visible');
        return;
    }
    
        // Dodatna validacija, da preverimo, če manjka kakšen podatek
        if (!storedFormData || !storedFormData.name || !storedFormData.email || !storedFormData.date) {
            console.error('Manjkajoči podatki obrazca:', storedFormData);
            
            // Neposredno pridobivanje vrednosti z document.getElementById
            console.log('Poskus ponovnega zajema vrednosti z document.getElementById');
            const nameValue = document.getElementById('name')?.value;
            const emailValue = document.getElementById('email')?.value;
            const dateValue = document.getElementById('date')?.value;
            const participantsValue = document.getElementById('number-of-people')?.value;
            
            // Poskusimo alternativne pristope
            let directNameValue = '';
            let directEmailValue = '';
            let directDateValue = '';
            let directParticipantsValue = '';
            
            // Pristop preko HTMLCollection
            console.log('Poskus s pregledovanjem vseh input elementov:');
            const allInputs = document.getElementsByTagName('input');
            for (let i = 0; i < allInputs.length; i++) {
                console.log(`Input #${i}:`, {
                    id: allInputs[i].id,
                    name: allInputs[i].name,
                    value: allInputs[i].value,
                    type: allInputs[i].type
                });
                
                if (allInputs[i].id === 'name') {
                    directNameValue = allInputs[i].value;
                }
                if (allInputs[i].id === 'email') {
                    directEmailValue = allInputs[i].value;
                }
                if (allInputs[i].id === 'date') {
                    directDateValue = allInputs[i].value;
                }
                if (allInputs[i].id === 'number-of-people') {
                    directParticipantsValue = allInputs[i].value;
                }
            }
            
            // Izberi najboljšo vrednost
            const finalNameValue = directNameValue || nameValue || $('#name').val() || '';
            const finalEmailValue = directEmailValue || emailValue || $('#email').val() || '';
            const finalDateValue = directDateValue || dateValue || $('#date').val() || '';
            const finalParticipantsValue = directParticipantsValue || participantsValue || $('#number-of-people').val() || '1';
            
            console.log('Ponovno zajete DOM vrednosti:', {
                name: finalNameValue,
                email: finalEmailValue,
                date: finalDateValue,
                participants: finalParticipantsValue
            });
            
            // Za vsak primer ponovno naberimo podatke
            storedFormData = {
                action: 'process_tour_booking',
                security: '<?php echo wp_create_nonce("process_tour_booking"); ?>',
                tour_id: form.data('tour-id'),
                tour_name: form.data('tour-name'),
                name: finalNameValue,
                email: finalEmailValue,
                date: finalDateValue,
                participants: finalParticipantsValue,
                extras: JSON.stringify(getSelectedExtras()),
                total_price: updateTotalPrice(),
                single_supplement: parseInt(finalParticipantsValue) === 1
            };
            
            // Ponovno preveri
            if (!storedFormData.name || !storedFormData.email || !storedFormData.date) {
                $('#card-errors').text('Please fill in all required fields in the form.').addClass('visible');
                console.error('Še vedno manjkajo podatki:', {
                    name: storedFormData.name || 'manjka',
                    email: storedFormData.email || 'manjka',
                    date: storedFormData.date || 'manjka'
                });
                return;
            }
        }
        
        button.prop('disabled', true);
        buttonPaymentText.text('Processing...');
        spinner.removeClass('hidden');
        
        console.log('Pošiljam podatke:', storedFormData);

        // Uporabi asinhron način s pomočjo funkcije
        processPayment();
        
        // Prepreči privzeto obnašanje gumba
        return false;
    });
    
    // Funkcija za obdelavo plačila
    async function processPayment() {
        try {
            // Pridobi izbrani način plačila
            const paymentType = $('input[name="payment-type"]:checked').val();
            
            // Nastavi vrednost plačila glede na izbrani način
            const totalAmount = updateTotalPrice();
            let paymentAmount = totalAmount;
            
            if (paymentType === 'partial') {
                paymentAmount = parseFloat((totalAmount * 0.3).toFixed(2)); // 30% celotnega zneska
                console.log('Using partial payment (30%): €', paymentAmount);
        } else {
                console.log('Using full payment: €', paymentAmount);
            }
            
            // Najprej ustvari WooCommerce naročilo
            const orderData = { ...storedFormData };
            orderData.payment_type = paymentType;
            orderData.payment_amount = paymentAmount;
            
            const orderResponse = await $.ajax({
                url: '<?php echo admin_url("admin-ajax.php"); ?>',
                type: 'POST',
                data: orderData,
                dataType: 'json'  // Eksplicitno določimo tip podatkov
            });
            
            console.log('Order response:', orderResponse);

            if (!orderResponse.success) {
                throw new Error(orderResponse.data?.message || 'Failed to create order');
            }

            // Pridobi client secret za Stripe
            const { client_secret, order_id } = orderResponse.data;
            
            console.log('Processing payment with client_secret:', client_secret, 'for order ID:', order_id);

            // Potrdi plačilo s Stripe
            const result = await stripe.confirmCardPayment(client_secret, {
                payment_method: {
                    card: cardElement,
                    billing_details: {
                        name: storedFormData.name,
                        email: storedFormData.email
                    }
                }
            });
            
            console.log('Stripe result:', result);

            if (result.error) {
                throw new Error(result.error.message);
            }
            
            // Preveri, če je plačilo uspešno zaključeno
            if (result.paymentIntent.status === 'succeeded') {
                console.log('Payment succeeded! Payment Intent ID:', result.paymentIntent.id);
                
                // Pošlji še dodatno potrditev na strežnik
                try {
                    const confirmationResult = await $.ajax({
                        url: '<?php echo admin_url("admin-ajax.php"); ?>',
                        type: 'POST',
                        data: {
                            action: 'confirm_stripe_payment',
                            security: '<?php echo wp_create_nonce("confirm_stripe_payment"); ?>',
                            payment_intent_id: result.paymentIntent.id,
                            order_id: order_id
                        },
                        dataType: 'json'
                    });
                    
                    console.log('Payment confirmation result:', confirmationResult);
                } catch (confirmError) {
                    console.warn('Failed to confirm payment on server, but payment was successful:', confirmError);
                    // Ne prekinemo, ker je plačilo že uspelo
                }
                
                // Uspešno plačilo - preusmeri na zahvalno stran
                window.location.href = orderResponse.data.thank_you_url;
            } else {
                console.error('Payment was not successful. Status:', result.paymentIntent.status);
                throw new Error('Payment processing incomplete. Please try again or contact support.');
            }

        } catch (error) {
            console.error('Payment error:', error);
            $('#card-errors').text(error.message).addClass('visible');
            $('#submit-payment').prop('disabled', false);
            $('#button-payment-text').text('Confirm Payment');
            $('#spinner').addClass('hidden');
        }
    }
    
    // ---------- POMOŽNE FUNKCIJE ----------
    // Pomožna funkcija za zbiranje izbranih dodatkov
    function getSelectedExtras() {
        const selectedExtras = [];
        const participants = parseInt($('#number-of-people').val());
        const tourDuration = parseInt($('#tour-duration').val());
        
        console.log('========== ZBIRANJE IZBRANIH DODATKOV ==========');
        console.log('Število udeležencev:', participants);
        console.log('Trajanje (dni):', tourDuration);
        
        $('.popup-extras-list input[type="checkbox"]:checked').each(function() {
            const extraName = $(this).data('name');
            const extraBasePrice = parseFloat($(this).data('price'));
            const isPerDayPerPerson = $(this).attr('data-per-day-per-person') === 'true';
            
            console.log('-------------------------');
            console.log('Dodatek:', extraName);
            console.log('Osnovna cena:', extraBasePrice, '€');
            console.log('Per day per person:', isPerDayPerPerson ? 'DA' : 'NE');
            
            // Izračun končne cene
            let extraTotalPrice = extraBasePrice;
            let priceCalculation = '';
            let isPricePerRequest = extraBasePrice === 0 || isNaN(extraBasePrice);
            
            if (isPricePerRequest) {
                extraTotalPrice = 0;
                priceCalculation = `Cena na zahtevo`;
                console.log('Dodatek na zahtevo - cena ni določena');
            } else if (isPerDayPerPerson) {
                extraTotalPrice = extraBasePrice * tourDuration * participants;
                priceCalculation = `${extraBasePrice}€ × ${tourDuration} dni × ${participants} oseb = ${extraTotalPrice}€`;
                console.log('Izračun cene dodatka:', priceCalculation);
            } else {
                priceCalculation = `${extraBasePrice}€ (fiksna cena)`;
                console.log('Izračun cene dodatka:', priceCalculation);
            }
            
            selectedExtras.push({
                name: extraName,
                price: extraTotalPrice,
                base_price: extraBasePrice,
                quantity: 1,
                is_per_day_per_person: isPerDayPerPerson,
                is_price_per_request: isPricePerRequest,
                days: tourDuration,
                participants: participants,
                price_calculation: priceCalculation
            });
        });
        
        if (selectedExtras.length > 0) {
            console.log('-------------------------');
            console.log('Izbrani dodatki:', selectedExtras);
        } else {
            console.log('Ni izbranih dodatkov');
        }
        console.log('=============================================');
        
        return selectedExtras;
    }

    // Funkcija za zapiranje success popupa
    window.closeSuccessPopup = function() {
        $('#successPopup').fadeOut(300);
    }

    // Zapiranje success popupa ob kliku na overlay
    $('#successPopup').on('click', function(e) {
        if ($(e.target).is('#successPopup')) {
            closeSuccessPopup();
        }
    });

    // Zapiranje success popupa ob kliku na X
    $('#successPopup .close-popup').on('click', closeSuccessPopup);

    // Preveri začetno stanje ob nalaganju strani
    if (parseInt(participantsInput.val()) === 1) {
        $('#initial-single-supplement-notice').show();
    }

    // Omogoči uporabo tipke Enter za potrditev kode
    $('#popup-promo-code').on('keypress', function(e) {
        if (e.which === 13) {
            e.preventDefault();
            $('#popup-apply-promo').click();
        }
    });
});
</script>

<?php get_footer(); ?> 
</body>
</html> 