/**
Theme Name: Climate Action Now
Author: Doyal Digital Dynamics
Author URI: https://doyaldigital.com/about
Description: The Climate Action Now theme is a custom WordPress theme developed by Doyal Digital Dynamics, based in San Antonio, Texas. Designed to inspire and engage, this modern theme focuses on addressing climate change with a positive and hopeful outlook. Built specifically for the Climate Action Now initiative, it seamlessly integrates features to promote the CAN mobile app, facilitating meaningful actions such as contacting elected officials, supporting environmental policies, and participating in community-driven efforts. With a clean and contemporary design, this theme embodies a commitment to citizen advocacy, empowering users to contribute effectively to climate solutions.
Version: 1.0.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: climate-action-now
Template: hello-elementor
*/

/* Progress Bar Container */
.progress-container {
    width: 100%;
    margin: 0;
    position: relative;
}

/* Progress Bar Track */
.progress-bar {
    width: 100%;
    height: 20px;
    background-color: var(--e-global-color-c676c8c);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

/* Progress Bar Fill Animation */
.progress-fill {
    height: 100%;
    background-color: var(--e-global-color-1dfc8fe);
    width: 0%; /* Initial state */
    transition: width 1.5s ease-in-out; /* Smooth animation for the bar */
    position: relative; /* Ensure proper positioning of the icon */
}

/* Progress Icon */
.progress-icon {
    position: absolute;
    top: 50%; /* Align vertically in the bar */
    left: 0%; /* Starts at 0 */
    transform: translate(-50%, -50%); /* Center the icon */
    transition: left 1.5s ease-in-out; /* Smooth animation for the icon */
    font-size: 24px; /* Adjust size as needed */
    z-index: 2; /* Ensure it appears above the progress bar */
}

/* Utility for screen readers */
.sr-only, .jet-form-builder-message--success {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

.sr-only-focusable:active, .sr-only-focusable:focus, .jet-form-builder-message--success:active, .jet-form-builder-message--success:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Toast notification */
.copy-toast {
    position: fixed; /* Fixed to the viewport */
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 6px 14px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}

.copy-toast.show {
    opacity: 1;
    visibility: visible;
}

html {
    scroll-padding-top: 15%; /* Adjust this to the height of your fixed header */
}

.signed {
    background-color: #4caf50 !important;
    color: #fff;
    pointer-events: none !important;
    cursor: not-allowed !important;
    transition: none !important;
  }
  button:disabled {
    opacity: 1 !important;  /* or any fade effect */
    pointer-events: none !important;
  }

.sign-btn {
    background-color: #4caf50;
    color: #fff;
    cursor: default;
    transition: none !important;
  }

 /* .jet-form-builder__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}
*/

.already-signed-message {
    margin-top: 10px;
    padding: 8px;
    background: #cce3cd;
    color: #2e7d32;
    border: 1px solid #cce3cd;
    font-weight: bold;
    border-radius: 4px;
    font-size: .9em;
    line-height: 1em;
  }