/* ===============================
   Design tokens
=================================*/
:root {
    --c-success: #13873a;
    --c-error: #cc2d2d;
    --c-icon: #6b7280;
    --c-text: #374151;
    --c-caps: #f55b41;
    --c-tooltip: #1c1a50;
    --c-primary: #24226a;
    --c-default-reset-b: #8c8f94;

    /* data-URI icons (reuse via vars) */
    --icon-error-16: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.11268 2.23259C7.38353 2.08011 7.6891 2 7.99992 2C8.31074 2 8.61631 2.08011 8.88715 2.23259C9.158 2.38508 9.38497 2.6048 9.54617 2.87055L9.54806 2.87368L14.4189 11.0051L14.4242 11.0142C14.5821 11.2877 14.6657 11.5977 14.6666 11.9135C14.6675 12.2293 14.5856 12.5398 14.4293 12.8141C14.2729 13.0885 14.0474 13.3171 13.7753 13.4772C13.5031 13.6374 13.1937 13.7235 12.878 13.727L12.8707 13.727L3.12185 13.727C2.80609 13.7235 2.49674 13.6374 2.22458 13.4772C1.95242 13.3171 1.72694 13.0885 1.57057 12.8141C1.41419 12.5398 1.33237 12.2293 1.33326 11.9135C1.33414 11.5977 1.4177 11.2877 1.5756 11.0142L1.58095 11.0051L6.45178 2.87368L7.01656 3.21199L6.45367 2.87055C6.61487 2.6048 6.84184 2.38508 7.11268 2.23259ZM7.58016 3.55222L2.71377 11.6763C2.67217 11.7498 2.65017 11.8327 2.64993 11.9172C2.64969 12.0031 2.67194 12.0875 2.71447 12.1621C2.75699 12.2367 2.81831 12.2989 2.89232 12.3424C2.96551 12.3855 3.0486 12.4089 3.13347 12.4103H12.8664C12.9512 12.4089 13.0343 12.3855 13.1075 12.3424C13.1815 12.2989 13.2428 12.2367 13.2854 12.1621C13.3279 12.0875 13.3501 12.0031 13.3499 11.9172C13.3497 11.8327 13.3277 11.7497 13.2861 11.6763L8.42041 3.55342L8.41968 3.55222C8.37589 3.48049 8.31444 3.42117 8.24119 3.37993C8.16754 3.33846 8.08444 3.31668 7.99992 3.31668C7.9154 3.31668 7.8323 3.33846 7.75864 3.37993C7.6854 3.42117 7.62395 3.48049 7.58016 3.55222ZM7.9999 5.5095C8.36349 5.5095 8.65824 5.80425 8.65824 6.16784V8.46811C8.65824 8.83171 8.36349 9.12645 7.9999 9.12645C7.63631 9.12645 7.34156 8.83171 7.34156 8.46811V6.16784C7.34156 5.80425 7.63631 5.5095 7.9999 5.5095ZM7.9999 10.11C7.63631 10.11 7.34156 10.4048 7.34156 10.7684C7.34156 11.132 7.63631 11.4267 7.9999 11.4267H8.00565C8.36924 11.4267 8.66399 11.132 8.66399 10.7684C8.66399 10.4048 8.36924 10.11 8.00565 10.11H7.9999Z\" fill=\"%23CC2D2D\"/></svg>");
    --icon-req-default-24: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="%23BDBDDF"/><path d="M7.5 11.5 10.8158 15 16.5 9" stroke="%23FDFDFD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    --icon-req-success-24: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="%2313873A"/><path d="M7.5 11.5 10.8158 15 16.5 9" stroke="%23FDFDFD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    --icon-req-error-24: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="%23CC2D2D"/><path d="M8 8 16 16M16 8 8 16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    --icon-caps-lock-22: url("data:image/svg+xml;utf8,<svg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M19 1H3C1.89543 1 1 1.89543 1 3V19C1 20.1046 1.89543 21 3 21H19C20.1046 21 21 20.1046 21 19V3C21 1.89543 20.1046 1 19 1Z' stroke='%2324226A' stroke-miterlimit='10' stroke-linejoin='bevel'/><path d='M6.58912 12.2899C6.41955 12.2899 6.32692 12.0921 6.43547 11.9618L10.8472 6.66777C10.9271 6.57182 11.0745 6.57182 11.1545 6.66777L15.5662 11.9618C15.6747 12.0921 15.5821 12.2899 15.4125 12.2899H13.4589C13.3484 12.2899 13.2589 12.3794 13.2589 12.4899L13.2592 15.3156C13.2592 15.4261 13.1697 15.5157 13.0592 15.5157H8.94275C8.8323 15.5157 8.74275 15.4261 8.74275 15.3157V12.4899C8.74275 12.3794 8.65321 12.2899 8.54275 12.2899H6.58912Z' stroke='%2324226A' stroke-miterlimit='10' stroke-linejoin='bevel'/></svg>") center no-repeat;
}

