/**
Theme Name: astra-child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

p.your-goal {
    font-size: 30px !important;
    font-weight: 700;
    margin-top: 20px;
    text-align: center;
    color: #f8684c;
}

/* Benefit List (Checkmark Style) */
.benefit-list {
    list-style: none;
    padding: 0;
    
}

.quiz-overall-result li{
    position: relative;
    margin-bottom: 14px;
    line-height: 1.4;
}



.benefit-list li {
    position: relative;
    margin-bottom: 14px;
    line-height: 1.4;
}

/* Checkmark icon */
.benefit-list-wrap {
    background: #fff8f3;
    border: 1px solid #f2ded6;
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.04);
    margin: 28px 0;
}

.benefit-list li::before {
    content: "✔";
    color: #ff6f56;
    margin-right: 5px;
}

.offer-image-fade {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.offer-image-fade.visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes ctaPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.035); }
    100% { transform: scale(1); }
}

.quiz-cta-button.pulsing {
    animation: ctaPulse 0.8s ease-in-out;
}

/* Soft Glow Hover Effect for CTA Button */
.quiz-cta-button:hover,
a.quiz-cta-button:hover,
button.quiz-cta-button:hover,
input.quiz-cta-button[type="submit"]:hover {
    box-shadow:
        0 10px 18px rgba(255, 99, 71, 0.32),
        0 0 14px rgba(255, 120, 90, 0.45);
    transform: translateY(-2px);
}

#main.site-main {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    padding: 1.5rem;
	border-style: solid;
	border-width: 1px;
    border-color: #F1F1F1;
}

.quiz-cta-button {
	display:inline-block; 
	background:#F98078; 
	color:#fff; 
	padding:0.8em 1.2em; 
	text-decoration:none; 
	border-radius:5px; 
	font-weight:bold;
	
}

/* Hover State */
.quiz-cta-button:hover,
a.quiz-cta-button:hover,
button.quiz-cta-button:hover {
    background: linear-gradient(180deg, #ff907a 0%, #ff7157 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 16px rgba(255, 99, 71, 0.32);
    color: #fff !important;
}

/* Active (Tap) State */
.btn-primary:active,
a.btn-primary:active,
button.btn-primary:active {
    transform: translateY(0px);
    box-shadow: 0 3px 6px rgba(255, 99, 71, 0.18);
}

/* Mobile optimised */
@media (max-width: 480px) {
    .btn-primary,
    a.btn-primary,
    button.btn-primary {
        padding: 15px 22px;
        font-size: 1rem;
        width: 100%;
        border-radius: 50px;
    }
}

/* ===============================
   QUIZ RESULT WRAPPER
   =============================== */
.quiz-overall-result {
    max-width: 760px;
    margin: 0 auto;
    padding: 20px 0;
    line-height: 1.65;
    color: #222;
    font-size: 18px;
}

.quiz-overall-result p {
    margin-bottom: 1.2em;
}

.quiz-overall-result h3 {
    margin-top: 1.8em;
    margin-bottom: 0.6em;
    font-size: 24px;
    font-weight: 700;
    color: #111;
}

/* ===============================
   OFFER BOX
   =============================== */
.quiz-result {
    background: #fff8f3;
    border: 1px solid #f2ded6;
    border-radius: 10px;
    padding: 25px;
    margin-top: 30px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
	border-left: 6px solid #f2ded6;
    padding-left: 20px;
}

.quiz-result:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.10);
}

.quiz-result h2 {
    color: #1a2a48;
}

.quiz-result h3 {
    font-size: 22px;
    margin-bottom: 10px;
    color: #1a2a48;
}

.quiz-result p {
    line-height: 1.6;
}

/* ===============================
   OFFER BULLETS
   =============================== */
.quiz-offer-bullets {
    list-style: none;
    margin: 15px 0 20px;
    padding: 0;
}

.quiz-offer-bullets li {
    background: url('data:image/svg+xml;utf8,<svg fill="%23f8684c" height="12" width="12" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="12"/></svg>') no-repeat left center;
    background-size: 8px;
    padding-left: 16px;
    margin-bottom: 8px;
    font-size: 17px;
}

/* ===============================
   URGENCY TEXT
   =============================== */
p.quiz-offer-urgency {
    font-size: 18px;
	border: 2px solid #f8684c;
    color: #f8684c;
    margin-top: 10px;
    background: #ffe9e4;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-block;
}

