@import './button.css';

@font-face {
    font-family: 'HCo Gotham';
    src: url('../fonts/woff2/Gotham-Book_Web.woff2') format('woff2');
    font-weight: 325;
    font-style: normal;
    font-display: fallback;
}

@font-face {
    font-family: 'HCo Gotham';
    src: url('../fonts/woff2/Gotham-Bold_Web.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: fallback;
}

:root {
    /* primary */
    --color-brand-primary-0: #fff;
    --color-brand-primary-5: #f7f4fe;
    --color-brand-primary-10: #efeafe;
    --color-brand-primary-15: #e5e2fc;
    --color-brand-primary-25: #d8cafc;
    --color-brand-primary-50: #b096f9;
    --color-brand-primary-80: #8156f6;
    --color-brand-primary: #612cf4;
    --color-brand-primary-110: #5828dc;
    --color-brand-primary-dark-70: #3f1d9f;
    --color-brand-primary-dark-85: #31167a;
    --color-brand-primary-dark: #220f55;
    --color-brand-primary-dark-110: #0f0725;

    /* secondary */
    --color-brand-secondary-5: #fef3f6;
    --color-brand-secondary-10: #fde8ed;
    --color-brand-secondary-25: #f9c5d3;
    --color-brand-secondary-50: #f38ba7;
    --color-brand-secondary-75: #ee517b;
    --color-brand-secondary: #e8174f;
    --color-brand-secondary-110: #d11547;

    /* tertiary dark */
    --color-brand-tertiary-dark-5: #f3f9f4;
    --color-brand-tertiary-dark-10: #e6f3e9;
    --color-brand-tertiary-dark-25: #c1e1c7;
    --color-brand-tertiary-dark-50: #83c390;
    --color-brand-tertiary-dark-75: #45a658;
    --color-brand-tertiary-dark: #078821;
    --color-brand-tertiary-dark-110: #067a1e;

    /* tertiary */
    --color-brand-tertiary: #e66a22;
    --color-brand-tertiary-light: #fa7325;

    /* secondary light */
    --color-brand-secondary-light-5: #fffcf4;
    --color-brand-secondary-light-10: #fff9e9;
    --color-brand-secondary-light-20: #fef3d3;
    --color-brand-secondary-light-50: #fde291;
    --color-brand-secondary-light-75: #fcd45a;
    --color-brand-secondary-light: #fbc523;
    --color-brand-secondary-light-110: #e1b120;

    /* neutral */
    --color-neutral-01: #fff;
    --color-neutral-02: #fbfafc;
    --color-neutral-03: #f7f6fa;
    --color-neutral-04: #f3f1f7;
    --color-neutral-05: #efecf4;
    --color-neutral-06: #eae8f2;
    --color-neutral-07: #e6e3ef;
    --color-neutral-bg-10: #efe9fd;
    --color-neutral-bg-15: #e8e0fe;

    /* action */
    --color-action-cta-primary: #220f55;
    --color-action-cta-primary-tap: #31167a;
    --color-action-cta-secondary: #612cf4;
    --color-action-cta-secondary-tap: #8156f6;
    --color-action-cta-action: #078821;
    --color-action-cta-action-tap: #067a1e;
    --color-action-info-light: #edebfc;
    --color-action-info-default: #612cf4;
    --color-action-info-dark: #5828dc;
    --color-action-info-success-light: #e6f3e9;
    --color-action-success-default: #078821;
    --color-action-success-dark: #067a1e;
    --color-action-success-light: #e6f3e9;
    --color-action-warning-light: #fff8e6;
    --color-action-warning-default: #ffc105;
    --color-action-warning-dark: #e5ae05;
    --color-action-error-light: #fbe6e9;
    --color-action-error-default: #d5071f;
    --color-action-error-dark: #c0061c;
    --color-shadow-card-purple: #d8cafc;

    --pf-v5-global--link--Color: var(--color-brand-primary-dark);
    --pf-v5-global--danger-color--100: var(--color-brand-secondary);
    --pf-v5-global--danger-color--200: var(--color-brand-secondary);
    --pf-v5-global--BoxShadow--xl: 18px 24px 60px 0px rgba(34, 15, 85, 0.12);
    --pf-v5-global--FontFamily--text: "HCo Gotham", Arial, sans-serif;
    --pf-v5-global--FontFamily--heading: "HCo Gotham", Arial, sans-serif;

    --pf-v5-global--FontWeight--normal: 325;
    --pf-v5-global--FontWeight--bold: 400;

    /* Breakpoints */
    --breakpoint-sm: 36rem;
    --breakpoint-md: 48rem;
    --breakpoint-lg: 64rem;
    --breakpoint-xl: 79rem;
    --breakpoint-2xl: 79rem;
}

.dark {
    /* primary */
    --color-brand-primary: #fff;
    --color-brand-primary-120: #8156f7;
    --color-brand-primary-110: #fff;
    --color-brand-primary-dark: #fff;
    --color-brand-primary-dark-110: #220f55;

    /* neutral */
    --color-neutral-01: #fff;
    --color-neutral-03: #0f0725;

    /* action */
    --color-action-error-default: #ef527b;
    --color-action-error-light: #ef527b;

    background-color: var(--color-brand-primary-dark-110);
    --pf-v5-global--BackgroundColor--100: var(--color-brand-primary-dark-110);
    --pf-v5-global--BackgroundColor--light-100: var(--color-brand-primary-dark-110);
    --pf-v5-global--Color--dark-100: var(--color-brand-primary);
}

.dark .pf-v5-c-button.pf-m-primary {
    background-color: var(--color-brand-primary-120);
}

.dark .show-hide-button {
    color: var(--color-brand-primary);
}

.dark .phone-radio-input:checked + .radio-checkmark {
    background-color: var(--color-brand-primary-120);
}

.HN-main {
    *:focus-visible {
        outline-color: var(--color-brand-primary-dark) !important;
        outline-width: 2px !important;
        outline-offset: 4px !important;
        position: relative !important;
        z-index: 20 !important;
    }

    input {
        font-weight: 325;

        &[aria-invalid="true"] {
            border-color: var(--color-action-error-default) !important;
        }
    }

    .show-hide-button {
        padding: 0px 16px;
        border-radius: 0 12px 12px 0;
        border: 1.5px solid var(--color-brand-primary-dark);
        border-left: none;
        background: transparent;

        i {
            font-size: 24px;
        }
    }

    /* Form validation styles */
    /* Form validation styles using parent-child relationships */
    .has-error .pf-v5-c-form__label-text {
        color: var(--color-action-error-default) !important;
    }

    /* Input field borders */
    .has-error .pf-v5-c-form-control > input,
    .has-error .pf-v5-c-form-control > select,
    .has-error .pf-v5-c-form-control > textarea {
        border-color: var(--color-action-error-default) !important;
    }

    /* Password field specific styles */
    .has-error .password-field .pf-v5-c-form-control > input {
        border-color: var(--color-action-error-default) !important;
    }

    .has-error .input-group-nested-container {
        margin-bottom: 4px;
    }

    .has-error .show-hide-button {
        border-color: var(--color-action-error-default) !important;
    }

    .has-error .show-hide-button i {
        color: var(--color-action-error-default) !important;
    }

    /* Error message text */
    .has-error .hint {
        color: var(--color-action-error-default) !important;
    }

    .hint {
        font-size: 14px;
    }

    .pf-v5-c-form-control {
        --pf-v5-c-form-control--PaddingBottom: .7rem;
        --pf-v5-c-form-control--PaddingTop: .7rem;
        --pf-v5-c-form-control--PaddingRight: .7rem;
        --pf-v5-c-form-control--PaddingLeft: .7rem;
    }

    .pf-v5-c-form-control > :is(input, select, textarea) {
        border: 1.5px solid var(--color-brand-primary-dark);
        border-radius: 12px;
    }

    .pf-v5-c-input-group:has(> .pf-v5-c-input-group__item:nth-child(2)) > .pf-v5-c-input-group__item:first-child input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .pf-v5-c-form-control__select + .pf-v5-c-form-control__utilities {
        height: 100%;
        align-items: center;
    }

    .pf-v5-c-form-control > :is(input, select, textarea):focus {
        outline-color: var(--color-brand-primary-dark);
        outline-offset: 2.55px;
    }

    .pf-v5-c-form-control:after,
    .pf-v5-c-form-control:before {
        content: none;
    }

    .pf-v5-c-title {
        font-weight: 400;
        color: var(--color-brand-primary);
    }

    .kc-login-forgot-password a {
        color: var(--color-brand-primary-dark);
        text-decoration: underline;
        font-family: "HCo Gotham", Arial, sans-serif;
        font-style: normal;
        font-weight: 325;
        font-size: 14px;
        line-height: 140%;
        text-decoration-line: underline;
    }


    .pf-v5-c-form__label {
        font-weight: 325;

    }

    .pf-v5-c-form__label span b {
        overflow-wrap: break-word;
        word-break: break-all;
        display: block;
    }

    /* Form label */
    .pf-v5-c-form__label-text {
        font-family: "HCo Gotham", Arial, sans-serif;
        font-style: normal;
        font-weight: 325;
        font-size: 14px;
        line-height: 140%;
        /* identical to box height, or 20px */
        text-transform: lowercase;
        /* brand/primary-dark */
        color: var(--color-brand-primary-dark);
    }

    .mfa-code-label {
        /* body-medium/regular */
        font-family: "HCo Gotham", Arial, sans-serif;
        font-style: normal;
        font-weight: 325;
        font-size: 16px;
        line-height: 140%;

        /* brand/primary-dark */
        color: var(--color-brand-primary-dark);

        text-align: left;

    }

    /* Form alert */
    .pf-v5-c-alert {
        padding: 16px;
        background: var(--color-action-error-light);
        border-radius: 12px;
        border: none;
        box-shadow: none;
        font-family: "HCo Gotham", Arial, sans-serif;
    }

    .pf-v5-c-alert.alert-success {
        background-color: var(--color-action-info-success-light);
    }

    .pf-v5-c-alert.alert-warning {
        background-color: var(--color-action-warning-light);
    }

    .pf-v5-c-alert.alert-error {
        background-color: var(--color-action-error-light);
    }

    .pf-v5-c-alert__title,
    .pf-v5-c-alert__description {
        /* body-small/regular */
        font-style: normal;
        font-weight: 325;
        font-size: 14px;
        line-height: 140%;
        color: var(--color-brand-primary-dark);
        font-family: "HCo Gotham", Arial, sans-serif;
        font-style: normal;
    }

    /* .HN-main .pf-v5-c-login {
        min-height: 100%;
        flex-grow: 1;
    } */

    .pf-v5-c-login__container {
        grid-template-columns: 34rem;
        grid-template-areas: "header" "main"
    }

    .pf-v5-c-login__main {
        border-radius: 24px;
    }

    .pf-v5-c-login__main-header {
        border-top: 4px solid var(--keycloak-card-top-color);
    }

    /* Info section - top margin + bottom padding */
    .pf-v5-c-login__main-footer-band:first-child {
        margin-block-start: var(--pf-v5-global--spacer--lg);
    }

    .pf-v5-c-login__main-footer-band:last-child {
        padding-bottom: 0;
    }

    /* Info section */
    .login-pf body {
        background: var(--keycloak-bg-logo-url) no-repeat center center fixed;
        background-size: cover;
        height: 100%;
    }

    div.kc-logo-text {
        background-image: var(--keycloak-logo-url);
        height: var(--keycloak-logo-height);
        width: var(--keycloak-logo-width);
        background-repeat: no-repeat;
        background-size: contain;
        margin: 0 auto;
    }

    div.kc-logo-text span {
        display: none;
    }

    .kc-login-tooltip {
        position: relative;
        display: inline-block;
    }

    .kc-login-tooltip .kc-tooltip-text {
        top: -3px;
        left: 160%;
        background-color: black;
        visibility: hidden;
        color: #fff;
        min-width: 130px;
        text-align: center;
        border-radius: 2px;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
        padding: 5px;
        position: absolute;
        opacity: 0;
        transition: opacity 0.5s;
    }

    /* Show tooltip */
    .kc-login-tooltip:hover .kc-tooltip-text {
        visibility: visible;
        opacity: 0.7;
    }

    /* Arrow for tooltip */
    .kc-login-tooltip .kc-tooltip-text::after {
        content: " ";
        position: absolute;
        top: 15px;
        right: 100%;
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent black transparent transparent;
    }

    #kc-recovery-codes-list {
        columns: 2;
    }

    #certificate_subjectDN {
        overflow-wrap: break-word
    }

    #kc-verify-email-form {
        margin-top: 24px;
        margin-bottom: 24px;
    }

    #kc-header-wrapper {
        font-size: 29px;
        text-transform: uppercase;
        letter-spacing: 3px;
        line-height: 1.2em;
        white-space: normal;
        color: var(--pf-v5-global--Color--light-100) !important;
        text-align: center;
    }

    hr {
        margin-top: var(--pf-v5-global--spacer--sm);
        margin-bottom: var(--pf-v5-global--spacer--md);
    }

    /* word-breaking email addresses */
    /* assuming email address is always in a <strong> tag */
    .word-break > strong {
        word-break: break-all;
        text-overflow: word-break;
    }

    #kc-social-providers svg:not(.google) {
        filter: invert(47%) sepia(88%) saturate(7486%) hue-rotate(199deg) brightness(91%) contrast(101%);
    }

    #kc-social-providers svg {
        height: var(--pf-v5-global--FontSize--xl);
    }

    @media (prefers-color-scheme: dark) {
        #kc-social-providers svg:not(.google) {
            filter: invert(54%) sepia(96%) saturate(2028%) hue-rotate(174deg) brightness(99%) contrast(97%);
        }
    }
}