/**
 * Kyndryl Consolidated Styles
 * All styles for assessment and results pages
 * Uses CSS variables loaded from styles.json
 */

/* ========================================
   FONT DECLARATIONS
   ======================================== */

@font-face {
    font-family: 'TWK Everett';
    src: url('/static/workspace_assets/kyndryl.com/fonts/TWKEverett-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* Wait for font to load */
}

@font-face {
    font-family: 'TWK Everett';
    src: url('/static/workspace_assets/kyndryl.com/fonts/TWKEverett-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TWK Everett';
    src: url('/static/workspace_assets/kyndryl.com/fonts/TWKEverett-Bold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TWK Everett';
    src: url('/static/workspace_assets/kyndryl.com/fonts/TWKEverett-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TWK Everett';
    src: url('/static/workspace_assets/kyndryl.com/fonts/TWKEverett-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* CSS Variables - These are populated from styles.json via JavaScript */
:root {
    /* Colors from styles.json */
    --kyndryl-primary: var(--primary-color, #4CDD84);
    --kyndryl-secondary: var(--secondary-color, #3D3C3C);
    
    /* Dynamic viewport calculations for proper mobile handling */
    --vh-actual: 1vh;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    
    /* Header heights */
    --header-height: 80px;
    --header-height-mobile: 60px; 
    --kyndryl-background: var(--background-color, #F2F1EE);
    --kyndryl-accent: var(--accent-color, #9E9287);
    --kyndryl-text: var(--text-color, #565049);
    --kyndryl-text-dark: var(--text-dark, #000000);
    --kyndryl-border: var(--border-color, #E0E0E0);
    --kyndryl-white: var(--white, #FFFFFF);
    
    /* Additional Kyndryl-specific colors */
    --kyndryl-dark-bg: #2C2B2B; /* Assessment/Results dark background */
    --kyndryl-light-fog: #797D81;
    --kyndryl-input-bg: #3D3C3C;
}

/* ========================================
   BASE STYLES
   ======================================== */

/* Ensure proper mobile viewport handling */
html {
    height: 100%;
}

body.kyndryl-assessment {
    margin: 0;
    padding: 0;
    /* Removed overflow-y: hidden to allow scrolling */
    /* Safe area padding for body */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.kyndryl-assessment {
    background-color: #2C2B2B !important;
    color: var(--kyndryl-white);
    font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height */
    min-height: calc(var(--vh-actual, 1vh) * 100); /* Fallback using JS calculation */
    position: relative;
}

/* Video backgrounds */
.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    filter: blur(40px);
    transition: filter 0.5s ease;
}

/* Remove blur on cover page for videos */
.kyndryl-assessment.on-cover-page .video-background {
    filter: none;
}

.video-background.desktop-video {
    display: block;
}

.video-background.mobile-video {
    display: none;
}

/* Removed desktop fallback background - using video only */

.kyndryl-results {
    background-color: #2C2B2B;
    color: var(--kyndryl-white);
    font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    min-height: 100vh;
    position: relative;
}

/* Results page background images with blur */
.kyndryl-results-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(40px);
    -webkit-filter: blur(40px);
}

.kyndryl-results-background.desktop-background {
    background-image: url('/static/workspace_assets/kyndryl.com/images/01-ai-assesment-video-poster.jpg');
    display: block;
}

.kyndryl-results-background.mobile-background {
    background-image: url('/static/workspace_assets/kyndryl.com/images/01-mbl-ai-assesment-video-poster.jpg');
    display: none;
}

/* Show mobile background on mobile devices */
@media (max-width: 768px) {
    .kyndryl-results-background.desktop-background {
        display: none;
    }
    
    .kyndryl-results-background.mobile-background {
        display: block;
    }
}

/* Ensure content is above background */
.kyndryl-results .main-content {
    position: relative;
    z-index: 1;
}

/* Mobile buttons section - ensure they're above the blur */
.mobile-buttons {
    position: relative;
    z-index: 10;
}

/* Removed static background images for results page - using video only */

/* ========================================
   LAYOUT COMPONENTS
   ======================================== */

/* Header/Logo */
#kyndryl-logo, .kyndryl-header {
    padding: 20px 20px 5px 20px;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#kyndryl-logo img, .kyndryl-header img {
    height: 35px;
    filter: brightness(0) invert(1);
}

.kyndryl-header-text {
    color: white;
    font-size: 12px;
    display: flex;
    align-items: baseline;
}

.kyndryl-header-text .ai-text {
    font-style: italic;
    font-weight: 300;
    margin-right: 4px;
}

.kyndryl-header-text .assessment-text {
    font-weight: 500;
}

/* Make logo clickable on results page */
.kyndryl-results .kyndryl-header a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    transition: opacity 0.2s ease;
}

.kyndryl-results .kyndryl-header a:hover {
    opacity: 0.8;
    cursor: pointer;
}

/* Grey line separator */
.kyndryl-grey-line {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

/* Progress Bar */
.kyndryl-progress-container {
    width: 200px;
    height: 4px;
    margin: 30px auto 30px;
    background: linear-gradient(90deg, #888888 0%, #333333 100%);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}


.kyndryl-progress-bar {
    height: 100%;
    background: var(--kyndryl-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 5%;
}

/* ========================================
   ASSESSMENT COMPONENTS
   ======================================== */

/* Assessment wrapper - constrain width */
.kyndryl-assessment .assessment-wrapper {
    max-width: 750px !important;
    padding: 0 20px;
    margin: 0 auto;
}

/* Question Card */
.kyndryl-assessment .question-card {
    background: transparent !important;
    color: var(--kyndryl-white);
    border: none !important;
    box-shadow: none !important;
    padding: 2rem;
    padding-bottom: calc(80px + var(--safe-area-bottom)); /* Space for fixed buttons + safe area */
    margin-bottom: 0;
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100dvh - var(--header-height)); /* Dynamic viewport for mobile */
    position: relative;
}

.kyndryl-assessment .question-card h5 {
    color: #FFFFFF !important;
    text-align: left !important;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.4;
    margin-bottom: 2rem !important;
}

.kyndryl-assessment .question-card h6 {
    color: #FFFFFF !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    font-size: 10px !important;
    letter-spacing: 0.5px;
}

/* Question Options Container */
.question-options {
    margin-top: 40px !important;
}

/* Score Buttons */
.kyndryl-score-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 20px 0;
    /* Reserve space to prevent jumping on mobile */
    min-height: 250px;
    justify-content: flex-start;
}

/* When buttons are compact, allow wrapping */
.kyndryl-score-buttons.compact-layout {
    flex-direction: row;
    flex-wrap: wrap;
}

.kyndryl-score-button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50px;  /* Fully rounded */
    cursor: pointer;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    transition: all 0.6s ease;
    opacity: 1;
}

/* Default style for 5 or fewer options */
.kyndryl-score-button.standard-padding {
    width: 100%;
    padding: 16px 24px;
    min-height: 56px;
}

/* Compact style for more than 5 options */
.kyndryl-score-button.compact-padding {
    width: auto;
    padding: 12px 24px;
    min-height: 48px;
}

.kyndryl-score-button:not(.active):not(.dimmed):hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--kyndryl-white);
    color: var(--kyndryl-white);
}

.kyndryl-score-button.active {
    background: #FFFFFF;
    color: #000000;
    border: 1px solid #FFFFFF;
    font-weight: 500; /* No change in weight */
    transition: all 0.3s ease; /* Faster color reversal */
}

/* Industry icons in buttons */
.button-with-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.industry-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0) invert(1); /* Make icons white */
}

.kyndryl-score-button.active .industry-icon {
    filter: brightness(0); /* Make icons black to match the text */
}

/* Phase 1: Fade out non-selected buttons */
.kyndryl-score-button.fading-out {
    opacity: 0 !important;
    transition: opacity 0.3s ease;
    animation: none !important; /* Override any animations */
}

/* Phase 3: Fade out selected button */
.kyndryl-score-button.fading-out-selected {
    opacity: 0 !important;
    transition: opacity 0.3s ease;
    animation: none !important; /* Override any animations */
}

/* Sequential button appearance - no vertical movement to prevent jumping */
.kyndryl-score-button.button-hidden {
    opacity: 0;
    transition: none !important; /* Disable transitions during animation */
    /* Remove transform to prevent layout shift */
}

.kyndryl-score-button.button-fade-in {
    animation: buttonFadeIn 0.175s ease;
    transition: none !important; /* Disable transitions during animation */
}

@keyframes buttonFadeIn {
    from {
        opacity: 0;
        /* No transform - just fade in */
    }
    to {
        opacity: 1;
    }
}

.kyndryl-score-button.dimmed {
    opacity: 0;
    pointer-events: none;
    cursor: default;
}

/* Class for sequential fade-in animation */
.kyndryl-score-button.fade-in-sequential {
    opacity: 0;
    animation: fadeInButton 0.5s ease forwards;
}

@keyframes fadeInButton {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Navigation Buttons */
.kyndryl-assessment .navigation-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: calc(20px + var(--safe-area-bottom)); /* Respect safe area */
    left: calc(2rem + var(--safe-area-left));
    right: calc(2rem + var(--safe-area-right));
    max-width: calc(768px - 4rem); /* Match question card max width minus padding */
    margin: 0 auto;
    padding: 0 !important;
    border-top: none !important;
    background: transparent;
    z-index: 10;
}

/* Override for contact form button alignment */
#kyndryl-contact-form .navigation-buttons {
    justify-content: flex-end;
}

.btn-navigation {
    min-width: 140px;
}

/* Previous button styling - text appearance like skip button */
.kyndryl-assessment button[data-action="previous"] {
    background: transparent !important;
    border: none !important;
    color: #FFFFFF !important;
    padding: 0.5rem 1rem !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
    min-width: auto !important;
    width: auto !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer;
}

.kyndryl-assessment button[data-action="previous"]:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

.kyndryl-assessment button[data-action="previous"] i {
    font-size: 12px !important;
    color: inherit !important;
    margin-right: 0.25rem !important;
}

/* Skip button styling - text-like appearance */
.kyndryl-assessment button[data-action="next"] {
    background: transparent !important;
    border: none !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    padding: 8px 0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: none !important;
}

.kyndryl-assessment button[data-action="next"]:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Skip Button Override */
.navigation-buttons button:contains("Skip") {
    background-color: transparent;
    border-color: var(--kyndryl-light-fog);
    color: var(--kyndryl-light-fog);
}

/* See my results button styling */
.navigation-buttons .btn-light {
    border-radius: 50px !important; /* Fully rounded */
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 16px 24px !important;
    background-color: var(--kyndryl-primary) !important;
    color: #000000 !important;
    border: none !important;
    transition: background-color 0.3s ease;
}

.navigation-buttons .btn-light .bi-arrow-right {
    color: inherit !important;
}

.navigation-buttons .btn-light:hover {
    background-color: #B6F1CD !important;
    color: #000000 !important;
}

.navigation-buttons .btn-light:active,
.navigation-buttons .btn-light:focus {
    background-color: #24C060 !important;
    color: #000000 !important;
}

.navigation-buttons .btn-light:disabled,
.navigation-buttons .btn-light.inactive {
    background-color: #C1BEBE !important;
    color: #666666 !important;
    cursor: not-allowed;
}

/* Contact Form */
.kyndryl-consent-section {
    margin-top: 1.5rem;
}

.kyndryl-consent-check {
    padding-left: 0;
    display: flex;
    align-items: flex-start;
}

.kyndryl-consent-check .form-check-input {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin: 0;
    margin-right: 10px;
    margin-top: 2px;
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    flex-shrink: 0;
}

.kyndryl-consent-check .form-check-input:checked {
    background-color: #4CDD84;
    border-color: #4CDD84;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-width='3' d='M6 10l3 3 6-6'/%3e%3c/svg%3e");
}

.kyndryl-consent-check .form-check-input:focus {
    border-color: #4CDD84;
    outline: 0;
    box-shadow: 0 0 0 0.1rem rgba(76, 221, 132, 0.25);
}

.kyndryl-consent-check label {
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
    margin-bottom: 0;
}

.kyndryl-consent-text {
    font-size: 12px;
    opacity: 0.8;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.kyndryl-consent-text a {
    text-decoration: underline;
    opacity: 1;
}

.kyndryl-consent-text a:hover {
    color: #4CDD84 !important;
}

/* Contact form submit button */
.kyndryl-submit-wrapper {
    margin-top: 20px;
    margin-bottom: 30px;
    text-align: left;
}

.kyndryl-submit-button {
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 16px 24px !important;
    background-color: var(--kyndryl-primary) !important;
    color: #000000 !important;
    border: none !important;
    transition: background-color 0.3s ease;
}

.kyndryl-submit-button .bi-arrow-right {
    color: inherit !important;
}

.kyndryl-submit-button:hover {
    background-color: #B6F1CD !important;
    color: #000000 !important;
}

.kyndryl-submit-button:active,
.kyndryl-submit-button:focus {
    background-color: #24C060 !important;
    color: #000000 !important;
}

.kyndryl-submit-button:disabled,
.kyndryl-submit-button.inactive {
    background-color: #C1BEBE !important;
    color: #666666 !important;
    cursor: not-allowed;
}

.kyndryl-contact-section {
    background-color: var(--kyndryl-dark-bg);
    padding: 2rem;
    border-radius: 8px;
}

.kyndryl-contact-section h2 {
    color: var(--kyndryl-white);
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.kyndryl-contact-section p {
    color: var(--kyndryl-light-fog);
    margin-bottom: 2rem;
}

/* Contact form input styles */
.kyndryl-contact-inputs {
    margin-top: 30px;
    max-width: 100%;
}

.kyndryl-input {
    width: 100%;
    padding: 12px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    font-size: 16px; /* Prevents mobile zoom on focus */
    margin-bottom: 25px;
    transition: border-color 0.3s ease;
}

.kyndryl-input:focus {
    outline: none;
    border-bottom-color: var(--kyndryl-primary);
}

.kyndryl-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Style the select dropdown to match other inputs */
select.kyndryl-input {
    color: rgba(255, 255, 255, 0.5); /* Default to placeholder color */
}

/* When a country is selected, show in white */
select.kyndryl-input.has-value {
    color: #FFFFFF;
}

/* Style all options in dropdown */
select.kyndryl-input option {
    color: #000000; /* Options in dropdown should be readable */
    background: #FFFFFF;
}

/* Style the placeholder option specifically */
select.kyndryl-input option[value=""] {
    color: #999999;
}

/* Error states for validation */
.kyndryl-input.error {
    border-bottom-color: #FF6B6B !important;
    animation: none;
}

.kyndryl-input.error:focus {
    border-bottom-color: #FF6B6B !important;
}

.kyndryl-error-message {
    color: #FF6B6B;
    font-size: 12px;
    margin-top: -20px;
    margin-bottom: 20px;
    padding-left: 0;
    animation: fadeInUp 0.3s ease-out;
}

/* Gentle shake animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
    20%, 40%, 60%, 80% { transform: translateX(3px); }
}

.kyndryl-input.shake {
    animation: shake 0.6s ease-in-out;
}

/* Fade in animation for error messages */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Remove autofill background */
.kyndryl-input:-webkit-autofill,
.kyndryl-input:-webkit-autofill:hover,
.kyndryl-input:-webkit-autofill:focus,
.kyndryl-input:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: #FFFFFF;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px transparent;
}

.kyndryl-contact-section input {
    background-color: var(--kyndryl-input-bg);
    border: 1px solid var(--kyndryl-light-fog);
    color: var(--kyndryl-white);
    padding: 0.75rem;
    width: 100%;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.kyndryl-contact-section input::placeholder {
    color: var(--kyndryl-light-fog);
}

.kyndryl-contact-section input:focus {
    outline: none;
    border-color: var(--kyndryl-primary);
    background-color: var(--kyndryl-input-bg);
}

/* Autofill styling for contact form */
#kyndryl-contact-form input:-webkit-autofill,
#kyndryl-contact-form input:-webkit-autofill:hover,
#kyndryl-contact-form input:-webkit-autofill:focus,
#kyndryl-contact-form input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* For non-webkit browsers */
#kyndryl-contact-form input:autofill {
    background-color: transparent !important;
    color: #FFFFFF !important;
}

/* Also keep for general contact section */
.kyndryl-contact-section input:-webkit-autofill,
.kyndryl-contact-section input:-webkit-autofill:hover,
.kyndryl-contact-section input:-webkit-autofill:focus,
.kyndryl-contact-section input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--kyndryl-input-bg) inset !important;
    -webkit-text-fill-color: var(--kyndryl-white) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Arrow icon in red */
.kyndryl-arrow-red {
    color: var(--kyndryl-primary) !important;
}

/* Submit Button */
.kyndryl-submit-button {
    padding: 14px 32px;
    background: var(--kyndryl-primary);
    border: none;
    border-radius: 24px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
    display: flex;
    width: fit-content;
}

.kyndryl-submit-button:hover:not(:disabled) {
    background: #E63E28;
    transform: translateY(-1px);
}

.kyndryl-submit-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========================================
   RESULTS COMPONENTS
   ======================================== */

/* Main content wrapper */
.main-content {
    display: block;
}

/* Results wrapper */
.results-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Force all text white on results page */
.kyndryl-results,
.kyndryl-results *,
.kyndryl-results h1,
.kyndryl-results h2,
.kyndryl-results h3,
.kyndryl-results h4,
.kyndryl-results h5,
.kyndryl-results h6,
.kyndryl-results p,
.kyndryl-results span,
.kyndryl-results div,
.kyndryl-results strong,
.kyndryl-results .text-muted,
.kyndryl-results .text-workspace-primary,
.kyndryl-results .benchmark-score,
.kyndryl-results .benchmark-comparison {
    color: #FFFFFF !important;
}

/* Results sections */
.results-header-section {
    padding: 40px 0 0 0;
}

.performance-overview-section {
    padding: 20px 0 0 0;
    margin-bottom: 1rem;
}

.performance-overview-section h5 {
    color: #FFFFFF;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: normal;
}

.section-spacing {
    margin-top: 4rem;
}

.section-heading {
    color: #FFFFFF;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
}

/* Donut charts */
.donut-charts-section {
    margin-top: 3rem;
}

.chart-label {
    color: #FFFFFF;
    font-size: 0.9rem;
    font-weight: normal;
}

.chart-container {
    position: relative;
    height: 200px;
}

/* Analysis chart */
.analysis-chart {
    height: 400px;
    max-width: 600px;
    margin: -20px auto 0 auto;
}

/* Legend items */
.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.legend-dot.legend-actual {
    background-color: rgba(255, 70, 45, 0.2);
    border: 2px solid var(--kyndryl-primary);
}

.legend-dot.legend-industry {
    background-color: rgba(128, 128, 128, 0.3);
    border: 2px solid #808080;
}

.legend-dot.legend-target {
    background-color: rgba(200, 200, 200, 0.3);
    border: 2px solid #CCCCCC;
}

.legend-label {
    font-size: 14px;
    color: #FFFFFF;
}

/* Progress bar sizes */
.progress-lg {
    height: 8px;
}

.progress-md {
    height: 6px;
}

.progress-sm {
    height: 6px;
}

.progress-xs {
    height: 3px;
}

/* Progress bar colors */
.progress-bar-grey {
    background-color: var(--kyndryl-primary);
}

.progress-bar-light {
    background-color: var(--kyndryl-primary);
}

.progress-bar-light-grey {
    background-color: #BBBBBB;
}

.kyndryl-results .container-fluid {
    max-width: 1200px;
    margin: 0 auto;
}

/* Results headings */
.kyndryl-results h1 {
    color: var(--kyndryl-white);
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.kyndryl-results h2 {
    color: var(--kyndryl-white);
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1.25rem;
    margin-top: 2rem;
}

/* Main results heading specific styling */
.results-main-heading {
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    margin: 0 !important;
}

/* Performance overview heading */
.performance-overview-heading {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
}

/* Benchmark score labels and values */
.kyndryl-results .your-score-label {
    font-size: 12px !important;
    line-height: 24px !important;
    font-weight: 500 !important;
    color: var(--kyndryl-primary) !important;
}

.kyndryl-results .your-score-value {
    font-size: 12px !important;
    line-height: 24px !important;
    font-weight: 500 !important;
    color: var(--kyndryl-primary) !important;
}

.industry-score-label {
    font-size: 12px !important;
    line-height: 24px !important;
    font-weight: 300 !important;
    color: #FFFFFF !important;
}

.industry-score-value {
    font-size: 12px !important;
    line-height: 24px !important;
    font-weight: 300 !important;
    color: #FFFFFF !important;
}

/* Recommendation Cards */
.recommendation-card {
    background-color: var(--kyndryl-secondary);
    padding: 1rem;
    border-radius: 8px;
    color: #FFFFFF !important;
}

.kyndryl-results .recommendation-heading {
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
    color: var(--kyndryl-primary) !important;
}

.recommendation-text {
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 400 !important;
    color: #FFFFFF !important;
}

/* Text primary override for Kyndryl */
.text-primary {
    color: var(--kyndryl-primary) !important;
}

/* Benchmark Cards */
.benchmark-card {
    background-color: var(--kyndryl-secondary);
    border: 1px solid var(--kyndryl-light-fog);
    padding: 1.25rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.benchmark-metric {
    color: var(--kyndryl-white);
    font-size: 2rem;
    font-weight: 600;
}

.benchmark-label {
    color: var(--kyndryl-light-fog);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* Dimension Cards */
.dimension-card {
    background-color: var(--kyndryl-secondary);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.dimension-score {
    color: var(--kyndryl-primary);
    font-weight: 600;
}

/* Action Buttons */
.btn-kyndryl-primary {
    background-color: var(--kyndryl-primary);
    border: none;
    color: var(--kyndryl-white);
    padding: 0.625rem 1.5rem;
    font-weight: 400;
}

.btn-kyndryl-primary:hover {
    background-color: #e63919;
    color: var(--kyndryl-white);
}

.btn-kyndryl-outline {
    background-color: transparent;
    border: 1px solid var(--kyndryl-white);
    color: var(--kyndryl-white);
    padding: 12px 24px;
    font-weight: 400;
    font-size: 12px;
    border-radius: 50px;
}

/* Mobile: stretch full width */
@media (max-width: 767px) {
    .btn-kyndryl-outline {
        width: 100%;
    }
}

.btn-kyndryl-outline:hover {
    background-color: var(--kyndryl-white);
    color: #3D3C3C !important; /* Dark Stone from styles.json */
}

/* ========================================
   CONSULTATION THANK YOU SCREEN
   ======================================== */

.consultation-images-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.consultation-image-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    display: block;
    text-decoration: none;
}

a.consultation-image-item:hover {
    text-decoration: none;
    transform: scale(1.02);
    transition: transform 0.2s ease;
}

.consultation-image-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    background-color: #2D2D2D; /* Fallback if image doesn't load */
}

.image-overlay-text {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    color: white;
    font-size: 12px;
    line-height: 14px;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* Mobile: 2x2 grid */
@media (max-width: 768px) {
    .consultation-images-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

/* ========================================
   CONTACT FORM SPECIFIC
   ======================================== */

#kyndryl-contact-form {
    animation: fadeIn 0.8s ease-out;
    max-width: 100%;
}

#kyndryl-contact-form .navigation-buttons {
    border-top: none !important;
}

/* ========================================
   DIMENSION PAGE SPECIFIC
   ======================================== */

/* Page visibility controls - CRITICAL FOR HIDING PAGES */
.dimension-page {
    display: none !important;
}

.dimension-page.active {
    display: block !important;
}

.kyndryl-assessment .dimension-page {
    max-width: 100%;
    margin: 0;
    padding-top: 0;
}

/* ========================================
   QUESTION STYLING
   ======================================== */

.question-card h5 {
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    color: white !important;
}

/* ========================================
   COVER PAGE SPECIFIC
   ======================================== */

.cover-page {
    min-height: 70vh;
    min-height: 70dvh; /* Use dynamic viewport height for better mobile support */
}

/* Ensure cover page button container respects safe areas */
.cover-page .question-card {
    padding-bottom: calc(1rem + var(--safe-area-bottom));
}

/* Mobile adjustments for cover page */
@media (max-width: 768px) {
    /* Switch video backgrounds for mobile */
    .video-background.desktop-video {
        display: none;
    }
    
    .video-background.mobile-video {
        display: block;
        filter: blur(40px);
    }
    
    /* No blur for videos on cover page */
    .kyndryl-assessment.on-cover-page .video-background.mobile-video {
        filter: none;
    }
    
    /* Hide the static background image overlay on mobile - we're using video instead */
    .kyndryl-assessment::before {
        display: none; /* Hide static background, let video show through */
    }
    
    .cover-page {
        /* Use full viewport minus header and safe areas */
        min-height: calc(100vh - var(--header-height-mobile));
        min-height: calc(100dvh - var(--header-height-mobile));
    }
    
    .cover-page .question-card {
        /* Add extra padding for mobile browser chrome and safe areas */
        padding-bottom: calc(2rem + var(--safe-area-bottom)) !important;
    }
}

.cover-heading {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 36px !important;
}

/* Desktop specific heading styles */
@media (min-width: 769px) {
    .cover-heading {
        font-size: 40px !important;
        font-weight: 700 !important;
        line-height: 42px !important;
        max-width: 437px !important;
    }
}

.cover-subhead {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
}

/* Desktop specific subheading styles */
@media (min-width: 769px) {
    .cover-subhead {
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 24px !important;
        max-width: 386px !important;
    }
}

.cover-placeholder {
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
}

/* Front page images container */
.front-page-images {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    align-items: center;
    justify-content: flex-start;
}

.front-page-images .front-image {
    height: 100px;
    width: auto;
    object-fit: contain;
}

/* For short mobile screens - ensure minimum gap between images and button */
@media (max-width: 768px) and (max-height: 685px) {
    .front-page-images {
        margin-bottom: 2rem; /* Ensure minimum gap */
    }
    
    /* Make the cover page scrollable if needed */
    .cover-page.question-card {
        min-height: auto !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-start !important;
        overflow-y: auto;
        padding-top: 1rem !important;
    }
    
    /* Reduce image heights on very short screens */
    .front-page-images .front-image {
        height: 70px;
    }
    
    /* Reduce some spacing to fit content */
    .cover-heading {
        margin-bottom: 0.5rem !important;
    }
    
    .cover-subhead {
        margin-bottom: 1rem !important;
    }
    
    /* Push the button down a bit more */
    .cover-page.question-card > div:last-child {
        margin-top: auto !important;
        padding-top: 2rem !important;
    }
}

/* Start Assessment Button */
.start-assessment-btn {
    font-size: 14px;
    font-weight: 500;
    padding: 16px;
    width: 100%;
    background-color: var(--kyndryl-primary) !important;
    border-color: var(--kyndryl-primary) !important;
    color: #000000 !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.start-assessment-btn:hover {
    background-color: #B6F1CD !important;
    border-color: #B6F1CD !important;
    color: #000000 !important;
}

.start-assessment-btn:active,
.start-assessment-btn:focus {
    background-color: #24C060 !important;
    border-color: #24C060 !important;
    color: #000000 !important;
}

.start-assessment-btn:disabled,
.start-assessment-btn.inactive {
    background-color: #C1BEBE !important;
    border-color: #C1BEBE !important;
    color: #666666 !important;
    cursor: not-allowed;
}

/* Book Consultation Button - same styles as Start Assessment */
.book-consultation-btn,
.download-report-btn {
    font-size: 12px;
    font-weight: 500;
    padding: 16px;
    width: 100%;
    background-color: var(--kyndryl-primary) !important;
    border-color: var(--kyndryl-primary) !important;
    color: #000000 !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.book-consultation-btn .bi-arrow-right,
.download-report-btn .bi-download {
    color: #000000 !important;
}

.book-consultation-btn:hover,
.download-report-btn:hover {
    background-color: #B6F1CD !important;
    border-color: #B6F1CD !important;
    color: #000000 !important;
}

.book-consultation-btn:active,
.book-consultation-btn:focus,
.download-report-btn:active,
.download-report-btn:focus {
    background-color: #24C060 !important;
    border-color: #24C060 !important;
    color: #000000 !important;
}

.book-consultation-btn:disabled,
.book-consultation-btn.inactive,
.download-report-btn:disabled,
.download-report-btn.inactive {
    background-color: #C1BEBE !important;
    border-color: #C1BEBE !important;
    color: #666666 !important;
    cursor: not-allowed;
}

/* Desktop specific button styles */
@media (min-width: 769px) {
    /* Add white line under header */
    .kyndryl-header {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .start-assessment-btn {
        width: auto;
        padding: 12px 24px;
    }
    
    .book-consultation-btn,
    .download-report-btn {
        width: auto;
        padding: 12px 24px;
    }
    
    /* Override the justify-content-between to move button up */
    .cover-page.question-card {
        justify-content: flex-start !important;
        padding-top: 100px !important;
    }
    
    /* Position button closer to content */
    .cover-page.question-card > div:last-child {
        margin-top: 2rem !important;
        padding-bottom: 0 !important;
    }
    
    /* Remove first div's extra margin */
    .cover-page.question-card > div:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Adjust placeholder spacing */
    .cover-placeholder {
        margin-top: 2rem !important;
        padding-top: 0 !important;
    }
    
}

.cover-red-line {
    width: 400px !important;
    height: 3px !important;
    background-color: var(--kyndryl-primary) !important;
    background: var(--kyndryl-primary) !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-height: 3px !important;
}

/* ========================================
   UTILITIES
   ======================================== */

/* Progress bar is now dynamically inserted by JS, no need to hide */

/* Text utilities */
.text-kyndryl-primary {
    color: var(--kyndryl-primary) !important;
}

.text-kyndryl-light {
    color: var(--kyndryl-light-fog) !important;
}

.text-kyndryl-accent {
    color: var(--kyndryl-accent) !important;
}

/* Spinner */
.spinner-border {
    width: 3rem;
    height: 3rem;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */

.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.loading-overlay.show {
    display: flex;
}

/* ========================================
   RADAR CHART MOBILE
   ======================================== */

.radar-section {
    padding: 0 20px;
}

@media (max-width: 768px) {
    .radar-section {
        padding: 0 10px;
    }
    
    .radar-legend {
        margin-bottom: 10px !important;
    }
    
    .analysis-chart {
        max-width: 100% !important;
        margin: -60px 0 0 0 !important;
    }
    
    .radar-section .legend-mobile {
        gap: 15px;
    }
}

/* ========================================
   CUSTOM PROGRESS BARS
   ======================================== */

.custom-orange-progress {
    background-color: var(--kyndryl-primary);
}

.kyndryl-results .custom-orange-progress {
    background-color: var(--kyndryl-primary) !important;
}

.text-workspace-primary {
    color: #FFFFFF !important;
}

.badge-orange {
    background-color: #3D3C3C;
    color: white;
}

.progress {
    background-color: #e9ecef;
    border-radius: 0.25rem;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    transition: width 0.6s ease;
}

.benchmark-progress-bar {
    margin-bottom: 0.5rem;
}

/* ========================================
   DESKTOP BUTTON ALIGNMENT
   ======================================== */

.desktop-buttons {
    margin-top: -5px;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .kyndryl-header {
        padding: 1rem;
    }
    
    .kyndryl-header img {
        height: 30px;
    }
    
    .kyndryl-header-text {
        font-size: 11px;
    }
    
    .kyndryl-assessment .question-card {
        padding: 1.5rem 0.75rem !important;
    }
    
    
    .kyndryl-industry-buttons {
        grid-template-columns: 1fr;
    }
    
    .kyndryl-contact-section {
        padding: 1.5rem;
    }
    
    .kyndryl-assessment .navigation-buttons {
        left: calc(1rem + var(--safe-area-left));
        right: calc(1rem + var(--safe-area-right));
        bottom: calc(1rem + var(--safe-area-bottom));
        max-width: calc(100% - 2rem - var(--safe-area-left) - var(--safe-area-right));
    }
    
    /* Mobile-specific cover page styles */
    .cover-red-line {
        width: 200px !important;
    }
    
    .cover-subhead {
        font-weight: 300 !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
    
    .kyndryl-assessment .assessment-wrapper {
        padding: 0 12px;
    }
    
    .kyndryl-contact-section {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .kyndryl-results h1 {
        font-size: 1.5rem;
    }
    
    .kyndryl-results h2 {
        font-size: 1.25rem;
    }
}