/* Base Layout Fixes */
#questionnaire-app { font-family: 'Poppins', sans-serif !important; display: flex; flex-direction: column; height: 100%; width: 100%; position: relative; color: var(--bs-slate-800); }
.max-w-md-custom { max-width: 48rem; margin-left: auto; margin-right: auto; width: 100%; } 
.max-w-sm-custom { max-width: 32rem; margin-left: auto; margin-right: auto; width: 100%; } /* Widened for a bigger questionnaire */
.results-scroll-area { display: flex; flex-direction: column; flex-grow: 1; height: 100%; overflow-y: auto; padding-bottom: 2rem; scroll-behavior: smooth;}
.results-scroll-area::-webkit-scrollbar { width: 6px; }
.results-scroll-area::-webkit-scrollbar-thumb { background-color: var(--bs-slate-300); border-radius: 10px; }

/* Typography & General Cards */
.glass-card { 
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6); 
    
    /* NEW: Ultra-soft, highly diffused shadow */
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.04), 0 0 15px rgba(0, 0, 0, 0.02); 
    
    border-radius: 2rem; 
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.kicker-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 50rem; background: var(--bs-amber-100); color: var(--bs-amber-900); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

/* Premium Buttons */
.btn-gradient-primary { 
    width: 100%; display: flex; align-items: center; justify-content: center; 
    background: linear-gradient(to right, var(--bs-amber-500), #f97316); color: #ffffff; 
    border-radius: 2rem; padding: 1.25rem 0; font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 1.125rem; 
    border: none; box-shadow: 0 10px 15px -3px rgba(245,158,11,0.3); transition: all 0.2s; text-decoration: none; cursor: pointer;
}
.btn-gradient-primary:active { transform: scale(0.98); color: #fff;}
.btn-gradient-primary:hover { color: #fff; box-shadow: 0 15px 25px -5px rgba(245,158,11,0.4); }

.btn-gradient-success { 
    width: 100%; display: flex; align-items: center; justify-content: center; 
    background: linear-gradient(to right, var(--bs-emerald-500), var(--bs-emerald-700)); color: #ffffff; 
    border-radius: 1rem; padding: 1rem 0; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1rem; 
    border: none; box-shadow: 0 10px 15px -3px rgba(16,185,129,0.3); transition: all 0.2s; cursor: pointer;
}
.btn-gradient-success:active { transform: scale(0.98); }
.btn-gradient-success:hover { box-shadow: 0 15px 25px -5px rgba(16,185,129,0.4); transform: translateY(-2px); }

/* Avatar Groups & Indicators */
.avatar-group { display: flex; margin-bottom: 0.375rem; justify-content: center; }
.avatar-group > div { width: 1.25rem; height: 1.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,0.05); margin-left: -0.375rem; }
.avatar-group > div:first-child { margin-left: 0; z-index: 30; background: var(--bs-slate-100); color: var(--bs-slate-400); }
.avatar-group > div:nth-child(2) { z-index: 20; background: var(--bs-slate-200); color: var(--bs-slate-500); }
.avatar-group > div:nth-child(3) { z-index: 10; background: var(--bs-slate-300); color: var(--bs-slate-600); }
.avatar-group > div:last-child { z-index: 0; background: var(--bs-amber-500); color: #ffffff; font-size: 7px; font-weight: 900; }
.trust-text { font-size: 9px; font-weight: 900; color: var(--bs-slate-500); letter-spacing: 0.1em; text-transform: uppercase; margin: 0; }

.live-indicator { position: relative; display: flex; width: 0.625rem; height: 0.625rem; }
.live-indicator .ping { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: var(--bs-emerald-400); opacity: 0.75; animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.live-indicator .dot { position: relative; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--bs-emerald-500); display: inline-flex; }

/* Questionnaire Cards */
.progress-header { position: sticky; top: 0; z-index: 20; padding: 2rem 0 1rem; background: transparent; }
.progress-track { height: 0.375rem; width: 100%; background: rgba(226, 232, 240, 0.6); border-radius: 50rem; overflow: hidden; }
.progress-bar-fill { height: 100%; background: linear-gradient(to right, var(--bs-amber-400), #f97316); border-radius: 50rem; transition: width 0.5s ease-out; }

.option-card { cursor: pointer; display: flex; align-items: center; padding: 1rem; border-radius: 1rem; border: 2px solid var(--bs-slate-100); background: #ffffff; transition: all 0.2s; margin-bottom: 0.75rem; }
.option-card:hover { border-color: var(--bs-slate-300); }
.option-card.selected { background: var(--bs-amber-50); border-color: var(--bs-amber-400); box-shadow: 0 4px 12px rgba(245,158,11,0.1); }
.opt-icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 1rem; background: var(--bs-slate-100); color: var(--bs-slate-400); transition: all 0.2s;}
.option-card.selected .opt-icon { background: var(--bs-amber-500); color: #ffffff; }
.opt-text { flex: 1; font-size: 0.875rem; font-weight: 500; line-height: 1.25; color: var(--bs-slate-600); }
.option-card.selected .opt-text { color: var(--bs-amber-900); }
.opt-check { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid var(--bs-slate-200); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: 0.5rem; transition: all 0.2s; background: transparent; }
.option-card.selected .opt-check { border-color: var(--bs-amber-500); background: var(--bs-amber-500); }
.opt-check i { font-size: 10px; color: #ffffff; opacity: 0; transition: opacity 0.2s; }
.option-card.selected .opt-check i { opacity: 1; }

.action-bar { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; padding-bottom: 2rem;}
.btn-back { width: 3.5rem; height: 3.5rem; background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); border: 1px solid var(--bs-slate-200); color: var(--bs-slate-600); border-radius: 1rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); transition: transform 0.1s; cursor: pointer;}
.btn-back:active { transform: scale(0.95); }
.btn-next { flex: 1; height: 3.5rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.875rem; border: none; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); transition: all 0.2s; }
.btn-next.disabled { background: var(--bs-slate-200); color: var(--bs-slate-400); cursor: not-allowed; opacity: 0.8; }
.btn-next.active { background: var(--bs-slate-800); color: #ffffff; cursor: pointer; }
.btn-next.active:active { transform: scale(0.95); }

/* NEW RESTART BUTTON UI */
.btn-quick-restart { 
    background: var(--bs-slate-100); 
    border: 1px solid var(--bs-slate-200); 
    color: var(--bs-slate-500); 
    padding: 0.35rem 0.85rem; 
    border-radius: 50rem; 
    transition: all 0.2s; 
    cursor: pointer; 
    outline: none; 
}
.btn-quick-restart:hover { 
    background: var(--bs-slate-200);
    color: var(--bs-slate-800); 
    border-color: var(--bs-slate-300);
}
.btn-quick-restart i { transition: transform 0.4s ease-in-out; }
.btn-quick-restart:hover i { transform: rotate(-180deg); }

/* VIP MODAL OVERLAY */
.custom-modal-overlay { 
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; 
    background: rgba(248, 250, 252, 0.4); 
    backdrop-filter: blur(25px); 
    -webkit-backdrop-filter: blur(25px);
    z-index: 9999; display: flex; align-items: center; justify-content: center; 
    padding: 1rem; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; 
}
.custom-modal-overlay.active { opacity: 1; pointer-events: auto; }
.custom-modal-dialog { background: #ffffff; border-radius: 1.5rem; width: 100%; max-width: 36rem; max-height: 92vh; overflow-y: auto; transform: translateY(40px) scale(0.95); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; scrollbar-width: none; box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.3); }
.custom-modal-dialog::-webkit-scrollbar { display: none; }
.custom-modal-overlay.active .custom-modal-dialog { transform: translateY(0) scale(1); }

/* Modal View Transitions */
.modal-view { transition: opacity 0.3s ease, transform 0.3s ease; }
.modal-view.hidden { display: none !important; opacity: 0; transform: translateY(10px); }
.modal-view.active { display: block; opacity: 1; transform: translateY(0); }

/* Campaign Visual Wrapper */
.promo-img-wrapper { position: relative; width: 100%; padding-top: 56.25%; border-radius: 1.5rem 1.5rem 0 0; overflow: hidden; background: var(--bs-slate-100); }
.promo-img-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.promo-img-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(15,23,42,0.9) 0%, transparent 100%); padding: 2rem 1.5rem 1rem; display: flex; justify-content: space-between; align-items: flex-end; }

.modal-close-btn { position: absolute; top: 1rem; right: 1rem; background: rgba(0,0,0,0.4); color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; z-index: 50; cursor: pointer; backdrop-filter: blur(4px); transition: all 0.2s;}
.modal-close-btn:hover { background: #fff; color: var(--bs-slate-900); transform: rotate(90deg); }
.btn-back-text { background: transparent; border: none; outline: none; color: var(--bs-slate-400); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0; cursor: pointer; transition: color 0.2s; display: flex; align-items: center; gap: 0.5rem; }
.btn-back-text:hover { color: var(--bs-slate-700); }
.modal-form-area { background: var(--bs-slate-50); border-radius: 1.25rem; padding: 1.75rem; margin: 0 1.5rem 1.5rem 1.5rem; border: 1px solid var(--bs-slate-200); }

/* Segmented Digital Timer */
.timer-segment { background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 0.5rem; padding: 0.4rem 0.5rem; min-width: 3.25rem; box-shadow: inset 0 4px 6px rgba(0,0,0,0.3); backdrop-filter: blur(8px); display: flex; flex-direction: column; align-items: center; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.05); box-shadow: 0 0 15px rgba(239, 68, 68, 0.6); } 30% { transform: scale(1); } 45% { transform: scale(1.05); box-shadow: 0 0 15px rgba(239, 68, 68, 0.6); } }
.badge-pulse-heartbeat { animation: heartbeat 2.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1); display: inline-block; }
.btn-ghost-premium { background: transparent; color: var(--bs-slate-600); border: 2px solid var(--bs-slate-200); border-radius: 1rem; padding: 1rem; font-family: 'Poppins', sans-serif; font-weight: 700; transition: all 0.3s ease; width: 100%; cursor: pointer; }
.btn-ghost-premium:hover { border-color: var(--bs-slate-400); color: var(--bs-slate-900); background: var(--bs-slate-50); transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05); }

/* Form Inputs */
.input-group-custom { position: relative; margin-bottom: 1rem; }
.form-control-custom { font-family: 'Poppins', sans-serif; display: block; width: 100%; padding: 0.875rem 1rem 0.875rem 2.75rem; background: rgba(248, 250, 252, 0.7); border: 1px solid var(--bs-slate-200); border-radius: 0.75rem; font-size: 0.875rem; font-weight: 500; color: var(--bs-slate-800); outline: none; transition: all 0.2s; }
.form-control-custom:focus { background: #ffffff; border-color: var(--bs-amber-400); box-shadow: 0 0 0 4px rgba(245,158,11,0.1); }
.input-icon { position: absolute; top: 0; bottom: 0; left: 0; padding-left: 1rem; display: flex; align-items: center; pointer-events: none; z-index: 5; color: var(--bs-slate-400); }
.select-chevron { position: absolute; top: 0; bottom: 0; right: 0; padding-right: 1rem; display: flex; align-items: center; pointer-events: none; }
select.form-control-custom { appearance: none; cursor: pointer; }

/* Utilities */
.divider-text { display: flex; align-items: center; text-align: center; color: var(--bs-slate-400); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin: 1rem 0; }
.divider-text::before, .divider-text::after { content: ''; flex: 1; border-bottom: 1px solid var(--bs-slate-200); }
.divider-text:not(:empty)::before { margin-right: .75em; } .divider-text:not(:empty)::after { margin-left: .75em; }

.result-card { background: #ffffff; border-radius: 2rem; padding: 1.5rem; border: 1px solid var(--bs-slate-100); margin-bottom: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05);}
.rc-icon { width: 3rem; height: 3rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 1.25rem; flex-shrink: 0; }
.rc-rank { font-size: 1.875rem; font-weight: 900; color: var(--bs-slate-100); margin-left: 0.5rem; }
.plan-toggle { background: #ffffff; border-radius: 1rem; padding: 1rem; border: 2px solid var(--bs-slate-100); cursor: pointer; display: flex; flex-direction: column; align-items: center; text-align: center; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.plan-toggle.selected { border-color: var(--bs-amber-400); background: var(--bs-amber-50); box-shadow: 0 4px 12px rgba(245,158,11,0.15); }
.pt-icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; color: #ffffff; font-size: 1.125rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.pt-check { margin-top: auto; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid var(--bs-slate-200); display: flex; align-items: center; justify-content: center; background: transparent; transition: all 0.2s;}
.plan-toggle.selected .pt-check { border-color: var(--bs-amber-500); background: var(--bs-amber-500); }
.pt-check i { font-size: 10px; color: #ffffff; opacity: 0; transition: 0.2s;}
.plan-toggle.selected .pt-check i { opacity: 1; }

.fs-7 { font-size: 0.875rem; } .fs-8 { font-size: 0.75rem; } .fs-9 { font-size: 10px; } .fs-10 { font-size: 9px; } .fw-black { font-weight: 900; } .letter-spacing-widest { letter-spacing: 0.1em; }
.border-dashed { border-style: dashed !important; }

.rc-tag { display: inline-flex; align-items: center; padding: 0.375rem 0.75rem; background: var(--bs-slate-50); border-radius: 0.5rem; border: 1px solid var(--bs-slate-100); }
.btn-reset { font-family: 'Poppins', sans-serif; background: transparent; border: none; font-size: 10px; font-weight: 900; color: var(--bs-slate-400); text-transform: uppercase; letter-spacing: 0.1em; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; padding: 0.5rem; transition: color 0.3s;}
.btn-reset:hover { color: var(--bs-slate-600); }

.trust-seal { font-size: 0.65rem; font-weight: 800; color: var(--bs-slate-400); text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center; gap: 0.35rem; }
.trust-seal i { font-size: 0.75rem; opacity: 0.7; }

/* --- FORM VALIDATION STATES --- */
.input-group-custom.has-error .form-control-custom {
    border-color: var(--bs-red-500);
    background: var(--bs-red-50);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
}
.invalid-feedback {
    color: var(--bs-red-500);
    font-size: 10px !important;
    font-weight: 700;
    margin-top: 4px;
    padding-left: 1.25rem;
    display: none;
    position: absolute;
    bottom: -18px;
    left: -16px;
}
.input-group-custom {
    margin-bottom: 1.5rem !important; /* Increased margin to make room for absolute error text */
}

#btnViewOffer {
    max-width: 30rem; 
    padding: 1.25rem; 
    font-size: 1.1rem;
}

#btnClaimPromo {
    padding: 1.15rem; 
    font-size: 1.1rem;
}

.custom-modal-overlay {
    z-index: 99999 !important; 
}

.modal-close-btn {
    top: 15px !important; 
    right: 15px !important;
    z-index: 100000 !important;
}

.promo-font{
    font-size: 1.75rem; 
    letter-spacing: -0.02em;
}

#btnRevealForm {
    font-size: 0.9rem;
}

.quiz-action-bar {
    position: sticky;
    bottom: -1px; 
    z-index: 100;
    background-color: transparent; 
    padding-top: 1rem !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important; 
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}

@media only screen and (max-width: 767px) {
    #btnViewOffer {
        max-width: 24rem; 
        padding: 1rem; 
        font-size: 0.8rem;
    }

    #btnClaimPromo {
        padding: 1rem; 
        font-size: 0.8rem;
    }

    .custom-modal-dialog {
        margin-top: 2.5rem;
    }

    .promo-font{
        font-size: 1.25rem; 
        letter-spacing: -0.02em;
    }
}