/* ===============================
   CTA BUTTON
   =============================== */
a.quiz-cta-button {
    display: inline-block;
    background: linear-gradient(180deg, #ff7e66 0%, #ff6347 100%);
    color: #fff !important;
    padding: 14px 28px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 20px;
    margin: 18px 0;
    transition: background 0.2s ease, transform 0.15s ease;
    text-align: center;
}

a.quiz-cta-button:hover {
    background: linear-gradient(180deg, #ff907a 0%, #ff7157 100%);
    transform: translateY(-2px);
}

/* ===============================
   COUNTDOWN TIMER
   =============================== */
p.countdown-timer {
    font-size: 30px !important;
    font-weight: 700;
    margin-top: 20px;
    text-align: center;
    color: #f8684c;
}

/* Highlight just the countdown numbers */
#burnout_battery_countdown,
#foggy_brain_countdown,
#inflamed_engine_countdown,
#slow_metabolism_countdown {
    color: #111;
    font-weight: 900;
    padding: 3px 6px;
    background: #ffe9e4;
    border-radius: 4px;
}

.countdown-timer span {
    animation: pulseTimer 1.8s infinite ease-in-out;
}

@keyframes pulseTimer {
    0% { opacity: 1; }
    60% { opacity: 0.55; }
    100% { opacity: 1; }
}

.quiz-result .offer-image {
   
    max-width: 35%;            /* safe for mobile */
    float: right;              /* push image to the right side */
    margin-left: 20px;         /* space so text doesn't touch */
    border-radius: 16px;       /* more premium look */
}

/* Micro Badge Under CTA */
.cta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #1a2a48; /* Navy to match your funnel headings */
    opacity: 0.9;
}

/* Icon styling */
.cta-badge-icon {
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
}

/* Slightly soften the text so it doesn’t compete with the CTA */
.cta-badge-text {
    line-height: 1.3;
}

/* Sticky mobile CTA bar */
.sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 -6px 18px rgba(0,0,0,0.08);
    z-index: 9999;
    padding: 10px 14px;
    box-sizing: border-box;
}

