/**
 * Typography — one type system for the admin panel and the storefront.
 *
 * Loaded after admin.css / customer.css so it can sit on top of them without
 * editing either. To change the look of the whole site, change the two
 * variables below.
 *
 *   --font-display  headings, prices, big numbers
 *   --font-body     everything else
 *
 * Size scale on phones (nothing below 12px): 9-11 -> 12, 12 -> 13, 13 -> 14,
 * 14 -> 15; 15px and up is left alone. The selector list in the phone block
 * and the inline-style rules are generated from the existing sizes.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
    --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body { font-family: var(--font-body); }
button, input, select, textarea { font-family: inherit; }

h1, h2, h3, h4, h5, h6,
.stat-card .stat-value, .top-bar h2, .modal-header h3, .table-header h3, .section-header h3,
.nav-brand, .sidebar-header span, .login-logo h1 {
    font-family: var(--font-display);
}

/* Money and counts line up in columns and don't jump as digits change */
.stat-value, .data-table td, .amount, [class*="price"], .cart-badge, .nav-badge {
    font-variant-numeric: tabular-nums;
}

/* Home page hero: it brought in Poppins and JetBrains Mono. Use the two site
   families instead; the small uppercase labels keep their look in Inter. */
.ig-hero.ig-hero {
    --ig-display: var(--font-display);
    --ig-body: var(--font-body);
    --ig-mono: var(--font-body);
}

/* Desktop: nothing under 11px */
.slot-preorder-tag { font-size: 11px !important; }
.cart-badge { font-size: 11px !important; }
.ig-stat span { font-size: 11px !important; }
.ig-card-flag { font-size: 11px !important; }
.ig-clock-label { font-size: 11px !important; }
.ig-instock { font-size: 11px !important; }
.ig-card-kicker { font-size: 11px !important; }
.ig-card-rel { font-size: 11px !important; }
.ig-slot-btn span { font-size: 11px !important; }
.ig-chip span { font-size: 11px !important; }
.ig-chip .ig-pop { font-size: 11px !important; }
.ig-trust i { font-size: 11px !important; }
.ig-mq-track s { font-size: 11px !important; }
.cat-dropdown-btn i.arrow { font-size: 11px !important; }

[style*="font-size:8px"], [style*="font-size: 8px"],
[style*="font-size:9px"], [style*="font-size: 9px"],
[style*="font-size:9.5px"], [style*="font-size: 9.5px"],
[style*="font-size:10px"], [style*="font-size: 10px"] { font-size: 11px !important; }

