/* Thraki Deals - Mobil CSS */

/* Font imports */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css');

/* Mobile First Design - Max width 768px */
@media (max-width: 768px) {
  
  /* Base styles */
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fafafa;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Container */
  .container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 16px;
  }

  .container-fluid {
    padding: 0 16px !important;
  }

  /* Colors */
  :root {
    --primary-color: #3176FF;
    --secondary-color: #FF6B35;
    --success-color: #10B981;
    --warning-color: #F59E0B;
    --danger-color: #EF4444;
    --dark-color: #1F2937;
    --light-color: #F9FAFB;
  }

  /* Navigation Bar */
  .navbar-mobile {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
  }

  .navbar-mobile .logo {
    font-family: 'Pacifico', cursive;
    font-size: 20px;
    color: var(--primary-color);
    text-decoration: none;
    display: flex;
    align-items: center;
  }

  .navbar-mobile .logo img {
    max-height: 32px;
    width: auto;
    object-fit: contain;
  }

  .navbar-mobile .nav-icons {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .navbar-mobile .nav-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #6B7280;
    font-size: 20px;
    text-decoration: none;
  }

  .navbar-mobile .nav-icon .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    background: #EF4444;
    border-radius: 50%;
    color: white;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
  }

  /* Main Content */
  .main-content-mobile {
    margin-top: 56px;
    margin-bottom: 64px;
    width: 100%;
  }

  /* Ana sayfa container'ı için navbar altından başlatma */
  main {
    margin-top: 56px !important;
    margin-bottom: 64px !important;
    padding-top: 0 !important;
  }

  /* Tüm sayfa içerikleri için navbar altından başlatma */
  .container,
  .container-fluid {
    /*
    margin-top: 56px !important;
    padding-top: 16px !important;
    */
  }

  /* Body'nin üst kısmını navbar için boş bırakma */
  body {
    padding-top: 56px !important;
    padding-bottom: 64px !important;
  }

  /* Navbar fixed positioning güçlendirme */
  .navbar-mobile {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1050 !important;
  }

  /* Mobil navigasyon menüsü düzenlemeleri */
  .nav-mobile {
    z-index: 1060 !important;
    top: 0 !important;
  }

  .nav-mobile-open .nav-mobile {
    display: block !important;
  }

  /* Overlay'i devre dışı bırak - sayfanın bulanıklaşmasını engelle */
  #overlay_bg.active {
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
  }

  /* Tab bar mobile menüden üstte olsun */
  .tab-bar-mobile {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1065 !important; /* Mobile menüden daha üstte */
  }

  /* Mobile menü açıkken body'nin scroll olmasını engelle ama opacity efektini kaldır */
  body.mobile-nav-open {
    overflow: hidden !important;
    opacity: 1 !important; /* Sayfanın bulanıklaşmasını engelle */
  }

  body.mobile-nav-open .main-content {
    opacity: 1 !important; /* İçeriğin bulanıklaşmasını engelle */
  }

  /* Categories tab aktifken özel stil */
  .nav-mobile .nav-tabs-mobile-menu .nav-link.active {
    background-color: var(--primary-color) !important;
    color: white !important;
  }

  /* Banner - Mobil için yeniden tasarlanmış */
  .banner {
    border-radius: 16px !important;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    margin: 16px !important;
    min-height: 300px;
    background: none !important;
    margin-bottom: 40px !important;
  }

  .banner .row {
    position: relative !important;
    margin: 0 !important;
    height: 300px;
    padding: 0 !important;
  }

  .banner .col-md-4 {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
  }

  .banner .col-md-4:first-child {
    z-index: 1;
    order: 1;
  }

  .banner .col-md-4:nth-child(2) {
    z-index: 3;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 24px !important;
    background: rgba(0, 0, 0, 0.4) !important;
  }

  .banner .col-md-4:last-child {
    display: none !important; /* İkinci resmi gizle */
  }

  .banner img {
    width: 100% !important;
    height: 300px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }

  .banner h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  }

  .banner p {
    font-size: 16px !important;
    margin-bottom: 16px !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  }

  .banner .btn {
    background: white !important;
    color: #8B5CF6 !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    border: none !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  }

  .banner .btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    color: #8B5CF6 !important;
  }

  /* Banner container'ı için özel düzenleme */
  main .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Sadece banner dışındaki içerikler için padding */
  main .container > *:not(.banner) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Banner sonrası içerikler için margin */
  .banner + * {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  /* Live Deals Section */
  .live-deals-mobile {
    margin-top: 16px;
    width: 100%;
  }

  .live-deals-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: linear-gradient(90deg, #F59E0B, #F97316);
  }

  .live-deals-header h3 {
    color: white;
    font-weight: 600;
    margin: 0;
    font-size: 16px;
  }

  .live-deals-header a {
    color: white;
    font-size: 14px;
    text-decoration: none;
  }

  /* Product Grid */
  .products-grid-mobile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 16px;
  }

  /* Product Card */
  .product-card-mobile {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }

  .product-card-mobile .product-image {
    position: relative;
    width: 100%;
    height: 112px;
  }

  .product-card-mobile .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .product-card-mobile .favorite-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #9CA3AF;
  }

  .product-card-mobile .favorite-btn.active {
    color: #EF4444;
  }

  .product-card-mobile .discount-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #EF4444;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 2px;
    font-weight: 500;
  }

  .product-card-mobile .product-info {
    padding: 8px;
  }

  .product-card-mobile .product-title {
    font-size: 12px;
    font-weight: 500;
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1F2937;
  }

  .product-card-mobile .product-price {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
  }

  .product-card-mobile .current-price {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 12px;
  }

  .product-card-mobile .old-price {
    font-size: 10px;
    color: #9CA3AF;
    text-decoration: line-through;
  }

  .product-card-mobile .store-name {
    font-size: 10px;
    color: #6B7280;
    margin: 0;
  }

  /* Tab Bar */
  .tab-bar-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: white;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    z-index: 1065 !important; /* Mobile menüden daha üstte */
  }

  .tab-bar-mobile .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #6B7280;
    position: relative;
  }

  .tab-bar-mobile .tab-item i {
    font-size: 20px;
    margin-bottom: 2px;
  }

  .tab-bar-mobile .tab-item span {
    font-size: 12px;
  }

  .tab-bar-mobile .tab-item.active {
    color: var(--primary-color);
  }

  /* Live Deals Special Tab */
  .tab-bar-mobile .tab-item.live-deals {
    position: relative;
  }

  .tab-bar-mobile .tab-item.live-deals .live-deals-icon {
    position: absolute;
    top: -24px;
    background: #F59E0B;
    border-radius: 12px;
    padding: 8px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  .tab-bar-mobile .tab-item.live-deals .live-deals-icon i {
    color: white;
    font-size: 20px;
    margin: 0;
  }

  .tab-bar-mobile .tab-item.live-deals span {
    margin-top: 32px;
    color: #F59E0B;
  }

  /* Hide desktop elements on mobile */
  .d-mobile-none {
    display: none !important;
  }

  /* Show only on mobile */
  .d-mobile-block {
    display: block !important;
  }

  .d-mobile-flex {
    display: flex !important;
  }

  .d-mobile-grid {
    display: grid !important;
  }

  /* Utilities */
  .text-mobile-center {
    text-align: center;
  }

  .p-mobile-0 {
    padding: 0 !important;
  }

  .m-mobile-0 {
    margin: 0 !important;
  }

      /* Product listing adjustments for mobile */
  .product-grid-container {
    padding: 0 16px !important;
  }

  .product-grid-container .row {
    margin: 0 -8px !important;
  }

  .product-grid-container .col-12,
  .product-grid-container .col-6,
  .product-grid-container .col-lg-4,
  .product-grid-container .col-xl-3 {
    padding: 0 8px !important;
    margin-bottom: 16px !important;
  }

  /* Override existing desktop styles for mobile */
  @media (max-width: 768px) {
    .navbar,
    .main-nav,
    .desktop-header {
      display: none !important;
    }

    .container-fluid {
      padding-left: 16px !important;
      padding-right: 16px !important;
    }

    .row {
      margin-left: -8px !important;
      margin-right: -8px !important;
    }

    [class*="col-"] {
      padding-left: 8px !important;
      padding-right: 8px !important;
    }

    /* Hide desktop navigation */
    .navbar-expand-lg {
      display: none !important;
    }

    /* Adjust main content for mobile */
    main {
      padding-top: 56px !important;
      padding-bottom: 64px !important;
    }

    /* Ana içerik alanını mobilde düzenle */
    .container-fluid,
    .container {
      padding-left: 16px !important;
      padding-right: 16px !important;
      padding-top: 0 !important;
    }

    /* Ana sayfa içeriği için özel düzenleme */
    .main-content-mobile .container,
    .main-content-mobile .container-fluid {
      padding-left: 16px !important;
      padding-right: 16px !important;
    }

    /* Mobilde tüm sayfa içerikleri için spacing */
    .wrapper,
    .content-wrapper,
    .page-content {
      padding-top: 16px !important;
      margin-top: 0 !important;
    }

    /* İç sayfa content'leri için özel düzenleme */
    .section-product-details,
    .section-cart,
    .section-checkout,
    .section-profile,
    .section-auth {
      padding-top: 16px !important;
    }

    /* Tüm sayfa içerikleri için navbar ile çakışmayı önleme */
    .page-content,
    .main-content,
    .content-area,
    .product-details,
    .cart-content,
    .profile-content,
    .auth-content {
      margin-top: 0 !important;
      padding-top: 16px !important;
    }

    /* Özel durum: Modal ve popup'lar */
    .modal,
    .modal-dialog,
    .dropdown-menu {
      margin-top: 0 !important;
      padding-top: 0 !important;
    }

    /* Ana sayfa dışındaki sayfalar için global düzenleme */
    body:not(.home) main,
    body:not(.index) main {
      margin-top: 0 !important;
      padding-top: 16px !important;
    }

    /* Genel içerik alanları için mobil düzenleme */
    .section-products,
    .section-categories,
    .section-brands,
    .content-area {
      padding-left: 16px !important;
      padding-right: 16px !important;
    }

    /* Kart ve widget'lar için spacing */
    .card, 
    .widget,
    .product-item {
      margin-bottom: 16px !important;
    }

    /* Bootstrap grid sistemini mobilde optimize et */
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
    .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
    .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
    .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
    .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,
    .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
      padding-left: 8px !important;
      padding-right: 8px !important;
    }

    /* Popular Stores mobilde 2 sütun */
    .col-md-2 {
      flex: 0 0 50% !important;
      max-width: 50% !important;
      width: 50% !important;
    }

    /* Product cards in existing lists */
    .product-item {
      margin-bottom: 12px !important;
    }

    /* Mobile-specific product card overrides */
    .product-item .card {
      border-radius: 8px !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }

    .product-item .card-img-top {
      height: 120px !important;
      object-fit: cover !important;
    }

    .product-item .card-body {
      padding: 8px !important;
    }

    .product-item .card-title {
      font-size: 12px !important;
      margin-bottom: 4px !important;
    }

    .product-item .price {
      font-size: 12px !important;
    }

    .product-item .old-price {
      font-size: 10px !important;
    }

    .top-bar{
        display: none;
    }

    .top-bar-daily-deals{
        display: none;
    }

    .border-bottom{
        display: none;
    }
  }
}

/* Additional responsive breakpoints */
@media (max-width: 480px) {
  .navbar-mobile {
    padding: 0 12px;
  }

  .navbar-mobile .nav-icons {
    gap: 12px;
  }

  .products-grid-mobile {
    padding: 12px;
    gap: 8px;
  }

  .product-card-mobile .product-image {
    height: 100px;
  }
}

@media (max-width: 360px) {
  .navbar-mobile .logo {
    font-size: 18px;
  }

  .navbar-mobile .nav-icon {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }

  .products-grid-mobile {
    padding: 8px;
    gap: 6px;
  }

  .product-card-mobile .product-image {
    height: 90px;
  }
}