/* filepath: website_sale_aplicoop/static/src/css/components/order-card.css */

/**
 * Order card (Eskaera)
 *
 * Markup (eskaera_page):
 *   .eskaera-order-card-wrapper
 *     └ .eskaera-order-card[.eskaera-order-card--special]
 *         └ .card-body
 *             ├ .order-badge-position   (product count)
 *             ├ a.eskaera-order-card-link  → .card-header-top (image, title, description)
 *             ├ .card-meta-compact > .meta-grid   (dates, badges)
 *             └ a.btn  (Browse products)
 *
 * Note the link only wraps the header, so the whole card is NOT clickable —
 * the hover/focus treatment below is applied to the card while the pointer is
 * anywhere over it, but `cursor: pointer` is left to the two real links.
 */

.eskaera-order-card-link {
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

.eskaera-order-card {
    position: relative;
    display: flex;
    flex-direction: column;
    /* min-height in rem, not px: at 200% zoom a px floor clips the content. */
    min-height: 18rem;
    height: 100%;
    border: 1px solid var(--ac-color-order-border);
    border-radius: var(--ac-radius-lg);
    background: var(--ac-surface-order);
    box-shadow: var(--ac-shadow-md);
    overflow: hidden;
    transition: transform var(--ac-transition-normal), box-shadow var(--ac-transition-normal),
        border-color var(--ac-transition-normal), background var(--ac-transition-normal);
    animation: slideInUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Accent bar along the top edge. */
.eskaera-order-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    background: linear-gradient(90deg, var(--ac-color-order), var(--ac-color-order-strong));
}

/* ---------- Header ---------- */

.card-header-top {
    display: flex;
    gap: var(--ac-space-sm);
    align-items: flex-start;
    margin-bottom: var(--ac-space-2xs);
}

.card-header-top > div:last-child {
    flex: 1;
    text-align: left;
}

.card-header-top .card-title {
    margin: 0;
}

.eskaera-order-card .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: var(--ac-space-2xs);
    padding: var(--ac-space-sm) var(--ac-space-sm) 0;
}

.eskaera-order-card .card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin: 0;
    overflow: hidden;
    font-size: var(--ac-text-base);
    font-weight: var(--ac-weight-bold);
    line-height: var(--ac-leading-tight);
    color: var(--ac-text-primary);
    text-overflow: ellipsis;
}

.order-desc-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin: 0;
    overflow: hidden;
    font-size: var(--ac-text-xs);
    line-height: var(--ac-leading-snug);
    color: var(--ac-text-muted);
    text-overflow: ellipsis;
}

/* ---------- Thumbnails ---------- */

.order-thumbnail-sm {
    flex-shrink: 0;
    width: 5.625rem;
    height: 5.625rem;
    border: 2px solid var(--ac-color-order-border);
    border-radius: var(--ac-radius-md);
    object-fit: cover;
}

.order-thumbnail-md {
    flex-shrink: 0;
    width: 7.5rem;
    height: 7.5rem;
    border-radius: var(--ac-radius-md);
    box-shadow: var(--ac-shadow-sm);
    object-fit: cover;
}

/* ---------- Product-count badge ---------- */

.order-badge-position {
    position: absolute;
    top: var(--ac-space-md);
    right: var(--ac-space-md);
    z-index: 1;
    display: flex;
}

.order-badge-custom {
    display: flex;
    align-items: center;
    gap: var(--ac-space-sm);
    padding: var(--ac-space-sm) var(--ac-space-xs);
    border-radius: var(--ac-radius-sm);
    font-size: var(--ac-text-sm);
    font-weight: var(--ac-weight-bold);
    box-shadow: var(--ac-shadow-md);
}

/* ---------- Meta block ---------- */

.card-meta-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: var(--ac-space-2xs) auto 0;
    padding: var(--ac-space-sm);
    border-top: 1px solid var(--ac-color-order-border);
    border-radius: 0 0 var(--ac-radius-lg) var(--ac-radius-lg);
    background: var(--ac-surface-sunken);
}

.meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ac-space-sm) var(--ac-space-md);
    align-items: center;
    justify-content: center;
}

.meta-grid .meta-item {
    display: flex;
    align-items: center;
    gap: var(--ac-space-2xs);
    font-size: var(--ac-text-xs);
}

.meta-grid .meta-label {
    min-width: auto;
    font-weight: var(--ac-weight-semibold);
    color: var(--ac-text-secondary);
}

