/*
 * Login Update Password V2 Page-Specific Styles
 * Common styles are in common-v2.css
 * This file contains only update-password-page-specific overrides
 */

#kc-update-password-form-inner {
    display: flex;
    flex-direction: column;
    gap: var(--eds-space-125);
}

/* ============================================
   Update Password Header
   ============================================ */

.kc-update-password-header-v2 h1 {
    font-size: var(--v2-font-size-heading);
    font-weight: var(--v2-font-weight-medium);
    color: var(--v2-color-text-primary);
    width: 100%;
    transition: color 0.3s ease;
    line-height: 1.1;
    margin: 0 0 var(--eds-space-050) 0;
}

#kc-update-password-form-section.dark .kc-update-password-header-v2 h1 {
    color: var(--v2-color-text-primary);
}

.kc-update-password-header-v2 .kc-description-v2 {
    color: var(--eds-grey-700) !important;
    font-size: var(--eds-size-100);
    margin: 0;
    line-height: 1.5;
}

.kc-update-password-header-v2 .kc-description-v2 strong {
    font-weight: var(--eds-font-weight-semibold);
    color: var(--eds-grey-900);
}

/* ============================================
   Error Message
   ============================================ */
.kc-error-text-v2 {
    color: #FF6B35 !important;
    font-size: 14px;
    font-weight: 500;
}

/* ============================================
   Password Requirements Checklist
   ============================================ */
.kc-password-requirements-v2 {
    margin: var(--eds-space-150) 0;
    padding: var(--eds-space-125) var(--eds-space-150);
    background: var(--v2-bg-input);
    border-radius: var(--v2-border-radius-input);
    border: 1px solid var(--v2-color-border-default);
    transition: all 0.3s ease;
}

#kc-update-password-form-section.dark .kc-password-requirements-v2 {
    background: var(--v2-bg-input);
    border-color: var(--v2-color-border-default);
}

.kc-requirements-list-v2 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--eds-space-050); /* Reduced from 087 to 050 for tighter spacing */
}

.requirement-item {
    display: flex;
    align-items: center;
    gap: var(--eds-space-087);
    padding: 0;
    font-size: var(--v2-font-size-label);
    color: var(--v2-color-text-secondary);
    transition: color 0.2s ease;
}

.requirement-item span {
    line-height: 1.4;
}

/* Requirement Icons */
.requirement-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    transition: all 0.2s ease;
}

.requirement-item .check-icon {
    display: none;
    stroke: var(--v2-color-text-primary);
}

.requirement-item .cross-icon {
    display: block;
    stroke: var(--v2-color-text-primary);
}

/* Valid State */
.requirement-item.valid {
    color: var(--v2-color-text-primary);
    opacity: 1;
    font-weight: 500;
}

.requirement-item.valid .check-icon {
    display: block !important;
}

.requirement-item.valid .cross-icon {
    display: none !important;
}

/* Invalid State (user has typed) */
.requirement-item.invalid {
    color: var(--v2-color-text-primary);
    opacity: 0.5;
}

.requirement-item.invalid .cross-icon {
    stroke: var(--v2-color-text-primary);
}

#kc-update-password-form-section.dark .requirement-item {
    color: var(--v2-color-text-secondary);
}

#kc-update-password-form-section.dark .requirement-item.invalid .cross-icon {
    stroke: var(--v2-color-error);
}

#kc-update-password-form-section.dark .requirement-item.valid {
    color: #ffffff; /* Green color for valid text in dark mode */
}

#kc-update-password-form-section.dark .requirement-item.valid .check-icon {
    stroke: #ffffff; /* Green color for checkmark in dark mode */
    display: block !important;
}

/* ============================================
   Submit Button States
   ============================================ */
.kc-submit-button-v2:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--v2-bg-input);
    color: var(--v2-color-text-tertiary);
}

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

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
    .kc-update-password-header-v2 h1 {
        font-size: var(--eds-size-225);  /* 36px */
    }
}

@media (max-width: 640px) {
    .kc-update-password-header-v2 h1 {
        font-size: var(--v2-size-137);
    }

    .kc-password-requirements-v2 {
        padding: var(--eds-space-100) var(--eds-space-125);
    }

    .requirement-item {
        font-size: var(--v2-size-081);
        padding: 0;
    }
}

@media (max-width: 480px) {
    .kc-update-password-header-v2 h1 {
        font-size: var(--eds-size-200);  /* 32px */
    }
}