/* ==========================================================================
   ALUMINIUMGLASS.CO.IN
   Public Marketplace
   Cards Component
   --------------------------------------------------------------------------
   Path:
   /home/jqkmqvml/public_html/assets/css/components/cards.css

   LIVE DATA POLICY
   --------------------------------------------------------------------------
   This file contains presentation only.

   Data MUST come from:
   Database
      ↓
   Repository
      ↓
   Service
      ↓
   Controller
      ↓
   API
      ↓
   Frontend JS
      ↓
   Card HTML

   NO fake/demo/sample marketplace data.
   NO hardcoded vendor names.
   NO hardcoded business names.
   NO hardcoded product/service records.
   NO fake ratings/counts/prices.
   ========================================================================== */


/* ==========================================================================
   1. CARD SYSTEM VARIABLES
   ========================================================================== */

:root {
    --card-bg:
        var(--color-surface, #ffffff);

    --card-bg-muted:
        var(--color-surface-muted, #f8fafc);

    --card-border:
        var(--color-border, #e2e8f0);

    --card-border-hover:
        var(--color-primary, #2563eb);

    --card-text:
        var(--color-text, #111827);

    --card-text-muted:
        var(--color-text-muted, #64748b);

    --card-text-subtle:
        var(--color-text-subtle, #94a3b8);

    --card-primary:
        var(--color-primary, #2563eb);

    --card-primary-hover:
        var(--color-primary-hover, #1d4ed8);

    --card-success:
        var(--color-success, #16a34a);

    --card-warning:
        var(--color-warning, #d97706);

    --card-danger:
        var(--color-danger, #dc2626);

    --card-radius:
        var(--radius-lg, 12px);

    --card-radius-small:
        var(--radius-md, 8px);

    --card-shadow:
        var(
            --shadow-sm,
            0 2px 8px rgba(15, 23, 42, 0.06)
        );

    --card-shadow-hover:
        var(
            --shadow-md,
            0 8px 24px rgba(15, 23, 42, 0.10)
        );

    --card-transition:
        180ms ease;
}


/* ==========================================================================
   2. GENERIC CARD
   ========================================================================== */

.card,
[data-card],
.marketplace-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    background:
        var(--card-bg);

    border: 1px solid
        var(--card-border);

    border-radius:
        var(--card-radius);

    box-shadow:
        var(--card-shadow);

    color:
        var(--card-text);

    overflow: hidden;

    transition:
        border-color var(--card-transition),
        box-shadow var(--card-transition),
        transform var(--card-transition);
}

.card:hover,
[data-card]:hover,
.marketplace-card:hover {
    border-color:
        var(--card-border-hover);

    box-shadow:
        var(--card-shadow-hover);
}


/* ==========================================================================
   3. CARD LINK WRAPPER
   ========================================================================== */

.card__link,
.marketplace-card__link {
    color: inherit;
    text-decoration: none;
}

.card__link:focus-visible,
.marketplace-card__link:focus-visible {
    outline: 2px solid
        var(--card-primary);

    outline-offset: 2px;
}


/* ==========================================================================
   4. CARD MEDIA
   ========================================================================== */

.card__media,
.marketplace-card__media {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background:
        var(--card-bg-muted);
}

.card__media img,
.marketplace-card__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform var(--card-transition);
}

.card:hover .card__media img,
.marketplace-card:hover .marketplace-card__media img {
    transform: scale(1.025);
}


/* ==========================================================================
   5. MEDIA PLACEHOLDER
   ========================================================================== */

.card__media-placeholder,
.marketplace-card__media-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        var(--card-bg-muted);

    color:
        var(--card-text-subtle);
}

.card__media-placeholder svg,
.marketplace-card__media-placeholder svg {
    width: 42px;
    height: 42px;
}


/* ==========================================================================
   6. CARD BODY
   ========================================================================== */

.card__body,
.marketplace-card__body {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 16px;
}


/* ==========================================================================
   7. CARD HEADER
   ========================================================================== */

.card__header,
.marketplace-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;

    min-width: 0;
}

.card__header-content,
.marketplace-card__header-content {
    min-width: 0;
    flex: 1 1 auto;
}


/* ==========================================================================
   8. CARD TITLE
   ========================================================================== */

.card__title,
.marketplace-card__title {
    margin: 0;

    color:
        var(--card-text);

    font-size:
        var(--font-size-lg, 1.0625rem);

    font-weight:
        var(--font-weight-semibold, 600);

    line-height: 1.4;

    overflow-wrap: anywhere;
}

.card__title a,
.marketplace-card__title a {
    color: inherit;
    text-decoration: none;
}

.card__title a:hover,
.marketplace-card__title a:hover {
    color:
        var(--card-primary);
}

.card__title a:focus-visible,
.marketplace-card__title a:focus-visible {
    outline: 2px solid
        var(--card-primary);

    outline-offset: 2px;
}


/* ==========================================================================
   9. CARD SUBTITLE
   ========================================================================== */

.card__subtitle,
.marketplace-card__subtitle {
    margin-block-start: 4px;

    color:
        var(--card-text-muted);

    font-size:
        var(--font-size-sm, 0.875rem);

    line-height: 1.45;
}


/* ==========================================================================
   10. CARD DESCRIPTION
   ========================================================================== */

.card__description,
.marketplace-card__description {
    margin-block-start: 10px;

    color:
        var(--card-text-muted);

    font-size:
        var(--font-size-sm, 0.875rem);

    line-height: 1.6;

    overflow-wrap: anywhere;
}

.card__description--clamp-2,
.marketplace-card__description--clamp-2 {
    display: -webkit-box;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}

.card__description--clamp-3,
.marketplace-card__description--clamp-3 {
    display: -webkit-box;

    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* ==========================================================================
   11. CARD META
   ========================================================================== */

.card__meta,
.marketplace-card__meta {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

    margin-block-start: 10px;

    color:
        var(--card-text-muted);

    font-size:
        var(--font-size-sm, 0.8125rem);

    line-height: 1.4;
}

.card__meta-item,
.marketplace-card__meta-item {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    min-width: 0;
}

.card__meta-icon,
.marketplace-card__meta-icon {
    width: 16px;
    height: 16px;

    flex: 0 0 auto;

    color:
        var(--card-text-subtle);
}


/* ==========================================================================
   12. LOCATION
   ========================================================================== */

.card__location,
.marketplace-card__location {
    display: flex;
    align-items: flex-start;

    gap: 7px;

    margin-block-start: 10px;

    color:
        var(--card-text-muted);

    font-size:
        var(--font-size-sm, 0.8125rem);

    line-height: 1.45;
}

.card__location-icon,
.marketplace-card__location-icon {
    width: 17px;
    height: 17px;

    flex: 0 0 auto;

    margin-block-start: 1px;

    color:
        var(--card-primary);
}

.card__location-text,
.marketplace-card__location-text {
    min-width: 0;

    overflow-wrap: anywhere;
}


/* ==========================================================================
   13. VERIFICATION / BADGES
   ========================================================================== */

.card__badges,
.marketplace-card__badges {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 6px;
}

.card__badge,
.marketplace-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    min-height: 26px;

    padding: 4px 8px;

    border: 1px solid
        var(--card-border);

    border-radius: 999px;

    background:
        var(--card-bg);

    color:
        var(--card-text-muted);

    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

.card__badge--verified,
.marketplace-card__badge--verified {
    border-color:
        color-mix(
            in srgb,
            var(--card-success) 30%,
            var(--card-border)
        );

    color:
        var(--card-success);
}

.card__badge--featured,
.marketplace-card__badge--featured {
    border-color:
        color-mix(
            in srgb,
            var(--card-primary) 30%,
            var(--card-border)
        );

    color:
        var(--card-primary);
}


/* ==========================================================================
   14. CARD OVERLAY
   ========================================================================== */

.card__overlay,
.marketplace-card__overlay {
    position: absolute;

    inset-block-start: 10px;
    inset-inline-start: 10px;
    inset-inline-end: 10px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 8px;

    z-index: 2;

    pointer-events: none;
}

.card__overlay > *,
.marketplace-card__overlay > * {
    pointer-events: auto;
}


/* ==========================================================================
   15. FAVORITE BUTTON
   ========================================================================== */

.card__favorite,
.marketplace-card__favorite {
    width: 36px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid
        color-mix(
            in srgb,
            var(--card-border) 85%,
            transparent
        );

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--card-bg) 94%,
            transparent
        );

    color:
        var(--card-text-muted);

    cursor: pointer;

    backdrop-filter: blur(8px);

    transition:
        color var(--card-transition),
        background-color var(--card-transition),
        border-color var(--card-transition);
}

.card__favorite:hover,
.marketplace-card__favorite:hover {
    color:
        var(--card-danger);

    border-color:
        color-mix(
            in srgb,
            var(--card-danger) 35%,
            var(--card-border)
        );
}

.card__favorite[aria-pressed="true"],
.marketplace-card__favorite[aria-pressed="true"] {
    color:
        var(--card-danger);
}

.card__favorite:focus-visible,
.marketplace-card__favorite:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--card-primary) 20%,
            transparent
        );
}


/* ==========================================================================
   16. RATING
   ========================================================================== */

.card__rating,
.marketplace-card__rating {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    margin-block-start: 10px;
}

.card__rating-stars,
.marketplace-card__rating-stars {
    display: inline-flex;

    gap: 2px;

    color:
        var(--card-warning);
}

.card__rating-star,
.marketplace-card__rating-star {
    width: 15px;
    height: 15px;
}

.card__rating-value,
.marketplace-card__rating-value {
    color:
        var(--card-text);

    font-size: 0.8125rem;
    font-weight: 600;
}

.card__rating-count,
.marketplace-card__rating-count {
    color:
        var(--card-text-muted);

    font-size: 0.75rem;
}


/* ==========================================================================
   17. PRICE
   ========================================================================== */

.card__price,
.marketplace-card__price {
    display: flex;
    flex-wrap: wrap;

    align-items: baseline;

    gap: 7px;

    margin-block-start: 12px;
}

.card__price-current,
.marketplace-card__price-current {
    color:
        var(--card-text);

    font-size:
        var(--font-size-xl, 1.25rem);

    font-weight:
        var(--font-weight-bold, 700);
}

.card__price-old,
.marketplace-card__price-old {
    color:
        var(--card-text-subtle);

    font-size:
        var(--font-size-sm, 0.8125rem);

    text-decoration: line-through;
}

.card__price-unit,
.marketplace-card__price-unit {
    color:
        var(--card-text-muted);

    font-size:
        0.75rem;
}


/* ==========================================================================
   18. CTA / ACTIONS
   ========================================================================== */

.card__actions,
.marketplace-card__actions {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

    margin-block-start: 16px;
}

.card__action,
.marketplace-card__action {
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 8px 13px;

    border: 1px solid
        var(--card-border);

    border-radius:
        var(--card-radius-small, 8px);

    background:
        var(--card-bg);

    color:
        var(--card-text);

    font: inherit;

    font-size: 0.8125rem;
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition:
        border-color var(--card-transition),
        background-color var(--card-transition),
        color var(--card-transition);
}

.card__action:hover,
.marketplace-card__action:hover {
    border-color:
        var(--card-primary);

    color:
        var(--card-primary);
}

.card__action:focus-visible,
.marketplace-card__action:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--card-primary) 18%,
            transparent
        );
}

.card__action--primary,
.marketplace-card__action--primary {
    border-color:
        var(--card-primary);

    background:
        var(--card-primary);

    color:
        #ffffff;
}

.card__action--primary:hover,
.marketplace-card__action--primary:hover {
    border-color:
        var(--card-primary-hover);

    background:
        var(--card-primary-hover);

    color:
        #ffffff;
}


/* ==========================================================================
   19. BUSINESS CARD
   ========================================================================== */

.business-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    background:
        var(--card-bg);

    border: 1px solid
        var(--card-border);

    border-radius:
        var(--card-radius);

    overflow: hidden;

    box-shadow:
        var(--card-shadow);

    transition:
        border-color var(--card-transition),
        box-shadow var(--card-transition);
}

