/* ==========================================================================
   AI Readiness Assessment
   Template: ai-readiness-assessment.php

   Every rule is scoped to .vai-page (the <main> wrapper), so nothing here can
   leak into the theme header, footer or menus. Keyframe names are prefixed
   (vai-) for the same reason. Values are unchanged from the original block.
   ========================================================================== */

.vai-page {
    --red-color: #E22D00;
    --white-color: #FFFFFF;
    --dark-blue: #003865;
    --accent-blue: #00B5E2;
    --orange-btn: #E22D00;
    --bg-gray: #f9f9f9;
    --text-color: #333333;
    --font-family: 'Open Sans', sans-serif;
    font-family: var(--font-family);
}

/* Page background (was a global body rule in the block). */
body.page-template-ai-readiness-assessment-php { background: #ffffff; margin: 0; }

/* Preloader */
.vai-page #preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #fff; z-index: 999999; display: flex;
    justify-content: center; align-items: center;
    transition: opacity 0.3s ease;
    /* Safety net: if the script ever fails to load, the preloader still fades
       out after 4s instead of covering the page forever. */
    animation: vai-preloader-out 0.3s ease 4s forwards;
}
.vai-page .spinner { width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid var(--red-color); border-radius: 50%; animation: vai-spin 1s linear infinite; }
@keyframes vai-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes vai-preloader-out { to { opacity: 0; visibility: hidden; } }

/* Layout */
.vai-page .veltris-section-container { font-family: var(--font-family) !important; background-color: transparent; color: var(--text-color); width: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 130px; padding-bottom: 60px; box-sizing: border-box; }
/* Wrapper is wide enough for the two-column first screen. The quiz, lead form
   and results are held at their original width (900px box - 30px padding = 870px),
   so those screens look exactly as before. */
.vai-page .compact-wrapper { width: 100%; max-width: 1200px; padding: 20px 15px; text-align: center; position: relative; background: transparent; border-radius: 0; box-shadow: none; }
.vai-page #view-quiz, .vai-page #view-lead, .vai-page #view-results { max-width: 870px; margin-left: auto; margin-right: auto; }

/* First screen: assessment on the left (the main task, so it gets more width),
   AI Readiness video on the right as supporting content. */
/* Title row above both columns; the columns are top-aligned, so the first
   row of cards and the top of the video sit on the same line. */
.vai-page .vai-intro-head { text-align: left; }
.vai-page .vai-intro-head h1.main-title { text-align: left; }
.vai-page .vai-intro-head p.sub-text { margin: 0 0 20px 0; max-width: none; }
.vai-page .vai-intro { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; text-align: left; }
.vai-page .vai-intro .industry-grid { grid-template-columns: repeat(2, 1fr); }
/* Caption under the video: a small "Watch · 1 min" label, then one grey line
   of context. Kept quiet so it supports the video rather than competing with
   the page title. */
