/* Notification message box */

.hrc-bordered-box {
    border: 8px solid;
    background-color: transparent;
    min-height: 4.4rem;
    padding: .4rem 2rem .5rem 4.5rem
}

    /* Final p tag remove margin, caters for dynamic content from API */
    .hrc-bordered-box p:last-child {
        margin-bottom: 0;
    }

.hrc-bordered-box--success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #3c763d
}

.hrc-bordered-box--warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #8a6d3b;
}

.hrc-bordered-box--error {
    color: #a94442;
    background-color: #f2dede;
    border-color: #a94442
}

.hrc-bordered-box--info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #31708f
}

.hrc-bordered-box {
    position: relative;
    padding: 15px 15px 15px 55px;
}

.hrc-bordered-box__icon {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 28px;
    font-size: 1.5rem;
    font-size: 32px;
    line-height: 1;
    text-align: center;
}

    .hrc-bordered-box__icon.fa-exclamation-triangle {
        left: 12px;
    }

/*  */
.panel {
    min-height: 100px;
    background-color: #f3f2f1; /* GOV.UK light grey for visibility */
}

/* The surrounding border box */
.info-box {
    display: flex; /* Aligns icon and text side-by-side */
    gap: 16px; /* Spacing between the icon and the text */
    align-items: flex-start; /* Keeps the icon anchored to the top paragraph */
    border: 1px solid #bce8f1;
    border-left: 5px solid #31708f; /* Thicker left border for an "info" look */
    background-color: #d9edf7;
    color: #31708f;
    padding: 16px;
    border-radius: 4px;
    font-family: sans-serif;
}

/* The circular info icon */
.info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px; /* Prevents the circle from squeezing */
    height: 24px;
    border: 2px solid #31708f;
    border-radius: 50%; /* Makes it a perfect circle */
    font-weight: bold;
    font-style: italic; /* Gives the 'i' an iconic look */
    font-size: 14px;
    margin-top: 2px; /* Vertically centers icon with the first line of text */
}

/* The paragraph container */
.info-content {
    display: flex;
    flex-direction: column; /* Stacks the paragraphs vertically */
    gap: 8px; /* Spacing between each paragraph */
}

    /* Reset margin for paragraphs inside the box */
    .info-content p {
        margin: 0;
        line-height: 1.5;
    }

/* Grey wrapper holding both elements */
.styled-container {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 0px !important;
    padding: 12px;
    width: 100% !important; /* Forces the component to completely fill the parent's width */
    max-width: none !important; /* Removes the previous 500px artificial width limitation */
    box-sizing: border-box;
    height: auto;
    /* Adds separation space beneath this component */
    margin-bottom: 24px !important;
}

/* 100% Native CSS Black Circle */
.native-circle-icon {
    flex-shrink: 0;
    width: 31.7px !important;
    height: 31.7px !important;
    border-radius: 50% !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 19.8px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    cursor: help;
    margin-top: 0px;
    user-select: none;
}

/* Transparent textarea expanding to the full remaining right-hand width */
.styled-textarea {
    flex-grow: 1;
    width: 100%; /* Ensures text block leverages all remaining space efficiently */
    min-height: 80px;
    height: max-content;
    field-sizing: content;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: #333;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: none;
    outline: none;
    overflow-y: hidden;
}

/* Rules styling the radio button group used for HRC selection */
.hrc-site-input {
    position: absolute;
    opacity: 0;
}

div.hrc-site-card {
    padding: 0;
    box-shadow: none;
    border-bottom-width: 3px;
}

.hrc-site-label {
    padding: 24px;
    margin-bottom: 0;
    cursor: pointer;
}

.hrc-site-card:has(.hrc-site-input:focus-visible),
.hrc-site-card:has(.hrc-site-input:focus-visible):hover {
    outline: 3px solid #000;
    outline-offset: 3px;
    box-shadow: 0 0 0 3px #fd0;
}

.hrc-site-card:has(.hrc-site-input:checked) {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}

.hrc-site-card:has(.hrc-site-input:checked):hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 0 var(--primary-color);
    transform: none;
}

.hrc-site-input:checked + .hrc-site-label .hrc-site-card__heading,
.hrc-site-input:checked + .hrc-site-label .hrc-site-card__label,
.hrc-site-input:checked + .hrc-site-label .hrc-site-card__address {
    color: #ffffff;
}

.hrc-site-card--selected,
.hrc-site-card:has(.hrc-site-card--selected) {
    box-shadow: none;
}

/* Rules styling the radio button group used for Time slot selection */

h3.hrc-slot-accordion__hrc-closed {
    margin-top: 20px;
    padding-top: 15px;
    padding-bottom: 15px
}

.hrc-slot-accordion__content {
    padding: 6px;
}

