/* Cart Abandonment Recovery — On-site Reminder Card */

/* Scoped border-box. Without it, max-width sizes the CONTENT box and the card's
   padding + border land on top of the cap (620 => 650), overhanging the right
   edge on viewports just above the breakpoint. Also immunises the widget from a
   theme that resets box-sizing to content-box. */
.hrck-cart-reminder,
.hrck-cart-reminder *,
.hrck-cart-reminder *::before,
.hrck-cart-reminder *::after {
    box-sizing: border-box;
}

/* Fixed bottom overlay. Transparent and click-through by construction: only the
   card takes pointer events, so the full-width strip never swallows clicks on
   the page behind it. */
.hrck-cart-reminder {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    padding: 0 16px 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    /* Extra 24px clears the card's shadow when parked offscreen. */
    transform: translateY(calc(100% + 24px));
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* pointer-events stays none on the overlay in every state; the card re-enables
   it for itself. */
.hrck-cart-reminder--visible {
    transform: translateY(0);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .hrck-cart-reminder {
        transition: none;
    }
}

/* The card. Hugs its content and caps out at 620px, so a long property name
   ellipsizes instead of stretching the cluster apart. */
.hrck-cart-reminder__inner {
    position: relative; /* containing block for the stretched CTA link */
    display: flex;
    align-items: center;
    gap: 20px;
    width: fit-content;
    /* 680 rather than 620: the cover photo + a two-line name need the extra
       room, and fit-content means short names still hug. */
    max-width: min(680px, 100%);
    margin: 0 auto;
    padding: 10px 12px 10px 10px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
    pointer-events: auto;
}

/* flex: 0 1 auto (never grow) is what keeps the text and the CTA together —
   a grow here is what opened the canyon at full width. */
.hrck-cart-reminder__content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 1 auto;
    min-width: 0;
}

/* Property cover photo. Fixed box + object-fit so any aspect ratio crops
   predictably instead of stretching the card. */
.hrck-cart-reminder__media {
    flex-shrink: 0;
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
    background: #f0f2f5;
}

.hrck-cart-reminder__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Icon is masked rather than inlined, so it tints from the accent with no
   per-icon markup — same approach as the toolkit's label icons. */
.hrck-cart-reminder__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--hrck-cart-accent, #ff385c) 12%, #ffffff);
    color: var(--hrck-cart-accent, #ff385c);
}

.hrck-cart-reminder__icon::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--hrck-cart-icon) no-repeat center / contain;
    mask: var(--hrck-cart-icon) no-repeat center / contain;
}

/* color-mix is recent; older browsers just get a flat tint rather than nothing. */
@supports not (background: color-mix(in srgb, red 10%, white)) {
    .hrck-cart-reminder__icon {
        background: #f4f5f7;
    }
}

.hrck-cart-reminder__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* The truncation fix: property names are long by nature, and the cover photo
   eats horizontal room, so let the name wrap to two lines and clamp there
   instead of ellipsising mid-word on line one. */
.hrck-cart-reminder__message {
    font-size: 14px;
    color: #333;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-width: 0;
}

.hrck-cart-reminder__message strong {
    font-weight: 600;
}

.hrck-cart-reminder__stay {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hrck-cart-reminder__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* CTA button */
.hrck-cart-reminder__cta {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    /* Accent comes from the admin colour via the same custom-property handoff
       price-alerts/wishlist use. The literal is the fallback, not the source. */
    background: var(--hrck-cart-accent, #ff385c);
    color: #ffffff;
    text-decoration: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: filter 0.2s, transform 0.15s ease;
    line-height: 1.4;
}

.hrck-cart-reminder__cta:hover {
    filter: brightness(0.92);
    color: #ffffff;
    text-decoration: none;
}

.hrck-cart-reminder__cta:active {
    transform: translateY(1px);
}

/* Whole-card link. The CTA is the only anchor; this stretches its hit area over
   the entire card, so clicking anywhere navigates AND still reports as a CTA
   click. Nesting a second <a> around the card would be invalid markup and would
   double-count the click. */
.hrck-cart-reminder--linked .hrck-cart-reminder__cta::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 1;
}

/* :active would fire from anywhere on the stretched area and make the whole card
   look like it nudges. Keep the press effect on the button itself. */
.hrck-cart-reminder--linked .hrck-cart-reminder__cta:active {
    transform: none;
}

.hrck-cart-reminder--linked .hrck-cart-reminder__inner {
    cursor: pointer;
}

/* Dismiss button.
   position/z-index live on the BASE rule, not on a --linked variant: a
   two-class variant would outrank the 600px media query below and strip the
   absolute top-right pin on mobile. Declared here, the media query (equal
   specificity, later in the file) still wins where it needs to. The stacking
   keeps dismiss clickable above the stretched card link. */
.hrck-cart-reminder__dismiss {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    cursor: pointer;
    color: #999;
    border-radius: 50%;
    padding: 0;
    transition: background 0.2s, color 0.2s;
}

.hrck-cart-reminder__dismiss:hover {
    background: #f0f0f0;
    color: #666;
}

/* Responsive: 600px, the width at which the 620px card can no longer hold its
   row layout. (The repo's 960px breakpoint is HomeRunner's desktop/mobile
   boundary — irrelevant to a card this narrow, which sits comfortably in a
   row well below it.) */
@media (max-width: 600px) {
    .hrck-cart-reminder__inner {
        position: relative;
        width: auto;
        max-width: none;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px;
        border-radius: 14px;
    }

    .hrck-cart-reminder__content {
        /* Leave room for the absolutely-positioned dismiss. */
        padding-right: 28px;
    }

    .hrck-cart-reminder__message {
        font-size: 13px;
    }

    /* Narrow screens: the photo shrinks rather than crowding out the name. */
    .hrck-cart-reminder__media {
        width: 44px;
        height: 44px;
    }

    .hrck-cart-reminder__cta {
        flex: 1;
        justify-content: center;
        padding: 11px 16px;
        font-size: 14px;
    }

    .hrck-cart-reminder__dismiss {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 2; /* restated: this rule overrides the base position */
    }
}