/* Cookie consent (DBIM 7.6): the banner at the bottom of the page (Figure 40), the Cookie Settings page (Figure 41)
   and the note that stands in for content from another company's servers until the visitor allows it.
   The same file in the four apps. It is linked from Home/footer.jsp, so after a change only the version number there
   (and in Home/cookie-settings.jsp) has to go up. Colours and sizes are the dbim.css tokens. */

/* The banner. DBIM 2.2.1: its background is Inclusive white. It lies under pop-ups (1055) and over the page */
.dbim-cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1035;
    padding: 0.75rem 0;
    background-color: var(--dbim-white);
    color: var(--dbim-text);
    border-top: 2px solid var(--dbim-c1);
    box-shadow: 0 -0.25rem 1rem rgba(21, 2, 2, 0.2);
    font-size: var(--dbim-fs-p2);
    /* at 400% zoom or with larger text it may not fit: it then scrolls inside itself (WCAG 1.4.10) */
    max-height: 100vh;
    overflow-y: auto;
}
.dbim-cookie-banner[hidden] {
    display: none;
}
@media print {
    .dbim-cookie-banner,
    #dbim-cookie-room {
        display: none !important;
    }
}
.dbim-cookie-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}
.dbim-cookie-text {
    flex: 1 1 22rem;
    margin: 0;
}
.dbim-cookie-text a {
    color: var(--dbim-c2);
    text-decoration: underline;
}
.dbim-cookie-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
/* The three choices are coloured as on dot.gov.in: the lightest shade of the colour group behind the key colour's
   text, one shade darker under the mouse. In high contrast the high-contrast stylesheet colours them, as every button.
   A little taller than the site's other buttons: on a phone they are pressed with a thumb */
.dbim-cookie-buttons .btn-primary {
    --bs-btn-color: var(--dbim-c1);
    --bs-btn-bg: var(--dbim-c5);
    --bs-btn-border-color: var(--dbim-c5);
    --bs-btn-hover-color: var(--dbim-c1);
    --bs-btn-hover-bg: var(--dbim-c4);
    --bs-btn-hover-border-color: var(--dbim-c4);
    --bs-btn-active-color: var(--dbim-c1);
    --bs-btn-active-bg: var(--dbim-c4);
    --bs-btn-active-border-color: var(--dbim-c4);
    --bs-btn-focus-shadow-rgb: var(--dbim-c1-rgb);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-weight: 600;
}
/* On a phone the three buttons are one under the other, each as wide as the banner */
@media (max-width: 575.98px) {
    .dbim-cookie-buttons { width: 100%; }
    .dbim-cookie-buttons .btn { flex: 1 1 100%; }
}

/* The Cookie Settings page */
.dbim-cookie-group {
    margin: 1.5rem 0 0.75rem;
    font-size: var(--dbim-fs-h2);
    font-weight: 700;
    color: var(--dbim-c1);
}
.dbim-cookie-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-bottom: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--dbim-grey1);
    border-radius: 0.5rem;
    background-color: var(--dbim-white);
}
.dbim-cookie-name {
    margin: 0 0 0.25rem;
    font-size: var(--dbim-fs-p1);
    font-weight: 700;
}
/* Off, the switch, On: as in Figure 41. Bootstrap's own switch is drawn left of its label; this one stands alone */
.dbim-cookie-switch {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.5rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    font-size: var(--dbim-fs-p2);
}
.dbim-cookie-switch .form-check-input {
    float: none;
    width: 2.5em;
    height: 1.25em;
    margin: 0;
    cursor: pointer;
}
.dbim-cookie-switch .form-check-input:checked {
    background-color: var(--dbim-c1);
    border-color: var(--dbim-c1);
}
/* Off: Bootstrap draws the edge and the knob in a light grey (1.8:1 against white); here both are the key colour,
   so the switch and where its knob stands can be seen (WCAG 1.4.11) */
.dbim-cookie-switch .form-check-input:not(:checked) {
    border-color: var(--dbim-c1);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23162F6A'/%3e%3c/svg%3e");
}
.dbim-cookie-switch .form-check-input:disabled {
    cursor: default;
}
.dbim-cookie-saved {
    min-height: 1.5rem;
    margin: 0.75rem 0 0;
    font-weight: 700;
    color: var(--dbim-success);
}
@media (max-width: 575.98px) {
    .dbim-cookie-item { flex-wrap: wrap; }
}

/* High contrast: black and yellow, as the rest of the site. The high-contrast stylesheet paints every input black,
   which hides the switch's knob: it is drawn here, yellow when off and black on yellow when on */
html.dbim-hc .dbim-cookie-banner {
    background-color: black;
    color: yellow;
    border-top-color: yellow;
    box-shadow: none;
}
html.dbim-hc .dbim-cookie-text a {
    color: yellow;
}
html.dbim-hc .dbim-cookie-group,
html.dbim-hc .dbim-cookie-saved {
    color: yellow;
}
html.dbim-hc .dbim-cookie-item {
    background-color: black;
    border-color: yellow;
}
html.dbim-hc .dbim-cookie-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='yellow'/%3e%3c/svg%3e") !important;
}
html.dbim-hc .dbim-cookie-switch .form-check-input:checked {
    background-color: yellow !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='black'/%3e%3c/svg%3e") !important;
}