/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 4.5
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/* Position Submit Workout Button */
main.site-main #submit_workout {
    position: relative !important; /* Force relative positioning */
    margin: 20px auto !important; /* Add margin and center the button */
    display: block !important; /* Ensure it's treated as a block element */
    text-align: center !important; /* Center the button text */
    z-index: 10 !important; /* Ensure it appears above other elements */
}

main.site-main #submit_workout {
    margin-top: 30px; /* Adjust this value to fine-tune spacing */
    text-align: center; /* Center the button within the container */
}

/* Create New Workout Button In Toggled Sidebar */
#create-new-workout-btn {
  background-image: linear-gradient(to right, #4c97ff, #56eaff);
  background-color: #12174e !important;
  font-weight: bold;
  border: none;
  border-radius: 9999px;
  padding: 12px;
  width: 100%;
  text-align: center;
  cursor: pointer;
  transition: background-image 0.3s ease;
}

/* Align sidebar icons correctly */
#sidebar .cursor-pointer {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}

#sidebar .cursor-pointer img {
  display: inline-block !important;
  vertical-align: middle !important; 
}

#sidebar .cursor-pointer p {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 !important;
}

#sidebar button {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

#sidebar {
  position: fixed;
  width: 295px !important; /* Restored sidebar width */
  top: 0;
  left: -295px !important; /* Sidebar off-screen when inactive */
  height: 100vh !important; /* Ensures sidebar fills vertical space */
  overflow-y: auto;
  transition: left 0.3s ease;
  z-index: 1000;
}
  
#sidebar.active {
  left: 0 !important; /* Sidebar fully visible when active */
}

/* Avatar Image */ 
img[alt="AI Avatar"] {
  width: 94px !important; /* adjust size as needed */
  height: 94px !important; /* maintain same dimensions for proportional scaling */
  border-radius: 50%; /* optional, to make the avatar circular */
}

/* Initial sidebar setup for desktop */
#sidebar {
  left: 0;
  transition: left 0.3s ease;
}

/* Sidebar hidden state */
#sidebar:not(.active) {
  left: -250px;
}

/* Optional: Page content area (uncomment if needed) */
/*
.content-area {
  transition: margin-left 0.3s ease;
  margin-left: 250px;
}
*/

  /* Sidebar Styles */
  #sidebar {
      position: fixed;
      top: 0;
      left: -100%; /* Initially off-screen */
      width: 80%; 
      height: 100vh;
      background-color: #12174e;
      transition: left 0.3s ease-in-out;
      z-index: 20000;
  }

  #sidebar.active {
      left: 0; /* Slide in sidebar */
  }

  /* Sidebar toggle button (MENU) */
  #toggle-sidebar {
      position: fixed;
      top: 10px;
      left: 10px;
      z-index: 21000; /* Always on top */
  }

  /* Chatbot container base positioning (no z-index conflict) */
  .mwai-chatbot-container {
      z-index: 10000;
  }

  /* Content area unaffected */
  .content-area {
      margin-left: 0 !important;
  }

  /* Sidebar visible when active */
  #sidebar.active {
      left: 0; 
  }

  /* Toggle button stays accessible */
  #toggle-sidebar {
      position: fixed;
      top: 10px;
      left: 10px;
      z-index: 21000; /* Higher than sidebar and chatbot */
  }

  /* Chatbot container initially centered */
  .mwai-chatbot-container {
      transition: transform 0.3s ease;
      transform: translate(-50%, -50%);
      left: 50%;
      z-index: 9999;
  }

  /* Push chatbot over when sidebar is active */
  #sidebar.active ~ .mwai-chatbot-container {
      transform: translate(calc(-50% + 80%), -50%) !important; 
  }

  /* Maintain content area margin */
  .content-area {
      margin-left: 0 !important;
  }

