/*////////////////////// INPUTS //////////////////////*/
label {
    display: block;
    color: var(--colour-fresh-100);
    font-family: "Gilroy", sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
    display: block;
    width: 100%;
    min-height: 3.7rem;
    padding: 1rem;
    border: 1px solid var(--colour-fresh-300);
    border-radius: 0.8rem;
    color: var(--colour-fresh-50);
    background-color: var(--colour-fresh-400);
    font-family: "Gilroy", sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.3;
    box-shadow: none;
    outline: none;
    transition: border-color 400ms ease, background-color 400ms ease, box-shadow 180ms ease;
}

input::placeholder,
textarea::placeholder {
    color: #fff;
    opacity: 0.7;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
textarea:hover,
select:hover {
    border-color: var(--colour-fresh-200);
    background-color: var(--colour-fresh-300);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    border-color: var(--colour-fresh-50);
    background-color: var(--colour-fresh-400);
    box-shadow: 0 0 0 3px rgba(165, 203, 238, 0.22);
}

textarea {
    min-height: 12rem;
    resize: vertical;
}

select {
    padding-right: 4rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient( 45deg, transparent 50%, var(--colour-fresh-100) 50% ), linear-gradient( 135deg, var(--colour-fresh-100) 50%, transparent 50% );
    background-position: calc(100% - 1.8rem) 50%, calc(100% - 1.3rem) 50%;
    background-size: 0.5rem 0.5rem, 0.5rem 0.5rem;
    background-repeat: no-repeat;
}

select option {
    color: var(--colour-fresh-600);
    background-color: #fff;
}

input:disabled,
textarea:disabled,
select:disabled {
    color: var(--colour-fresh-300);
    background-color: var(--colour-fresh-500);
    border-color: var(--colour-fresh-400);
    opacity: 0.55;
    cursor: not-allowed;
}

.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.form-checkbox input[type="checkbox"] {
    position: relative;
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    margin: 0;
    border: 1px solid var(--colour-fresh-300);
    border-radius: 0.35rem;
    background: var(--colour-fresh-500);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.form-checkbox input[type="checkbox"]::after {
    content: "";
    position: absolute;
    left: 0.55rem;
    top: 0.25rem;
    width: 0.45rem;
    height: 0.85rem;
    border: solid var(--colour-fresh-50);
    border-width: 0 0.2rem 0.2rem 0;
    opacity: 0;
    transform: rotate(45deg);
}

.form-checkbox input[type="checkbox"]:checked {
    border-color: var(--colour-fresh-300);
    background: var(--colour-fresh-300);
}

.form-checkbox input[type="checkbox"]:checked::after {
    opacity: 1;
}

.form-checkbox input[type="checkbox"]:hover {
    border-color: var(--colour-fresh-100);
}

.form-checkbox input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(165, 203, 238, 0.25);
}

.form-checkbox label {
    margin: 0;
    color: var(--colour-fresh-100);
    font-family: "Gilroy", sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
}

.file-input {
    display: block;
    width: 100%;
    padding: 0.7rem;
    border: 1px solid var(--colour-fresh-300);
    border-radius: 0.8rem;
    color: var(--colour-fresh-100);
    background-color: var(--colour-fresh-500);
    font-family: "Gilroy", sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.3;
    cursor: pointer;
    box-shadow: none;
    outline: none;
    transition: border-color 400ms ease, background-color 400ms ease, box-shadow 180ms ease;
}

.file-input:hover {
    border-color: var(--colour-fresh-100);
}

.file-input:focus {
    border-color: var(--colour-fresh-50);
    box-shadow: 0 0 0 3px rgba(165, 203, 238, 0.22);
}

.file-input::file-selector-button {
    min-height: 3.4rem;
    margin-right: 1rem;
    padding: 0.8rem 1.4rem;
    border: 0;
    border-radius: 0.6rem;
    color: var(--colour-fresh-50);
    background-color: var(--colour-fresh-300);
    font-family: "Gilroy", sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 400ms ease, background-color 400ms ease;
}

.file-input::file-selector-button:hover {
    color: #FFF;
    background-color: var(--colour-fresh-400);
}

/* Older WebKit browsers */
.file-input::-webkit-file-upload-button {
    min-height: 3.4rem;
    margin-right: 1rem;
    padding: 0.8rem 1.4rem;
    border: 0;
    border-radius: 0.6rem;
    color: var(--colour-fresh-50);
    background-color: var(--colour-fresh-300);
    font-family: "Gilroy", sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    cursor: pointer;
}

.file-input:disabled {
    color: var(--colour-fresh-300);
    background-color: var(--colour-fresh-500);
    border-color: var(--colour-fresh-400);
    cursor: not-allowed;
    opacity: 0.55;
}

.file-input:disabled::file-selector-button {
    cursor: not-allowed;
    background-color: var(--colour-fresh-400);
}


/*////////////////////// LISTS //////////////////////*/
ol li ul, ol li ol {
    margin-left: 0;
}

ul.data li {
    padding-bottom: 1.2rem;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid #ddd;
}

ul.data li:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

ul.data li.columns:first-child {
    padding-left: 0;
    padding-right: 0;
}

ul.data li.columns:last-child {
    padding-top: 0.5em;
}

ul.auto {
    width: auto;
    list-style: none;
    margin: 0px;
}

ul.auto li {
    width: auto;
    margin-right: 0.5em;
    padding: 0;
}

ul.auto li:last-child {
    margin-right: 0px;
}

ul.bullet {
    list-style: disc;
}

ul.bullet li {
    display: list-item;
    margin-left: 25px;
    padding-left: 10px;
    font-size: 1.3rem;
    width: calc(100% - 25px);
}

/*////////////////////// FORMS //////////////////////*/
.form-wrap {
    float: left;
    width: 100%;
}

.form-row {
    float: left;
    width: 100%;
    margin-bottom: 1rem;
}

/*///////////////// MESSAGES ///////////////////*/
/*.success_holder, .info_holder, .validation-summary-errors {
    float: left;
    width: 100%;
    padding: 25px 20px 20px 50px;
    margin: 0px 0px 10px 0px;
    line-height: 1.4rem;
    background: url(/assets/images/icons/success.png) no-repeat scroll 10px 18px #ebf7ef;
    border: 1px solid #d2ecdc;
    color: #55B778;
}

.info_holder {
    background: url(/assets/images/icons/info.png) no-repeat scroll 10px 18px #cbe6f2;
    border: 1px solid #c4e2f0;
    color: #369CCB;
}*/

/*///////////// MVC VALIDATION /////////////////*/
/*.validation-summary-errors {
    background: url(/assets/images/icons/error.png) no-repeat scroll 10px 18px #f5e0e3;
    border: 1px solid #ecc5ca;
    color: #C13E4D;
    font-size: 1.1rem;
}

.validation-summary-errors span {
    float: left;
    width: 100%;
}

.validation-summary-errors ul {
    float: left;
    margin: 10px 0px 0px 0px;
}

.validation-summary-errors ul li {
    width: 100%;
    display: list-item;
    min-height: 20px;
    line-height: 20px;
    font-size: 1.1rem;
    list-style: disc inside;
}

.field-validation-error {
    float: right;
    color: #B5453C;
}

.field-validation-valid {
    display: none;
}

input[type="text"].input-validation-error, input[type="password"].input-validation-error, textarea.input-validation-error, select.input-validation-error {
    background-color: #f5e0e3;
    border: 1px solid #ecc5ca;
}*/



/*////////////////////// STATUS MESSAGES //////////////////////*/

.success_holder,
.info_holder,
.validation-summary-errors {
    /*position: relative;*/
    float: left;
    display: block;
    width: 100%;
    margin: 0 0 1.2rem;
    padding: 1.5rem 1.8rem 1.5rem 4.8rem;
    border: 1px solid transparent;
    border-radius: 0.8rem;
    font-family: "Gilroy", sans-serif;
    font-size: 1.2rem;
    line-height: 1.45;
    box-shadow: none;
}


/* Success */

.success_holder {
    color: var(--colour-leaf-50);
    background-color: var(--colour-leaf-500);
    border-color: var(--colour-leaf-300);
    background-image: url("/assets/images/icons/success.png");
    background-repeat: no-repeat;
    background-position: 1.4rem 1.45rem;
    background-size: 2rem 2rem;
}


/* Information */

.info_holder {
    color: var(--colour-fresh-50);
    background-color: var(--colour-fresh-500);
    border-color: var(--colour-fresh-300);
    background-image: url("/assets/images/icons/info.png");
    background-repeat: no-repeat;
    background-position: 1.4rem 1.45rem;
    background-size: 2rem 2rem;
}


/* Validation summary */

.validation-summary-errors {
    color: var(--colour-grapefruit-50);
    background-color: var(--colour-grapefruit-500);
    border-color: var(--colour-grapefruit-300);
    background-image: url("/assets/images/icons/error.png");
    background-repeat: no-repeat;
    background-position: 1.4rem 1.45rem;
    background-size: 2rem 2rem;
}

.validation-summary-errors span {
    display: block;
    width: 100%;
    margin-bottom: 0.6rem;
    color: var(--colour-grapefruit-50);
    font-family: "Gilroy", sans-serif;
    font-weight: 600;
}

.validation-summary-errors ul {
    margin: 0.7rem 0 0;
    padding-left: 1.6rem;
}

.validation-summary-errors ul li {
    display: list-item;
    width: 100%;
    min-height: 1.8rem;
    margin-bottom: 0.35rem;
    color: var(--colour-grapefruit-50);
    font-size: 1.1rem;
    line-height: 1.4;
    list-style: disc;
}

.validation-summary-errors ul li:last-child {
    margin-bottom: 0;
}


/*////////////////////// FIELD VALIDATION //////////////////////*/

.field-validation-error {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    color: var(--colour-grapefruit-200);
    font-family: "Gilroy", sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
}

.field-validation-valid {
    display: none;
}


/* Invalid form controls */

input[type="text"].input-validation-error,
input[type="email"].input-validation-error,
input[type="password"].input-validation-error,
input[type="number"].input-validation-error,
input[type="tel"].input-validation-error,
input[type="url"].input-validation-error,
input[type="file"].input-validation-error,
textarea.input-validation-error,
select.input-validation-error {
    color: var(--colour-grapefruit-50);
    background-color: var(--colour-grapefruit-500);
    border-color: var(--colour-grapefruit-300);
    box-shadow: 0 0 0 3px rgba(223, 98, 115, 0.18);
}

input.input-validation-error::placeholder,
textarea.input-validation-error::placeholder {
    color: var(--colour-grapefruit-100);
    opacity: 0.8;
}

input.input-validation-error:focus,
textarea.input-validation-error:focus,
select.input-validation-error:focus {
    border-color: var(--colour-grapefruit-100);
    box-shadow: 0 0 0 3px rgba(247, 182, 190, 0.25);
}


/* Optional success state for individual fields */

input.is-valid,
textarea.is-valid,
select.is-valid {
    border-color: var(--colour-leaf-300);
    box-shadow: 0 0 0 3px rgba(142, 188, 41, 0.18);
}


@media (max-width: 640px) {
    .success_holder,
    .info_holder,
    .validation-summary-errors {
        padding: 1.4rem 1.4rem 1.4rem 4.3rem;
        background-position: 1.2rem 1.35rem;
        background-size: 1.8rem 1.8rem;
    }
}