.business-card:hover {
    border-color:
        var(--card-border-hover);

    box-shadow:
        var(--card-shadow-hover);
}

.business-card__header {
    display: flex;
    gap: 12px;

    padding: 16px;
}

.business-card__logo {
    width: 64px;
    height: 64px;

    flex: 0 0 64px;

    overflow: hidden;

    border: 1px solid
        var(--card-border);

    border-radius:
        var(--card-radius-small);

    background:
        var(--card-bg-muted);
}

.business-card__logo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.business-card__content {
    min-width: 0;
    flex: 1 1 auto;
}


/* ==========================================================================
   20. VENDOR CARD
   ========================================================================== */

.vendor-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 16px;

    background:
        var(--card-bg);

    border: 1px solid
        var(--card-border);

    border-radius:
        var(--card-radius);

    box-shadow:
        var(--card-shadow);

    transition:
        border-color var(--card-transition),
        box-shadow var(--card-transition);
}

.vendor-card:hover {
    border-color:
        var(--card-border-hover);

    box-shadow:
        var(--card-shadow-hover);
}

.vendor-card__identity {
    display: flex;
    align-items: center;

    gap: 12px;
}

.vendor-card__avatar {
    width: 56px;
    height: 56px;

    flex: 0 0 56px;

    overflow: hidden;

    border-radius: 50%;

    background:
        var(--card-bg-muted);
}

