/* ===== Shopping Cart styles =====
   Must load AFTER site.css / main.css so the ".cart-btn" transparent-background
   rule wins over the global ".btn" override in main.css (equal specificity =>
   source order decides). */

/* Cart wrapper in the dark-blue header */
.cart-wrapper {
    display: flex;
    align-items: center;
    margin-right: calc((100% - 1122px) / 2 - 1px);
}

    /* Transparent hover bridge over the 12px gap — lives on the WRAPPER so the
   panel can keep overflow:hidden (clean rounded corners). Keeps hover
   continuous when moving from pill down to a panel button. */
    .cart-wrapper::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 14px;
    }

/* "View Cart" pill — semi-transparent light blue on the navy header */
.cart-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(173, 216, 230, .18); /* light-blue tint */
    border: 1px solid rgba(173, 216, 230, .55);
    color: #fff;
    padding: .5rem 2.85rem;
    /* //.5rem .9rem;*/
    border-radius: 50rem;
    cursor: pointer;
    line-height: 1;
    transition: background .15s ease;
}

    .cart-pill:hover {
        background: rgba(173, 216, 230, .30);
    }

    .cart-pill i {
        font-size: 1.15rem;
        line-height: 1;
    }

.cart-pill-label {
    font-weight: 600;
    font-size: .95rem;
}

/* Count badge — inline at the end of the pill, teal (#277DA3) */
.cart-badge {
    background: #277DA3;
    color: #fff;
    min-width: 1.4rem;
    font-size: .78rem;
    line-height: 1.2;
}

/* Hover / click dropdown panel */
.cart-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 400px;
    background: #fff;
    color: #212529;
    z-index: 1050;
    overflow: hidden;
    border-radius: .5rem;
}

.cart-panel-body {
    max-height: 380px;
    overflow-y: auto;
}

.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem .9rem;
    border-bottom: 1px solid #f0f0f0;
    font-size: .85rem;
}

    .cart-item:last-child {
        border-bottom: none;
    }

.cart-empty {
    padding: 1.5rem .9rem;
    text-align: center;
    color: #6c757d;
    font-size: .85rem;
}

.cart-remove {
    background: none;
    border: none;
    color: #c0392b;
    cursor: pointer;
}

/* Keep the panel total row horizontal even under the nav's
   mobile "flex-direction:column" rule in site.css. */
.cart-total-row {
    flex-direction: row !important;
}

/* Cart action buttons — dedicated classes to beat the global ".btn"
   override and avoid conflicting with the existing (broken) .btn-teal rule.
   Teal (#277DA3) matches the .bg-teal nav in site.css. */
.cart-action-btn {
    background-color: #277DA3;
    color: #fff;
    border: none;
}

    .cart-action-btn:hover {
        background-color: #1f6685;
        color: #fff;
    }

.cart-action-outline {
    background-color: #fff;
    border: 1px solid #277DA3;
    color: #277DA3;
}

    .cart-action-outline:hover {
        background-color: #277DA3;
        color: #fff;
    }

.text-teal {
    color: #277DA3;
}

/* Checkout modal */
.checkout-icon-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #eaf3f7; /* light tint of #277DA3 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkout-modal-content {
    animation: checkoutPop .28s ease-out;
}

@keyframes checkoutPop {
    0% {
        transform: scale(.9);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Full "View Cart" modal — item rows */
.cart-modal-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: .9rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
}

    .cart-modal-item:last-child {
        border-bottom: none;
    }

.cart-item-link {
    color: #277DA3;
    text-decoration: none;
}

    .cart-item-link:hover {
        color: #1f6685;
        text-decoration: underline;
    }

/* "Item added" toast — top-right, green, slides in then auto-dismisses */
.cart-toast {
    position: fixed;
    /* Centered horizontally, positioned roughly where the results container
       sits — in the user's direct line of sight after clicking Add to Cart.
       Slides in from top rather than the side for a less disruptive feel. */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -200%);
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #1e7e34; /* success green */
    color: #fff;
    font-weight: 600;
    padding: .75rem 1.25rem;
    border-radius: .6rem;
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.3);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s ease, opacity .3s ease;
    white-space: nowrap;
}

    .cart-toast.show {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    .cart-toast i {
        font-size: 1.15rem;
    }

/* ===== "Added to cart" preview card =====
   Fixed, above modals (1055) and the toast (1080) so it is visible when Add to
   Cart is clicked inside the receipt modal. Centered on screen like the
   checkout modal, but with no backdrop so the page stays usable. */
.cart-added {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(380px, calc(100vw - 2rem));
    z-index: 1090;
    background: #fff;
    color: #212529;
    border-radius: .75rem;
    border-top: 4px solid #1e7e34;
    box-shadow: 0 .5rem 1.75rem rgba(0, 0, 0, .3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -46%) scale(.96);
    transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s;
}

    .cart-added.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, -50%) scale(1);
        transition: transform .25s ease, opacity .25s ease, visibility 0s;
    }

    /* "Already in your cart" — informational, not a success */
    .cart-added.cart-added--info {
        border-top-color: #277DA3;
    }

        .cart-added.cart-added--info .cart-added-icon {
            color: #277DA3;
        }

