/*
|--------------------------------------------------------------------------
| JOELSTORE - MOBILE CSS
|--------------------------------------------------------------------------
| PHP 8.2
| Mobile-first enhancement
|--------------------------------------------------------------------------
*/

:root {
    --mobile-bg: #191a1c;
    --mobile-header: #1d1e20;
    --mobile-panel: #242528;
    --mobile-card: #292a2c;
    --mobile-border: #343538;
    --mobile-text: #f7f7f7;
    --mobile-muted: #aeb0b4;
    --mobile-primary: #ff7415;
}


/* ==========================================================================
   GLOBAL MOBILE
========================================================================== */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.container {
    width: calc(100% - 20px);
    max-width: none;
}


/* ==========================================================================
   HEADER MOBILE
========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.top-header {
    height: auto;
    min-height: 60px;
}

.header-row {
    min-height: 60px;
    height: auto;
    gap: 8px;
    padding: 9px 0;
}


/* Logo */

.brand {
    min-width: auto;
    flex-shrink: 0;
    font-size: 19px;
    line-height: 1;
    letter-spacing: -1px;
}


/* Search */

.search-form {
    min-width: 0;
    height: 36px;
    padding: 0 10px;
    border-radius: 19px;
}

.search-form span {
    font-size: 15px;
    flex-shrink: 0;
}

.search-form input {
    min-width: 0;
    margin-left: 6px;
    font-size: 12px;
}

.search-form input::placeholder {
    font-size: 12px;
}


/* Locale */

.locale-trigger {
    flex-shrink: 0;
    height: 36px;
    padding: 0 9px;
    gap: 5px;
    font-size: 11px;
}

.locale-trigger span:last-child {
    display: none;
}


/* ==========================================================================
   SECOND NAVIGATION
========================================================================== */

.nav-bar {
    height: 43px;
}

.nav-row {
    min-width: max-content;
    height: 43px;
    align-items: stretch;
}

.nav-links {
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.nav-links::-webkit-scrollbar {
    display: none;
}

.nav-links a {
    height: 43px;
    padding: 0 10px;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-account {
    display: none;
}


/* ==========================================================================
   MAIN
========================================================================== */

.main-container {
    min-height: calc(100vh - 150px);
}

.section {
    padding: 20px 0;
}

.section-heading {
    margin-bottom: 12px;
}

.section-heading h2 {
    font-size: 17px;
}

.section-heading p {
    font-size: 11px;
}


/* ==========================================================================
   HERO
========================================================================== */

.hero-section {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 15px 0 8px;
}

.hero-main {
    height: 215px;
    min-height: 215px;
    border-radius: 15px;
}

.hero-side {
    display: none;
}

.hero-copy {
    left: 20px;
    top: 27px;
    right: 20px;
}

.hero-copy small {
    font-size: 10px;
}

.hero-copy h1 {
    max-width: 230px;
    margin: 7px 0;
    font-size: 30px;
    line-height: .95;
}

.hero-copy p {
    max-width: 210px;
    font-size: 11px;
    line-height: 1.4;
}

.primary-btn,
.btn {
    padding: 9px 13px;
    border-radius: 8px;
    font-size: 11px;
}

.hero-arrow {
    width: 30px;
    height: 30px;
    font-size: 21px;
}

.hero-arrow.left {
    left: 7px;
}

.hero-arrow.right {
    right: 7px;
}


/* ==========================================================================
   FLASH SALE
========================================================================== */

.flash-carousel {
    grid-auto-columns: 185px;
    gap: 9px;
    margin-right: -10px;
    padding-right: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.flash-carousel::-webkit-scrollbar {
    display: none;
}

.flash-card {
    border-radius: 10px;
}

.flash-thumb {
    height: 90px;
}

.thumb-text {
    font-size: 26px;
}

.flash-content {
    padding: 9px;
}

.flash-content > strong {
    font-size: 12px;
}

.flash-content small {
    font-size: 10px;
}

.price-row {
    font-size: 12px;
}

.stock-bar {
    height: 5px;
}

.stock-text {
    font-size: 9px;
}

.instant {
    font-size: 8px;
}


/* ==========================================================================
   TRENDING / RECOMMENDATION
========================================================================== */

.recommendation-section {
    padding: 14px;
    border-radius: 14px;
}

.recommendation-grid {
    grid-template-columns: 1fr;
    gap: 8px;
}

.recommendation-card {
    min-height: 65px;
    padding: 8px;
    border-radius: 11px;
}

.recommendation-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 9px;
}

.recommendation-card strong {
    font-size: 12px;
}

.recommendation-card small {
    font-size: 10px;
}


/* ==========================================================================
   CATEGORY
========================================================================== */

.category-tabs {
    gap: 7px;
    margin-bottom: 12px;
    padding-bottom: 3px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.category-tabs::-webkit-scrollbar {
    display: none;
}

.category-tab {
    padding: 8px 13px;
    font-size: 11px;
}


/* ==========================================================================
   GAME CATALOG
========================================================================== */

.catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.catalog-card {
    min-width: 0;
    border-radius: 10px;
}

.catalog-image {
    height: 145px;
}

.catalog-image span {
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 23px;
}

.catalog-image em {
    width: 22px;
    height: 22px;
    right: 6px;
    top: 6px;
    font-size: 13px;
    line-height: 22px;
}

.catalog-body {
    padding: 9px;
}

.catalog-body strong {
    font-size: 12px;
}

.catalog-body small {
    font-size: 9px;
}


/* ==========================================================================
   POPULAR
========================================================================== */

.popular-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.popular-card {
    border-radius: 10px;
}

.popular-image {
    height: 130px;
    font-size: 27px;
}

.popular-card strong {
    margin-top: 7px;
    font-size: 12px;
}

.popular-card small {
    font-size: 9px;
}


/* ==========================================================================
   ARTICLE
========================================================================== */

.article-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}

.article-card {
    border-radius: 14px;
}

.article-image {
    height: 175px;
    padding: 14px;
    font-size: 16px;
}

.article-body {
    padding: 13px;
}

.article-body small {
    font-size: 10px;
}

.article-body h3 {
    font-size: 14px;
    line-height: 1.4;
    margin: 7px 0;
}

.article-body p {
    font-size: 11px;
}


/* ==========================================================================
   BUTTON
========================================================================== */

.outline-btn {
    padding: 8px 13px;
    font-size: 11px;
}


/* ==========================================================================
   FOOTER
========================================================================== */

.site-footer {
    margin-top: 40px;
    padding: 35px 0 20px;
}

.footer-grid {
    grid-template-columns: 1fr;
    gap: 25px;
}

.footer-logo {
    font-size: 20px;
}

.footer-about p {
    max-width: 100%;
    font-size: 12px;
    line-height: 1.6;
}

.footer-grid h4 {
    margin-bottom: 8px;
}

.footer-grid a {
    margin: 9px 0;
    font-size: 12px;
}

.copyright {
    margin-top: 25px;
    padding-top: 15px;
    font-size: 10px;
    line-height: 1.5;
}


/* ==========================================================================
   FLOATING CHAT
========================================================================== */

.floating-chat {
    right: 13px;
    bottom: 13px;
}

.floating-chat a {
    width: 49px;
    height: 49px;
    font-size: 21px;
}


/* ==========================================================================
   MODAL
========================================================================== */

.modal-backdrop {
    padding: 12px;
}

.locale-modal {
    width: 100%;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: 20px 15px;
    border-radius: 13px;
}

.modal-title {
    font-size: 14px;
}

.locale-grid {
    grid-template-columns: 1fr;
    gap: 8px;
}

.locale-option {
    height: 44px;
    font-size: 12px;
}


/* ==========================================================================
   FORM
========================================================================== */

.form-card,
.panel {
    padding: 16px;
    border-radius: 12px;
}

.form-control {
    padding: 11px;
    font-size: 13px;
}


/* ==========================================================================
   TABLE
========================================================================== */

.table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}


/* ==========================================================================
   CHECKOUT
========================================================================== */

.checkout {
    grid-template-columns: 1fr;
    gap: 12px;
}


/* ==========================================================================
   ADMIN MOBILE
========================================================================== */

.admin-layout {
    grid-template-columns: 1fr;
}

.admin-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
}