.vendor-card__avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.vendor-card__identity-content {
    min-width: 0;
    flex: 1 1 auto;
}


/* ==========================================================================
   21. SERVICE CARD
   ========================================================================== */

.service-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    background:
        var(--card-bg);

    border: 1px solid
        var(--card-border);

    border-radius:
        var(--card-radius);

    overflow: hidden;

    box-shadow:
        var(--card-shadow);

    transition:
        border-color var(--card-transition),
        box-shadow var(--card-transition);
}

.service-card:hover {
    border-color:
        var(--card-border-hover);

    box-shadow:
        var(--card-shadow-hover);
}

.service-card__content {
    display: flex;
    flex-direction: column;

    padding: 16px;
}


/* ==========================================================================
   22. PRODUCT CARD
   ========================================================================== */

.product-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    background:
        var(--card-bg);

    border: 1px solid
        var(--card-border);

    border-radius:
        var(--card-radius);

    overflow: hidden;

    box-shadow:
        var(--card-shadow);

    transition:
        border-color var(--card-transition),
        box-shadow var(--card-transition),
        transform var(--card-transition);
}

.product-card:hover {
    border-color:
        var(--card-border-hover);

    box-shadow:
        var(--card-shadow-hover);

    transform: translateY(-2px);
}

.product-card__content {
    display: flex;
    flex-direction: column;

    padding: 14px;
}