.hrc-slot-picker .hrc-slot-picker__item {
    padding: 0;
    margin: 0 0 20px 0;
    width: auto;
    min-width: 5rem;
    margin-right: 20px;
    float: left;
    clear: none;
}

.hrc-slot-picker__item .hrc-slot-picker__input + .hrc-slot-picker__label {
    padding: .2rem;
    margin: 0;
    width: 6rem;
    min-height: 3.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0;
}

    .hrc-slot-picker__item .hrc-slot-picker__input + .hrc-slot-picker__label:before,
    .hrc-slot-picker__item .hrc-slot-picker__input + .hrc-slot-picker__label:after {
        display: none;
    }

.hrc-slot-picker__item .hrc-slot-picker__input:checked + .hrc-slot-picker__label {
    color: #fff;
    background-color: #006750;
    box-shadow: 0 0 0 3px #fff;
    outline: solid 3px #000;
    outline-offset: 3px
}

.hrc-slot-picker__item .hrc-slot-picker__input:disabled + .hrc-slot-picker__label {
    opacity: 1;
}

.hrc-slot-picker__item .hrc-slot-picker__input:focus-visible + .hrc-slot-picker__label {
    box-shadow: 0 0 0 3px #fd0;
    outline: solid 3px #000;
    outline-offset: 3px;
}

label.hrc-slot-picker__label--lots,
label.hrc-slot-picker__label--limited {
    border: solid 2px #006750;
    background-color: #fff;
    color: #000;
}

label.hrc-slot-picker__label--none {
    border: solid 2px #ddd;
    background-color: #555;
    color: #ddd;
}

.hrc-slot-picker__labelstatus {
    display: block;
    font-size: .8rem;
}

/* Rules by Bruce that will want to be applied to all pages at a later date */
a.govuk-breadcrumbs__link,
a.govuk-breadcrumbs__link:active,
a.govuk-breadcrumbs__link:focus,
a.govuk-breadcrumbs__link:hover,
a.govuk-breadcrumbs__link:link,
a.govuk-breadcrumbs__link:visited,
a.govuk-link,
a.govuk-link:active,
a.govuk-link:focus,
a.govuk-link:hover,
a.govuk-link:link,
a.govuk-link:visited {
    color: #004331 !important;
    text-decoration: underline;
}

    a.govuk-breadcrumbs__link:hover,
    a.govuk-link:hover {
        color: #007253 !important;
    }

    a.govuk-breadcrumbs__link:focus,
    a.govuk-link:focus {
        outline: none;
        outline-offset: 0;
        background-color: initial;
    }

    a.govuk-breadcrumbs__link:focus-visible,
    a.govuk-link:focus-visible {
        background-color: #fd0;
        box-shadow: 0 4px #000;
        text-decoration: none;
        color: #000 !important;
    }

.govuk-radios__item .govuk-radios__label {
    display: inline-block;
}

.govuk-input,
.govuk-select,
.govuk-radios__input + .govuk-radios__label:before,
.govuk-checkboxes__input + .govuk-checkboxes__label:before {
    border: solid 2px #767676;
}

    .govuk-input:focus,
    .govuk-select:focus,
    .govuk-radios__input:focus + .govuk-radios__label:before,
    .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
        outline: none;
        box-shadow: none;
    }

.govuk-checkboxes__input + .govuk-checkboxes__label:after {
    top: 13px;
    left: 10px;
}

.govuk-input:focus-visible,
.govuk-select:focus-visible,
.govuk-radios__input:focus-visible + .govuk-radios__label:before,
.govuk-checkboxes__input:focus-visible + .govuk-checkboxes__label:before {
    outline: 3px solid #fd0;
    outline-offset: 0;
    box-shadow: inset 0 0 0 2px;
    border-color: #000;
}

.govuk-button {
    background-color: #004331;
    border: 2px solid #004331;
    box-shadow: 0 2px 0 #002d18;
    font-weight: 700;
    font-family: "Noto Sans", sans-serif;
    font-size: 18px;
}

    .govuk-button:hover {
        color: #fff;
        background-color: #032118 !important;
        border-color: #032118;
        box-shadow: 0 2px 0 #032118;
        border: #032118 2px solid;
    }

    .govuk-button:focus {
        outline: none;
    }

    .govuk-button:focus-visible {
        color: #0b0c0c;
        border-color: #fd0;
        background-color: #fd0 !important;
        box-sizing: border-box;
        box-shadow: 0 4px 0 #0b0c0c;
        outline: 3px solid transparent;
        border-bottom: 2px solid #fd0;
    }

/* Handles links in the error text returned from API call */
.govuk-error-message a {
    font-size: 1rem;
}

/* Readonly */
.govuk-input[readonly] {
    background-color: #f3f2f1;
}