/* Add custom css to implement chat-widget */
/* place file in /templates/yootheme_avgs/css */

:root {
  --chat-widget-width: 400px;
  --chat-widget-user-message-bg-color: #1c79a1;
  --chat-widget-primary-color: #1c79a1;
  --chat-widget-system-message-text-color: #3e3e3e;
  --chat-widget-primary-color-text: #3e3e3e;
  --chat-widget-system-message-bg-color: #eff8fc;
}

.chat-widget__launcher-icon,
.chat-widget__launcher-text,
#chat-widget__collapse-tab {
  color: white
}

/* Grundlayout */
html .tm-page {
  margin-right: 0;
  transition: margin-right 0.3s ease;
}

html.chat-widget--open .tm-page {
  margin-right: var(--chat-widget-width);
}

#chat-widget__container {
    width: var(--chat-widget-width);
    height: 100%;
    font-size: 0.9em;
}

@media (max-width: 440px) {
  /* Adjust profile pics grid on extreme small screens */

}

@media (min-width: 440px) {
  /* Adjust profile pics grid on very small screens */
  #coaches-grid .js-filter .uk-width-1-1 { width: 50%; }
}


@media (min-width: 640px) {
  /* Adjust coaches-grid on small screens */
  #coaches-grid .js-filter .uk-width-1-1 { width: 100%; }
/*  #coaches-grid .uk-width-1-2\@s { width: 100%; }*/
}

@media (max-width: 820px) {
  /* Hide chat widget on small screens */
  :root {
    --chat-widget-width: 0px;
  }
  #chat-widget__container,
  #chat-widget__launcher {display: none !important}

  /* Hide seal for small screens */
  .pe-pro-seal-ready { visibility: hidden !important;}

  /* adjust button "move to up" position */
  body #footer\#0 { bottom: 10px;}
}

/* Responsive adjustments when chat widget is open */
@media (min-width: 820px) {
  
  :root {--chat-widget-width: 300px; }
  /* Adjust off-canvas used for mobile menu width and font size */
  .uk-offcanvas { z-index: 10000 }
  .uk-offcanvas-bar { width: calc(var(--chat-widget-width) + 15 ) }
  .uk-offcanvas-bar .uk-nav-default,
  .uk-offcanvas-bar .uk-nav-sub { font-size: 0.9rem }

  /* Adjust grid widths when chat widget is open*/
  .chat-widget--open .uk-width-1-2\@s { width: calc(100% / 1 ) }
  .chat-widget--open main .tm-grid-expand .uk-width-1-2\@s>* { text-align: center !important; }
  .chat-widget--open .tm-grid-expand>.uk-width-1-3\@s { width: calc(100% / 1 ) }
  .chat-widget--open .tm-grid-expand .uk-width-1-3\@s>* { text-align: center !important; }

  /*coaches grid stays with 2 cols when chat widget is open */
  .chat-widget--open #coaches-grid .uk-width-1-2\@s { width: calc(100% / 2 ) }

  /* adjust button "move to up" position when chat widget is active*/
  .chat-widget--launcher-visible #footer\#0,
  .chat-widget--open #footer\#0 {
    position: fixed;
    bottom: 10px;
    right:auto;
    left: 65px;
    padding: 10px 12px 12px !important;
    background-color: #e65b10;
    border-radius: 50%;
  }

  /* Hide seal for small screens when chat widget is active */
  .chat-widget--launcher-visible .pe-pro-seal.pe-pro-seal-ready,
  .chat-widget--open  .pe-pro-seal.pe-pro-seal-ready { 
    visibility: hidden !important;
  }

  /* Re-Adjust settings of coaches-grid on small screens */
  #coaches-grid .uk-child-width-1-2\@s>:not([class*=uk-width]) { width: calc(100% / 3 ) }
  /* but not when chat widget is open */
  .chat-widget--open #coaches-grid .uk-child-width-1-2\@s>:not([class*=uk-width]) { width: calc(100% / 1 ) }

}

@media (min-width: 960px) {
    /* adjust chat widget width */
    :root { --chat-widget-width: 400px; }

    /* switch mobile header visibility when chat widget is open */
    .chat-widget--open .tm-header-mobile.uk-hidden\@m { display:block !important}
    .chat-widget--open .uk-offcanvas-bar { width: 440px !important }
    .chat-widget--open .uk-offcanvas-bar .uk-nav-default,
    .chat-widget--open .uk-offcanvas-bar .uk-nav-sub { font-size: 1rem !important; }
    .chat-widget--open .tm-header.uk-visible\@m { display:none !important}

    /* Adjust grid widths when chat widget is open*/
    .chat-widget--open .uk-width-1-2\@m { width: calc(100% / 1 ) }
    .chat-widget--open .uk-width-2-5\@m { width: 100% }
    .chat-widget--open .uk-width-3-5\@m { width: 100% }
    .chat-widget--open .uk-child-width-1-4\@m>* { width: 50% }
    .chat-widget--open .profile-pics-grid .uk-child-width-1-4\@m>* { width: calc(100% / 3) }

    .chat-widget--open .uk-flex-first\@m { order: 1; }
    
    /* Adjust grid from 3 to 2 or 1  cols when chat widget is open*/
    .chat-widget--open .uk-child-width-1-3\@m>* { width: calc(100% / 2) }
    .chat-widget--open #coaches-grid .uk-child-width-1-3\@m>*,
    .chat-widget--open .tm-grid-expand>.uk-width-1-3\@m { width: calc(100% / 1 ) } 
    .chat-widget--open .tm-grid-expand>.uk-width-1-3\@m .coaches-8-pics-grid .uk-child-width-1-2\@m>:not([class*=uk-width]) { width: calc(100% / 4 ) }
    .chat-widget--open .tm-grid-expand>.uk-width-1-3\@m .coaches-6-pics-grid .uk-child-width-1-2\@m>:not([class*=uk-width]) { width: calc(100% / 3 ) }
    .chat-widget--open main .tm-grid-expand .uk-width-1-3\@m>* { text-align: center !important; }  

    .chat-widget--open .uk-slider-container .uk-width-1-3\@m { width: calc(100% / 1 ) }
    
    .chat-widget--open #tm-main .uk-visible\@m { display: none !important; }
    .chat-widget--open #tm-main .uk-hidden\@m { display: flow-root !important; }

    /* Show seal when chat widget is deactivated */
    .pe-pro-seal-ready { visibility: visible;}

    /* Hide menu item with phone number */
    header.tm-header li.item-647 { display: none; }
    header.tm-header ul.uk-navbar-nav { gap: 15px; }
    header.tm-header li>a { padding: 0 15px; }

}

