/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/
 #events h3   {
	/* add your css rule here */
}


 #events p.duration, #events div.duration   {
	/* add your css rule here */
}


 #events p.description, #events div.description   {
	/* add your css rule here */
}


 #events .selectedEvent   {
	/* add your css rule here */
}


 #events input.reserve_time_btn   {
	/* add your css rule here */
}


 #events input.select_another_btn   {
	/* add your css rule here */
}


 #eventForm #start_date-block-container h3, #eventForm #timeline-container h3   {
	/* add your css rule here */
}


 #eventForm #save_button   {
	/* add your css rule here */
}


 div.ui-widget-content   {
	/* add your css rule here */
}


 div.ui-widget-header   {
	/* add your css rule here */
}


 #timeline-container table.timeline   {
	/* add your css rule here */
}


 .timeline td.not_worked_time   {
	/* add your css rule here */
}


 .timeline td.free_time   {
	/* add your css rule here */
}


 .timeline td.selected_time   {
	/* add your css rule here */
}


 .timeline td.reserved_time   {
	/* add your css rule here */
}


 div#loading   {
	/* add your css rule here */
}
/* ===== Membership comparison table styles =====
   Paste into Custom CSS editor. Change --accent-color as needed. */

:root{
  --accent-color: #0B3052;   /* change this to your preferred accent color */
  --accent-contrast: #ffffff;
  --tick-color: #27ae60;
}

#sb_content .membership-comparison-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 18px 0 !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  background: transparent !important;
}

/* table cells */
#sb_content .membership-comparison-table th,
#sb_content .membership-comparison-table td {
  border: 1px solid #e6e9ee !important;
  padding: 12px 14px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* header style */
#sb_content .membership-comparison-table thead th {
  background: #f7f9fb !important;
  color: #222 !important;
  font-weight: 700 !important;
}

/* first column (features) */
#sb_content .membership-comparison-table td.feature {
  text-align: left !important;
  font-weight: 600 !important;
  width: 40% !important;
  background: #ffffff !important;
  color: #333 !important;
}

/* plan header blocks */
#sb_content .membership-comparison-table .plan-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--accent-color) !important;
  margin-bottom: 6px !important;
}
#sb_content .membership-comparison-table .plan-price {
  font-size: 14px !important;
  color: #444 !important;
  margin-bottom: 8px !important;
}
#sb_content .membership-comparison-table .plan-buy {
  display: inline-block !important;
  padding: 8px 12px !important;
  background: var(--accent-color) !important;
  color: var(--accent-contrast) !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

/* tick mark */
#sb_content .membership-comparison-table .tick {
  font-size: 18px !important;
  color: var(--tick-color) !important;
  font-weight: 700 !important;
}

/* zebra rows for readability */
#sb_content .membership-comparison-table tbody tr:nth-child(odd) td {
  background: #ffffff !important;
}
#sb_content .membership-comparison-table tbody tr:nth-child(even) td {
  background: #fafbfc !important;
}

/* Responsive: stack table on small screens */
@media (max-width: 860px) {
  #sb_content .membership-comparison-table,
  #sb_content .membership-comparison-table thead,
  #sb_content .membership-comparison-table tbody,
  #sb_content .membership-comparison-table tr,
  #sb_content .membership-comparison-table th,
  #sb_content .membership-comparison-table td {
    display: block !important;
    width: 100% !important;
  }
  #sb_content .membership-comparison-table thead {
    display: none !important;
  }
  #sb_content .membership-comparison-table td.feature {
    background: transparent !important;
    border-top: 1px solid #eee !important;
    padding-top: 14px !important;
  }
  #sb_content .membership-comparison-table td {
    text-align: left !important;
    padding: 10px 8px !important;
  }
  #sb_content .membership-comparison-table .plan-buy {
    margin-top: 8px !important;
  }
}

/* ensure SVG icons (if still present) follow accent color */
#sb_content .membership-item svg path,
#sb_content .sb_membership-item svg path {
  fill: var(--accent-color) !important;
}

/* Membership → comparison-table builder
   Paste this into the Custom JS area (Custom CSS/JS) */
