/*!
 * ASK Unified Frontend Styles
 * File: ask-unified.css
 * Date: 2025-09-06
 * Source merge: fe-report.css + frontend.css
 *
 * Goals:
 *  - Consolidate variables and component styles from the FE Report and Assessment UI.
 *  - Remove duplication and conflicting overrides.
 *  - Keep squared, modern aesthetic with Bootstrap compatibility where needed.
 *  - Preserve backward compatibility for markup variants (labels vs .ask-option,
 *    .ask-pagination vs .ask-nav, server-side question numbering via .ask-qnum).
 *
 * Notes for devs:
 *  - Variables can be overridden via wp_add_inline_style or inline <style> in PHP.
 *  - Assessment colours use --ask-* custom properties, mapped to the core palette.
 *  - Premium gating relies on [data-premium] and [data-lock] attributes.
 *  - Keep this file as the single enqueue for public UI (replace fe-report.css & frontend.css).
 */

/* ================================================================
   0) ROOT VARIABLES — COLOUR SYSTEM & TYPOGRAPHY
   ---------------------------------------------------------------- */
:root {
  /* Core palette + typography (from FE Report) */
  --theme-font: 'Montserrat', -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  
  --ask-bg: #ffffff;
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.08);
  --text: #1f2937;
  --muted: #9ca3af;
  --primary: #0A84FF;
  --accent: #83b3fc;
  --growth: #10b981;
  --grayring: #f3f4f6;
  --pillar-align: #f59e0b;
  --pillar-shift: #3b82f6;
  --pillar-keep: #10b981;

  /* Heading colours */
  --h1-color: #111827;
  --h2-color: #1f2937;
  --h3-color: #374151;

  /* Donut segments */
  --donut-score: #10b981;
  --donut-delta: #f59e0b;
  --donut-remainder: #f3f4f6;

  /* Typography scale */
  --heading-font: 'Montserrat', -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --body-font: 'Montserrat', -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --h1-size: 2.25rem;
  --h2-size: 1.5rem;
  --h3-size: 1.25rem;
  --h4-size: 1rem;
  --p-size: 1rem;
  --p-line-height: 1.6;
  --p-color: #374151;

  /* Assessment theme variables */
  --ask-narrative: var(--text);
  --ask-primary: var(--primary);
  --ask-growth: var(--growth);
  --ask-card-bg: #ffffff;
  --ask-card-border: rgba(0, 0, 0, 0.1);
  --ask-border: #e5e7eb;
  --ask-bg: #ffffff;

  /* Optional knobs */
  --ask-nav-inactive: #d1d5db;
  --ask-submit: var(--ask-growth);
  --ask-muted: var(--muted);
}

/* ================================================================
   1) BASE & TYPOGRAPHY
   ---------------------------------------------------------------- */
html,
body {
  color: var(--text);
  font-family: var(--body-font);
}

/* Apply plugin background colour only to plugin containers. */
.ask-fe,
.ask-assessment-view {
  background: #ffffff !important;
  transition: background 0.3s ease;
}

/* Utility heading sizes/colours used across reports */
.ask-fe .h5,
.ask-fe h5,
.ask-fe .report-title {
  color: var(--h1-color);
  font-family: var(--heading-font);
  font-size: var(--h1-size);
  font-weight: 800;
  letter-spacing: -0.025em;
}
.ask-fe h6 {
  color: var(--h2-color);
  font-family: var(--heading-font);
  font-size: var(--h2-size);
  font-weight: 700;
}
.ask-fe .section-title {
  color: var(--h3-color);
  font-family: var(--heading-font);
  font-size: var(--h3-size);
  font-weight: 600;
}
.ask-fe {
  color: var(--text);
  font-family: var(--body-font);
  line-height: var(--p-line-height, 1.4) !important;
}
.ask-fe p, 
.ask-fe ul, 
.ask-fe li {
  color: var(--p-color);
  font-family: var(--body-font);
  font-size: var(--p-size);
  line-height: var(--p-line-height, 1.4) !important;
}
.ask-fe ul, 
.ask-fe li {
  font-size: 15px;
}
/* Small title used in cards/sections */
.section-title {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

/* ================================================================
   2) LAYOUT WRAPPERS
   ---------------------------------------------------------------- */
.ask-dashboard {
  margin: 0 auto;
  width: 98%;
  padding: 2%;
  box-sizing: border-box;
}
.ask-assessment-view {
  margin: 0 auto;
  width: 98%;
  max-width: 1200px;
  padding: 2%;
  box-sizing: border-box;
}

/* Landing Page (Start View) Refinements */
.ask-assessment-view[data-ask="start"] {
  padding-top: 1%; /* Shrink top padding by half */
}
/* .ask-start-card {
  padding: 2.5rem;
  background: var(--ask-card-bg);
  border: 1px solid var(--ask-card-border);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  margin-top: 0.5rem;
} */
.ask-assessment-title {
  font-weight: 700 !important;
  margin-top: 0 !important; /* Remove top margin to shrink space */
  margin-bottom: 0.2rem !important; /* Further reduced bottom margin */
}

.ask-assessment-intro p {
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important; /* Reduce space between instruction lines */
}

/* Two-column helper */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ================================================================
   3) CARD COMPONENTS
   ---------------------------------------------------------------- */
