/*
 * Common V2 Styles - Using Ebury Design System Tokens
 * Design System: https://design-system-stylesheet.web.ebury.rocks/v1.15.3/styles/styles.css
 * This file maps design system tokens to v2 variables for compatibility
 */

/* ============================================
   CSS Variables - Mapped to Design System - Light Mode
   ============================================ */
:root {
    /* Font Weights - Custom (not in design system) */
    --v2-font-weight-normal: 400;
    --v2-font-weight-medium: 500;

    /* Sizes - Custom (not in design system) */
    --v2-size-081: calc(var(--eds-base-size) * 0.81);  /* ~13px */
    --v2-size-137: calc(var(--eds-base-size) * 1.37);  /* ~22px */

    /* Colors - Mapped from Design System */
    --v2-bg-body: var(--eds-page-bg-default);
    --v2-bg-visual-section: var(--eds-black-100);
    --v2-color-text-primary: var(--eds-text-primary);
    --v2-color-text-secondary: var(--eds-text-secondary);
    --v2-color-text-tertiary: var(--eds-text-tertiary);
    --v2-color-text-placeholder: var(--eds-control-_text-placeholder);
    --v2-color-border-default: var(--eds-control-secondary-stroke-rest);
    --v2-color-border-hover: var(--eds-control-secondary-stroke-hover);
    --v2-color-border-focus: var(--eds-control-_focused-stroke);
    --v2-bg-input: var(--eds-control-primary-background-rest);
    --v2-bg-input-hover: var(--eds-control-primary-background-hover);
    --v2-bg-input-focus: var(--eds-control-primary-background-focused);
    --v2-bg-button-primary: var(--eds-control-action-background-rest);
    --v2-bg-button-primary-hover: var(--eds-control-action-background-hover);
    --v2-color-button-primary: var(--eds-control-_text-white);
    --v2-color-link: var(--eds-text-primary);
    --v2-color-link-hover: var(--eds-grey-700);
    --v2-color-error: var(--eds-control-_error-stroke);
    --v2-bg-toggle-button: transparent;
    --v2-bg-toggle-button-hover: var(--eds-control-secondary-background-hover);
    --v2-shadow-button: rgba(0, 0, 0, 0.15);
    --v2-shadow-focus: var(--eds-control-_focused-stroke);
    --v2-box-shadow: var(--eds-box-shadow-default);

    /* Spacing - Mapped from Design System */
    --v2-spacing-section: var(--eds-space-300) var(--eds-space-200);
    --v2-spacing-form-gap: var(--eds-space-125);
    --v2-spacing-input-padding: var(--eds-space-075) var(--eds-space-087);
    --v2-border-radius-input: var(--eds-border-radius-medium);
    --v2-border-radius-button: var(--eds-border-radius-medium);
    --v2-border-radius-visual: var(--eds-space-200);

    /* Typography - Using Design System sizing tokens */
    --v2-font-size-brand: var(--eds-size-200); /* 32px = 2 * 16px */
    --v2-font-size-heading: var(--eds-size-225); /* 36px = 2.25 * 16px */
    --v2-font-size-label: var(--eds-size-087); /* ~14px = 0.87 * 16px (close to 13px) */
    --v2-font-size-input: var(--eds-size-100); /* 16px = 1 * 16px */
    --v2-font-size-link: var(--eds-size-087); /* ~14px = 0.87 * 16px */

    /* Animation - Not in design system */
    --v2-animation-duration: 6s;
    --v2-animation-distance: -30px;
    --v2-transition-speed: 0.3s;

    /* 3D Graphic - Not in design system */
    --v2-graphic-size: 700px;
    --v2-graphic-shadow: drop-shadow(0 50px 100px rgba(255, 255, 255, 0.15));
}

/* ============================================
   CSS Variables - Dark Mode (Override Design System)
   ============================================ */