/* ─── Phones ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .login-logo p { font-size: 15px !important; }
    .form-group label { font-size: 14px !important; }
    .form-group input, .form-group select, .form-group textarea { font-size: 15px !important; }
    .error-msg { font-size: 14px !important; }
    .btn-sm { font-size: 14px !important; }
    .nav-item { font-size: 15px !important; }
    .nav-badge { font-size: 12px !important; }
    .admin-info { font-size: 15px !important; }
    .stat-card .stat-label { font-size: 14px !important; }
    .filter-btn { font-size: 13px !important; }
    .data-table th { font-size: 13px !important; }
    .data-table td { font-size: 15px !important; }
    .badge { font-size: 12px !important; }
    .toast { font-size: 15px !important; }
    .data-table { font-size: 13px !important; }
    .hero-type-btn b { font-size: 14px !important; }
    .hero-type-btn span { font-size: 12px !important; }
    .nav-link { font-size: 15px !important; }
    .step-card p { font-size: 14px !important; }
    .slot-badge { font-size: 12px !important; }
    .game-price { font-size: 15px !important; }
    .form-group input, .form-group select { font-size: 15px !important; }
    .price-display .price-label { font-size: 14px !important; }
    .form-section-title { font-size: 15px !important; }
    .file-upload .file-label { font-size: 14px !important; }
    .customer-footer p { font-size: 15px !important; }
    .footer-sub { font-size: 12px !important; }
    .footer-brand p { font-size: 14px !important; }
    .footer-links h4 { font-size: 15px !important; }
    .footer-links a { font-size: 14px !important; }
    .footer-links a i { font-size: 15px !important; }
    .footer-bottom p { font-size: 14px !important; }
    .period-btn { font-size: 14px !important; }
    .slot-btn { font-size: 14px !important; }
    .slot-preorder-tag { font-size: 12px !important; }
    .form-error { font-size: 14px !important; }
    .form-footer { font-size: 14px !important; }
    .profile-label { font-size: 14px !important; }
    .profile-value { font-size: 15px !important; }
    .profile-rental-name { font-size: 15px !important; }
    .profile-rental-meta { font-size: 13px !important; }
    .testimonial-stars { font-size: 15px !important; }
    .testimonial-text { font-size: 15px !important; }
    .testimonial-author strong { font-size: 15px !important; }
    .testimonial-author span { font-size: 13px !important; }
    .badge-new { font-size: 13px !important; }
    .sell-feature { font-size: 15px !important; }
    .contact-card p { font-size: 14px !important; }
    .cart-badge { font-size: 12px !important; }
    .cart-empty p { font-size: 15px !important; }
    .cart-item-info h4 { font-size: 15px !important; }
    .cart-item-meta { font-size: 12px !important; }
    .cart-item-remove { font-size: 13px !important; }
    .cart-total-label { font-size: 15px !important; }
    .cart-clear-btn { font-size: 13px !important; }
    .search-close-btn { font-size: 15px !important; }
    .search-result-name { font-size: 15px !important; }
    .search-result-meta { font-size: 13px !important; }
    .search-no-results { font-size: 15px !important; }
    .testi-stars { font-size: 14px !important; }
    .testi-text { font-size: 15px !important; }
    .testi-name { font-size: 15px !important; }
    .testi-role { font-size: 13px !important; }
    .ig-badge { font-size: 12px !important; }
    .ig-stat span { font-size: 12px !important; }
    .ig-card-tag { font-size: 14px !important; }
    .ig-card-flag { font-size: 12px !important; }
    .ig-clock-label { font-size: 12px !important; }
    .ig-clock u { font-size: 13px !important; }
    .ig-instock { font-size: 12px !important; }
    .ig-card-kicker { font-size: 12px !important; }
    .ig-card-rel { font-size: 12px !important; }
    .ig-card-slot { font-size: 12px !important; }
    .ig-slot-btn b { font-size: 13px !important; }
    .ig-slot-btn span { font-size: 12px !important; }
    .ig-chip b { font-size: 13px !important; }
    .ig-chip span { font-size: 12px !important; }
    .ig-chip .ig-pop { font-size: 12px !important; }
    .ig-trust i { font-size: 12px !important; }
    .ig-mq-track span { font-size: 15px !important; }
    .ig-mq-track s { font-size: 12px !important; }
    #sliderPrev,#sliderNext { font-size: 15px !important; }
    .membership-card .popular-badge { font-size: 12px !important; }
    .membership-card .mem-games { font-size: 14px !important; }
    .membership-card .mem-price span { font-size: 15px !important; }
    .membership-card .mem-perks li { font-size: 14px !important; }
    .membership-card .mem-perks li i { font-size: 12px !important; }
    .mem-subscribe-btn { font-size: 15px !important; }
    .membership-badge { font-size: 13px !important; }
    .cat-dropdown-btn { font-size: 14px !important; }
    .cat-dropdown-btn i.arrow { font-size: 12px !important; }
    .cat-dropdown-menu a { font-size: 14px !important; }
    .avail-toggle { font-size: 14px !important; }
    .shop-search i { font-size: 15px !important; }
    .shop-search .search-clear { font-size: 12px !important; }
    .cat-dropdown-btn, .avail-toggle { font-size: 13px !important; }
    .badge-verified { font-size: 13px !important; }
    .badge-pending { font-size: 13px !important; }
    .orders-table th { font-size: 14px !important; }
    .status-badge { font-size: 13px !important; }
    .account-tab { font-size: 14px !important; }
    .orders-table th, .orders-table td { font-size: 14px !important; }
    .summary-row { font-size: 15px !important; }
    .reset-card p { font-size: 15px !important; }
    .alert { font-size: 15px !important; }

    [style*="font-size:8px"], [style*="font-size: 8px"],
    [style*="font-size:9px"], [style*="font-size: 9px"],
    [style*="font-size:9.5px"], [style*="font-size: 9.5px"],
    [style*="font-size:10px"], [style*="font-size: 10px"],
    [style*="font-size:11px"], [style*="font-size: 11px"] { font-size: 12px !important; }
    [style*="font-size:12px"], [style*="font-size: 12px"],
    [style*="font-size:12.5px"], [style*="font-size: 12.5px"] { font-size: 13px !important; }
    [style*="font-size:13px"], [style*="font-size: 13px"] { font-size: 14px !important; }
    [style*="font-size:14px"], [style*="font-size: 14px"] { font-size: 15px !important; }

    /* Form controls stay at 16px so iOS doesn't zoom into them on focus */
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
    select, textarea { font-size: 16px !important; }
}