/* Chatbot Container Centered */
.mwai-chatbot-container {
  width: 72%; /* Adjust width as needed */
  max-width: 800px;
  height: auto;
  position: fixed; /* Using fixed instead of absolute to ensure stability */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Chatbot Content Scrollable */
.mwai-content {
  width: 100%;
  height: calc(100% - 60px); /* Adjust as needed */
  max-height: 600px;
  overflow-y: auto;
  padding: 10px;
  box-sizing: border-box;
}

/* Hide unnecessary element on specific page */
body.page-id-207947 .flex-col.hide-for-medium.flex-left.flex-grow {
  display: none !important;
}

/* Chatbot Container Centering and Width */
.mwai-chatbot-container {
  width: 72% !important; 
  max-width: 800px !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Ensure Chatbot Content Scrollable */
.mwai-chatbot-container .mwai-content {
  max-height: 600px !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

/* Force correct chatbot container positioning */
.mwai-chatbot-container {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 9999 !important;
  width: 72% !important;
  max-width: 800px !important;
  max-height: 715px !important;
  box-sizing: border-box !important;
}

/* Move chatbot when sidebar is active */
#sidebar.active ~ .mwai-chatbot-container {
  transform: translate(calc(-50% + 150px), -50%) !important;
}

/* Mobile-specific adjustments */
@media only screen and (max-width: 768px) {
  .mwai-chatbot-container {
    width: 90% !important;
    max-width: 100% !important;
  }

  #sidebar.active ~ .mwai-chatbot-container {
    transform: translate(calc(-50% + 120px), -50%) !important;
  }
}

/* ==========================================================================
   Chatbot Page Background & Effects
   ========================================================================== */
   body.page-id-207947 {
    position: relative;
    overflow: hidden; /* ensure pseudo-elements don’t scroll */
  }
  
/* ==========================================================================
   Chatbot Page Background & Effects (brighter, dynamic gradient)
   ========================================================================== */
body.page-id-207947::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    #0a0f1c 0%,
    #0d1b2a 20%,
    #1e3a8a 60%,
    #2563eb 100%
  );
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

  
  /* Watermark tagline behind the chat window */
  body.page-id-207947 .mwai-chatbot-container::before {
    content: "LIFT LIKE AN ATHLETE";
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3rem;
    font-weight: 800;
    color: rgba(18, 23, 78, 0.1);
    pointer-events: none;
    white-space: nowrap;
  }

@media (max-width: 768px) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
/* Corrected and Simplified Mobile CSS */
    /* Move MENU button to left on mobile, avoiding overlap */
    #toggle-sidebar {
        left: 10px !important;
        right: auto !important;
    }

    /* Remove unnecessary Close tab from view */
    #close-sidebar {
        display: none !important;
    }
}

/* Ensure HTML and body fill full height, removing unintended spacing */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
}

pre code.lang-json { display: none !important; }

/* ==========================================================================
   Override inline wrapper background so the body gradient shows through
   ========================================================================== */
   body.page-id-207947 .relative.min-h-screen.w-full {
    background: none !important;
  }

/* ==========================================================================
   Force-remove any inline background on the wrapper
   ========================================================================== */
.relative.min-h-screen.w-full[style] {
  background: none !important;
}

/* ==========================================================================
   Clear default body background so the gradient pseudo-element is visible
   ========================================================================== */
body.page-id-207947 {
  background: none !important;
}

/* ==========================================================================
   Force-clear the wrapper’s inline background so the body gradient shows
   ========================================================================== */
   body.page-id-207947 > div.relative.min-h-screen.w-full[style] {
    background-color: transparent !important;
    background-image: none !important;
  }

.mwai-chatbot-container {
  position: relative;
  z-index: 1;           /* establish stacking context */
}

.mwai-chatbot-container::before {
  z-index: -1;          /* drops the watermark behind the panel */
}

/* Save Workout button in chat bubbles */
.save-workout-btn {
  background: linear-gradient(to right, #4c97ff, #56eaff);
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  margin-top: 0.75rem;
  transition: opacity 0.2s ease;
}
.save-workout-btn:hover {
  opacity: 0.85;
}
.save-workout-btn:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Endura – bench-press chatbot: force block layout */
#mwai-chatbot-chatbot-tgbmg1{
  display:block   !important;  /* beats the plugin’s !important */
  clear:both      !important;
  max-width:480px !important;
  margin:2rem auto;
}