/* Inner layout */
.sticky-cta-inner {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Text */
.sticky-cta-text {
    font-size: 14px;
    line-height: 1.4;
    color: #1a2a48;
    flex: 1;
}

/* Button – reuse btn-primary but tighten for bar */
.sticky-cta .sticky-cta-button {
    white-space: nowrap;
    padding: 10px 16px;
    font-size: 0.95rem;
}

/* ===============================
   MOBILE OPTIMISATIONS
   =============================== */
@media (max-width: 768px) {

	.sticky-cta {
        display: none;
    }
	
    .quiz-overall-result {
        padding: 10px 16px;
        font-size: 16px;
    }
	
	.cta-badge {
        margin-top: 12px;
        font-size: 13.5px;
    }
	
	.quiz-result .offer-image {
        width: 140px;          /* slightly smaller on mobile */
        float: none;           /* drop float to avoid issues */
        display: block;
        margin: 0 auto 16px;   /* center on mobile */
    }

    .quiz-overall-result h2.quiz-overall-heading,
    .quiz-overall-result h2 {
        font-size: 24px;
        line-height: 1.3;
        text-align: left;
    }

    .quiz-overall-result h3 {
        font-size: 20px;
        margin-top: 1.3em;
    }

    .quiz-result {
        padding: 18px 16px;
		border: 2px solid #f0eecb;
		background: #faf9eb;
        margin-top: 24px;
		border-radius: 8px;
        box-shadow: 0 4px 14px rgba(0,0,0,0.07);
    }

    .quiz-result h3 {
        font-size: 20px;
    }

    .quiz-offer-bullets li {
        font-size: 15px;
        margin-bottom: 6px;
    }

    a.quiz-cta-button {
        display: block;
        width: 100%;
        padding: 14px 18px;
        font-size: 22px;
        margin-top: 16px;
    }

    p.quiz-offer-urgency {
        font-size: 16px;
		border: 2px solid #d93737;
        display: block;
        text-align: center;
		border-radius: 8px;
    }

    p.countdown-timer {
        font-size: 18px !important;
        margin-top: 16px;
    }
}

/* Small phones */
@media (max-width: 400px) {
    .sticky-cta-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .sticky-cta-text {
        text-align: center;
    }

    .sticky-cta .sticky-cta-button {
        width: 100%;
        text-align: center;
    }
}



/* =========================================
   Energy Quiz – Gravity Forms Styling
   Target form wrapper with CSS class: energy-quiz-form
   ========================================= */

.gform_wrapper.energy-quiz-form {
    max-width: 640px;
    margin: 0 auto;
    padding: 20px 18px 28px;
    background: #fff8f3;
    border-radius: 16px;
    border: 1px solid #f2ded6;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

/* Form title & description (if used) */
.gform_wrapper.energy-quiz-form .gform_heading {
    margin-bottom: 18px;
}

.gform_wrapper.energy-quiz-form .gform_title {
    font-size: 22px;
    font-weight: 700;
    color: #1a2a48;
    margin-bottom: 6px;
}

.gform_wrapper.energy-quiz-form .gform_description {
    font-size: 14px;
    color: #5a6478;
    line-height: 1.5;
}

/* Field spacing */
.gform_wrapper.energy-quiz-form .gform_body .gfield {
    margin-bottom: 18px;
}

/* Labels */
.gform_wrapper.energy-quiz-form .gfield_label {
    font-size: 15px;
    font-weight: 600;
    color: #1a2a48;
    margin-bottom: 6px;
}

/* Descriptions / sublabels */
.gform_wrapper.energy-quiz-form .gfield_description,
.gform_wrapper.energy-quiz-form .ginput_complex label,
.gform_wrapper.energy-quiz-form .gfield_description.gform_fileupload_rules {
    font-size: 13px;
    color: #6c758d;
    margin-top: 2px;
}

/* Inputs, selects, textareas */
.gform_wrapper.energy-quiz-form .ginput_container input[type="text"],
.gform_wrapper.energy-quiz-form .ginput_container input[type="email"],
.gform_wrapper.energy-quiz-form .ginput_container input[type="tel"],
.gform_wrapper.energy-quiz-form .ginput_container input[type="number"],
.gform_wrapper.energy-quiz-form .ginput_container select,
.gform_wrapper.energy-quiz-form .ginput_container textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.4;
    border-radius: 10px;
    border: 1px solid #e0d5cc;
    background-color: #ffffff;
    color: #1a2a48;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    box-sizing: border-box;
}

.gform_wrapper.energy-quiz-form .ginput_container input::placeholder,
.gform_wrapper.energy-quiz-form .ginput_container textarea::placeholder {
    color: #a1a6b4;
}

/* Focus states */
.gform_wrapper.energy-quiz-form .ginput_container input:focus,
.gform_wrapper.energy-quiz-form .ginput_container select:focus,
.gform_wrapper.energy-quiz-form .ginput_container textarea:focus {
    outline: none;
    border-color: #ff6f56;
    box-shadow: 0 0 0 2px rgba(255, 111, 86, 0.18);
    background-color: #fffdf9;
}

/* Radio and checkbox styling */
.gform_wrapper.energy-quiz-form .gfield_radio li,
.gform_wrapper.energy-quiz-form .gfield_checkbox li {
    margin-bottom: 8px;
}

.gform_wrapper.energy-quiz-form .gfield_radio input[type="radio"],
.gform_wrapper.energy-quiz-form .gfield_checkbox input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
}

/* Make the labels clickable and comfy for thumbs */
.gform_wrapper.energy-quiz-form .gfield_radio label,
.gform_wrapper.energy-quiz-form .gfield_checkbox label {
    font-size: 15px;
    color: #1a2a48;
    cursor: pointer;
}

/* Page progress (steps) */
.gform_wrapper.energy-quiz-form .gf_page_steps {
    margin-bottom: 20px;
}

.gform_wrapper.energy-quiz-form .gf_step {
    font-size: 13px;
    color: #a1a6b4;
}

.gform_wrapper.energy-quiz-form .gf_step_active {
    color: #ff6f56;
    font-weight: 600;
}

