/* =========================================================================
   SHOWCASE CARD - the featured product card on the home page.
   -------------------------------------------------------------------------
   EXTRACTED 2026-09-18 from the <style> block inside
   Views/Home/components/_FeaturedShowcase.cshtml, byte-for-byte apart from
   un-escaping Razor's '@@' back to '@'. Nothing was redesigned in the move.

   Why it moved: the owner asked the favourites page to use "exact same match"
   as the home featured card. That card is _ShowcaseCard.cshtml, and its styling
   lived inside the home partial, so no other page could have it. It is a shared
   stylesheet now, loaded by both _FeaturedShowcase and MyFavorites/Index.

   The card markup also leans on a handful of Tailwind utilities from the
   compiled mainpage-v2.css. That file is minified Tailwind WITH a preflight
   reset, so loading it on another page would restyle that whole page - the few
   utilities the card actually uses are therefore re-declared at the bottom of
   this file, scoped under .showcase-card so they cannot leak.
   ========================================================================= */

/* ---- Section padding (top/bottom 16px) ---- */
    .mainpage-v2 .nm-featured-section { padding-top: 16px; padding-bottom: 16px; }

    /* ---- Per-section spacing ---- */
    /* gap between sections: 20px desktop, 16px at <=900 */
    .mainpage-v2 .featured-section { margin-bottom: 20px; }
    .mainpage-v2 .featured-section:last-child { margin-bottom: 0; }
    /* gap between the section header (title + View All) and the carousel: 16px desktop, 12px at <=900 */
    .mainpage-v2 .featured-section .mb-7 { margin-bottom: 16px; }
    @media (max-width: 899px) {
        .mainpage-v2 .featured-section { margin-bottom: 16px; }
        .mainpage-v2 .featured-section:last-child { margin-bottom: 0; }
        .mainpage-v2 .featured-section .mb-7 { margin-bottom: 12px; }
    }
    /* smaller section title on desktop (override xl:text-heading-5) */
    @media (min-width: 1280px) {
        .mainpage-v2 .featured-section h2 { font-size: 20px !important; }
    }

    /* ---- Top title-row "View All" button (hover: blue bg, white text) ---- */
    .mainpage-v2 .featured-view-all {
        padding-top: 6px;
        padding-bottom: 6px;
        font-size: 12px;
    }
    .mainpage-v2 .featured-view-all:hover {
        background-color: var(--color-blue) !important;
        border-color: var(--color-blue) !important;
        color: #fff !important;
    }

    /* ---- Carousel: clip to the container; slides stretch to equal height ---- */
    /* Small vertical padding so the card's bottom (and top) 1px border isn't shaved off
       by this overflow:hidden clip — the bordered frame fills the slide edge to edge. */
    .mainpage-v2 .featured-swiper { overflow: hidden; padding-top: 1px; padding-bottom: 3px; }
    /* site.css styles every .swiper-slide with padding + grey bg + radius; reset that
       here so the card's own bordered frame fills the slide (no padding outside the border). */
    .mainpage-v2 .featured-swiper .swiper-slide {
        height: auto;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        cursor: default;
        text-align: start;
    }

    /* ---- Side nav buttons (like the categories carousel; kept visible on mobile) ---- */
    .mainpage-v2 .featured-carousel-viewport { position: relative; }
    .mainpage-v2 .featured-carousel-viewport .swiper-button-prev,
    .mainpage-v2 .featured-carousel-viewport .swiper-button-next {
        position: absolute;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        z-index: 10;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: 1px solid rgba(15, 23, 42, 0.06);
        border-radius: 9999px;
        color: var(--color-dark, #1C274C);
        background: #fff;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
        opacity: 0.6;   /* subdued at rest (icon + container more visible); full opacity on hover */
        cursor: pointer;
        padding: 0;
        outline: none;
        transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease, transform .2s ease;
    }
    .mainpage-v2 .featured-carousel-viewport .swiper-button-prev svg,
    .mainpage-v2 .featured-carousel-viewport .swiper-button-next svg { width: 16px; height: 16px; }
    .mainpage-v2 .featured-carousel-viewport .swiper-button-prev { left: -16px; }
    .mainpage-v2 .featured-carousel-viewport .swiper-button-next { right: -16px; }
    /* remove Swiper's default font-icon arrow */
    .mainpage-v2 .featured-carousel-viewport .swiper-button-prev::after,
    .mainpage-v2 .featured-carousel-viewport .swiper-button-next::after { content: none; }
    .mainpage-v2 .featured-carousel-viewport .swiper-button-prev:not(.swiper-button-disabled):hover,
    .mainpage-v2 .featured-carousel-viewport .swiper-button-next:not(.swiper-button-disabled):hover {
        background: var(--color-blue, #3C50E0);
        border-color: var(--color-blue, #3C50E0);
        color: #fff;
        opacity: 1;
    }
    /* at the start/end: hide the unusable arrow */
    .mainpage-v2 .featured-carousel-viewport .swiper-button-disabled {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    /* RTL: swap sides and mirror the chevrons */
    [dir="rtl"] .mainpage-v2 .featured-carousel-viewport .swiper-button-prev { left: auto; right: -16px; }
    [dir="rtl"] .mainpage-v2 .featured-carousel-viewport .swiper-button-next { right: auto; left: -16px; }
    [dir="rtl"] .mainpage-v2 .featured-carousel-viewport .swiper-button-prev svg,
    [dir="rtl"] .mainpage-v2 .featured-carousel-viewport .swiper-button-next svg { transform: scaleX(-1); }

    /* ---- Phone breakpoint: align the whole featured-section content to the start,
            and move the action icons to the bottom-left (still stacked vertically) ---- */
    @media (max-width: 639px) {
        /* (The card's own phone sizes - the app's metrics - live with the card rules below.) */
        .mainpage-v2 .featured-section .showcase-actions , .showcase-widget .showcase-actions {
            inset-inline-end: auto;
            inset-inline-start: 0;
            align-items: flex-start;
        }
        /* button at the start (left edge), tooltip follows to its right */
        .mainpage-v2 .featured-section .showcase-action-row , .showcase-widget .showcase-action-row { flex-direction: row; }
        /* smaller favorite button on mobile (whole round button = 24px) */
        .mainpage-v2 .featured-section .showcase-action-btn , .showcase-widget .showcase-action-btn {
            width: 28px !important;
               height: 28px !important;
               min-width: 28px;
               box-sizing: border-box;
               aspect-ratio: 1 / 1;
               flex: 0 0 auto;   /* was 24 with a 14px icon - 5px of room inside the
                  border, which looked like the heart was welded to the ring. */
        }
        .mainpage-v2 .featured-section .showcase-action-btn svg , .showcase-widget .showcase-action-btn svg { width: 18px; height: 18px; }
    }

    /* =====================================================================
       THE CARD - the app's home rail card (owner items 3 + 13, 2026-09-28).
       lib/features/main/features/home/presentation/widgets/home_product_card.dart is the spec,
       metric for metric at phone width (dp = px): an AppCard (surface, r12, the card-edge
       hairline, NO shadow); the photo in a WHITE 150:117 well (r7, 5px inset); then brand line
       (12/16), ONE-line name (13/17), variant chip (21 tall, 5 above), struck original (11 at
       1.35), 10px gap, the price line (12/16, 600, azure deep; warning ink for full payment),
       the lease line (11 at 1.35). Padding 7 top, 10 sides and bottom. From 640px the card is
       wider than any app card, so the type steps up one size; the structure does not change.
       EVERY line has a fixed height and is drawn only when its ROW reserves it
       (_FeaturedShowcase's Reserve* flags), so every card of a swiper is one height and a long
       name ellipsizes instead of clipping a row.
       Scoped to .mainpage-v2: My Favorites loads this file for the heart only (.showcase-widget)
       and never renders this card.
       ===================================================================== */
    .mainpage-v2 .showcase-card { height: 100%; }
    .mainpage-v2 .showcase-card__frame {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: auto;
        overflow: hidden;
        background: #fff;
        border: 1px solid #E6E8EC;      /* the app's card-edge hairline */
        border-radius: 12px;            /* r12 */
        box-shadow: none;
    }

    /* ---- the photo block: 150:117, the well inset 5px, white, r7 ----
       ONE FIXED WIDGET on every card (owner, 2026-09-28: "not the image itself but the widget
       should be consistent size across all cards"). The block is the card's full width at a
       fixed 150:117, and NOTHING inside it is in flow: the well and the picture are absolutely
       placed. Before, the picture was an in-flow child, and a box sized by aspect-ratio keeps an
       automatic minimum height of its CONTENT - so a tall (portrait) photo stretched its own
       widget taller than its neighbours' and pushed that card's text down. Now a tall, wide,
       small, broken or missing picture only changes what is drawn inside the well, never the
       well, and min-height: 0 takes the content minimum out of the sizing altogether. */
    .mainpage-v2 .showcase-card__media {
        position: relative;
        flex: none;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 150 / 117;
        padding: 5px;
    }
    .mainpage-v2 .showcase-card__well {
        position: absolute;
        inset: 5px;                     /* the 5px inset, same as the block's padding */
        display: block;
        overflow: hidden;               /* the hover zoom stays inside the well */
        background: #fff;               /* white, not the grey well (owner, 2026-09-26) */
        border-radius: 7px;
    }
    .mainpage-v2 .showcase-card__media img {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: contain;            /* the whole product, never cropped */
        object-position: center;        /* centred in the well */
        transition: transform .3s ease;
    }
    /* Subtle zoom on hover (the well clips it). */
    .mainpage-v2 .nm-featured-section .showcase-card:hover .showcase-card__media img {
        transform: scale(1.05);
    }

    /* ---- badges: the app's ProductBadge (10/600 on an r5 plate). Discount = the info pair,
            top START corner of the photo; pre-order = the warning pair, bottom END corner, as in
            the app - except from 640px, where the heart holds the bottom end corner (it moves to
            the start below that), so pre-order takes the bottom start corner there. Logical
            properties throughout: Arabic mirrors on its own. ---- */
    .mainpage-v2 .showcase-card__badge {
        position: absolute;
        z-index: 3;
        inset-block-start: 10px;
        inset-inline-start: 10px;
        max-width: calc(100% - 20px);
        padding: 3px 7px;
        border-radius: 5px;
        background: #E8F1FF;            /* selection wash */
        color: #1D4ED8;                 /* azure deep */
        font-size: 10px;
        font-weight: 600;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
    }
    .mainpage-v2 .showcase-card__badge--preorder {
        inset-block-start: auto;
        inset-block-end: 10px;
        inset-inline-start: auto;
        inset-inline-end: 10px;
        background: #FFF5DB;            /* warning light */
        color: #854F0B;                 /* warning deep */
    }
    @media (min-width: 640px) {
        .mainpage-v2 .showcase-card__badge { font-size: 11px; }
        .mainpage-v2 .showcase-card__badge--preorder {
            inset-inline-end: auto;
            inset-inline-start: 10px;
        }
    }

    /* ---- the info: every line one fixed height, start-aligned ---- */
    .mainpage-v2 .showcase-card__head {
        display: flex;
        flex-direction: column;
        flex: none;
        padding: 7px 10px 10px;
        text-align: start;
    }
    .mainpage-v2 .showcase-card__brand {
        height: 16px;
        margin: 0 0 5px;                /* the 5px gap under the brand, reserved with it */
        font-size: 12px;
        line-height: 16px;
        font-weight: 400;
        color: #6B7280;                 /* text secondary */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* The name: ONE bold line (owner item 3). This rule carried !important before (500, 16px,
       two centred lines) and still does, so a utility class on the h3 cannot override it - the
       rule itself is what changed. */
    .mainpage-v2 .showcase-card__head h3 {
        font-size: 13px !important;
        line-height: 17px !important;
        font-weight: 700 !important;
        display: block;
        height: 17px;
        margin: 0;
        overflow: hidden;
    }
    .mainpage-v2 .showcase-card__head h3,
    .mainpage-v2 .showcase-card__head h3 a {
        color: var(--color-dark) !important;
    }
    .mainpage-v2 .showcase-card__head h3 a {
        display: block;
        width: 100%;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;        /* "…" rather than a second line */
        white-space: nowrap !important;
    }
    .mainpage-v2 .showcase-card:hover .showcase-card__head h3,
    .mainpage-v2 .showcase-card:hover .showcase-card__head h3 a {
        color: var(--color-blue) !important;
    }
    /* The variant chip: the tag wash, r4, 9px sides, 21 tall, 5 above; its value always reads
       left to right (dir="ltr" on the element) - "128 GB" must not reorder in Arabic. */
    .mainpage-v2 .showcase-card__tagrow {
        display: flex;
        align-items: center;
        height: 21px;
        margin-top: 5px;
        min-width: 0;
    }
    .mainpage-v2 .showcase-card__tag {
        display: inline-block;
        max-width: 100%;
        height: 21px;
        padding: 0 9px;
        border-radius: 4px;
        background: #D8E8FF;            /* tag wash */
        color: #1D4ED8;                 /* tag ink */
        font-size: 11px;
        font-weight: 600;
        line-height: 21px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        unicode-bidi: isolate;
    }
    /* The struck original: only on a REAL discount (D14, the card decides); reserved per row. */
    .mainpage-v2 .showcase-card__was {
        display: block;
        height: 15px;
        font-size: 11px;
        line-height: 15px;
        font-weight: 400;
        color: #9CA3AF;                 /* text tertiary */
        text-decoration: line-through;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* The price line - displayPrice, verbatim. One line: _FeaturedShowcase scales a line that
       does not fit DOWN (data-fit-line), and the ellipsis is only the no-script fallback. */
    .mainpage-v2 .showcase-card__price {
        display: block;
        height: 16px;
        margin-top: 10px;               /* the app's price gap */
        font-size: 12px;
        line-height: 16px;
        font-weight: 600;
        color: #1D4ED8;                 /* azure deep - the app's priceLine */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mainpage-v2 .showcase-card__price.is-full-payment { color: #854F0B; }   /* warning deep */
    /* Lease line, under the price, a rank quieter. Reserved per row; a card without a lease
       spends the reserved line ABOVE its prices instead (the .is-placeholder the card draws
       there), so every price in a row sits on the same baseline. */
    .mainpage-v2 .showcase-card__lease {
        display: block;
        height: 15px;
        margin-top: 0;
        font-size: 11px;
        line-height: 15px;
        font-weight: 400;
        color: #6B7280;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mainpage-v2 .showcase-card__lease.is-placeholder { visibility: hidden; }

    /* From 640px (3 cards a row, then 4.5): one type size up, same structure. */
    @media (min-width: 640px) {
        .mainpage-v2 .showcase-card__head { padding: 8px 12px 12px; }
        .mainpage-v2 .showcase-card__brand { height: 18px; font-size: 13px; line-height: 18px; }
        .mainpage-v2 .showcase-card__head h3 { font-size: 15px !important; line-height: 20px !important; height: 20px; }
        .mainpage-v2 .showcase-card__tagrow,
        .mainpage-v2 .showcase-card__tag { height: 23px; }
        .mainpage-v2 .showcase-card__tag { font-size: 12px; line-height: 23px; }
        .mainpage-v2 .showcase-card__was,
        .mainpage-v2 .showcase-card__lease { height: 17px; font-size: 12px; line-height: 17px; }
        .mainpage-v2 .showcase-card__price { height: 19px; font-size: 14px; line-height: 19px; }
    }

    /* ---- Actions panel (always visible, bottom inline-end) ---- */
    .mainpage-v2 .showcase-actions , .showcase-widget .showcase-actions {
        position: absolute; inset-block-end: 0; inset-inline-end: 0;
        display: flex; flex-direction: column; gap: 8px; padding: 10px;
        transform: none;
    }

    /* each row: button + tooltip, tooltip sits before the button (inline-start) */
    .mainpage-v2 .showcase-action-row , .showcase-widget .showcase-action-row {
        display: flex; flex-direction: row-reverse; align-items: center; gap: 14px;
    }

    .mainpage-v2 .showcase-action-btn , .showcase-widget .showcase-action-btn {
        position: relative; z-index: 10;
        display: flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border-radius: 9999px;   /* 40, not 36: the 20px icon sat 8px
               from a 1px border and read as touching it (owner, 2026-09-18 - "heart look
               connected to it"). The ICON is unchanged; only the circle grew. */
        border: 1px solid var(--color-gray-2);
        background: #fff; color: var(--color-dark);
        box-shadow: 0 1px 2px rgba(0,0,0,.06);
        -webkit-appearance: none; appearance: none; padding: 0; cursor: pointer; outline: none;
        transition: color .2s ease, background-color .2s ease;
    }
    .mainpage-v2 .showcase-action-btn:hover , .showcase-widget .showcase-action-btn:hover { background: var(--color-blue); color: #fff; }
    /* favorited state (toggled by site.js toggleFav via btn-wishlist-red) */
    .mainpage-v2 .showcase-action-btn.btn-wishlist-red , .showcase-widget .showcase-action-btn.btn-wishlist-red { color: #E83C3C; border-color: #F3C0C0; }
    .mainpage-v2 .showcase-action-btn.btn-wishlist-red:hover , .showcase-widget .showcase-action-btn.btn-wishlist-red:hover { background: #E83C3C; border-color: #E83C3C; color: #fff; }

    /* ---- Tooltip pill ---- */
    .mainpage-v2 .showcase-tooltip , .showcase-widget .showcase-tooltip {
        position: relative; align-self: center;
        background: #fff; color: var(--color-dark);
        font-size: 12px; line-height: 1.25rem; font-weight: 500; text-transform: capitalize;
        border-radius: 9999px; padding: 6px 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,.12);
        opacity: 0; transform: translateX(20px);
        transition: opacity .5s ease, transform .5s ease;
        white-space: nowrap;
    }
    .mainpage-v2 .showcase-action-row:hover .showcase-tooltip , .showcase-widget .showcase-action-row:hover .showcase-tooltip { opacity: 1; transform: translateX(0); }
    .mainpage-v2 .showcase-tooltip__arrow , .showcase-widget .showcase-tooltip__arrow {
        position: absolute; top: 50%; inset-inline-end: -13px; transform: translateY(-50%);
        width: 0; height: 0;
        border: 7px solid transparent; border-inline-start-color: #fff;
    }


/* -------------------------------------------------------------------------
   Tailwind utilities the card markup uses, scoped so they affect ONLY a
   showcase card. Kept deliberately minimal: these mirror mainpage-v2.css for
   the classes present in _ShowcaseCard.cshtml, and nothing else.
   ------------------------------------------------------------------------- */
.showcase-card .relative { position: relative; }
.showcase-card .overflow-hidden { overflow: hidden; }
.showcase-card .rounded-lg { border-radius: .5rem; }
.showcase-card .border { border-width: 1px; border-style: solid; }
.showcase-card .border-gray-2 { border-color: #e5e7eb; }
.showcase-card .bg-white { background-color: #fff; }
.showcase-card .text-center { text-align: center; }
.showcase-card .flex { display: flex; }
.showcase-card .items-center { align-items: center; }
.showcase-card .justify-center { justify-content: center; }
.showcase-card .line-through { text-decoration: line-through; }
.showcase-card .text-dark { color: #191919; }
.showcase-card .text-dark-4 { color: #9e9e9e; }
.showcase-card .text-sm { font-size: .875rem; }
.showcase-card .font-normal { font-weight: 400; }
/* line-clamp-2 is absent from the compiled file, so the home card relies on the
   block above; declared here for the same two-line title everywhere. */
.showcase-card .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -------------------------------------------------------------------------
   REUSING JUST THE FAVOURITE WIDGET OUTSIDE THE HOME PAGE.
   Every rule above is scoped to .mainpage-v2, the class on the home page's
   root, so the heart widget would be completely unstyled anywhere else. Each
   widget selector therefore carries a second scope, .showcase-widget, which
   any page can put on the element wrapping the button. The home selectors are
   untouched, so the home card cannot change as a side effect.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   HOME: match the shop heart exactly (owner, 2026-09-18: "home page reduce
   heart size to 18 like shop").

   The variant above steps down at 639px, while shop steps down at 767.98px.
   Between those two widths home therefore showed a 20px heart in a 40px circle
   while shop showed 18px in 28px - the two pages disagreed for no reason other
   than a mismatched breakpoint. This aligns home to shop's breakpoint and its
   28/18 pair.

   min/max width and height together, not just width/height: the button sits in
   flex parents, and a flex item can be compressed past a plain width but never
   past its min/max - that is what actually guarantees a circle instead of an
   oval.
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .mainpage-v2 .showcase-action-btn,
    .mainpage-v2 .featured-section .showcase-action-btn,
    .showcase-widget .showcase-action-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        flex: 0 0 28px !important;
        box-sizing: border-box !important;
        aspect-ratio: 1 / 1;
        border-radius: 50% !important;
        padding: 0 !important;
    }
    .mainpage-v2 .showcase-action-btn svg,
    .mainpage-v2 .featured-section .showcase-action-btn svg,
    .showcase-widget .showcase-action-btn svg {
        width: 18px !important;
        height: 18px !important;
        display: block;
    }
    /* the row must not shrink its own button */
    .mainpage-v2 .showcase-action-row,
    .showcase-widget .showcase-action-row { flex: 0 0 auto; }
}