@media (min-width: 1200px) {
    /* Re-Adjust small grid from 1 to 2 cols*/    
    .chat-widget--open .uk-width-1-2\@s { width: calc(100% / 2 ) }
    .chat-widget--open #coaches-grid .uk-width-1-2\@s { width: calc(100% / 1 ) } /* keep filter full width in profile grid with filter */
    .chat-widget--open main .tm-grid-expand .uk-width-1-2\@s>* { text-align: left !important; }
    .chat-widget--open #coaches-grid .uk-child-width-1-3\@m>*,
    .chat-widget--open .tm-grid-expand>.uk-width-1-3\@s { width: calc(100% / 3 ) }
    .chat-widget--open main .tm-grid-expand .uk-width-1-3\@s>* { text-align: left !important; }
    
    /* Re-Adjust medium grid */
    .chat-widget--open .uk-width-1-2\@m { width: calc(100% / 2 ) }
    .chat-widget--open .uk-width-2-5\@m { width: 40% }
    .chat-widget--open .uk-width-3-5\@m { width: 60% }
  
    .chat-widget--open .uk-child-width-1-4\@m>* { width: 25% }
    .chat-widget--open .uk-slider-container .uk-width-1-3\@m { width: calc(100% / 3 ) }

    /* Adjust large grid from 4 to 3 cols when chat widget is open*/
    .chat-widget--open .uk-child-width-1-4\@l>* { width: calc(100% / 3) }

    /* Show menu item with phone number */
    header.tm-header li.item-647 { display: list-item; }

    /* Hide menu item with phone number when chat widget is open */
    .chat-widget--open header.tm-header li.item-647 { display: none; }

    /* Re-Adjust settings of coaches-grid on small screens */
    #coaches-grid .uk-child-width-1-2\@s>:not([class*=uk-width]) { width: calc( 100% / 4 ) }
    .chat-widget--open #coaches-grid .uk-child-width-1-2\@s>:not([class*=uk-width]) { width: calc(100% / 3 ) }

    .chat-widget--open .profile-pics-grid .uk-child-width-1-4\@m>* { width: calc(100% / 4) }

    .chat-widget--open .text-coaches-pics-grid .uk-flex-first\@l { order: 0; }
}

@media (min-width: 1400px) {
    /* switch to desktop header visibility when chat widget is open */
    .chat-widget--open .tm-header-mobile.uk-hidden\@m { display:none !important}
    .chat-widget--open .tm-header.uk-visible\@m { display:block !important}

    /* Re-Adjust medium grid */
    .chat-widget--open .tm-grid-expand>.uk-width-1-3\@m { width: calc(100% / 3 ) }
    .chat-widget--open .tm-grid-expand>.uk-width-1-3\@m .coaches-8-pics-grid .uk-child-width-1-2\@m>:not([class*=uk-width]) { width: calc(100% / 2 ) }
    .chat-widget--open .tm-grid-expand>.uk-width-1-3\@m .coaches-6-pics-grid .uk-child-width-1-2\@m>:not([class*=uk-width]) { width: calc(100% / 2 ) }
    .chat-widget--open .tm-grid-expand .uk-width-1-3\@m>* { text-align: left !important; } 
    .chat-widget--open #tm-main .uk-visible\@m { display: flow-root !important; }
    .chat-widget--open #tm-main .uk-hidden\@m { display: none !important; }

    /* Re-Adjust large grid from 3 to 4 cols */
    .chat-widget--open #coaches-grid .uk-child-width-1-3\@m>*,
    .chat-widget--open .uk-child-width-1-4\@l>* { width: calc(100% / 4) }

    /* Re-Adjust menu spacing */
    header.tm-header ul.uk-navbar-nav { gap: 30px; }
    header.tm-header li>a { padding: 0 20px; }

    /* Re-Adjust settings of coaches-grid on small screens */
    .chat-widget--open #coaches-grid .uk-child-width-1-2\@s>:not([class*=uk-width]) { width: calc(100% / 4 ) }

    .chat-widget--open .text-coaches-pics-grid .uk-flex-first\@l { order: -1; }
}

@media (min-width: 1600px) {
/* Hide menu item with phone number when chat widget is open */
    .chat-widget--open header.tm-header li.item-647 { display: list-item; }
    .chat-widget--open header.tm-header ul.uk-navbar-nav { gap: 20px; }
    .chat-widget--open header.tm-header li>a { padding: 0 15px; }
}

@media (min-width: 1800px) {
    /* adjust chat widget width */
    :root {
      --chat-widget-width: 500px;
    }

    /* Re-Adjust menu spacing */
    header.tm-header ul.uk-navbar-nav { gap: 30px; }
    header.tm-header li>a { padding: 0 20px; }
}