/* ===============================
   Shared scope for both contexts:
   registration page and body.login (reset screen)
=================================*/
#password-field .password-requirements,
body.login .password-requirements {
    margin-top: 8px;
    padding: 16px 0 0 0;
    display: block;
    transition: all 0.2s ease;
}

#password-field {
    margin-bottom: 0;
}

#password-field .password-requirements.requirements-visible,
body.login .password-requirements.requirements-visible {
    display: block;
}

#password-field .password-requirements .requirement,
body.login .password-requirements .requirement {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 14px;
    line-height: 1.4;
    transition: all 0.2s ease;
}

#password-field .password-requirements .requirement-icon,
body.login .password-requirements .requirement-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: var(--c-icon);
    transition: color 0.2s ease;
    background: var(--icon-req-default-24) center/contain no-repeat;
}

#password-field .password-requirements .requirement-text,
body.login .password-requirements .requirement-text {
    color: var(--c-text);
    flex: 1;
}

/* Success / error states (normalize class names) */
#password-field .password-requirements .requirement.met .requirement-icon,
#password-field .password-requirements .requirement.requirement-met .requirement-icon,
body.login .password-requirements .requirement.met .requirement-icon,
body.login .password-requirements .requirement.requirement-met .requirement-icon {
    background: var(--icon-req-success-24) center/contain no-repeat;
}

#password-field .password-requirements .requirement.met .requirement-text,
#password-field .password-requirements .requirement.requirement-met .requirement-text,
body.login .password-requirements .requirement.met .requirement-text,
body.login .password-requirements .requirement.requirement-met .requirement-text {
    color: var(--c-success);
}

#password-field .password-requirements .requirement.not-met .requirement-icon,
#password-field .password-requirements .requirement.requirement-unmet .requirement-icon,
body.login .password-requirements .requirement.not-met .requirement-icon,
body.login .password-requirements .requirement.requirement-unmet .requirement-icon {
    background: var(--icon-req-error-24) center/contain no-repeat;
}

#password-field .password-requirements .requirement.not-met .requirement-text,
#password-field .password-requirements .requirement.requirement-unmet .requirement-text,
body.login .password-requirements .requirement.not-met .requirement-text,
body.login .password-requirements .requirement.requirement-unmet .requirement-text {
    color: var(--c-error);
}

/* Helper text + invalid state */
#password-field .form__field .password-helper-text,
body.login .form__field .password-helper-text,
body.login .helper-text.password-helper-text {
    font-size: 12px;
    color: var(--c-primary);
    margin-bottom: 10px;
    display: block;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease;
}

#password-field .form__field.field-invalid .helper-text,
#password-field .form__field.field-invalid .password-helper-text,
body.login .form__field.field-invalid .helper-text,
body.login .form__field.field-invalid .password-helper-text {
    color: var(--c-error);
    background-image: var(--icon-error-16);
    background-position: left top;
    background-repeat: no-repeat;
    padding-left: 20px;
    transition: opacity 0.2s ease;
}

/* ===============================
   Caps Lock (shared baseline)
=================================*/
#password-field .password-controls,
body.login .password-controls {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    pointer-events: none;
}

#password-field .caps-lock-warning,
body.login .caps-lock-warning {
    position: relative;
    display: none;
    align-items: center;
    gap: 6px;
    color: var(--c-caps);
    font-size: 12px;
    font-weight: 500;
    pointer-events: auto;
}

#password-field .caps-lock-warning.caps-lock-active,
body.login .caps-lock-warning.caps-lock-active {
    display: flex !important;
}

#password-field .caps-lock-tooltip,
body.login .caps-lock-tooltip {
    position: absolute;
    background: var(--c-tooltip);
    color: #fff;
    padding: 8px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    bottom: -39px;
    left: -19px;
    transform: translateX(-50%);
    font-weight: 400;
}

#password-field .caps-lock-warning.caps-lock-active:hover .caps-lock-tooltip,
#password-field .caps-lock-warning.caps-lock-active.tooltip-visible .caps-lock-tooltip,
body.login .caps-lock-warning.caps-lock-active:hover .caps-lock-tooltip,
body.login .caps-lock-warning.caps-lock-active.tooltip-visible .caps-lock-tooltip {
    opacity: 1;
    visibility: visible;
}

