.elementor-kit-10{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:#FFFFFF;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-10 e-page-transition{background-color:#FFBC7D;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */<?php
/**
 * Shortcode: [routes_ui]
 * Renders tabbed vehicle routes with map preview + booking buttons.
 * Colors are aligned to brand blue #062068.
 */
add_shortcode('routes_ui', function () {
  static $instance = 0; $instance++;
  $uid = 'routes-' . $instance;

  // Tab order (left → right)
  $wanted = ['staria','sedan','hiace','gmc','coaster','bus'];
  $terms = get_terms([
    'taxonomy'   => 'vehicle_type',
    'hide_empty' => false,
    'slug'       => $wanted,
    'orderby'    => 'include',
  ]);
  if (is_wp_error($terms) || !$terms) return '<p>No vehicle types found.</p>';

  ob_start(); ?>
  <section class="routes-section" id="<?php echo esc_attr($uid); ?>">

    <style>
      :root { --rp:#062068; --chip-bg:#F3F5FA; --chip-active:#F6B900; }

      /* ===== Section + Title ===== */
      #<?php echo esc_attr($uid); ?>{
        font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
        font-weight: 400;
      }
      #<?php echo esc_attr($uid); ?> .routes-title{
        margin: 10px 0 20px;
        color: var(--rp);
        font-size: 42px;
        line-height: 1.15;
        font-weight: 700;
        text-align: center;
        letter-spacing: .25px;
      }
      #<?php echo esc_attr($uid); ?> .routes-title::after{
        content:"";
        display:block;
        width: 64px; height: 3px; border-radius: 3px;
        background: var(--rp);
        margin: 12px auto 0;
      }

      /* ===== Tabs (pill bar) ===== */
      #<?php echo esc_attr($uid); ?> .routes-tabs{
        display:flex; justify-content:space-between; align-items:center;
        gap:22px; background: var(--chip-bg);
        border-radius: 16px; padding: 8px 20px;
        max-width: 1024px; margin: 0 auto 22px;
      }
      #<?php echo esc_attr($uid); ?> .routes-tab{
        appearance:none; border:0; cursor:pointer;
        background:transparent; color: var(--rp);
        padding:8px 16px; border-radius:9999px;
        font-size:18px; font-weight:600; line-height:1;
        letter-spacing:.15px;
        transition: background .18s, color .18s, transform .18s, letter-spacing .18s, word-spacing .18s;
      }
      #<?php echo esc_attr($uid); ?> .routes-tab:first-child{ margin-left:6px; }
      #<?php echo esc_attr($uid); ?> .routes-tab:last-child{  margin-right:6px; }
      #<?php echo esc_attr($uid); ?> .routes-tab:not(.is-active):hover{
        background: rgba(6,32,104,.08);
        transform: scale(1.03);
        letter-spacing:.25px; word-spacing:1px;
        color: var(--rp);
      }
      #<?php echo esc_attr($uid); ?> .routes-tab.is-active{
        background: var(--chip-active); color:#fff;
        box-shadow: 0 2px 6px rgba(0,0,0,.06);
      }

      /* ===== Panels visibility ===== */
      #<?php echo esc_attr($uid); ?> .routes-panel{ display:none; }
      #<?php echo esc_attr($uid); ?> .routes-panel.is-active{ display:block; }

      /* ===== Layout ===== */
      #<?php echo esc_attr($uid); ?> .routes-grid{
        display:grid; grid-template-columns:1.05fr .95fr; gap:20px; align-items:start;
        max-width:1200px; margin:0 auto;
      }
      #<?php echo esc_attr($uid); ?> .routes-list{
        max-height:580px; overflow:auto; padding-right:4px;
      }

      /* ===== Route rows ===== */
      #<?php echo esc_attr($uid); ?> .route-item{
        position:relative; overflow:hidden; box-sizing:border-box;
        display:flex; align-items:center; justify-content:space-between;
        gap:.75rem; margin:.55rem 0; padding:.5rem .75rem;
        background:#fff; border:1.5px solid var(--rp);
        border-radius:.60rem;
        color:var(--rp);
        transition:color .25s, border-color .25s, box-shadow .25s, background .25s;
      }
      #<?php echo esc_attr($uid); ?> .route-item .left{ display:flex; align-items:center; gap:.55rem; }
      #<?php echo esc_attr($uid); ?> .route-item .label{
        text-transform: uppercase; font-size:14px; line-height:1.2;
        letter-spacing:.30px; font-weight:500;
      }
      #<?php echo esc_attr($uid); ?> .route-item .pin{ font-size:15px; }

      /* Buttons */
      #<?php echo esc_attr($uid); ?> .route-item .btn{
        background:#fff; color:var(--rp);
        border:1.5px solid var(--rp); border-radius:9999px;
        padding:.36rem .78rem; font-size:13px; font-weight:500;
        text-decoration:none; white-space:nowrap;
        transition:all .2s ease; flex:0 0 auto;
      }
      #<?php echo esc_attr($uid); ?> .route-item .btn:hover{
        background: var(--rp); color:#fff; border-color: var(--rp);
      }

      /* Center-out hover fill */
      #<?php echo esc_attr($uid); ?> .route-item::before{
        content:""; position:absolute; inset:0; background:var(--rp);
        transform:scaleX(0); transform-origin:50% 50%;
        transition:transform .35s ease; z-index:0;
      }
      #<?php echo esc_attr($uid); ?> .route-item > *{ position:relative; z-index:1; }
      #<?php echo esc_attr($uid); ?> .route-item:hover::before,
      #<?php echo esc_attr($uid); ?> .route-item:focus-within::before{ transform:scaleX(1); }
      #<?php echo esc_attr($uid); ?> .route-item:hover,
      #<?php echo esc_attr($uid); ?> .route-item:focus-within{
        color:#fff; border-color:var(--rp); background:transparent !important;
        box-shadow:0 4px 12px rgba(0,0,0,.08);
      }
      #<?php echo esc_attr($uid); ?> .route-item:hover .label,
      #<?php echo esc_attr($uid); ?> .route-item:hover .pin{ color:#fff; }

      /* Featured row stays brand */
      #<?php echo esc_attr($uid); ?> .route-item.featured{
        background:var(--rp); color:#fff; border-color:var(--rp);
      }
      #<?php echo esc_attr($uid); ?> .route-item.featured .label,
      #<?php echo esc_attr($uid); ?> .route-item.featured .pin{ color:#fff; }

      /* Map */
      #<?php echo esc_attr($uid); ?> .routes-map .mapimg{
        width:100%; border-radius:.8rem; border:1.5px solid #E7EBFF;
        box-shadow:0 6px 18px rgba(0,0,0,.06);
      }
      #<?php echo esc_attr($uid); ?> .map-placeholder{
        background:#F3F5FA; /* soft pale blue to match chips */
        border:1.5px solid #E7EBFF;
        border-radius:.8rem;
        padding:3rem 1rem; text-align:center;
        color:var(--rp);   /* brand blue (was purple) */
        font-weight:500;
      }

      /* ===== Mobile ===== */
      @media (max-width: 768px){
        #<?php echo esc_attr($uid); ?> .routes-title{ font-size:30px; }
        #<?php echo esc_attr($uid); ?> .routes-tabs{
          display:grid !important; grid-template-columns:repeat(3,1fr) !important;
          gap:8px !important; padding:8px 12px !important;
          max-width:none !important;
        }
        #<?php echo esc_attr($uid); ?> .routes-tab{
          width:100%; text-align:center; font-size:13px;
          padding:7px 10px; transform:none !important;
        }
        #<?php echo esc_attr($uid); ?> .routes-grid{ grid-template-columns:1fr !important; gap:12px !important; }
        #<?php echo esc_attr($uid); ?> .routes-list{ max-height:none !important; padding:0 !important; }

        #<?php echo esc_attr($uid); ?> .route-item{
          padding:7px 10px !important; margin:6px 0 !important;
          border-radius:10px !important; border-width:1.5px !important;
        }
        #<?php echo esc_attr($uid); ?> .route-item .label{
          font-size:12px !important; display:-webkit-box !important;
          -webkit-line-clamp:2 !important; -webkit-box-orient: vertical !important;
          white-space:normal !important; overflow:hidden !important;
        }
        #<?php echo esc_attr($uid); ?> .route-item .btn{
          font-size:12px !important; padding:6px 12px !important; border-width:1.5px !important;
        }
      }

      /* === Force all vehicle card text/icons to brand blue in base state === */
      #<?php echo esc_attr($uid); ?> .route-item,
      #<?php echo esc_attr($uid); ?> .route-item .label,
      #<?php echo esc_attr($uid); ?> .route-item .pin,
      #<?php echo esc_attr($uid); ?> .route-item .btn { color: var(--rp); }
      #<?php echo esc_attr($uid); ?> .route-item svg { fill: var(--rp); stroke: var(--rp); }

      /* Keep hover/featured white text (already defined above) */
    </style>

    <h2 class="routes-title">Routes</h2>

    <!-- Tabs -->
    <div class="routes-tabs" role="tablist" aria-label="Vehicle types">
      <?php foreach ($terms as $i => $t): ?>
        <button
          class="routes-tab<?php echo $i===0 ? ' is-active' : ''; ?>"
          role="tab"
          aria-selected="<?php echo $i===0 ? 'true' : 'false'; ?>"
          aria-controls="<?php echo esc_attr($uid.'-panel-'.$t->slug); ?>"
          id="<?php echo esc_attr($uid.'-tab-'.$t->slug); ?>">
          <?php echo esc_html($t->name); ?>
        </button>
      <?php endforeach; ?>
    </div>

    <!-- Panels -->
    <?php foreach ($terms as $i => $t): ?>
      <?php $fallback_map = function_exists('get_field') ? get_field('map_image', 'vehicle_type_'.$t->term_id) : ''; ?>
      <div class="routes-panel<?php echo $i===0 ? ' is-active' : ''; ?>"
           id="<?php echo esc_attr($uid.'-panel-'.$t->slug); ?>"
           role="tabpanel"
           aria-labelledby="<?php echo esc_attr($uid.'-tab-'.$t->slug); ?>">

        <div class="routes-grid">
          <!-- List -->
          <div class="routes-list" data-map-target="<?php echo esc_attr($uid.'-map-'.$t->slug); ?>">
            <?php
              $q = new WP_Query([
                'post_type'      => 'route',
                'tax_query'      => [[
                  'taxonomy' => 'vehicle_type',
                  'field'    => 'slug',
                  'terms'    => $t->slug,
                ]],
                'posts_per_page' => -1,
                'orderby'        => 'menu_order title',
                'order'          => 'ASC',
              ]);
              $first_route_map_url = '';
              if ($q->have_posts()):
                while ($q->have_posts()): $q->the_post();
                  $url = esc_url(function_exists('get_field') ? (get_field('booking_url') ?: '#') : '#');
                  $featured = function_exists('get_field') && get_field('is_featured');
                  $rmap = function_exists('get_field') ? get_field('route_map_image') : '';
                  $rmap_url = '';
                  if (is_array($rmap) && !empty($rmap['sizes'])) {
                    $rmap_url = esc_url($rmap['sizes']['large'] ?? $rmap['url']);
                  } elseif (is_array($rmap)) {
                    $rmap_url = esc_url($rmap['url']);
                  }
                  if (!$first_route_map_url && $rmap_url) $first_route_map_url = $rmap_url;
            ?>
            <div class="route-item<?php echo $featured ? ' featured' : ''; ?>"
                 tabindex="0"
                 data-map-url="<?php echo esc_attr($rmap_url); ?>">
              <div class="left">
                <span class="pin" aria-hidden="true">📍</span>
                <span class="label"><?php echo esc_html( get_the_title() ); ?></span>
              </div>
              <a class="btn" href="<?php echo $url; ?>" target="_blank" rel="noopener">Book Now</a>
            </div>
            <?php endwhile; wp_reset_postdata(); else: ?>
              <p>No routes available.</p>
            <?php endif; ?>
          </div>

          <!-- Map -->
          <div class="routes-map">
            <?php
              $default_url = $first_route_map_url ?: (is_array($fallback_map) ? ($fallback_map['sizes']['large'] ?? $fallback_map['url']) : '');
              if ($default_url) {
                echo '<img class="mapimg" id="'.esc_attr($uid.'-map-'.$t->slug).'" src="'.esc_url($default_url).'" alt="Route map" loading="lazy" />';
              } else {
                echo '<div class="map-placeholder" id="'.esc_attr($uid.'-map-'.$t->slug).'">Map coming soon</div>';
              }
            ?>
          </div>
        </div>
      </div>
    <?php endforeach; ?>
  </section>

  <script>
    (function(){
      const root = document.getElementById('<?php echo esc_js($uid); ?>');
      if(!root) return;
      const tabs = root.querySelectorAll('.routes-tab');
      const panels = root.querySelectorAll('.routes-panel');

      // Tab switching
      tabs.forEach((tab, idx) => {
        tab.addEventListener('click', () => {
          tabs.forEach(t => { t.classList.remove('is-active'); t.setAttribute('aria-selected','false'); });
          panels.forEach(p => p.classList.remove('is-active'));
          tab.classList.add('is-active'); tab.setAttribute('aria-selected','true');
          panels[idx].classList.add('is-active');
        });
      });

      // Map swap per route
      panels.forEach(panel => {
        const list = panel.querySelector('.routes-list');
        if(!list) return;
        const mapId = list.getAttribute('data-map-target');
        const mapEl = panel.querySelector('#' + CSS.escape(mapId));
        const routes = list.querySelectorAll('.route-item');

        function setMap(url){
          if(!mapEl) return;
          if(mapEl.tagName === 'IMG'){ if(url) mapEl.setAttribute('src', url); }
          else if(url){
            const img = document.createElement('img');
            img.className='mapimg'; img.id=mapId; img.loading='lazy'; img.alt='Route map'; img.src=url;
            mapEl.replaceWith(img);
          }
        }

        let defaultSrc = (mapEl && mapEl.tagName==='IMG') ? mapEl.getAttribute('src') : null;

        routes.forEach(r => {
          const url = r.getAttribute('data-map-url');
          r.addEventListener('mouseenter',()=>{ if(url) setMap(url); });
          r.addEventListener('focus',()=>{ if(url) setMap(url); });
          r.addEventListener('mouseleave',()=>{ if(defaultSrc) setMap(defaultSrc); });
          r.addEventListener('blur',()=>{ if(defaultSrc) setMap(defaultSrc); });
          r.addEventListener('click',()=>{
            if(url){
              setMap(url);
              defaultSrc = url;
              routes.forEach(x=>x.classList.remove('is-selected'));
              r.classList.add('is-selected');
            }
          });
        });
      });
    })();
  </script>
  <?php
  return ob_get_clean();
});

