/* Liberis Light Theme */
:root {
    /* Colours from brand sheet */
    --neon-yellow: #E7FF7C;
    --light-ash: #4F5659;
    --ash: #232C2F;
    --black: #000000;
    --white: #FFFFFF;
    --light-grey: #F4F4EC;
    --mid-light-grey: #E9E9DE;
    --mid-grey: #D4D4C3;
    --dark-grey: #B3B3AA;

    /* Colours */
    --primary-brand-color: var(--neon-yellow);
    --secondary-brand-color: var(--light-grey);
    --tertiary-brand-color: var(--black);
    --tint-brand-color: var(--mid-grey);

    /* Keeping these 3 here, in case they're used by things */
    --white-color: var(--white);
    --success-color: #3fbe58;
    --error-color: #ff0505;

    /* Text Colours */
    --primary-text-color: var(--ash);
    --secondary-text-color: var(--light-grey);
    --success-text-color: var(--success-color);
    --error-text-color: var(--error-color);

    /* Input Colors */
    --primary-input-placeholder: var(--primary-brand-color);
    --secondary-input-placeholder: var(--secondary-brand-color);
    --primary-input-placeholder-opacity: 0.4;
    --secondary-input-placeholder-opacity: 0.4;
    --primary-input-border-color: var(--primary-brand-color);
    --secondary-input-border-color: var(--secondary-brand-color);

    /* General */
    --button-border-radius: 23px;
    --module-border-radius: 12px;
    --module-border-radius-small: 6px;
    --box-shadow-color: var(--ash);
    --shadow-color: var(--light-ash);

    /* Button Colours */
    --primary-button-background-color: var(--primary-brand-color);
    --primary-button-text-color: var(--primary-text-color);
    --primary-button-border-color: var(--box-shadow-color);
    --primary-button-border-radius: var(--button-border-radius);

    --primary-button-focus-background-color: var(--primary-brand-color);
    --primary-button-focus-text-color: var(--primary-text-color);
    --primary-button-focus-border-color: var(--box-shadow-color);
    --primary-button-focus-outline-color: var(--box-shadow-color);
    --primary-button-focus-offset: 1px;

    --primary-button-hover-background-color: var(--primary-brand-color);
    --primary-button-hover-text-color: var(--primary-text-color);
    --primary-button-hover-border-color: var(--box-shadow-color);

    --primary-button-active-background-color: var(--primary-brand-color);
    --primary-button-active-text-color: var(--primary-text-color);
    --primary-button-active-border-color: var(--box-shadow-color);

    --primary-button-disabled-background-color: var(--primary-brand-color);
    --primary-button-disabled-text-color: var(--primary-text-color);
    --primary-button-disabled-border-color: var(--box-shadow-color);
    --primary-button-disabled-opacity: 0.5;

    --secondary-button-background-color: var(--secondary-brand-color);
    --secondary-button-text-color: var(--primary-text-color);
    --secondary-button-border-color: var(--box-shadow-color);
    --secondary-button-border-radius: var(--button-border-radius);

    --secondary-button-focus-background-color: var(--primary-brand-color);
    --secondary-button-focus-text-color: var(--primary-text-color);
    --secondary-button-focus-border-color: var(--box-shadow-color);
    --secondary-button-focus-outline-color: var(--shadow-color);
    --secondary-button-focus-offset: 0.125rem;

    --secondary-button-hover-background-color: var(--primary-brand-color);
    --secondary-button-hover-text-color: var(--primary-text-color);
    --secondary-button-hover-border-color: var(--box-shadow-color);

    --secondary-button-active-background-color: var(--secondary-brand-color);
    --secondary-button-active-text-color: var(--primary-text-color);
    --secondary-button-active-border-color: var(--box-shadow-color);

    --secondary-button-disabled-background-color: var(--secondary-brand-color);
    --secondary-button-disabled-text-color: var(--primary-text-color);
    --secondary-button-disabled-border-color: var(--box-shadow-color);
    --secondary-button-disabled-opacity: 0.3;

    /* Checkbox button */
    --checkbox-border: var(--primary-brand-color);

    /* Typography */
    --font-family: 'Modern Gothic', sans-serif;
    --heading-font-family: 'Liberis Display', sans-serif;

    /* Radio Button Colours */
    --radio-button-label: var(--primary-text-color);
    --radio-button-background: var(--shadow-color);
    --radio-button-border: var(--primary-brand-color);
    --radio-button-check: var(--primary-brand-color);

    --radio-button-disabled-col: var(--secondary-text-color);
    --radio-button-disabled-bg-opacity: 0.3;
    --radio-button-disabled-opacity: 0.4;

    --radio-button-focus-outline-color: var(--shadow-color);
    --radio-button-focus-offset: 0.375rem;
}

@font-face {
    font-family: 'Modern Gothic';
    font-weight: 400;
    src: url(./fonts/ModernGothic-Light.otf) format('opentype');
}

@font-face {
    font-family: 'Modern Gothic';
    font-weight: 700;
    src: url(./fonts/ModernGothic-Regular.otf) format('opentype');
}

@font-face {
    font-family: 'Liberis Display';
    font-weight: 700;
    src: url(./fonts/LiberisDisplay-Regular.ttf) format('truetype');
}

body {
    font-family: 'Liberis Display', 'Modern Gothic', sans-serif;
}

/* Override the stuff set by Component Library */
[data-testid="liberis-message-layout"] {
    background-color: var(--light-grey) !important;
}

[data-testid="liberis-message-layout"] main {
    background-color: var(--mid-grey) !important;
    border-radius: var(--module-border-radius) !important;
}

.ps-contract-body {
    font-family: arial, sans-serif;
}

button {
    border-width: 1px !important;
    padding: 14px 16px !important;
    outline-offset: var(--primary-button-focus-offset, 0);
}

button:hover:enabled:not([class*="hiddenButton_"],[class*="noButton_"]) {
    border-style: solid;
    outline: 1px solid var(--primary-button-focus-outline-color, #000000);
}

button:hover:enabled:not([class*="hiddenButton_"],[class*="noButton_"]),
 button:focus:enabled:not([class*="hiddenButton_"],[class*="noButton_"]) {
    border-width: 1px !important;
    outline-width: 1px !important;
}

button:focus:enabled[class*="hiddenButton_"] {
    outline: none !important;
}

[class*="card__"] {
  background-color: var(--light-grey) !important;
  border-color: var(--dark-grey) !important;
  border-radius: var(--module-border-radius) !important;
  box-shadow: none !important;
  padding: 1rem 1.4rem !important;
}

[class*="card__"] h1 {
    margin-top: 0 !important;
}

[class^="footer"] {
    background-color: var(--light-grey) !important;
    color: var(--primary-text-color);
}

[class*=" link_"][class*=" primary_"] {
    color: var(--primary-text-color) !important;
    text-decoration: underline !important;
}

[class^="icon_"][class*=" primary_"][class*=" pathFill_"] {
    fill: var(--primary-text-color) !important;
}

[class^="square"] > [class^="svgWrapper"] {
    background: none !important;
    outline: none !important;
}

path[fill="var(--primary-brand-color)"] {
    fill: var(--mid-light-grey) !important;
}

path[stroke="var(--primary-brand-color)"] {
    stroke: var(--mid-light-grey) !important;
}

path[stroke="var(--secondary-brand-color)"] {
    stroke: var(--primary-text-color) !important;
}

@media screen and (max-width: 599px) {
    [data-testid="liberis-message-layout"] main {
        border-radius: var(--module-border-radius-small) !important;
    }
}