/*
 Theme Name: Layers Child | Octahexa
 Theme URI: http://www.layerswp.com/
 Description: A custom child theme for Layers by Obox
 Author: Octahexa Media
 Author URI: http://www.oboxthemes.com/
 Template: layerswp
 Version: 1.0.3
 Text Domain: layerswp
 Tags: slider, site-builder, page-builder, responsive-layout, fixed-layout, fluid-layout, one-column, one-column, two-column, three-column, four-column, custom-colors, custom-header, custom-menu, editor-style, featured-images, translation-ready, full-width-template, theme-options
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 GitHub Theme URI: https://github.com/teamoctahexa/layers-child
 Primary Branch: main
 */

/*
 * Do not directly or manually make changes to this Theme, it is controlled by a GIT repository on GitHub.
 * IMPORTANT: Database entries related to this theme will remain after deletion. Use the "Cleanup Options" Theme Settings > Cleanup Options to remove them manually.
 */

/* ===========================================
 * Table of Contents:
 * ===========================================
 * 1. Additional CSS from customizer   
 * ===========================================
 */

/* ===========================================
 * 1. Additional CSS from customizer   
 * =========================================== */

/* Fix column width checkout page 
* This was overriden/caused by Formidable forms CSS
*/
.col-1, .col-2 {
    flex: 0 0 auto;
    width: 100% !important;
}
.story h3 {
    margin-top: 26px;
}
/* Hides the default Botpress Floating Action Button */
.bpFab {
  display: none;
}

/* Styles for your custom "Try Out our Chatbot" button */
#tryOurChatbotButton {
    /* Colors and Background - Now with a blue gradient! */
    background: linear-gradient(135deg, #0056b3 0%, #007bff 100%); /* A deeper blue to a brighter blue gradient */
    color: white; /* White text for good contrast on blue */

    /* Shape and Size */
    padding: 18px 35px; /* Slightly larger padding for a bolder look */
    border: none; /* Removes default border */
    border-radius: 12px; /* A bit more rounded for a softer, modern feel */

    /* Text Styling */
    font-family: 'Arial', sans-serif; /* Keep consistent, or choose a fun Google Font if you want to import one */
    font-size: 20px; /* Larger font size for more impact */
    font-weight: bold; /* Makes the text stand out */
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Subtle text shadow for depth */

    /* Positioning and Layering */
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;

    /* Interaction and Effects */
    cursor: pointer;
    display: inline-block;
    transition: all 0.3s ease-in-out; /* Smooth transitions for all animated properties */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* More pronounced shadow for a 'popping' effect */

    /* Initial Animation - Pulse Effect */
    animation: pulse 2s infinite; /* Applies the pulse animation */
}

/* Hover effect for the custom button */
#tryOurChatbotButton:hover {
    background: linear-gradient(135deg, #004080 0%, #0056b3 100%); /* Even deeper blue on hover */
    transform: translateY(-5px) scale(1.05); /* Lifts and slightly enlarges the button */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); /* Larger shadow on hover */
    animation: none; /* Stop pulsing on hover */
}

/* Active (click) effect for the custom button */
#tryOurChatbotButton:active {
    background: linear-gradient(135deg, #003366 0%, #004080 100%); /* Darkest blue when clicked */
    transform: translateY(-2px) scale(1.02); /* Pushes down and slightly shrinks */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Smaller shadow when active */
}

/* Keyframes for the pulse animation */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    }
    50% {
        transform: scale(1.03); /* Slightly grows */
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45); /* Shadow expands */
    }
    100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    }
}

#tryOurChatbotButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #0073aa;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  z-index: 9999;
  transition: background-color 0.3s ease;
}

#tryOurChatbotButton:hover {
  background-color: #005582;
}