/* Contact form stuff */
:root {
    --checkbox-border-color: #0b0c0c;
    --checkbox-checked-color: #0b0c0c;
    --checkbox-color: #0b0c0c;
    --checkbox-color-darktheme: #e2e2e2;
    --checkbox-disabled-bg-color: #d9d9d9;
    --checkbox-disabled-bg-color-darktheme: #404040;
    --light_mode_guidance_font_color: #757575;
    --dark_mode_guidance_font_color: #828282;
    --light_mode_required_font_color: darkred;
    --dark_mode_required_font_color: rgb(200, 50, 50);
    --pre_submit_form_submit_button_color: rgb(200, 0, 0);
    --pre_submit_form_submit_button_hover_color: rgba(159, 0, 0, 1);
    --submitted_form_button_color: rgba(159, 0, 0, 0.7);
    --radio_btn_disabled_border_color: gray;
    --radio_btn_disabled_checked_bg: gray content-box;
    --submit_button_box_shadow_color: #002d18;
}

body.dark-theme select {
    /* Inherits from the commission.css file */
    background-color: var(--dark_mode_body_background_color);
    
}

select {
    /* Inherits from the commission.css file */
    background-color: var(--light_mode_body_background_color);
}

#commission-form > div {
    padding-bottom: 24px;
}

#commission-form > div p {
    margin-top: 4px;
    margin-bottom: 4px;
}

.guidence {
    color: var(--light_mode_guidance_font_color);
}

body.dark-theme .guidence {
    color: var(--dark_mode_guidance_font_color);
}

textarea {
    width: 100%;
    font-family: inherit;
    font-size: 100%;
    margin-bottom: 16px;
    padding: 5px;
    border: 2px solid var(--checkbox-color);
    border-radius: 0;
    background-color: inherit;
}

body.dark-theme textarea, body.dark-theme input[type="text"], body.dark-theme input[type="number"], body.dark-theme select {
    border-color: var(--checkbox-color-darktheme);
}

input[type="text"], input[type="number"], select {
    height: 1.5rem;
    width: 100%;
    font-family: inherit;
    font-size: 100%;
    margin-bottom: 16px;
    padding: 5px;
    border: 2px solid var(--checkbox-color);
    border-radius: 0;
    box-sizing: content-box;
    background-color: inherit;
}

select:focus {
    /* Inherits from the commission.css file */
    outline: var(--focus_visible_outline);
}

[aria-label="required"] {
    color: var(--light_mode_required_font_color);
}

body.dark-theme [aria-label="required"] {
    color: var(--dark_mode_required_font_color);
}

.form-numberinput > label, .form-textareainput > label, .form-textinput > label, .form-selectinput > label {
    display: block;
    padding-bottom: 10px;
}

.form-fieldset_legend {
    margin-bottom: 10px;
}

.form-radio_item {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 10px;
}

.form-radio_item > label {
    align-self: center;
    line-height: 25px;
    padding: 7px 15px;
    cursor: pointer;
}

input[type=radio] {
    --s: 40px;     /* control the size */
    --c: var(--checkbox-color); /* the active color */
    
    height: var(--s);
    width: var(--s);
    border: calc(var(--s)/20) solid var(--c);
    padding: calc(var(--s)/8);
    background: 
       radial-gradient(farthest-side,var(--c) 94%, var(--c)) 50%/0 0 no-repeat content-box;
    border-radius: 50%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    font-size: inherit;

    &:checked {
        border: calc(var(--s)/10) solid var(--c);
        background-size: 100% 100%;
    }

    &:disabled {
        border-color: var(--radio_btn_disabled_border_color);
        cursor: default;

        &:checked {
            background: var(--radio_btn_disabled_checked_bg);
        }
    }
}

body.dark-theme input[type=radio] {
    --c: var(--checkbox-color-darktheme);
}


input[type=radio]:disabled + label, input[type=checkbox]:disabled + label {
    cursor: default;
}



#form-submit-btn {
    height: 40px;
    width: 100%;
    font-family: inherit;
    font-size: 100%;
    color: var(--checkbox-color-darktheme);
    border: 2px solid transparent;
    border-radius: 0;
    background-color: var(--pre_submit_form_submit_button_color);
    box-shadow: 0 2px 0 var(--submit_button_box_shadow_color);
    text-align: center;
    vertical-align: top;
    cursor: pointer;

    &:hover {
        background-color: var(--pre_submit_form_submit_button_hover_color);
    }
}

.form-fieldset {
    /* Remove the default border/padding stuff */
    margin: 0;
    padding: 0;
    border: 0;
}

#submission-response {
    /* Hide it by default, until we need it */
    display: none;
}

#form-submit-btn.is-submitting-submitted {
    background-color: var(--submitted_form_button_color);
    cursor: default;
}



input[type="checkbox"] {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    margin: 6px;
    padding: 0;
    border: 2px solid var(--checkbox-color);
    appearance: none; /* Remove default appearance of the checkbox */
    background-color: transparent;
    cursor: pointer;
    flex: none; /* Stop the checkbox being squashed by the container's flex property */
}

body.dark-theme input[type="checkbox"] {
    border: 2px solid var(--checkbox-color-darktheme);
}
  
/* Style the checked state */
input[type="checkbox"]:checked {
    background-size: cover;
    padding: 2px;
}
  
input[type="checkbox"]:not(:disabled):checked {
    border-color: var(--checkbox-color);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 32 32" xml:space="preserve"><path style="fill: %23000000" d="M11.941,28.877l-11.941-11.942l5.695-5.696l6.246,6.246l14.364-14.364L32,8.818"/></svg>');
}

body.dark-theme input[type="checkbox"]:not(:disabled):checked {
    border-color: var(--checkbox-color-darktheme);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 32 32" xml:space="preserve"><path style="fill: %23e2e2e2" d="M11.941,28.877l-11.941-11.942l5.695-5.696l6.246,6.246l14.364-14.364L32,8.818"/></svg>');
}

/* Style the disabled state */
input[type="checkbox"]:disabled {
    cursor: default;
    background-color: var(--checkbox-disabled-bg-color);

    &:checked {
        cursor: default;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 32 32" xml:space="preserve"><path style="fill: %23808080" d="M11.941,28.877l-11.941-11.942l5.695-5.696l6.246,6.246l14.364-14.364L32,8.818"/></svg>');
    }
}

body.dark-theme input[type="checkbox"]:disabled {
    background-color: var(--checkbox-disabled-bg-color-darktheme);

    &:checked {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 32 32" xml:space="preserve"><path style="fill: %239a9a9a" d="M11.941,28.877l-11.941-11.942l5.695-5.696l6.246,6.246l14.364-14.364L32,8.818"/></svg>');
    }
}

.form-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.form-checkbox > label {
    display: block;
    align-self: center;
    line-height: 25px;
    padding: 7px 10px;
    cursor: pointer;
}

label > span > a, .guidence > a {
    font-weight: bold;
    transition: opacity 0.1s ease-in-out;
}

label > span > a:hover, .guidence > a:hover {
    opacity: 0.6;
}

#currency-unit {
    font-size: 1.2em;
}