.ask-card,
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.ask-card.p-3.zoneLongDip-outer h2{
  font-size: 24.5px;
  margin-top: 8px;
  font-weight: 600;
}

/* ================================================================
   21) DISCOUNT CODE STYLES
   ----------------------------------------------------------------
   These styles apply to the discount code input row and button on
   the checkout page.  They align the field with the rest of the
   assessment UI by adding subtle borders, rounded corners and
   consistent typography.  The colours leverage the existing
   palette for primary accents and body text.  Feel free to
   override via custom CSS or theme variables if needed.
*/

div#ask-discount-row {
    border: 1px solid #efefef;
    margin: 10px 0;
    padding: 10px;
    border-radius: 8px;
}

input#ask-discount-code {
    font-size: 1.3rem;
    padding: 5px;
    border: 1px solid #efefef;
    border-radius: 6px;
    font-family: "Montserrat", sans-serif;
}

button#ask-apply-discount {
    background: #82b1ff;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    border: 1px solid #82b1ff;
    padding: 10px;
    cursor: pointer;
}
.ask-card.p-3.zoneLongDip-outer h3{
  font-size: 23px;
  margin-top: 8px;
}
.ask-card.p-3.zoneLongDip-outer h4{
  font-size: 22px;
  margin-top: 8px;
}
.ask-card.p-3.zoneLongDip-outer h5{
  font-size: 21px;
  margin-top: 8px;
}
.ask-card.p-3.zoneLongDip-outer h5{
  font-size: 19px;
  margin-top: 8px;
}
.ask-card.p-3.zoneLongDip-outer,.ask-card.p-3.zoneLongDip-outer p{
 font-size: var(--p-size);
}
.ask-card.p-3.zoneLongDip-outer li,.ask-card.p-3.zoneLongDip-outer li p{
 font-size: 15px;
}
.persona-intro-card {
  background: #f9fafb;
  border: 1px solid var(--card-border);
}
.persona-intro-card h6 {
  font-weight: 600;
  margin-bottom: 4px;
}
.persona-intro-card p {
  margin-bottom: 0;
}