/* Next / Previous / Submit buttons */
.gform_wrapper.energy-quiz-form .gform_page_footer,
.gform_wrapper.energy-quiz-form .gform_footer {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

/* Base button style */
.gform_wrapper.energy-quiz-form .gform_button,
.gform_wrapper.energy-quiz-form .gform_next_button,
.gform_wrapper.energy-quiz-form .gform_previous_button {
    border: none;
    border-radius: 999px;
    padding: 11px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.2;
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease;
}

/* Primary (Next/Submit) */
.gform_wrapper.energy-quiz-form .gform_button,
.gform_wrapper.energy-quiz-form .gform_next_button {
    background: linear-gradient(180deg, #ff7e66 0%, #ff6347 100%);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(255, 99, 71, 0.28);
}

.gform_wrapper.energy-quiz-form .gform_button:hover,
.gform_wrapper.energy-quiz-form .gform_next_button:hover {
    background: linear-gradient(180deg, #ff907a 0%, #ff7157 100%);
    box-shadow:
        0 10px 22px rgba(255, 99, 71, 0.32),
        0 0 18px rgba(255, 120, 90, 0.46);
    transform: translateY(-1px);
}

/* Secondary (Previous) */
.gform_wrapper.energy-quiz-form .gform_previous_button {
    background: #f3e6dd;
    color: #34405a;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.gform_wrapper.energy-quiz-form .gform_previous_button:hover {
    background: #e8d7cd;
}

/* Button focus */
.gform_wrapper.energy-quiz-form .gform_button:focus-visible,
.gform_wrapper.energy-quiz-form .gform_next_button:focus-visible,
.gform_wrapper.energy-quiz-form .gform_previous_button:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(255, 111, 86, 0.35),
        0 0 10px rgba(255, 111, 86, 0.4);
}

/* Validation summary */
.gform_wrapper.energy-quiz-form .gform_validation_errors {
    background: #fff3ef;
    border: 1px solid #ffccb9;
    border-radius: 12px;
    padding: 12px 14px;
    color: #7b2f1a;
    margin-bottom: 18px;
}

.gform_wrapper.energy-quiz-form .gform_validation_errors h2 {
    font-size: 15px;
    font-weight: 700;
}

/* Field-level errors */
.gform_wrapper.energy-quiz-form .gfield_error {
    background: none;
    border: none;
    padding: 0;
}

.gform_wrapper.energy-quiz-form .gfield_error .ginput_container input,
.gform_wrapper.energy-quiz-form .gfield_error .ginput_container select,
.gform_wrapper.energy-quiz-form .gfield_error .ginput_container textarea {
    border-color: #ff8b7a;
    box-shadow: 0 0 0 1px rgba(255, 139, 122, 0.55);
}

.gform_wrapper.energy-quiz-form .gfield_error .gfield_description.validation_message {
    color: #b33b24;
    font-size: 12px;
    margin-top: 4px;
}

/* Quiz choices – extra breathing room */
.gform_wrapper.energy-quiz-form .gfield_radio li,
.gform_wrapper.energy-quiz-form .gfield_checkbox li {
    padding: 8px 10px;
    border-radius: 10px;
    transition: background-color 0.16s ease, box-shadow 0.16s ease;
}

.gform_wrapper.energy-quiz-form .gfield_radio li:hover,
.gform_wrapper.energy-quiz-form .gfield_checkbox li:hover {
    background-color: #fff2ea;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

/* Make fields full-width on mobile and tighten spacing */
@media (max-width: 768px) {
    .gform_wrapper.energy-quiz-form {
        padding: 18px 14px 24px;
        border-radius: 14px;
    }

    .gform_wrapper.energy-quiz-form .gfield_label {
        font-size: 14px;
    }

    .gform_wrapper.energy-quiz-form .gfield_description {
        font-size: 12px;
    }

    .gform_wrapper.energy-quiz-form .ginput_container input[type="text"],
    .gform_wrapper.energy-quiz-form .ginput_container input[type="email"],
    .gform_wrapper.energy-quiz-form .ginput_container input[type="tel"],
    .gform_wrapper.energy-quiz-form .ginput_container select,
    .gform_wrapper.energy-quiz-form .ginput_container textarea {
        font-size: 14px;
        padding: 9px 11px;
    }

    .gform_wrapper.energy-quiz-form .gform_page_footer,
    .gform_wrapper.energy-quiz-form .gform_footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .gform_wrapper.energy-quiz-form .gform_button,
    .gform_wrapper.energy-quiz-form .gform_next_button,
    .gform_wrapper.energy-quiz-form .gform_previous_button {
        width: 100%;
        text-align: center;
    }
}