body:has(#kc-login-form-section.dark),
body:has(#kc-otp-form-section.dark),
body:has(#kc-error-container-v2.dark),
body:has(#kc-info-form-section.dark),
body:has(#kc-password-recovery-form-section.dark),
body:has(#kc-update-password-form-section.dark),
html.dark-mode-loading body {
    /* Override v2 variables for dark mode */
    --v2-bg-body: #1a1a1a;
    --v2-color-text-primary: var(--eds-white-100);
    --v2-color-text-secondary: var(--eds-grey-200);
    --v2-color-text-tertiary: var(--eds-grey-500);
    --v2-color-border-default: var(--eds-grey-700);
    --v2-color-border-hover: var(--eds-grey-600);
    --v2-color-border-focus: var(--eds-grey-600);
    --v2-bg-input: var(--eds-grey-900);
    --v2-bg-input-hover: var(--eds-grey-800);
    --v2-bg-input-focus: var(--eds-grey-800);
    --v2-bg-button-primary: var(--eds-grey-800);
    --v2-bg-button-primary-hover: var(--eds-grey-700);
    --v2-color-button-primary: var(--eds-white-100);
    --v2-color-link: var(--eds-grey-200);
    --v2-color-link-hover: var(--eds-white-100);
    --v2-bg-toggle-button-hover: #333333;
    --v2-shadow-focus: rgba(255, 255, 255, 0.1);
}

/* ============================================
   Base & Reset - Override PatternFly
   ============================================ */
html:has(#kc-login-container-v2),
html:has(#kc-otp-container-v2),
html:has(#kc-error-container-v2),
html:has(#kc-info-container-v2),
html:has(#kc-password-recovery-container-v2),
html:has(#kc-update-password-container-v2),
body:has(#kc-login-container-v2),
body:has(#kc-otp-container-v2),
body:has(#kc-error-container-v2),
body:has(#kc-info-container-v2),
body:has(#kc-password-recovery-container-v2),
body:has(#kc-update-password-container-v2) {
    height: 100% !important;
    overflow: hidden !important;
}

body:has(#kc-login-container-v2),
body:has(#kc-otp-container-v2),
body:has(#kc-error-container-v2),
body:has(#kc-info-container-v2),
body:has(#kc-password-recovery-container-v2),
body:has(#kc-update-password-container-v2) {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-optical-sizing: auto;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'ss01' on, 'ss02' on, 'cv11' on;
    background: var(--v2-bg-body) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
    color: var(--v2-color-text-primary);
}

/* Override PatternFly wrapper constraints */
body:has(#kc-login-container-v2) .login-pf-page,
body:has(#kc-otp-container-v2) .login-pf-page,
body:has(#kc-error-container-v2) .login-pf-page,
body:has(#kc-info-container-v2) .login-pf-page,
body:has(#kc-password-recovery-container-v2) .login-pf-page,
body:has(#kc-update-password-container-v2) .login-pf-page {
    background: transparent !important;
    padding: 0 !important;
}

body:has(#kc-login-container-v2) .card-pf,
body:has(#kc-otp-container-v2) .card-pf,
body:has(#kc-error-container-v2) .card-pf,
body:has(#kc-info-container-v2) .card-pf,
body:has(#kc-password-recovery-container-v2) .card-pf,
body:has(#kc-update-password-container-v2) .card-pf {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

body:has(#kc-login-container-v2) #kc-content,
body:has(#kc-login-container-v2) #kc-content-wrapper,
body:has(#kc-otp-container-v2) #kc-content,
body:has(#kc-otp-container-v2) #kc-content-wrapper,
body:has(#kc-error-container-v2) #kc-content,
body:has(#kc-error-container-v2) #kc-content-wrapper,
body:has(#kc-info-container-v2) #kc-content,
body:has(#kc-info-container-v2) #kc-content-wrapper,
body:has(#kc-password-recovery-container-v2) #kc-content,
body:has(#kc-password-recovery-container-v2) #kc-content-wrapper,
body:has(#kc-update-password-container-v2) #kc-content,
body:has(#kc-update-password-container-v2) #kc-content-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

body:has(#kc-login-container-v2) .login-pf,
body:has(#kc-login-container-v2) .login-pf body,
body:has(#kc-login-container-v2) .login-pf-page-header,
body:has(#kc-login-container-v2) .card-pf-view,
body:has(#kc-otp-container-v2) .login-pf,
body:has(#kc-login-container-v2) .login-pf,
body:has(#kc-login-container-v2) .login-pf body,
body:has(#kc-login-container-v2) .login-pf-page-header,
body:has(#kc-login-container-v2) .card-pf-view,
body:has(#kc-otp-container-v2) .login-pf,
body:has(#kc-otp-container-v2) .login-pf body,
body:has(#kc-otp-container-v2) .login-pf-page-header,
body:has(#kc-otp-container-v2) .card-pf-view,
body:has(#kc-error-container-v2) .login-pf,
body:has(#kc-error-container-v2) .login-pf body,
body:has(#kc-error-container-v2) .login-pf-page-header,
body:has(#kc-error-container-v2) .card-pf-view,
body:has(#kc-info-container-v2) .login-pf,
body:has(#kc-info-container-v2) .login-pf body,
body:has(#kc-info-container-v2) .login-pf-page-header,
body:has(#kc-info-container-v2) .card-pf-view,
body:has(#kc-password-recovery-container-v2) .login-pf,
body:has(#kc-password-recovery-container-v2) .login-pf body,
body:has(#kc-password-recovery-container-v2) .login-pf-page-header,
body:has(#kc-password-recovery-container-v2) .card-pf-view,
body:has(#kc-update-password-container-v2) .login-pf,
body:has(#kc-update-password-container-v2) .login-pf body,
body:has(#kc-update-password-container-v2) .login-pf-page-header,
body:has(#kc-update-password-container-v2) .card-pf-view {
    all: unset !important;
    display: block !important;
}

/* ============================================
   Main Container Layout
   ============================================ */
#kc-login-container-v2,
#kc-otp-container-v2,
#kc-error-container-v2,
#kc-info-container-v2,
#kc-password-recovery-container-v2,
#kc-update-password-container-v2 {
    display: flex;
    min-height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: var(--eds-space-050);  /* 8px */
}

/* ============================================
   Left Section - Form
   ============================================ */
#kc-login-form-section,
#kc-otp-form-section,
#kc-error-form-section,
#kc-info-form-section,
#kc-password-recovery-form-section,
#kc-update-password-form-section {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--v2-spacing-section);
    position: relative;
    background-color: var(--v2-bg-body);
}

#kc-login-form-inner,
#kc-otp-form-inner,
#kc-error-form-inner,
#kc-info-form-inner,
#kc-password-recovery-form-inner,
#kc-update-password-form-inner {
    width: 100%;
    max-width: 375px;
    padding: 0 var(--eds-space-100);  /* 16px */
}

/* ============================================
   Right Section - Visual/Branding
   ============================================ */
#kc-login-visual-section,
#kc-otp-visual-section,
#kc-error-visual-section,
#kc-info-visual-section,
#kc-password-recovery-visual-section,
#kc-update-password-visual-section {
    flex: 0 0 50%;
    background: #231F20;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-border-radius-visual);
    margin: 0;
    isolation: isolate;
}

/* ============================================
   3D Graphic - Animated Object
   ============================================ */
.kc-3d-graphic {
    position: relative;
    width: var(--v2-graphic-size);
    height: var(--v2-graphic-size);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kc-3d-graphic video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes simpleFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(var(--v2-animation-distance));
    }
}

/* ============================================
   Theme Toggle Button
   ============================================ */
#theme-toggle-v2,
#theme-toggle-error-v2 {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: var(--v2-bg-toggle-button);
    border: 1px solid var(--v2-color-border-default);
    border-radius: var(--v2-border-radius-button);
    padding: var(--eds-space-050);  /* 8px */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--v2-color-text-secondary);
    transition: all var(--v2-transition-speed) ease;
    z-index: 10;
    display: none; /* TODO: Remove this after platform supports dark mode. */
}

#theme-toggle-v2:hover,
#theme-toggle-error-v2:hover {
    background: var(--v2-bg-toggle-button-hover);
    border-color: var(--v2-color-border-hover);
    color: var(--v2-color-text-primary);
}

#theme-toggle-v2 .moon-icon,
#theme-toggle-error-v2 .moon-icon {
    display: none;
}

#kc-login-form-section.dark #theme-toggle-v2 .sun-icon,
#kc-otp-form-section.dark #theme-toggle-v2 .sun-icon,
#kc-error-container-v2.dark #theme-toggle-error-v2 .sun-icon,
#kc-info-form-section.dark #theme-toggle-v2 .sun-icon,
#kc-password-recovery-form-section.dark #theme-toggle-v2 .sun-icon,
#kc-update-password-form-section.dark #theme-toggle-v2 .sun-icon {
    display: none;
}

#kc-login-form-section.dark #theme-toggle-v2 .moon-icon,
#kc-otp-form-section.dark #theme-toggle-v2 .moon-icon,
#kc-error-container-v2.dark #theme-toggle-error-v2 .moon-icon,
#kc-info-form-section.dark #theme-toggle-v2 .moon-icon,
#kc-password-recovery-form-section.dark #theme-toggle-v2 .moon-icon,
#kc-update-password-form-section.dark #theme-toggle-v2 .moon-icon {
    display: block;
}

/* ============================================
   Brand/Logo & Headings
   ============================================ */
.kc-brand-v2,
.kc-otp-brand-v2,
.kc-error-brand-v2 {
    margin-bottom: 0.5rem;
}

.kc-logo-v2 {
    height: 30px;
    width: auto;
    display: block;
    transition: filter var(--v2-transition-speed) ease;
}

/* Dark mode: invert logo colors for better visibility */
#kc-login-form-section.dark .kc-logo-v2,
#kc-otp-form-section.dark .kc-logo-v2,
#kc-error-form-section.dark .kc-logo-v2,
#kc-info-form-section.dark .kc-logo-v2,
#kc-password-recovery-form-section.dark .kc-logo-v2,
#kc-update-password-form-section.dark .kc-logo-v2 {
    filter: invert(1) brightness(1.2);
}

/* If using text instead of logo */
.kc-brand-v2 h1,
.kc-otp-brand-v2 h1,
.kc-error-brand-v2 h1 {
    font-size: var(--v2-font-size-brand);
    font-weight: var(--v2-font-weight-normal);
    color: var(--v2-color-text-primary);
    margin: 0;
    letter-spacing: -0.5px;
    transition: color var(--v2-transition-speed) ease;
}

.kc-info-header-v2 {
    margin-left: var(--eds-space-063); /* ~10px */
}

.kc-password-recovery-header-v2 h1,
.kc-info-header-v2 h1 {
    font-size: var(--v2-font-size-heading);
    font-weight: var(--v2-font-weight-medium);
    color: var(--v2-color-text-primary);
    margin: 0 0 0.5rem 0;
    width: 50%;
    transition: color 0.3s ease;
    line-height: 1.1;
}

.kc-info-subtext-v2 {
    font-size: var(--eds-size-087); /* ~14px */
    color: var(--v2-color-text-secondary);
    margin: 0;
    line-height: 1.5;
    margin-left: var(--eds-space-063); /* ~10px */
}

/* ============================================
   Forms
   ============================================ */
.kc-form-v2 {
    display: flex;
    flex-direction: column;
    gap: var(--v2-spacing-form-gap);
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* Smooth transition for form toggles and page loads */
#login-form-v2,
#password-recovery-form-v2,
#kc-login-form-inner,
#kc-otp-form-inner,
#kc-password-recovery-form-inner,
#kc-update-password-form-inner,
#kc-error-wrapper-v2 {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Input Groups
   ============================================ */
.kc-input-group-v2 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ============================================
   Labels
   ============================================ */
.kc-input-label-v2 {
    font-size: var(--v2-font-size-label);
    font-weight: var(--v2-font-weight-normal);
    color: var(--v2-color-text-secondary);
    margin: 0;
    padding: 0;
    transition: color var(--v2-transition-speed) ease;
}

/* ============================================
   Text Inputs
   ============================================ */
.kc-text-input-v2 {
    width: 100%;
    padding: var(--v2-spacing-input-padding);
    font-size: var(--v2-font-size-input);
    font-weight: var(--v2-font-weight-normal);
    border: 1px solid var(--v2-color-border-default);
    border-radius: var(--v2-border-radius-input);
    background: var(--v2-bg-input);
    color: var(--v2-color-text-primary);
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.kc-text-input-v2:hover:not(:focus):not([aria-invalid="true"]) {
    background: var(--v2-bg-input-hover);
    border-color: var(--v2-color-border-hover);
}

.kc-text-input-v2:focus {
    outline: 1px solid var(--eds-control-primary-stroke-focused);
    background: var(--v2-bg-input-focus);
    border-color: transparent;
}

.kc-text-input-v2::placeholder {
    color: var(--v2-color-text-placeholder);
    opacity: 1;
}

.kc-text-input-v2[aria-invalid="true"] {
    outline: 2px solid var(--v2-color-error);
    outline-offset: -1px;
    border-color: transparent;
}

/* ============================================
   Password Wrapper
   ============================================ */
.kc-password-wrapper-v2 {
    position: relative;
    display: flex;
    align-items: center;
}

.kc-password-toggle-v2 {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--eds-space-037);  /* ~6px */
    color: var(--v2-color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--v2-transition-speed) ease;
    border-radius: var(--eds-border-radius-small);
}

.kc-password-toggle-v2:hover {
    color: var(--v2-color-text-primary);
    background: rgba(0, 0, 0, 0.04);
}

#kc-login-form-section.dark .kc-password-toggle-v2:hover,
#kc-otp-form-section.dark .kc-password-toggle-v2:hover,
#kc-info-form-section.dark .kc-password-toggle-v2:hover,
#kc-password-recovery-form-section.dark .kc-password-toggle-v2:hover,
#kc-update-password-form-section.dark .kc-password-toggle-v2:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Autofilled inputs get a light background from browser, so we need dark icons */
/* This applies to all password fields: login, update password, etc. */
.kc-text-input-v2:-webkit-autofill ~ .kc-password-toggle-v2,
.kc-text-input-v2:-webkit-autofill:hover ~ .kc-password-toggle-v2,
.kc-text-input-v2:-webkit-autofill:focus ~ .kc-password-toggle-v2,
.kc-text-input-v2:-webkit-autofill:active ~ .kc-password-toggle-v2 {
    color: var(--eds-grey-700) !important; /* Dark icon for light autofill background */
}

.kc-text-input-v2:-webkit-autofill ~ .kc-password-toggle-v2:hover {
    color: var(--eds-grey-900) !important;
    background: rgba(0, 0, 0, 0.04);
}

.kc-text-input-v2:-moz-autofill ~ .kc-password-toggle-v2 {
    color: var(--eds-grey-700) !important;
}

.kc-text-input-v2:-moz-autofill ~ .kc-password-toggle-v2:hover {
    color: var(--eds-grey-900) !important;
    background: rgba(0, 0, 0, 0.04);
}

.kc-password-toggle-v2 i {
    font-size: 16px;
}

/* ============================================
   Error Messages
   ============================================ */
.kc-error-message-v2 {
    font-size: var(--v2-font-size-label);
    margin-top: 0.25rem;
    display: block;
    font-weight: var(--v2-font-weight-normal);
    color: var(--v2-color-error);
}

/* ============================================
   Submit Button
   ============================================ */
.kc-submit-wrapper-v2 {
    margin-top: 0rem;
}

.kc-submit-button-v2 {
    width: auto;
    padding: var(--eds-space-050) var(--eds-space-100);  /* 8px 16px */
    font-size: var(--v2-font-size-input);
    font-weight: var(--v2-font-weight-medium);
    color: var(--eds-control-_text-white);
    background: var(--eds-brand-1000);
    border: none;
    border-radius: var(--v2-border-radius-button);
    cursor: pointer;
    transition: all 0.2s ease;
}

.kc-submit-button-v2:hover {
    background: var(--eds-control-brand-background-hover);
}

.kc-submit-button-v2:disabled {
    background: var(--eds-brand-1000);
    color: var(--eds-control-_text-white);
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.kc-submit-button-v2:disabled:hover {
    background: var(--eds-brand-1000);
    transform: none;
    box-shadow: none;
}

/* Loading State */
.kc-submit-button-v2.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.kc-submit-button-v2.loading::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    top: 50%;
    left: 50%;
    margin-left: -9px;
    margin-top: -9px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #FFFFFF;
    animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   Action Links
   ============================================ */
.kc-links-v2 {
    display: flex;
    flex-direction: column;
}

.kc-action-link-v2 {
    font-size: var(--v2-font-size-link);
    font-weight: var(--v2-font-weight-normal);
    color: var(--v2-color-link);
    text-decoration: none;
    padding: var(--eds-space-037) 0;  /* ~6px ~10px */
    border-radius: var(--eds-border-radius-medium);
    display: inline-block;
    align-self: flex-start;
    transition: all var(--v2-transition-speed) ease;
}

.kc-action-link-v2:hover {
    color: var(--v2-color-link);
    text-decoration: underline;
}

/* ============================================
   Common Action Buttons (for error, info pages)
   ============================================ */
.kc-action-button-v2 {
    display: inline-flex;
    align-items: center;
    gap: var(--eds-space-075);
    padding: var(--eds-space-087) var(--eds-space-150);
    font-size: var(--eds-size-100);
    font-weight: var(--v2-font-weight-medium);
    color: var(--v2-color-text-primary);
    background: var(--v2-bg-input);
    border: 1px solid var(--v2-color-border-default);
    border-radius: var(--v2-border-radius-button);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kc-action-button-v2:hover {
    background: var(--v2-bg-input-hover);
    border-color: var(--v2-color-border-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    color: var(--v2-color-text-primary);
    text-decoration: none;
}

.kc-action-button-v2:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.kc-action-button-v2 svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ============================================
   Common Icons (status, success, error)
   ============================================ */
.kc-status-icon-v2 {
    width: 80px;
    height: 80px;
    margin-bottom: var(--eds-space-200);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kc-status-icon-v2 svg {
    width: 100%;
    height: 100%;
}

.kc-status-icon-v2.success svg {
    stroke: #22c55e;
    animation: checkmarkPop 0.5s ease;
}

.kc-status-icon-v2.error svg {
    stroke: #DC2626;
    transition: stroke var(--v2-transition-speed) ease;
}

.dark .kc-status-icon-v2.error svg {
    stroke: #FF6B6B;
}

@keyframes checkmarkPop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ============================================
   Common Status Messages
   ============================================ */
.kc-status-title-v2 {
    font-size: var(--eds-size-175);
    font-weight: var(--eds-font-weight-semibold);
    color: var(--v2-color-text-primary);
    margin: 0 0 var(--eds-space-125) 0;
    transition: color 0.3s ease;
}

.kc-status-message-v2 {
    font-size: var(--eds-size-100);
    color: var(--v2-color-text-secondary);
    margin: 0 0 var(--eds-space-250) 0;
    line-height: 1.6;
    transition: color 0.3s ease;
}

/* ============================================
   Responsive Breakpoints
   ============================================ */
@media (max-width: 1400px) {
    .kc-3d-graphic {
        width: 600px;
        height: 600px;
    }
}

@media (max-width: 1200px) {
    #kc-login-visual-section,
    #kc-otp-visual-section,
    #kc-error-visual-section,
    #kc-info-visual-section,
    #kc-password-recovery-visual-section,
    #kc-update-password-visual-section {
        border-radius: 24px 0 0 24px;
    }

    .kc-3d-graphic {
        width: 500px;
        height: 500px;
    }
}

@media (max-width: 1024px) {
    #kc-login-visual-section,
    #kc-otp-visual-section,
    #kc-error-visual-section,
    #kc-info-visual-section,
    #kc-password-recovery-visual-section,
    #kc-update-password-visual-section {
        border-radius: 20px 0 0 20px;
    }

    .kc-3d-graphic {
        width: 450px;
        height: 450px;
    }
}

@media (max-width: 768px) {
    #kc-login-container-v2,
    #kc-otp-container-v2,
    #kc-error-container-v2,
    #kc-info-container-v2,
    #kc-password-recovery-container-v2,
    #kc-update-password-container-v2 {
        flex-direction: column;
    }

    #kc-login-form-section,
    #kc-otp-form-section,
    #kc-error-form-section,
    #kc-info-form-section,
    #kc-password-recovery-form-section,
    #kc-update-password-form-section {
        flex: 1;
        padding: var(--eds-space-200) var(--eds-space-150);  /* 32px 24px */
    }

    #kc-login-visual-section,
    #kc-otp-visual-section,
    #kc-error-visual-section,
    #kc-info-visual-section,
    #kc-password-recovery-visual-section,
    #kc-update-password-visual-section {
        display: none;
    }

    #kc-login-form-inner,
    #kc-otp-form-inner,
    #kc-error-form-inner,
    #kc-info-form-inner,
    #kc-password-recovery-form-inner,
    #kc-update-password-form-inner {
        padding: 0;
        max-width: 100%;
    }

    .kc-brand-v2 h1,
    .kc-otp-brand-v2 h1,
    .kc-error-brand-v2 h1 {
        font-size: var(--eds-size-175);  /* 28px */
        margin-bottom: 0.5rem;
    }

    .kc-password-recovery-header-v2 h1,
    .kc-info-header-v2 h1 {
        font-size: var(--eds-size-225);  /* 36px */
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 480px) {
    #kc-login-form-section,
    #kc-otp-form-section,
    #kc-error-form-section,
    #kc-info-form-section,
    #kc-password-recovery-form-section,
    #kc-update-password-form-section {
        padding: var(--eds-space-150) var(--eds-space-100);  /* 24px 16px */
    }

    #kc-login-form-inner,
    #kc-otp-form-inner,
    #kc-error-form-inner,
    #kc-info-form-inner,
    #kc-password-recovery-form-inner,
    #kc-update-password-form-inner {
        max-width: 100%;
    }

    .kc-brand-v2 h1,
    .kc-otp-brand-v2 h1,
    .kc-error-brand-v2 h1 {
        font-size: var(--eds-size-150);  /* 24px */
        margin-bottom: 0.5rem;
    }

    .kc-password-recovery-header-v2 h1,
    .kc-info-header-v2 h1 {
        font-size: var(--eds-size-200);  /* 32px */
        margin-bottom: 0.5rem;
    }

    .kc-text-input-v2 {
        font-size: 16px; /* Prevents iOS zoom */
        padding: var(--eds-space-075) var(--eds-space-087);  /* 12px ~14px */
    }

    .kc-submit-button-v2 {
        padding: var(--eds-space-087) var(--eds-space-125);  /* ~14px 20px */
    }
}

/* ============================================
   Focus Visible for Accessibility
   ============================================ */
.kc-text-input-v2:focus-visible {
    outline: 1px solid var(--eds-control-primary-stroke-focused);
}

.kc-submit-button-v2:focus-visible {
    outline: 1px solid var(--eds-control-primary-stroke-focused);
    outline-offset: 0;
}

.kc-action-link-v2:focus,
.kc-action-link-v2:focus-visible,
.kc-action-link-v2:active {
    outline: none;
    border: none;
    box-shadow: none;
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    #kc-login-visual-section,
    #kc-otp-visual-section,
    #kc-error-visual-section,
    #kc-info-visual-section,
    #kc-password-recovery-visual-section,
    #kc-update-password-visual-section {
        display: none;
    }

    #kc-login-form-section,
    #kc-otp-form-section,
    #kc-error-form-section,
    #kc-password-recovery-form-section,
    #kc-update-password-form-section {
        flex: 1;
    }
}