/* Short description block; aligns with donut height */
.short-desc {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Muted badge (kept for future use) */
.badge-muted {
  background: #eef2f7;
  color: #111827;
}

/* Summary highlight section with light background */
.ask-summary-highlight {
  background: #f8f9fa;
  padding: 0.75rem 1rem;
  border-radius: 8px;
}

/* Pillar Results Heading */
.pillar-results-title {
  font-size: 21px;
}

/* ================================================================
   4) BUTTONS & TABS
   ---------------------------------------------------------------- */
.btn-square { border-radius: 0; }

/* Icon buttons (used in headers) */
.btn-icon {
  border: 1px solid var(--card-border);
  background: #fff;
  border-radius: 0;
}
.btn-icon .material-icons {
  font-size: 18px;
  vertical-align: -4px;
}

/* Nav tabs: squared edges + primary colour */
.nav-tabs .nav-link { border-radius: 0 !important; color: var(--primary); font-weight: 500; font-family: var(--body-font)}
.nav-tabs .nav-link.active { background: var(--primary) !important; color: #fff !important; }
.nav-tabs .nav-link:hover { color: var(--primary); background: #efefee; }

/* ================================================================
   5) CHECKOUT & PAYMENT ELEMENT STYLES
   ---------------------------------------------------------------- */
/* Container for the checkout form.  Constrain width and centre on page */
/*
 * Container for the checkout form.  Stretch to nearly full
 * width on larger screens while preserving responsiveness.  By
 * default WordPress themes constrain content width; we opt into
 * a 98% width and a larger max width to give the payment form
 * breathing room.  The element centres itself via margin auto.
 */
.ask-checkout-element {
  max-width: 1100px;
  width: 98%;
  margin: 0 auto;
  padding: 1.5rem;
  border: 1px solid var(--ask-card-border);
  background: var(--ask-card-bg);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
/* Plan selection group */
/*
 * Plan selection grid.  By default stacks plans vertically on
 * narrow screens.  On small tablets and larger (≥640px) the
 * plans are displayed side-by-side in two equal columns.  The
 * gap ensures appropriate spacing between cards.
 */
.ask-plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
@media (min-width: 640px) {
  .ask-plans {
    grid-template-columns: 1fr 1fr;
  }
}
.ask-plan {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--ask-border);
  border-radius: 0.375rem;
  cursor: pointer;
  background-color: var(--ask-card-bg);
}
.ask-plan-input {
  /* visually align custom radios with text */
  margin: 0;
}
.ask-plan-label {
  font-weight: 500;
  font-size: 1rem;
  color: var(--text);
}

/* Highlight the selected plan card */
.ask-plan.selected {
  border-color: var(--ask-primary);
  background-color: rgba(88, 86, 214, 0.05);
}
/* Selected price display */
/*
 * Price display.  Use the primary accent colour and large
 * typography.  The dollar sign (or currency) prefix is added
 * by JavaScript.  Do not set margin-bottom here as spacing is
 * handled by the container.
 */
/*
 * Price display bubble shown above the plan selector.  Add a bottom
 * margin so there is visual separation between the price and the radio
 * buttons/plan labels.  The margin is applied only on the bottom
 * because the centering is handled by the auto margin horizontally.
 */
.ask-price-display {
  font-size: 2.5rem;
  font-weight: 600;
  text-align: center;
  margin: 0px auto 1rem;
  color: var(--ask-primary);
  border: 6px solid;
  border-radius: 999px;
  width: 10%;
  padding: 2% 0%;
}
/* Pay/Purchase button styling */
.ask-pay-button {
  display: block;
  width: 100%;
  max-width: 75%;
  min-width: 200px;
  margin: 1rem auto;
  padding: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: var(--ask-primary);
  border: none;
  border-radius: 0.3125rem;
  cursor: pointer;
  transition: background 0.15s ease-in-out;
}
.ask-pay-button:hover {
  background: rgba(88, 86, 214, 0.85);
}
/* Error message */
.ask-errors {
  color: #b00020;
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

/* Success confirmation container.  This element is hidden by default and
 * displayed via JavaScript when a payment succeeds.  It centres the
 * thank-you message and results link, and ensures the link looks like
 * a button consistent with other CTA styles.  The link inherits the
 * primary colour and is padded for comfortable tap/click.  The
 * max-width ensures it does not stretch beyond the payment form. */
#ask-confirmation {
  text-align: center;
  margin-top: 1rem;
}
#ask-confirmation .ask-confirmation-message {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
#ask-confirmation .ask-view-results-button {
  display: inline-block;
  background-color: var(--ask-primary);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0.3125rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  max-width: 75%;
  min-width: 200px;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}
#ask-confirmation .ask-view-results-button:hover {
  background-color: rgba(88, 86, 214, 0.85);
}

/* Payment element container spacing */
#ask-payment-element {
  margin-bottom: 1rem;
}

/* ================================================================
   6) START ASSESSMENT BUTTONS
   ---------------------------------------------------------------- */
/* Primary start assessment button styled with ask-primary colour */
.ask-start-btn-wrapper .ask-start-button {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  margin-bottom: 0.5rem;
  border-radius: 0.3125rem;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--ask-primary);
  color: #ffffff;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.ask-start-btn-wrapper .ask-start-button:hover {
  opacity: 0.9;
}
/* Test assessment button for admins styled with ask-growth colour */
.ask-start-btn-wrapper .ask-test-button {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 0.3125rem;
  font-weight: 600;
  background: var(--ask-growth);
  color: #ffffff;
  text-decoration: none;
  border: none;
  cursor: pointer;
  margin-top: 0.5rem;
}
.ask-start-btn-wrapper .ask-test-button:hover {
  opacity: 0.9;
}

/* Persona tabs: horizontal scroll on small screens */
#personaTabs { white-space: nowrap; }
#personaTabs .nav-link { min-width: 120px; text-align: center; }

/* CTA bar container (paired with responsive stacking below) */
.ask-cta-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ================================================================
   5) PREMIUM GATING — LOCK & OVERLAY
   ---------------------------------------------------------------- */
