/* ============================================================
   MeUmbCart LicenseShop – Frontend Styles
   Bootstrap 5 + Bootstrap Icons are loaded via CDN.
   This file adds shop-specific enhancements.
   ============================================================ */

/* ── Custom properties (shop-specific only) ────────────────── */
:root {
    --muc-primary:       #0d6efd;
    --muc-primary-dark:  #0a58ca;
    --muc-success:       #198754;
    --muc-danger:        #dc3545;
    --muc-warning:       #ffc107;
    --muc-card-shadow:   0 .125rem .5rem rgba(0,0,0,.1);
}

/* NOTE: Global layout elements (body background, .muc-navbar, .muc-footer,
   .muc-hero) are intentionally NOT styled here. The shop renders inside the
   host website's layout, so those elements are owned by the host theme
   (e.g. site.css of the MeSoftware web presence). Styling them here would
   override and conflict with the host design (e.g. a dark vs. white navbar).
   Only shop-specific components are styled below. */

/* ── Cart badge (shop-specific) ────────────────────────────── */
.muc-cart-badge {
    font-size: .65rem;
    top: -4px;
    right: -6px;
}

/* ── Product cards ─────────────────────────────────────────── */
.muc-software-card {
    border: none;
    box-shadow: var(--muc-card-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}

.muc-software-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.15);
}

/* Product image: a fixed height keeps the cards in a row aligned even when the
   uploaded images have different aspect ratios (plan 36, phase 4). */
.muc-software-card__image {
    height: 180px;
    object-fit: contain;
    background: #f8f9fa;
    padding: 1rem;
}

.muc-software-card .card-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.muc-price-tag {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--muc-success);
}

/* ── Catalogue (shop page, 13.10.) ─────────────────────────────
   Colours come from Bootstrap's --bs-primary, which the host theme sets
   (site.css of MeSoftware: blue #2563EB) – the shop follows the site. */
.muc-catalog-filter .input-group-text {
    color: var(--bs-secondary-color);
}

.muc-category-list .list-group-item {
    border: 0;
    border-radius: .5rem;
    padding: .45rem .75rem;
    margin-bottom: .125rem;
    color: var(--bs-body-color);
}

.muc-category-list .list-group-item:hover {
    background-color: rgba(var(--bs-primary-rgb), .06);
}

.muc-category-list .list-group-item.active {
    background-color: rgba(var(--bs-primary-rgb), .1);
    color: var(--bs-primary);
    font-weight: 600;
}

.muc-category-count {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-weight: 500;
}

.muc-category-list .list-group-item.active .muc-category-count {
    background-color: var(--bs-primary);
    color: #fff;
}

/* Below lg the filter column sits above the products: the categories become one
   scrolling row, otherwise a long list would push every product off the screen. */
@media (max-width: 991.98px) {
    .muc-category-list {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: .5rem;
        overflow-x: auto;
        padding-bottom: .25rem;
        scrollbar-width: thin;
    }

    .muc-category-list .list-group-item {
        flex: 0 0 auto;
        gap: .5rem;
        white-space: nowrap;
        margin-bottom: 0;
        border: 1px solid var(--bs-border-color);
        border-radius: 2rem;
    }

    .muc-category-list .list-group-item.active {
        border-color: rgba(var(--bs-primary-rgb), .4);
    }
}

.muc-catalog-card {
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: .75rem;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.muc-catalog-card:hover {
    border-color: rgba(var(--bs-primary-rgb), .35);
    box-shadow: 0 .75rem 1.75rem rgba(var(--bs-primary-rgb), .12);
    transform: translateY(-3px);
}

.muc-catalog-card__logo {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
    object-fit: contain;
}

.muc-catalog-card__logo--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--bs-primary-rgb), .1);
    color: var(--bs-primary);
    font-size: 1.4rem;
}

.muc-catalog-card .min-w-0 {
    min-width: 0;
}

.muc-catalog-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.muc-catalog-card__title a:hover {
    color: var(--bs-primary) !important;
}

.muc-catalog-card__category {
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

/* Three lines at most – the card is a teaser, the product page carries the full text. */
.muc-catalog-card__text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .925rem;
    margin-bottom: 0;
}

.muc-catalog-card__price {
    font-size: 1.15rem;
    font-weight: 700;
}

.muc-catalog-card__period {
    font-size: .85rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.muc-catalog-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    font-size: .825rem;
    color: var(--bs-secondary-color);
    margin-top: .25rem;
}

.muc-catalog-card__trial {
    color: var(--bs-primary);
}

.muc-catalog-card__editions > summary {
    list-style: none;
}

.muc-catalog-card__editions > summary::-webkit-details-marker {
    display: none;
}

/* ── Software detail ───────────────────────────────────────── */
.muc-detail-card {
    border: none;
    box-shadow: var(--muc-card-shadow);
}

.muc-sticky-sidebar {
    position: sticky;
    top: 1.5rem;
}

/* ── Cart table ────────────────────────────────────────────── */
.muc-cart-table thead th {
    background-color: #e9ecef;
    white-space: nowrap;
}

.muc-quantity-input {
    width: 5rem;
    text-align: center;
}

/* ── Checkout ──────────────────────────────────────────────── */
.muc-checkout-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
    padding-bottom: .5rem;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 1.25rem;
}

.muc-order-summary {
    border: none;
    box-shadow: var(--muc-card-shadow);
}

/* ── Confirmation / Success / Cancelled ────────────────────── */
.muc-status-card {
    border: none;
    box-shadow: 0 .25rem 1rem rgba(0,0,0,.12);
}

.muc-status-icon {
    font-size: 4rem;
    line-height: 1;
}

/* ── Breadcrumb ────────────────────────────────────────────── */
.muc-breadcrumb {
    background: transparent;
    padding: .5rem 0;
    font-size: .9rem;
}

/* ── Member account dashboard cards ───────────────────────── */
.muc-account-card {
    transition: box-shadow 0.2s ease, transform 0.1s ease;
    cursor: pointer;
}

.muc-account-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* ── Responsive tweaks ─────────────────────────────────────── */
@media (max-width: 575.98px) {
    .muc-hero {
        padding: 2.5rem 0 2rem;
    }

    .muc-price-tag {
        font-size: 1.2rem;
    }

    .muc-quantity-input {
        width: 4rem;
    }
}