/**
 * Global styling for Booking section + Forminator #1327
 * You can move this block to your theme stylesheet if preferred.
 */
add_action('wp_head', function () { ?>
  <style>
    :root{
      --brand:#062068;            /* main color */
      --brand-hover:#041a57;      /* slightly darker */
      --border:#E5E7EB;           /* input border */
      --text:#111827;             /* input text */
      --muted:#6B7280;            /* small note */
    }

    /* Page spacing like the reference */
    .booking-section{ padding: 30px 16px 50px; background:#fff; }

    /* The white rounded card */
    .booking-card{
      background:#fff; border-radius:12px; padding:18px;
      box-shadow:0 16px 40px rgba(16,24,40,.10);
      max-width:920px; margin:0 auto;
    }

    /* Note under button */
    .booking-note{ margin-top:10px; font-size:12px; color:var(--muted); text-align:center; }
    .booking-note a{ color:var(--brand); text-decoration:underline; }

    /* ---------- Forminator #1327 ---------- */
    #forminator-form-1327 .forminator-row{
      display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px;
    }
    @media (max-width:640px){
      #forminator-form-1327 .forminator-row{ grid-template-columns:1fr; }
    }

    /* Inputs / selects / textarea */
    #forminator-form-1327 .forminator-input,
    #forminator-form-1327 .forminator-select,
    #forminator-form-1327 .forminator-textarea{
      background:#fff; color:var(--text);
      height:44px; border-radius:8px; border:1px solid var(--border);
    }
    #forminator-form-1327 .forminator-textarea{ height:auto; min-height:110px; }
    #forminator-form-1327 .forminator-input:focus,
    #forminator-form-1327 .forminator-select:focus,
    #forminator-form-1327 .forminator-textarea:focus{
      outline:none; border-color:var(--brand);
      box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
    }
    #forminator-form-1327 ::placeholder{ color:#9CA3AF; }

    /* Select2 styling (Forminator dropdowns) */
    #forminator-form-1327 .select2-container--default .select2-selection--single{
      height:44px; border:1px solid var(--border); border-radius:8px; background:#fff;
    }
    #forminator-form-1327 .select2-selection__rendered{ line-height:42px; padding-left:12px; color:var(--text); }
    #forminator-form-1327 .select2-selection__arrow{ height:44px; right:8px; }

    /* Full-width button in brand blue */
    #forminator-form-1327 .forminator-button,
    #forminator-form-1327 .forminator-button-next,
    #forminator-form-1327 .forminator-button-submit{
      background:var(--brand); color:#fff; border-radius:8px; height:44px;
      width:100%; font-weight:700;
    }
    #forminator-form-1327 .forminator-button:hover,
    #forminator-form-1327 .forminator-button-next:hover,
    #forminator-form-1327 .forminator-button-submit:hover{ background:var(--brand-hover); }

    /* Optional: hide labels if using placeholders */
    #forminator-form-1327 .forminator-label{ display:none; }

    /* Optional: soften the card corners even more like the ref */
    #forminator-form-1327{ border-radius:12px; }
  </style>
<?php });/* End custom CSS */