.lock { position: relative; min-height: 260px; }
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(2px);
}
.overlay .panel {
  background: #fff;
  border: 1px solid var(--card-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  padding: 20px;
  max-width: 560px;
  width: 100%;
}
[data-premium].is-locked [data-premium-body] { display: none; }
[data-premium].is-locked [data-lock] { display: block; }
[data-lock] { display: none; }

/* ================================================================
   6) COURSE LIST & UPGRADE CTAS
   ---------------------------------------------------------------- */
.course-list li {
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  border-top: 1px solid #eceff4;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.course-list li:nth-child(even) { background: #f7f8fb; }
.course-list li span {
  flex: 1 1 auto;
  margin-right: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Course/Upgrade buttons: outline → fill on hover */
.course-list li .btn,
.btn-enroll,
.ask-upgrade-lead,
.ask-upgrade-team,
.ask-upgrade-self,
#btnViewMoreDomains,
#btnCollapseDomains {
  border: 1px solid var(--primary);
  color: var(--primary);
  background: transparent;
  border-radius: 0;
  font-weight: 600;
}

/* Premium Enroll Button */
.btn-enroll {
    display: inline-block;
    padding: 6px 16px;
    background-color: var(--primary, #35599a) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    border: none !important;
    line-height: 1.2;
    transition: transform 0.1s ease, opacity 0.2s ease;
}
.btn-enroll:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    color: #fff !important;
}

.course-recs-card {
    background: #f1f4f8 !important; /* Premium light blue background */
    border: 1px solid #d1d9e2 !important;
}

.italic { font-style: italic; }

.course-list li .btn:hover,
.ask-upgrade-lead:hover,
.ask-upgrade-team:hover,
.ask-upgrade-self:hover,
#btnCollapseDomains:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
/* View more → growth on hover */
#btnViewMoreDomains:hover {
  background: var(--pillar-keep);
  color: #fff;
  border-color: var(--pillar-keep);
}

/* ================================================================
   7) AUTH / PROMPTS
   ---------------------------------------------------------------- */
.ask-auth-wrapper {
  max-width: 420px;
  margin: 2rem auto;
  padding: 2rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.ask-auth-wrapper p { margin-bottom: 1rem; }
.ask-auth-wrapper label {
  font-weight: 600;
  display: block;
  margin-bottom: 0.25rem;
  color: #374151;
}
.ask-auth-wrapper input.input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background-color: #f9fafb;
  font-size: 1rem;
  box-sizing: border-box;
}
.ask-auth-wrapper input.input:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3);
}
.ask-auth-wrapper .button {
  display: inline-block;
  width: 100%;
  padding: 0.5rem 0;
  font-size: 1rem;
  text-align: center;
  cursor: pointer;
  border-radius: 6px;
  text-decoration: none;
}
.ask-auth-wrapper .button-primary {
  background-color: #0A84FF;
  border: 1px solid #0A84FF;
  color: #ffffff;
}
.ask-auth-wrapper .button-primary:hover { background-color: #0066cc; border-color: #0066cc; }
.ask-auth-wrapper .button-secondary {
  background-color: #f3f4f6;
  border: 1px solid #d1d5db;
  color: #374151;
}
.ask-auth-wrapper .button-secondary:hover { background-color: #e5e7eb; }
.ask-auth-wrapper .ask-switch-link a {
  font-size: 0.875rem;
  color: #0A84FF;
  text-decoration: underline;
}
.ask-auth-wrapper .ask-switch-link a:hover { color: #0066cc; }

.ask-upgrade-prompt {
  max-width: 420px;
  margin: 1.5rem auto;
  padding: 1.5rem;
  border: 1px solid var(--ask-border);
  border-radius: 12px;
  background-color: var(--ask-card-bg);
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.ask-upgrade-prompt p { margin-bottom: 1rem; color: var(--ask-narrative); }

/* Revisit Section Buttons Styling - Color Coded with Icons */
.ask-revisit {
  margin: 2rem 0 !important;
  padding: 1.75rem !important;
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  text-align: left;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.ask-revisit p {
  font-size: 1.15rem;
  font-weight: 600;
  color: #1a202c;
  margin-bottom: .5rem !important;
  letter-spacing: -0.025em;
}

.ask-revisit .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0 12px 12px 0;
  font-size: 14px;
  border: none !important;
}

.ask-revisit .button .dashicons {
  margin-right: 8px;
  font-size: 18px;
  width: 18px;
  height: 18px;
  line-height: 18px;
}

/* 1) View Previous Results - Blue/Cyan Theme */
.ask-revisit .ask-view-btn {
  background: #e0f2fe !important;
  color: #0369a1 !important;
}
.ask-revisit .ask-view-btn:hover {
  background: #bae6fd !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(3, 105, 161, 0.15);
}

/* 2) Retake Assessment - Orange/Amber Theme */
.ask-revisit .ask-retake-btn {
  background: #fef3c7 !important;
  color: #92400e !important;
}
.ask-revisit .ask-retake-btn:hover {
  background: #fde68a !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(146, 64, 14, 0.15);
}

/* 3) Upgrade - Vibrant Purple/Indigo Theme */
.ask-revisit .ask-upgrade-btn {
  background: #5856d6 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(88, 86, 214, 0.3) !important;
}
.ask-revisit .ask-upgrade-btn:hover {
  background: #4a48c0 !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(88, 86, 214, 0.45) !important;
}




/* ================================================================
   8) ASSESSMENT: QUESTIONS, OPTIONS & NAVIGATION
   ---------------------------------------------------------------- */
/* Inherit system font if injected by theme */
.ask-assessment-form { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Montserrat", sans-serif; }

a.ask-start-button {
    border: 1px solid #ccc;
    padding: 1%;
    background: var(--ask-primary);
    color: #fff;
    text-transform: uppercase;
}

/* Reset list */
.ask-questions { list-style: none; padding: 0; margin: 0; }

/* Question card wrapper: Compact white look */
.ask-question {
  border: 1px solid var(--ask-card-border, rgba(0,0,0,0.08)) !important;
  background-color: #ffffff !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 1rem !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

/* Titles & numbering */
.ask-question-title {
    font-weight: 500 !important;
    font-size: 1.1rem !important;
    margin: 0 0 0.5rem !important;
    color: #3b3e44 !important;
    line-height: 1.4 !important;
}
.ask-qnum { font-weight: 600; color: var(--ask-primary); }

/* Options grid */
.ask-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  padding-top: 0.5rem;
}

/* Modern pill element (div.ask-option) - Compact Pill */
.ask-option {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem !important;
  min-height: 36px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 999px !important;
  background-color: #ffffff !important;
  color: #374151 !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all 0.2s ease !important;
  text-align: center;
  font-size: 0.9rem !important;
}
.ask-option:hover { 
  border-color: #0A84FF !important;
  background-color: #f9fafb !important;
}
.ask-option.selected {
  background-color: #0A84FF !important;
  color: #ffffff !important;
  border-color: #0A84FF !important;
  box-shadow: 0 4px 8px rgba(10, 132, 255, 0.15) !important;
}
.ask-option input { display: none; }

/* Legacy label-based markup support */
.ask-options label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  border-radius: 999px !important;
  min-height: 36px !important;
  padding: 4px 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-size: 0.85rem !important;
  color: #5c5c5c !important;
  text-align: center !important;
}
.ask-options label:hover { 
  border-color: var(--ask-primary) !important;
  background-color: #f9fafb !important;
}
.ask-options input { display: none; }

/* When script toggles .selected on label */
.ask-options label.selected {
    background-color: var(--ask-primary) !important;
    color: #fff !important;
    border-color: var(--ask-primary) !important;
  box-shadow: 0 4px 8px rgba(10, 132, 255, 0.15) !important;
}

/* When using :checked + span structure */
.ask-options input:checked + span {
  color: #fff;
}

/* Navigation (preferred: .ask-nav) */
.ask-nav {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.ask-nav .btn {
  flex: 1;
  min-width: 160px;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--ask-primary);
  background-color: var(--ask-primary);
  color: #ffffff;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s ease;
  text-align: center;
}
.ask-nav .btn:hover:not(:disabled) { opacity: 0.8; }
.ask-nav .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  border-color: var(--ask-nav-inactive);
  background-color: var(--ask-nav-inactive);
  color: #ffffff;
}
.ask-nav .btn-growth {
  border-color: var(--ask-submit);
  background-color: var(--ask-submit);
  color: #ffffff;
}

/* Back-compat: .ask-pagination mirrors .ask-nav styling */
.ask-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.ask-pagination .ask-page-info {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 500;
  color: var(--ask-narrative);
}
.ask-pagination button {
  flex: 0 0 40%;
  max-width: 45%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  border: 1px solid var(--ask-primary);
  border-radius: 0.5rem;
  cursor: pointer;
  color: #ffffff;
  background-color: var(--ask-primary);
  transition: opacity 0.15s ease;
}
.ask-pagination button:hover:not(:disabled) { opacity: 0.8; }
.ask-pagination button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  border-color: var(--ask-nav-inactive);
  background-color: var(--ask-nav-inactive);
  color: #ffffff;
}
.ask-pagination .ask-see-results {
  background-color: var(--ask-submit);
  border-color: var(--ask-submit);
  color: #ffffff;
}

/* ================================================================
   9) LOADING OVERLAY (SPINNER + PROGRESS BAR)
   ---------------------------------------------------------------- */
.ask-loading {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}
.ask-loading h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ask-narrative);
}
.ask-progress {
  width: 60%;
  max-width: 300px;
  height: 8px;
  background-color: var(--ask-border);
  border-radius: 999px;
  overflow: hidden;
}
.ask-progress-bar {
  height: 100%;
  width: 0%;
  background-color: var(--ask-growth);
  animation: ask-progress 1.8s linear forwards;
}
@keyframes ask-progress { from { width: 0%; } to { width: 100%; } }