/* Add extra space so preceding text can't sit under the chat */
.mwai-chatbot-container{
  margin-top:2rem !important;   /* push previous paragraph down */
  padding-top:0.5rem;           /* ensure margin collapse doesn’t undo it */
  z-index:1;                    /* stays above earlier text if any floats */
}

.mwai-chatbot-container + h2{   /* first heading after the chat block */
  margin-top:1.2em !important;   /* normal positive margin */
  clear:both   !important;       /* ensure it starts on a new line   */
}


/* ==========================================================================
   Scoped chatbot layout rules
   ========================================================================== */

/* Keep the centred, fixed chatbot ONLY on the main Endura chat page (ID 207947) */
body.page-id-207947 .mwai-chatbot-container {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Allow the Bench‑Press Analyzer chatbot on page ID 208123 to scroll normally */
body.page-id-172 .mwai-chatbot-container {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 48px auto 32px;
    max-width: 480px;
    width: 100%;
    clear: both !important;
}

/* Page ID 172 – style the chat box as a card */
body.page-id-172 .mwai-chatbot-container{
  background:#ffffff;
  border-radius:14px;
  box-shadow:0 6px 24px rgba(0,0,0,.12);
  padding:32px 24px;
  max-width:480px;
  width:100%;
  margin:48px auto 32px;
}
body.page-id-172 .mwai-content{
  max-height:460px;          /* keeps it compact */
  overflow-y:auto;
}

/* Chatbot Styling CSS For Free Tool Pages */
.bench-hero{
  text-align:center; margin:0 0 .5rem;
  font-size:2rem; font-weight:800;
}
.hero-sub{
  text-align:center; margin:0 0 1.5rem;
  font-size:1.05rem; color:#4b5563;
}

.cta-wrap{ text-align:center; margin-top:2rem; }
.cta-wrap .button{ padding:14px 28px; font-size:1.1rem; }
.cta-sub{ font-size:.9rem; color:#6b7280; margin:.4rem 0 0; }

.trust-row{
  display:flex; gap:28px; justify-content:center;
  margin:1.5rem 0 .75rem;
  filter:grayscale(1) opacity(.7);
}
.trust-row img{ max-height:32px; }

/* Custom avatar */
body.page-id-172 .mwai-header::before{
  content:""; display:inline-block;
  width:36px; height:36px; border-radius:50%;
  background:url('/wp-content/uploads/coach-avatar.png') center/cover;
  margin-right:8px; vertical-align:middle;
}

/* Hide scrollbars (WebKit) */
body.page-id-172 .mwai-content::-webkit-scrollbar{ width:0; }

/* Mobile padding */
@media (max-width:768px){
  body.page-id-172 .mwai-chatbot-container{
      padding:24px 18px;
  }
}

/* Bench-Press Analyzer page – pale blue canvas EVERYWHERE */
body.page-id-172,
body.page-id-172 #wrapper,
body.page-id-172 #main,
body.page-id-172 .content-area{
    background:#f4f9ff !important;   /* very light blue */
}

/* CSS for content cards on Bench-Press page */
body.page-id-172 .bench-card{
  background:#ffffff;
  border-radius:14px;
  box-shadow:0 6px 24px rgba(0,0,0,.12);
  padding:32px 24px;
  max-width:1024px;
  margin:48px auto;

  /* NEW: make all regular text inside the card black */
  color:#000;                 /* paragraphs, list items, etc. */
}

/* Ensure headings and links inside the card also default to dark text */
body.page-id-172 .bench-card h1,
body.page-id-172 .bench-card h2,
body.page-id-172 .bench-card h3,
body.page-id-172 .bench-card h4,
body.page-id-172 .bench-card h5,
body.page-id-172 .bench-card h6{
  color:#000;                 /* heading text */
}

body.page-id-172 .bench-card a{
  color:#0051ff;              /* link colour inside the card (optional) */
}

/* ——— Bench‑Press Analyzer – force inline layout ——— */
body.page-id-172 .mwai-chatbot-container{
  position: static !important;      /* kill the floating overlay  */
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 48px auto 32px !important;
  max-width: 480px !important;
  width: 100% !important;
  clear: both !important;
}