.cart-added-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem .9rem .5rem;
}

.cart-added-icon {
    color: #1e7e34;
    font-size: 1.15rem;
}

.cart-added-title {
    font-weight: 700;
    flex: 1;
}

.cart-added-close {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: .15rem .3rem;
    line-height: 1;
}

    .cart-added-close:hover {
        color: #212529;
    }

.cart-added-items {
    max-height: 180px;
    overflow-y: auto;
}

.cart-added-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    padding: .55rem .9rem;
    border-top: 1px solid #f0f0f0;
    font-size: .85rem;
}

.cart-added-item-name {
    font-weight: 600;
}

.cart-added-item-amount {
    font-weight: 600;
    white-space: nowrap;
}

.cart-added-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem .9rem;
    border-top: 1px solid #e5e5e5;
    font-size: .85rem;
}

.cart-added-actions {
    display: flex;
    gap: .5rem;
    padding: 0 .9rem .8rem;
}

/* Badge pulse — draws the eye to the pill without blocking anything. */
@keyframes cartBadgePulse {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

.cart-badge.cart-badge--pulse {
    animation: cartBadgePulse .5s ease-out;
}

/* ===== Responsive / accessibility additions ===== */

/* Keep the hover preview panel fully visible on any screen: never wider than
   the viewport, and clamped so it can't run off either edge. */
.cart-panel {
    width: min(400px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
}

/* On mobile the cart sits in its own full-width row (see header.css) and the
   hover panel is suppressed — tapping the pill opens the responsive full-cart
   modal instead (phones don't hover).
   The second, comma-separated condition mirrors the touch-tablet / smart-display
   tier in header.css (iPad Pro, Nest Hub Max, Nest Hub Pro) so the cart matches
   the header instead of rendering desktop-style on those devices. Keep this
   condition in sync with header.css if either changes. */
@media (max-width: 991.98px), (max-width: 1280px) and (pointer: coarse) {
    .cart-panel {
        display: none !important;
    }

    .cart-wrapper {
        margin-right: 0 !important; /* override the 30rem desktop offset */
        width: 100%;
        justify-content: center;
    }

    .cart-pill {
        width: 100%;
        justify-content: center;
    }
}

/* Respect users who prefer reduced motion: disable cart animations. */
@media (prefers-reduced-motion: reduce) {
    .cart-added,
    .cart-added.show {
        transition: none;
        transform: translate(-50%, -50%);
    }

    .cart-badge.cart-badge--pulse {
        animation: none;
    }

    .cart-toast {
        transition: none;
        transform: translate(-50%, -50%);
    }

    .checkout-modal-content {
        animation: none;
    }
}


/* ===== Prior-year dependency additions ===== */

/* Warning variant of the toast. The base .cart-toast is green (success);
   blocked removals and truncated chains are not successes and must not
   read as one. */
.cart-toast.cart-toast--warn {
    background: #b45309; /* amber-700 */
}

/* Locked cart rows — a bill a later tax year depends on cannot be removed
   on its own. The row stays fully legible; only the control is disabled. */
.cart-remove:disabled,
.cart-remove.is-locked {
    opacity: .45;
    cursor: not-allowed;
}

.cart-item.is-locked,
.cart-modal-item.is-locked {
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
}

.cart-lock-reason {
    color: #92400e;
    font-size: .8125rem;
    font-style: italic;
    margin-top: .125rem;
}

    .cart-lock-reason i {
        font-size: .75rem;
        margin-right: .25rem;
    }

/* Delinquent explanation modal */
.delinquent-callout {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: .5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

    .delinquent-callout .delinquent-callout-title {
        color: #92400e;
        font-weight: 600;
        margin-bottom: .5rem;
    }

.delinquent-year-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .delinquent-year-list li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .75rem;
        padding: .5rem 0;
        border-bottom: 1px solid #fde68a;
    }

        .delinquent-year-list li:last-child {
            border-bottom: 0;
        }

    .delinquent-year-list .year {
        font-weight: 600;
    }

/* ===== Prior-year bills, countdown, and issue list ===== */

/* Auto-added prior year bills are highlighted amber so it is obvious the user
   did not choose them. Distinct from .is-locked, which marks removability —
   an orphaned prior bill stays amber even once it becomes removable. */
.cart-item.is-prior,
.cart-modal-item.is-prior {
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
}

.cart-prior-badge {
    display: inline-block;
    background: #f59e0b;
    color: #3d2c00;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: .1rem .4rem;
    border-radius: .25rem;
    margin-left: .35rem;
    vertical-align: middle;
}

/* Inactivity countdown */
.inactivity-countdown {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: #b45309;
    font-variant-numeric: tabular-nums;
}

/* Checkout issue list reuses the delinquent list layout but stacks freely */
#cartIssuesList li {
    display: block;
    padding: .6rem 0;
}

    #cartIssuesList li .issue-notice {
        font-weight: 600;
    }

    #cartIssuesList li .issue-detail {
        color: #92400e;
        font-size: .875rem;
    }