(function(){
  function normalize(s){
    return (s||'').toString().replace(/\s+/g,' ').replace(/[^\w\s]/g,'').toLowerCase().trim();
  }

  function buildMembershipTable(){
    const container = document.querySelector('#sb_membership_list_container') 
                   || document.querySelector('#sb_membership_list') 
                   || document.querySelector('#sb_membership_list_container > div')
                   || document.querySelector('#sb_content #sb_membership_list_container');
    if(!container) return;
    const planEls = Array.from(container.querySelectorAll('.membership-item, .sb_membership-item'));
    if(!planEls.length) return;
    // avoid rebuilding
    if(document.querySelector('.membership-comparison-table')) return;

    const plans = planEls.map(el=>{
      const title = (el.querySelector('.cap.short, .cap.full, .cap')?.innerText || '').trim();
      const txtEl = el.querySelector('.txt.short, .txt.full, .excerpt-info');
      let features = [];
      if(txtEl){
        const lis = txtEl.querySelectorAll('li');
        if(lis.length){
          lis.forEach(li=>{
            const t = li.innerText.replace(/\s+/g,' ').trim();
            if(t) features.push(t);
          });
        } else {
          const ps = txtEl.querySelectorAll('p');
          ps.forEach(p=>{
            const t = p.innerText.replace(/\s+/g,' ').trim();
            if(t) features.push(t);
          });
          if(!features.length){
            const t = txtEl.innerText.replace(/\s+/g,' ').trim();
            if(t) features.push(t);
          }
        }
      }
      const priceEl = el.querySelector('a.price-formatter, .btn.price-formatter, a.btn.price-formatter');
      const price = priceEl ? priceEl.innerText.trim() : '';
      const buyHref = priceEl ? priceEl.getAttribute('href') : '';
      return {el, title, features, price, buyHref};
    });

    // Build ordered unique feature list (preserve first-seen order)
    const order = [];
    const seen = new Set();
    plans.forEach(p=>{
      p.features.forEach(f=>{
        const n = normalize(f);
        if(!seen.has(n) && n){
          seen.add(n);
          order.push({norm:n, label:f});
        }
      });
      p.featuresNormalized = new Set(p.features.map(f=>normalize(f)));
    });

    // Create table
    const table = document.createElement('table');
    table.className = 'membership-comparison-table';

    // Header
    const thead = document.createElement('thead');
    const headRow = document.createElement('tr');
    const thFeature = document.createElement('th');
    thFeature.innerText = 'Features';
    headRow.appendChild(thFeature);

    plans.forEach(p=>{
      const th = document.createElement('th');
      th.className = 'plan-header';
      const tdiv = document.createElement('div'); tdiv.className='plan-title'; tdiv.innerText = p.title || '';
      const pdiv = document.createElement('div'); pdiv.className='plan-price'; pdiv.innerText = p.price || '';
      th.appendChild(tdiv); th.appendChild(pdiv);
      if(p.buyHref){
        const a = document.createElement('a'); a.className='plan-buy'; a.href = p.buyHref; a.innerText = 'Start';
        // keep same click behavior as original link (prevent default + trigger original click) for anchors that are JS routed
        a.addEventListener('click', function(e){
          e.preventDefault();
          const orig = p.el.querySelector('a.price-formatter, .btn.price-formatter, a.btn.price-formatter');
          if(orig){
            orig.click();
          } else {
            window.location.href = p.buyHref;
          }
        });
        th.appendChild(a);
      }
      headRow.appendChild(th);
    });
    thead.appendChild(headRow);
    table.appendChild(thead);

    // Body
    const tbody = document.createElement('tbody');
    order.forEach(item=>{
      const tr = document.createElement('tr');
      const tdFeat = document.createElement('td'); tdFeat.className='feature'; tdFeat.innerText = item.label;
      tr.appendChild(tdFeat);
      plans.forEach(p=>{
        const td = document.createElement('td');
        const has = p.featuresNormalized.has(item.norm);
        td.innerHTML = has ? '<span class="tick" aria-hidden="true">✓</span>' : '';
        tr.appendChild(td);
      });
      tbody.appendChild(tr);
    });

    table.appendChild(tbody);

    // Replace membership list with table (preserve container)
    container.innerHTML = '';
    container.appendChild(table);
  }

  function init(){
    buildMembershipTable();
    // observe for dynamic loads
    const parent = document.querySelector('#sb_membership_list_container') || document.querySelector('#sb_membership_list') || document.querySelector('#sb_content');
    if(parent){
      const mo = new MutationObserver(()=> {
        if(!document.querySelector('.membership-comparison-table')){
          buildMembershipTable();
        }
      });
      mo.observe(parent, { childList: true, subtree: true });
    }
    // also run on hash change (if links change content after hash navigation)
    window.addEventListener('hashchange', buildMembershipTable);
  }

  if(document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
  else init();
})();