/**
 * Gadget Finder — Shared Frontend Styles
 *
 * Shared layout & component styles for Battery Finder and Charger Finder frontends.
 * Uses design tokens from mg-tokens.css where available.
 *
 * Prefix: gf- (gadget-finder)
 */

/* ====================================================================
   Container & Loading
   ==================================================================== */
.gf-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--mg-space-lg, 20px);
}

.gf-loading {
    text-align: center;
    padding: 40px;
    color: var(--mg-color-text-muted, #666);
}

/* ====================================================================
   Product Grid (Comparison)
   ==================================================================== */
.gf-compare-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--mg-space-lg, 20px);
}

/* ====================================================================
   Product Card
   ==================================================================== */
.gf-product-card {
    background: var(--mg-color-surface, #fff);
    border: 1px solid var(--mg-color-border, #e0e0e0);
    border-radius: var(--mg-radius-md, 8px);
    padding: var(--mg-space-lg, 16px);
    transition: box-shadow var(--mg-transition, 0.3s ease);
}

.gf-product-card:hover {
    box-shadow: var(--mg-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
}

.gf-product-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--mg-radius-sm, 4px);
}

.gf-product-title {
    font-size: 1.1em;
    font-weight: 600;
    margin: var(--mg-space-sm, 8px) 0 var(--mg-space-xs, 4px);
}

.gf-product-brand {
    color: var(--mg-color-text-muted, #666);
    font-size: 0.9em;
}

.gf-product-price {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--mg-color-error, #e63946);
}

/* ====================================================================
   Bridge: bf / cf → gf (backward compat until HTML is migrated)
   ==================================================================== */
.bf-container,
.cf-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--mg-space-lg, 20px);
}

.bf-loading,
.cf-loading {
    text-align: center;
    padding: 40px;
    color: var(--mg-color-text-muted, #666);
}

.bf-compare-container,
.cf-compare-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--mg-space-lg, 20px);
}

.bf-product-card,
.cf-product-card {
    background: var(--mg-color-surface, #fff);
    border: 1px solid var(--mg-color-border, #e0e0e0);
    border-radius: var(--mg-radius-md, 8px);
    padding: var(--mg-space-lg, 16px);
    transition: box-shadow var(--mg-transition, 0.3s ease);
}

.bf-product-card:hover,
.cf-product-card:hover {
    box-shadow: var(--mg-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
}

.bf-product-image,
.cf-product-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--mg-radius-sm, 4px);
}

.bf-product-title,
.cf-product-title {
    font-size: 1.1em;
    font-weight: 600;
    margin: var(--mg-space-sm, 8px) 0 var(--mg-space-xs, 4px);
}

.bf-product-brand,
.cf-product-brand {
    color: var(--mg-color-text-muted, #666);
    font-size: 0.9em;
}

.bf-product-capacity,
.cf-product-wattage {
    color: var(--mg-color-text, #333);
}

.bf-product-price,
.cf-product-price {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--mg-color-error, #e63946);
}