.admin-sidebar a {
    padding: 9px 6px;
    text-align: center;
    font-size: 10px;
}

.admin-cards {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.admin-stat {
    padding: 12px;
}

.admin-stat strong {
    font-size: 20px;
}

.admin-toolbar {
    flex-direction: column;
    align-items: stretch;
}

.admin-toolbar form {
    width: 100%;
}

.admin-toolbar input {
    width: 100%;
}

.admin-form-grid {
    grid-template-columns: 1fr;
}

.admin-form .full {
    grid-column: auto;
}


/* ==========================================================================
   EXTRA SMALL
========================================================================== */

@media (max-width: 380px) {

    .container {
        width: calc(100% - 16px);
    }

    .brand {
        font-size: 17px;
    }

    .locale-trigger {
        padding: 0 7px;
    }

    .search-form {
        height: 34px;
    }

    .nav-links a {
        padding: 0 8px;
        font-size: 11px;
    }

    .hero-main {
        height: 200px;
        min-height: 200px;
    }

    .hero-copy h1 {
        font-size: 27px;
    }

    .catalog-grid,
    .popular-grid {
        gap: 8px;
    }

    .catalog-image {
        height: 125px;
    }

    .popular-image {
        height: 115px;
    }

}


/* ==========================================================================
   TOUCH DEVICES
========================================================================== */

@media (hover: none) and (pointer: coarse) {

    .nav-links a,
    .category-tab,
    .locale-option,
    .btn,
    .primary-btn,
    .outline-btn {
        -webkit-tap-highlight-color: transparent;
    }

    .nav-links a {
        min-height: 43px;
    }

    .category-tab {
        min-height: 36px;
    }

}


/* ==========================================================================
   SAFE AREA - IPHONE
========================================================================== */

@supports (padding: env(safe-area-inset-bottom)) {

    .site-footer {
        padding-bottom: calc(
            20px + env(safe-area-inset-bottom)
        );
    }

    .floating-chat {
        bottom: calc(
            13px + env(safe-area-inset-bottom)
        );
    }

}