/* ==========================================================================
   23. CATEGORY CARD
   ========================================================================== */

.category-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    background:
        var(--card-bg);

    border: 1px solid
        var(--card-border);

    border-radius:
        var(--card-radius);

    overflow: hidden;

    box-shadow:
        var(--card-shadow);

    transition:
        border-color var(--card-transition),
        box-shadow var(--card-transition),
        transform var(--card-transition);
}

.category-card:hover {
    border-color:
        var(--card-border-hover);

    box-shadow:
        var(--card-shadow-hover);

    transform: translateY(-2px);
}

.category-card__icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 16px;

    border-radius:
        var(--card-radius-small);

    background:
        color-mix(
            in srgb,
            var(--card-primary) 9%,
            transparent
        );

    color:
        var(--card-primary);
}

.category-card__body {
    padding: 0 16px 16px;
}


/* ==========================================================================
   24. REVIEW CARD
   ========================================================================== */

.review-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 16px;

    background:
        var(--card-bg);

    border: 1px solid
        var(--card-border);

    border-radius:
        var(--card-radius);
}

.review-card__author {
    display: flex;
    align-items: center;

    gap: 10px;
}

.review-card__avatar {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    overflow: hidden;

    border-radius: 50%;

    background:
        var(--card-bg-muted);
}

.review-card__avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.review-card__content {
    min-width: 0;
    flex: 1 1 auto;
}

.review-card__text {
    margin-block-start: 12px;

    color:
        var(--card-text);

    font-size:
        var(--font-size-sm, 0.875rem);

    line-height: 1.6;
}


/* ==========================================================================
   25. QUOTE CARD
   ========================================================================== */

.quote-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 16px;

    background:
        var(--card-bg);

    border: 1px solid
        var(--card-border);

    border-radius:
        var(--card-radius);

    box-shadow:
        var(--card-shadow);
}