/* ROADMAP BADGE ANIMATION */
.roadmap-badge-animated { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bs-emerald-50), var(--bs-emerald-200)); color: var(--bs-emerald-800); padding: 0.6rem 1.5rem; border-radius: 50rem; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em; box-shadow: 0 10px 20px -5px rgba(16,185,129,0.3); border: 2px solid #fff; position: relative; animation: float 4s ease-in-out infinite; z-index: 1; }
.pulse-ring-emerald { position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border-radius: inherit; border: 2px solid var(--bs-emerald-400); animation: pulse-ring 2s infinite; pointer-events: none; z-index: -1; }

/* Animation Staggers */
.stagger-1 { animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; animation-delay: 0.1s; }
.stagger-2 { animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; animation-delay: 0.2s; }
.stagger-3 { animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; animation-delay: 0.3s; }
.stagger-4 { animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; animation-delay: 0.4s; }
.dna-spin { animation: spinDna 4s ease-in-out infinite; display: inline-block; }
@keyframes spinDna { 0%, 100% { transform: rotateY(0deg) scale(1); } 50% { transform: rotateY(180deg) scale(1.1); text-shadow: 0 0 20px rgba(245, 158, 11, 0.6); } }

/* Spinners & Utilities */
.spinner-outer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 4px solid var(--bs-slate-100); border-top-color: var(--bs-amber-500); border-radius: 50%; animation: spin 1s linear infinite; }
.spinner-inner { position: absolute; top: 0.5rem; left: 0.5rem; right: 0.5rem; bottom: 0.5rem; border: 4px solid var(--bs-slate-100); border-bottom-color: var(--bs-amber-400); border-radius: 50%; animation: spin 2s linear infinite reverse; }

@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } .animate-float { animation: float 4s ease-in-out infinite; }
@keyframes slideUpFade { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .animate-slide-up { animation: slideUpFade 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); } 70% { box-shadow: 0 0 0 20px rgba(245, 158, 11, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } } .animate-pulse-ring { animation: pulse-ring 2s infinite; position: absolute; top:0; left:0; right:0; bottom:0; border-radius: inherit; border: 2px solid var(--bs-amber-300); }
@keyframes btn-intense-glow { 0% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.4); transform: scale(1); } 50% { box-shadow: 0 0 35px rgba(245, 158, 11, 0.8); transform: scale(1.02); } 100% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.4); transform: scale(1); } } .btn-glow { animation: btn-intense-glow 2s infinite; }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.slide-in-right { animation: slideInRight 0.3s ease-out forwards; } .slide-in-left { animation: slideInLeft 0.3s ease-out forwards; }
@keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes spin { 100% { transform: rotate(360deg); } }