/* ===============================
   Custom block (#password-field) specific
=================================*/
#password-field .form__field .password-helper-text {
    color: var(--c-primary);
}

#password-field .password-controls {
    right: 12px;
    top: 22px;
    z-index: 10;
}

#password-field .password-controls .caps-lock-warning {
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    background: var(--icon-caps-lock-22);
    width: 22px;
    height: 22px;
}

#password-field .password-controls .caps-lock-warning.caps-lock-active {
    display: flex;
    right: 20px;
    top: 7px;
    position: absolute;
}

#password-field .password-controls .caps-lock-warning.caps-lock-active .caps-lock-tooltip::after {
    content: '';
    position: absolute;
    top: -4px;
    right: 21px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #1F2937;
}

#password-field .form__field {
    height: 60px !important;
    margin-bottom: 0 !important;
}

#password-field > .form__field.caps-lock input {
    padding-right: 63px;
}

#password-field > .form__field.caps-lock.error input {
    padding-right: 85px;
}

#password-field > .form__field.success .result-icon {
    display: none;
}

#password-field .error-message {
    z-index: 1;
    background-color: #fff;
}

/* WP reset-password specific */
body.login .pw-weak {
    display: none !important;
}

body.login .form__row {
    margin-bottom: 20px;
}

body.login .form__field {
    position: relative;
}

body.login #password-field .password-controls .caps-lock-warning.caps-lock-active {
    top: -10px;
}

body.login #password-field .form__field .password-helper-text {
    margin-top: 5px;
}

body.login #password-field .caps-lock-tooltip,
body.login .caps-lock-tooltip {
    left: -14px;
}

body.login #password-field .form__field {
    max-width: 340px;
}

body.login #password-field .form__field input {
    border: 1px solid var(--c-default-reset-b) !important;
}

/* Toggles / icons in WP forms */
body.login .toggle-password {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    cursor: pointer;
    pointer-events: auto;
    z-index: 10;
}

body.login .result-icon {
    position: absolute;
    top: 50%;
    right: 35px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    pointer-events: none;
    z-index: 5;
}

/* States for inputs у WP */
body.login input[type="password"].error,
body.login input[type="text"].error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 1px #ef4444 !important;
}

body.login input[type="password"].success,
body.login input[type="text"].success {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 1px #10b981 !important;
}

body.login input[type="password"]:focus,
body.login input[type="text"]:focus {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5) !important;
}

/* Layout misc (WP) */
body.login #login {
    padding-bottom: 32px;
}

body.login #login form {
    padding-bottom: 16px;
    overflow: visible;
}

body.login #pass-strength-result {
    margin-bottom: 8px;
}

body.login .description.indicator-hint {
    display: none;
}

/* Change default password toggle icon */
.login .button.wp-hide-pw .dashicons-hidden,
.login .button.wp-hide-pw .dashicons-visibility {
    text-indent: -9999px;
    background-position: center center;
}

.login .button.wp-hide-pw .dashicons-hidden {
    background-image: url(/wp-content/themes/myservier_theme/dist/images/pwd-hide.svg);
}

.login .button.wp-hide-pw .dashicons-visibility {
    background-image: url(/wp-content/themes/myservier_theme/dist/images/pwd-show.svg);
}

.login .button.wp-hide-pw:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Animations */
@keyframes requirementMet {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

#password-field .password-requirements .requirement.met .requirement-icon,
#password-field .password-requirements .requirement.requirement-met .requirement-icon,
body.login .password-requirements .requirement.met .requirement-icon,
body.login .password-requirements .requirement.requirement-met .requirement-icon {
    animation: requirementMet 0.5s ease;
}

/* change caps lock position when error (empty password) */
#registrationForm #password-field .form__field.caps-lock.error .password-controls .caps-lock-warning.caps-lock-active {
    right: 46px;
}

/* Responsive */
@media (max-width: 992px) {
    #password-field .password-controls .caps-lock-warning {
        display: none !important;
    }

    #password-field > .form__field.caps-lock input[type="password"] {
        padding-right: 35px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    #password-field .password-requirements .requirement,
    body.login .password-requirements .requirement,
    #password-field .password-requirements .requirement-icon,
    body.login .password-requirements .requirement-icon,
    #password-field .password-requirements .requirement-text,
    body.login .password-requirements .requirement-text {
        transition: none;
    }

    #password-field .password-requirements .requirement.met .requirement-icon,
    #password-field .password-requirements .requirement.requirement-met .requirement-icon,
    body.login .password-requirements .requirement.met .requirement-icon,
    body.login .password-requirements .requirement.requirement-met .requirement-icon {
        animation: none;
    }
}