.quote-card__summary {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.quote-card__field {
    min-width: 0;
}

.quote-card__label {
    display: block;

    margin-block-end: 3px;

    color:
        var(--card-text-subtle);

    font-size: 0.75rem;
}

.quote-card__value {
    color:
        var(--card-text);

    font-size: 0.875rem;
    font-weight: 600;

    overflow-wrap: anywhere;
}


/* ==========================================================================
   26. OFFER CARD
   ========================================================================== */

.offer-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 16px;

    background:
        var(--card-bg);

    border: 1px solid
        var(--card-border);

    border-radius:
        var(--card-radius);

    box-shadow:
        var(--card-shadow);
}

.offer-card__content {
    min-width: 0;
}

.offer-card__validity {
    margin-block-start: 8px;

    color:
        var(--card-text-muted);

    font-size: 0.75rem;
}


/* ==========================================================================
   27. PRICE CARD
   ========================================================================== */

.price-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 20px;

    background:
        var(--card-bg);

    border: 1px solid
        var(--card-border);

    border-radius:
        var(--card-radius);

    box-shadow:
        var(--card-shadow);
}

.price-card__price {
    margin-block-start: 12px;

    color:
        var(--card-text);

    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.price-card__features {
    display: flex;
    flex-direction: column;

    gap: 9px;

    margin-block-start: 18px;

    padding: 0;

    list-style: none;
}

.price-card__feature {
    display: flex;
    align-items: flex-start;

    gap: 8px;

    color:
        var(--card-text-muted);

    font-size: 0.875rem;
    line-height: 1.45;
}

.price-card__feature-icon {
    flex: 0 0 auto;

    width: 17px;
    height: 17px;

    color:
        var(--card-success);
}


/* ==========================================================================
   28. CARD GRID
   ========================================================================== */

.cards-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                min(100%, 280px),
                1fr
            )
        );

    gap: 20px;
}

.cards-grid--small {
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                min(100%, 220px),
                1fr
            )
        );
}

.cards-grid--large {
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                min(100%, 340px),
                1fr
            )
        );
}


/* ==========================================================================
   29. HORIZONTAL CARD
   ========================================================================== */

.card--horizontal {
    display: grid;

    grid-template-columns:
        minmax(160px, 34%)
        minmax(0, 1fr);

    align-items: stretch;
}

.card--horizontal .card__media {
    height: 100%;
    aspect-ratio: auto;
}

.card--horizontal .card__body {
    min-width: 0;
}


/* ==========================================================================
   30. LOADING CARD
   ========================================================================== */

.card--loading {
    pointer-events: none;
}

.card--loading .card__skeleton {
    position: relative;

    overflow: hidden;

    background:
        var(--card-bg-muted);

    border-radius:
        var(--card-radius-small);
}

.card--loading .card__skeleton::after {
    content: "";

    position: absolute;

    inset-block: 0;
    inset-inline-start: -100%;

    width: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            color-mix(
                in srgb,
                var(--card-bg) 65%,
                transparent
            ),
            transparent
        );

    animation:
        card-skeleton-loading
        1.2s infinite;
}

@keyframes card-skeleton-loading {
    to {
        inset-inline-start: 100%;
    }
}


/* ==========================================================================
   31. EMPTY CARD
   ========================================================================== */

.card--empty {
    min-height: 180px;

    align-items: center;
    justify-content: center;

    padding: 24px;

    text-align: center;

    background:
        var(--card-bg-muted);

    border-style: dashed;

    box-shadow: none;
}

.card--empty:hover {
    border-color:
        var(--card-border);
    box-shadow: none;
}

.card__empty-icon {
    width: 40px;
    height: 40px;

    margin-block-end: 10px;

    color:
        var(--card-text-subtle);
}

.card__empty-title {
    color:
        var(--card-text);

    font-size: 0.9375rem;
    font-weight: 600;
}

.card__empty-message {
    margin-block-start: 5px;

    color:
        var(--card-text-muted);

    font-size: 0.8125rem;
}


/* ==========================================================================
   32. ERROR CARD
   ========================================================================== */

.card--error {
    border-color:
        color-mix(
            in srgb,
            var(--card-danger) 30%,
            var(--card-border)
        );
}

.card__error {
    padding: 20px;

    text-align: center;

    color:
        var(--card-danger);
}