.vai-page .vai-video-caption { margin-top: 14px; }
.vai-page .vai-video-label { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-blue); }
.vai-page .vai-video-label i { font-size: 10px; }
.vai-page p.vai-video-text { margin: 6px 0 0 0; font-size: 15px; line-height: 1.55; color: #666; text-align: left; }
.vai-page .vai-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #001f3d; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.vai-page .vai-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

.vai-page h1.main-title { font-size: 1.6rem; font-weight: 800; color: var(--dark-blue); margin: 0 0 10px 0; line-height: 1.2; }
.vai-page p.sub-text { font-size: 0.95rem; color: #666; margin: 0 auto 20px auto; max-width: 650px; line-height: 1.4; }

/* Buttons */
.vai-page .btn-veltris { background-color: var(--red-color) !important; color: white !important; font-weight: 700; text-transform: uppercase; padding: 12px 30px; border: none; border-radius: 4px; cursor: pointer; transition: 0.3s; font-size: 0.9rem; display: inline-block; }
.vai-page .btn-veltris:hover { background-color: #c42600 !important; }
.vai-page .btn-veltris:disabled { background-color: #ccc !important; cursor: not-allowed; }
.vai-page .btn-orange { background-color: var(--orange-btn) !important; color: white; font-weight: 700; text-transform: uppercase; padding: 10px 25px; border: none; border-radius: 4px; cursor: pointer; transition: 0.3s; font-size: 0.85rem; }
.vai-page .btn-orange:hover { background-color: #c42600 !important; }
.vai-page .btn-outline { background: transparent; border: 1px solid #ccc; color: #666; padding: 8px 20px; border-radius: 4px; font-size: 0.8rem; cursor: pointer; transition: 0.2s; font-weight: 600; }
.vai-page .btn-outline:hover { border-color: var(--dark-blue); color: var(--dark-blue); }
.vai-page .btn-back-highlight { color: var(--accent-blue); text-decoration: none; font-weight: 700; font-size: 0.9rem; cursor: pointer; border-bottom: 2px solid transparent; transition: 0.3s; padding-bottom: 2px; }
.vai-page .btn-back-highlight:hover { border-bottom-color: var(--accent-blue); }

/* Inputs */
.vai-page .form-control, .vai-page .form-select, .vai-page textarea { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 0; font-size: 0.9rem; box-sizing: border-box; font-family: inherit; background: #fdfdfd; transition: 0.3s; }
.vai-page .form-control:focus { border-color: var(--accent-blue); background: #fff; outline: none; }
.vai-page .error-text { color: red; font-size: 0.8rem; display: none; text-align: left; margin-top: 5px; }

/* Industry Grid */
.vai-page .industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 10px; }
.vai-page .ind-btn {
    background: white; border: 1px solid #ddd; border-radius: 6px; padding: 15px 10px;
    font-size: 0.8rem; text-align: center; color: var(--dark-blue); cursor: pointer;
    transition: all 0.2s ease; display: flex; flex-direction: column; align-items: center;
    justify-content: center; min-height: 90px;
}
.vai-page .ind-btn i { font-size: 1.4rem; margin-bottom: 8px; color: var(--accent-blue); }
.vai-page .ind-btn:hover { border-color: var(--accent-blue); background: #f0fbff; }
.vai-page .ind-btn.selected { background-color: var(--dark-blue); color: white; border-color: var(--dark-blue); }
.vai-page .ind-btn.selected i { color: white; }

/* Other Input Container */
.vai-page #other-input-container { display: none; margin-top: 15px; margin-bottom: 20px; animation: vai-fade-in 0.3s ease; }

/* Quiz */
.vai-page .quiz-header-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: #666; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; width: 100%; }
.vai-page .progress-bar-container { width: 100%; height: 6px; background: #e0e0e0; border-radius: 3px; margin-bottom: 20px; overflow: hidden; }
.vai-page .progress-fill { height: 100%; background: var(--accent-blue); width: 0%; transition: width 0.3s ease; }
.vai-page h2.q-text { font-size: 1.3rem; color: var(--text-color); margin: 0 0 10px 0; font-weight: 700; text-align: left; }
.vai-page p.q-sub { font-size: 0.95rem; color: #777; margin: 0 0 20px 0; font-style: italic; text-align: left; }
.vai-page .options-grid { display: flex; flex-direction: column; gap: 10px; }
.vai-page .option-btn { width: 100%; padding: 12px 15px; background: white; border: 1px solid #ccc; border-radius: 6px; text-align: left; cursor: pointer; font-weight: 600; font-size: 0.9rem; color: #444; transition: all 0.2s; }
.vai-page .option-btn:hover { border-color: var(--accent-blue); background-color: #f8fdff; }
.vai-page .option-btn.selected { background-color: var(--dark-blue); color: white !important; border-color: var(--dark-blue); }
.vai-page .nav-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 25px; }

/* Lead Form */
.vai-page .form-minimal-layout { display: flex; flex-direction: column; gap: 12px; max-width: 700px; margin: 0 auto; }
.vai-page .form-row-dual { display: flex; gap: 15px; }
.vai-page .form-group { flex: 1; text-align: left; }
.vai-page .form-group label { display: block; font-size: 0.8rem; font-weight: 700; color: #555; margin-bottom: 3px; }
.vai-page .iti { width: 100%; display: block; }
.vai-page .consent-box { font-size: 0.8rem; color: #555; background: transparent; padding: 0; margin-top: 5px; margin-bottom: 10px; display: flex; align-items: flex-start; gap: 10px; text-align: left; line-height: 1.4; }
.vai-page .consent-box input { margin-top: 4px; }
.vai-page .consent-sub { display: none; font-size: 0.75rem; color: #888; margin-top: 5px; font-style: italic; }

/* Results View - ON SCREEN */
.vai-page .top-download-bar { display: flex; justify-content: flex-end; margin-bottom: 20px; }

.vai-page .results-card-style { width: 100%; margin-bottom: 30px; overflow: hidden; background: #fff; box-shadow: 0 2px 15px rgba(0,0,0,0.05); border-radius: 8px; }

.vai-page .results-header-bar { background-color: var(--dark-blue); padding: 25px 20px; border-radius: 8px 8px 0 0; color: #fff !important; text-align: center; }
.vai-page .results-header-bar h1 { font-size: 1.8rem; font-weight: 800; margin-bottom: 8px; color: white; }
.vai-page .results-header-bar p { margin: 0; font-size: 1rem; color: rgba(255,255,255,0.9); }

.vai-page .results-body { background: #fff; padding: 35px; border-radius: 0 0 8px 8px; border: 1px solid #eee; border-top: none; }

.vai-page .results-flex-container { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 40px; justify-content: center; gap: 30px; }
.vai-page .score-side { flex: 1; min-width: 180px; display: flex; justify-content: center; }
.vai-page .text-side { flex: 1.5; min-width: 250px; text-align: left; }

.vai-page .score-circle { position: relative; width: 140px; height: 140px; }
.vai-page .score-circle circle.bg { stroke: #e0e0e0; }
.vai-page .score-number { font-size: 2.8rem; font-weight: 800; color: var(--dark-blue); line-height: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.vai-page .archetype-badge { background: var(--red-color); color: white; padding: 5px 12px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; border-radius: 4px; margin-bottom: 12px; display: inline-block; }
.vai-page #archetype-title { font-weight: 800; font-size: 1.8rem; margin-bottom: 12px; color: var(--dark-blue); line-height: 1.2; }
.vai-page #archetype-desc { color: #555; font-style: italic; font-size: 1rem; margin: 0; line-height: 1.5; }

/* Timeline */
.vai-page .stage-visual { display: flex; justify-content: space-between; margin-bottom: 40px; position: relative; padding: 0 20px; max-width: 800px; margin-left: auto; margin-right: auto; }
.vai-page .stage-visual::after { content: ''; position: absolute; top: 16px; left: 40px; right: 40px; height: 3px; background: #e0e0e0; z-index: 1; }
.vai-page .stage-step { flex: 1; text-align: center; font-size: 0.7rem; color: #999; position: relative; z-index: 2; padding-top: 40px; font-weight: 600; }
.vai-page .stage-dot { width: 32px; height: 32px; background: #e0e0e0; border: 4px solid #fff; border-radius: 50%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); transition: all 0.4s; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.vai-page .stage-step.completed .stage-dot { background-color: var(--red-color); border-color: var(--red-color); }
.vai-page .stage-step.active .stage-dot { background-color: var(--red-color); border-color: var(--red-color); transform: translateX(-50%) scale(1.2); box-shadow: 0 4px 15px rgba(226, 45, 0, 0.3); }
.vai-page .stage-step.active { color: var(--red-color); font-weight: 800; }

/* Phase/Opp Cards */
.vai-page .phase-opp-container { display: flex; gap: 25px; margin-bottom: 35px; text-align: left; }
.vai-page .po-card { flex: 1; background: #fff; padding: 25px; border-radius: 8px; border: 1px solid #e0e0e0; box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
.vai-page .po-label { font-size: 0.75rem; font-weight: 800; color: #999; text-transform: uppercase; margin-bottom: 10px; display: block; letter-spacing: 0.5px; }
.vai-page .po-value { font-size: 1.1rem; font-weight: 700; color: #333333; line-height: 1.4; }

/* DYK Box */
.vai-page .did-you-know-box { background-color: #fff4f2; border-left: 5px solid var(--red-color); border-radius: 6px; padding: 20px 25px; text-align: left; }
.vai-page .dyk-title { color: var(--red-color); font-weight: 800; text-transform: uppercase; font-size: 0.85rem; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.vai-page .did-you-know-box p { margin: 0; font-size: 0.95rem; line-height: 1.5; color: #333; }

/* Book Section */
.vai-page .book-assessment-box { text-align: center; padding: 40px 30px; background: white; border: 1px solid #e0e0e0; border-radius: 12px; margin-top: 30px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); }
.vai-page .book-title { font-size: 1.4rem; font-weight: 800; color: var(--dark-blue); margin-bottom: 8px; text-align: center; }
.vai-page .book-sub { font-size: 1rem; color: #666; margin-bottom: 25px; text-align: center; }

/* Research */
.vai-page .research-container { background-color: #f4f8fb; border: 1px solid #dae1e7; border-radius: 12px; padding: 35px; margin-top: 30px; text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: 30px; }
.vai-page .research-content { flex: 1.5; }
.vai-page .research-title { font-weight: 800; color: var(--dark-blue); margin-bottom: 12px; font-size: 1.1rem; }
.vai-page .research-list { list-style: none; padding: 0; margin: 15px 0 0 0; font-size: 0.95rem; color: #555; }
.vai-page .research-list li { margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.vai-page .research-list li i { color: var(--accent-blue); font-size: 1rem; }
.vai-page .research-form { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 250px; background: white; padding: 25px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }

.vai-page .success-icon-box { text-align: center; color: green; font-size: 2.5rem; margin-bottom: 10px; }
.vai-page .success-text-box { text-align: center; color: #333; font-weight: 700; font-size: 1.1rem; }
.vai-page .success-sub-text { text-align: center; color: #666; font-size: 0.9rem; margin-top: 5px; }

.vai-page .hidden { display: none !important; }
.vai-page .fade-in { animation: vai-fade-in 0.3s ease-out; }
@keyframes vai-fade-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Modal */
.vai-page .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 99999; align-items: center; justify-content: center; }
.vai-page .modal-box { background: white; padding: 30px; border-radius: 8px; width: 90%; max-width: 400px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.vai-page .modal-title { font-size: 1.2rem; font-weight: 700; color: var(--dark-blue); margin-bottom: 10px; }
.vai-page .modal-sub { font-size: 0.9rem; color: #666; margin-bottom: 20px; }

/* Tablet and below: one column - assessment first, then the video. */
@media (max-width: 991.98px) {
    .vai-page .vai-intro { grid-template-columns: 1fr; gap: 40px; }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .vai-page .industry-grid { grid-template-columns: repeat(2, 1fr); }
    .vai-page .form-row-dual, .vai-page .phase-opp-container, .vai-page .research-container, .vai-page .results-flex-container { flex-direction: column; gap: 20px; }
    .vai-page .col-md-5, .vai-page .col-md-7, .vai-page .score-side, .vai-page .text-side { width: 100%; text-align: center; }
    .vai-page .text-side { display: flex; flex-direction: column; align-items: center; }
    .vai-page .results-body, .vai-page .po-card, .vai-page .book-assessment-box, .vai-page .research-container { padding: 25px; }
    .vai-page .stage-visual { padding: 0; }
    .vai-page .stage-step { font-size: 0.65rem; }
    .vai-page .compact-wrapper { padding: 25px 15px; }
}