.meta-grid .meta-value {
    color: var(--ac-text-muted);
}

.meta-grid .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ac-space-2xs);
    padding: var(--ac-space-2xs) var(--ac-space-xs);
    font-size: var(--ac-text-2xs);
}

.meta-item--full {
    width: 100%;
    justify-content: center;
}

/* Home delivery: its own row, badge then date, centred as a pair — so it stays
   centred whether or not the date is there. */
.meta-grid .meta-item--delivery {
    width: 100%;
    justify-content: center;
    gap: var(--ac-space-sm);
}

/* ---------- Call to action ---------- */

/* Bootstrap 5.3 drives .btn from unprefixed custom properties, so the card's
   own colours are set by redefining those instead of piling up !important. */
.eskaera-order-card .btn {
    --btn-color: var(--ac-text-on-fill);
    --btn-bg: var(--ac-color-order);
    --btn-border-color: transparent;
    --btn-hover-color: var(--ac-text-on-fill);
    --btn-hover-bg: var(--ac-color-order-strong);
    --btn-hover-border-color: transparent;
    --btn-active-color: var(--ac-text-on-fill);
    --btn-active-bg: var(--ac-color-order-deep);
    --btn-active-border-color: transparent;
    --btn-border-radius: var(--ac-radius-sm);
    --btn-font-size: var(--ac-text-sm);
    --btn-font-weight: var(--ac-weight-semibold);
    --btn-padding-y: var(--ac-space-sm);
    --btn-padding-x: var(--ac-space-md);
    display: inline-flex;
    align-items: center;
    gap: var(--ac-space-sm);
    margin: auto auto var(--ac-space-sm);
    box-shadow: var(--ac-shadow-sm);
    text-align: center;
    text-decoration: none;
    transition: background-color var(--ac-transition-fast), box-shadow var(--ac-transition-fast),
        transform var(--ac-transition-fast);
}

/* ---------- Special orders ---------- */

.eskaera-order-card--special {
    border-color: var(--ac-color-special-border);
    background: var(--ac-surface-special);
}

.eskaera-order-card--special::before {
    background: linear-gradient(90deg, var(--ac-color-special), var(--ac-color-special-strong));
}

.special-order-badge {
    /* Amber needs dark text — white on it is 2.15:1. */
    --badge-color: var(--ac-text-on-special);
    --badge-font-size: var(--ac-text-2xs);
    --badge-border-radius: var(--ac-radius-sm);
    --badge-padding-x: var(--ac-space-xs);
    --badge-padding-y: var(--ac-space-2xs);
    display: inline-flex;
    align-items: center;
    gap: var(--ac-space-2xs);
    background: linear-gradient(135deg, var(--ac-color-special), var(--ac-color-special-strong));
    font-weight: var(--ac-weight-semibold);
    box-shadow: var(--ac-shadow-sm);
}

/* ---------- States ---------- */

@media (hover: hover) and (pointer: fine) {
    .eskaera-order-card:hover {
        transform: translateY(-8px);
        border-color: var(--ac-color-order-border-hover);
        background: var(--ac-surface-order-hover);
        box-shadow: var(--ac-shadow-lg);
    }

    .eskaera-order-card--special:hover {
        border-color: var(--ac-color-special-border-hover);
        background: var(--ac-surface-special-hover);
    }

    .eskaera-order-card .btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--ac-shadow-md);
    }
}

/* Keyboard users get the same emphasis as a hover, plus a ring on the card
   that holds the focused link. */
.eskaera-order-card:focus-within {
    border-color: var(--ac-color-order-border-hover);
    background: var(--ac-surface-order-hover);
    box-shadow: var(--ac-shadow-lg);
}

.eskaera-order-card-link:focus-visible,
.eskaera-order-card .btn:focus-visible {
    outline: var(--ac-focus-ring-width) solid var(--ac-focus-ring-color);
    outline-offset: var(--ac-focus-ring-offset);
    border-radius: var(--ac-radius-sm);
}

/* The entry animation is decorative; motion sensitivity outranks it, and the
   hover lift has to stop moving too. */
@media (prefers-reduced-motion: reduce) {
    .eskaera-order-card {
        animation: none;
        transition: none;
    }

    .eskaera-order-card:hover,
    .eskaera-order-card .btn,
    .eskaera-order-card .btn:hover {
        transform: none;
        transition: none;
    }
}