/* ==========================================================================
   warranty2026 — warranty registration modal
   ==========================================================================

   PRODUCT TOGGLES

   The legacy markup is kept exactly as it was: a native checkbox
   (input.custom-control-input[name="productsPurchased[]"]) whose <label> holds
   the product image. Nothing about the submitted contract changes here — only
   how selection is communicated.

   What was wrong with it:
     - The ONLY selected-state feedback was Bootstrap's small blue square in the
       corner. On a 6-up grid of near-identical white product renders, two
       checked cards look the same as four unchecked ones at a glance.
     - The legacy JS toggles a class called `image-checkbox-checked` on the card,
       but that class was never styled anywhere. It has always been dead code.
     - The card footer was written `class="card=footer"` (an `=` for a `-`), so
       the product name strip was never a Bootstrap card-footer at all.

   What is done about it:
     - The whole card now reads as selected: coloured border, tinted background,
       and a checkmark badge.
     - The primary selected state is driven by `:checked`, i.e. by CSS alone, so
       it stays correct even if the JS class toggle fails. `.image-checkbox-checked`
       is also styled now, so the legacy JS finally does something.
     - Focus is visible for keyboard users, which it previously was not.
   ========================================================================== */

.wr-product-grid .card {
    border: 2px solid #dee2e6;
    border-radius: 6px;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
    cursor: pointer;
    height: 100%;
}

.wr-product-grid .card:hover {
    border-color: #9ec5fe;
    background-color: #f8fbff;
}

/* Selected — pure CSS, no JS required. :checked lives on the input inside the card,
   so the label (which wraps the image) carries the visual. */
.wr-product-grid .custom-control-input:checked ~ .custom-control-label img {
    filter: none;
}

/* Selected — card level. Driven by the class the legacy script already toggles,
   which until now was styled nowhere. */
.wr-product-grid .image-checkbox-checked,
.wr-product-grid .card:has(.custom-control-input:checked) {
    border-color: #007bff;
    background-color: #eaf3ff;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .15);
}

/* Checkmark badge. `:has()` is unsupported in older browsers, hence the class
   fallback above — either selector alone is enough to show it. */
.wr-product-grid .image-checkbox-checked .card-footer::after,
.wr-product-grid .card:has(.custom-control-input:checked) .card-footer::after {
    content: "\2713";
    display: inline-block;
    margin-left: .35rem;
    font-weight: 700;
    color: #007bff;
}

.wr-product-grid .card-footer {
    background: transparent;
    border-top: 0;
    padding: .5rem;
}

/* Keyboard focus. The native input is visually small but must never be
   invisible to a keyboard user. */
.wr-product-grid .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .35);
}

.wr-product-grid .custom-control.image-checkbox label img {
    border-radius: 2.5px;
    max-width: 100%;
    height: auto;
}

/* Validation, carried over from the legacy stylesheet. */
.form-group-image-checkbox.is-invalid label {
    color: #dc3545;
}

.form-group-image-checkbox.is-invalid .invalid-feedback {
    display: block;
}

/* ==========================================================================
   BUSY STATE

   The Pardot round-trip takes ~3s and that is outside our control. Disabling the
   button is not feedback — the page simply stops responding, so people click
   again or assume it broke.
   ========================================================================== */

.wr-busy {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .85);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ==========================================================================
   DATEPICKER

   bootstrap-datepicker's own stylesheet is loaded from the CDN by tc-wr.form
   (with SRI), exactly as the legacy form did. Without it the calendar renders
   as an unstyled, dark, cramped table.

   The white background below is the legacy rule, carried over verbatim. An
   earlier version of this file replaced it with a z-index rule that was never
   in the original, which is what left the dropdown dark.

   The z-index is kept as well: the picker is inside a Bootstrap modal, whose
   stacking context would otherwise clip the dropdown.
   ========================================================================== */

.datepicker.datepicker-dropdown.dropdown-menu {
    background-color: #ffffff;
    z-index: 1600;
}