.card__error-message {
    margin-block-start: 6px;

    color:
        var(--card-text-muted);

    font-size: 0.8125rem;
}


/* ==========================================================================
   33. DISABLED CARD
   ========================================================================== */

.card--disabled,
.card[aria-disabled="true"] {
    opacity: 0.62;

    pointer-events: none;
}


/* ==========================================================================
   34. RESPONSIVE - TABLET
   ========================================================================== */

@media (max-width: 900px) {
    .cards-grid {
        gap: 16px;
    }

    .card__body,
    .marketplace-card__body {
        padding: 14px;
    }

    .business-card__header {
        padding: 14px;
    }

    .quote-card__summary {
        gap: 10px;
    }
}


/* ==========================================================================
   35. RESPONSIVE - MOBILE
   ========================================================================== */

@media (max-width: 640px) {
    .cards-grid,
    .cards-grid--small,
    .cards-grid--large {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .card--horizontal {
        grid-template-columns: 1fr;
    }

    .card--horizontal .card__media {
        aspect-ratio: 16 / 9;
    }

    .card__actions,
    .marketplace-card__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .card__action,
    .marketplace-card__action {
        width: 100%;
    }

    .quote-card__summary {
        grid-template-columns: 1fr;
    }

    .business-card__header {
        padding: 14px;
    }

    .price-card {
        padding: 18px;
    }
}


/* ==========================================================================
   36. VERY SMALL DEVICES
   ========================================================================== */

@media (max-width: 380px) {
    .card__body,
    .marketplace-card__body {
        padding: 12px;
    }

    .business-card__logo {
        width: 54px;
        height: 54px;

        flex-basis: 54px;
    }

    .vendor-card {
        padding: 13px;
    }

    .card__title,
    .marketplace-card__title {
        font-size: 1rem;
    }
}


/* ==========================================================================
   37. RTL
   ========================================================================== */

[dir="rtl"] .card__rating,
[dir="rtl"] .marketplace-card__rating {
    direction: rtl;
}

[dir="rtl"] .card__action svg,
[dir="rtl"] .marketplace-card__action svg {
    transform: scaleX(-1);
}


/* ==========================================================================
   38. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .card,
    [data-card],
    .marketplace-card,
    .card *,
    [data-card] *,
    .marketplace-card * {
        transition: none !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* ==========================================================================
   39. FORCED COLORS
   ========================================================================== */

@media (forced-colors: active) {
    .card,
    [data-card],
    .marketplace-card,
    .business-card,
    .vendor-card,
    .service-card,
    .product-card,
    .category-card,
    .review-card,
    .quote-card,
    .offer-card,
    .price-card {
        forced-color-adjust: auto;
    }

    .card:focus-within,
    .card__action:focus-visible,
    .card__favorite:focus-visible,
    .marketplace-card__action:focus-visible,
    .marketplace-card__favorite:focus-visible {
        outline: 2px solid CanvasText;
        outline-offset: 2px;
        box-shadow: none;
    }
}


/* ==========================================================================
   40. DARK THEME
   ========================================================================== */

[data-theme="dark"] .card,
[data-theme="dark"] [data-card],
[data-theme="dark"] .marketplace-card,
.theme-dark .card,
.theme-dark [data-card],
.theme-dark .marketplace-card {
    --card-bg:
        var(--color-surface, #111827);

    --card-bg-muted:
        var(--color-surface-muted, #1e293b);

    --card-border:
        var(--color-border, #334155);

    --card-text:
        var(--color-text, #f8fafc);

    --card-text-muted:
        var(--color-text-muted, #94a3b8);

    --card-text-subtle:
        var(--color-text-subtle, #64748b);
}


/* ==========================================================================
   41. PRINT
   ========================================================================== */

@media print {
    .card,
    [data-card],
    .marketplace-card,
    .business-card,
    .vendor-card,
    .service-card,
    .product-card,
    .category-card,
    .review-card,
    .quote-card,
    .offer-card,
    .price-card {
        box-shadow: none;

        break-inside: avoid;

        border-color: #000;
    }

    .card__favorite,
    .marketplace-card__favorite,
    .card__actions,
    .marketplace-card__actions {
        display: none !important;
    }
}