.ask-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 4px solid var(--ask-border);
  border-top-color: var(--ask-narrative);
  animation: ask-spin 0.8s linear infinite;
}
@keyframes ask-spin { to { transform: rotate(360deg); } }
/* Legacy keyframes alias */
@keyframes askspin { to { transform: rotate(360deg); } }

/* PDF Specific Loader Overlay - Ensuring full screen coverage */
#pdf-loader.ask-loading {
  display: none;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  z-index: 999999 !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#pdf-loader .ask-progress-bar {
  animation: none !important;
  transition: width 0.4s ease-out;
}

/* ================================================================
   10) MODALS & BODY SCROLL
   ---------------------------------------------------------------- */
body.modal-open { overflow-y: scroll; padding-right: 0 !important; }

#askUpgradeModal .modal-dialog {
  max-width: 480px;
  margin: 1rem auto;
}
#askUpgradeModal .modal-content {
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#askUpgradeModal .modal-body {
  flex: 1 1 auto;
  overflow: auto;
}
#askUpgradeFrame {
  width: 100%;
  height: 70vh;
  border: 0;
}

/* ================================================================
   11) RESPONSIVE REFINEMENTS
   ---------------------------------------------------------------- */
/* Center/limit overlay panels */
[data-premium] .overlay .panel,
.ask-card .overlay .panel {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* XS: overlay panel grows wider, CTA bars stack, long text narrows */
@media (max-width: 575.98px) {
  [data-premium] .overlay .panel,
  .ask-card .overlay .panel { max-width: 90vw; }

  .ask-cta-bar { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .ask-cta-bar .btn, .ask-cta-bar .button { width: 100%; }

  /* Limit line length of long descriptions on narrow screens */
  .ask-long { max-width: 42ch; }

  #askUpgradeFrame { height: 65vh; }
}

/* SM: tighten gutters + card padding */
@media (max-width: 767.98px) {
  .row.g-3 {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
  }
  .ask-card { padding: 0.875rem; }
  .ask-card .section-title { font-size: 1rem; }
}

/* Options stack & nav column on narrow devices */
@media (max-width: 720px) {
  .ask-options { grid-template-columns: 1fr; }
  .ask-nav { flex-direction: column; }
  .ask-nav .btn { width: 100%; min-width: 0; }
  .ask-pagination button { flex-basis: 100%; max-width: 100%; }
}

/* Responsive Graphs and Mobile Tweaks */
.responsive-graph {
  width: 375px !important;
  height: 375px !important;
  flex: 0 0 375px; /* Don't grow or shrink on desktop */
}

@media (max-width: 1024px) {
  .responsive-graph {
    width: 100% !important;
    max-width: 375px !important;
    height: auto !important;
    flex: 0 1 auto;
    display: block;
    margin: 0 auto;
  }
  ul#domainTabs {
    flex-wrap: wrap !important;
    white-space: normal !important;
  }
}

@media (max-width: 767px) {
  /* Ensure the summary row items have spacing on mobile */
  .mt-1 {
    margin-top: 0.5rem !important;
  }
  .border-bottom .fw-bold.h5.m-0 {
    font-size: 26px;
}
canvas#overallDonut {
    width: 300px !important;
    height: 300px !important;
}
.d-flex.align-items-center.justify-content-between.pb-2.mb-3.border-bottom {
    flex-wrap: wrap;
    width: 100%;
}
  .container.py-4.ask-fe {
    padding: 10px 8px !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
    box-sizing: border-box;
  }
  .ask-card {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box;
  }
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }
}