/* =========================================================
   OEM.AZ — Global Styles (app.css)
   Tipografiya • Layout • Product Grid • Cart • Footer
   Son yeniləmə: 2025-10-24
========================================================= */

/* ---------- CSS Variables ---------- */
:root{
  --oem-font: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  --oem-bg: #eef3fa;
  --oem-white: #fff;
  --oem-dark: #2f3742;
  --oem-muted: #6c757d;
  --oem-primary: #0d6efd;
  --oem-success: #28a745;
  --oem-danger: #dc3545;
  --oem-border: rgba(0,0,0,.08);

  --oem-r-sm: 10px;
  --oem-r-md: 14px;
  --oem-r-lg: 16px;

  --oem-shadow-sm: 0 6px 18px rgba(0,0,0,.06);
  --oem-shadow:    0 10px 26px rgba(0,0,0,.10);
  --oem-shadow-lg: 0 14px 34px rgba(0,0,0,.12);
}

/* ---------- Base / Typography ---------- */
html, body{
  background:var(--oem-bg) !important;
}
body{
  font-family:var(--oem-font);
  color:#2b2f36;
  font-weight:400;
  font-size:clamp(0.875rem, 0.82rem + 0.25vw, 1rem);
  line-height:1.5;
}
a{
  color:inherit;
  text-decoration:none;
}
a:hover{
  color:var(--oem-primary);
}

/* ---------- Top mini-navbar ---------- */
.top-navbar{
  background:var(--oem-dark);
  min-height:40px;
  padding:5px 0;
  color:#e9ecef;
  font-size:14px;
}
.top-navbar .dropdown-toggle{
  text-decoration:none;
  font-weight:500;
}
.top-navbar .dropdown-menu{
  font-size:14px;
  min-width:160px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  border-radius:6px;
  border:1px solid var(--oem-border);
}
.top-navbar .dropdown-item:hover{
  background:#f8f9fa;
  color:var(--oem-dark);
}

/* =========================================================
   Header / Nav / Search
========================================================= */

.header-actions{ gap:.5rem }
@media (min-width:992px){
  .header-actions{ gap:.75rem }
}

.icon-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:40px;
  border:0;
  border-radius:12px;
  background:#f3f5f8;
  color:#2f3742;
  box-shadow:0 1px 0 rgba(0,0,0,.06) inset;
}
.icon-btn:hover{
  background:#e9edf2;
}

/* badge (header count) */
.badge-counter{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:20px;
  height:20px;
  padding:0 6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  line-height:1;
  border-radius:999px;
  background:#dc3545;
  color:#fff;
}

/* search */
.search-group .form-control{
  height:44px;
  border-radius:12px 0 0 12px;
  border:1px solid rgba(0,0,0,.08);
}
.search-group .btn-search{
  width:44px;
  height:44px;
  border:0;
  border-radius:0 12px 12px 0;
  background:#2f3742;
  color:#fff;
}
.search-group .btn-search .bi{
  font-size:1.1rem;
}

/* top bar extra */
.top-navbar{ background:#2f3742; min-height:40px }
.top-navbar .phone{ font-weight:700; color:#ff4d4f }

/* main nav borders only md+ */
.main-nav{ border:0 }
@media (min-width:768px){
  .main-nav{
    border-top:1px solid var(--bs-border-color);
    border-bottom:1px solid var(--bs-border-color);
  }
}

/* ---------- Sub-navbar (məsələn Wishlist başlığı alt panel) ---------- */
.wl-subnav{
  background:var(--oem-white);
  border:1px solid var(--oem-border);
  border-radius:var(--oem-r-md);
  padding:.65rem .9rem;
  box-shadow:var(--oem-shadow-sm);
}

/* =========================================================
   Category promo tiles (page_cat_list)
========================================================= */
.page_cat_list .animation-block-gsap{
  position:relative;
  overflow:hidden;
  border-radius:6px;
  margin:3px;
  border:1px solid rgba(0,0,0,.1);
  background:rgba(255,255,255,.5);
  box-shadow:0 2px 10px rgba(0,0,0,.1);
  transform:perspective(1000px);
}
.page_cat_list .animation-block-gsap img{
  position:absolute;
  right:0;
  top:0;
  max-height:174px;
  transition:.3s;
}
.page_cat_list .custom_inside{
  position:relative;
  height:170px;
  background:#fff;
  padding:8px 12px;
  transition:.3s;
}
.page_cat_list .custom_inside:hover{
  background:#134858;
  box-shadow:0 16px 48px rgba(0,82,201,.35);
}
.page_cat_list .custom_inside:hover p,
.page_cat_list .custom_inside:hover h3,
.page_cat_list .custom_inside:hover h4{
  color:#fff;
}
.page_cat_list .custom_inside_h3{
  font-size:18px;
  margin:3px 0;
  font-weight:700;
  text-transform:uppercase;
  color:#000;
}
.page_cat_list .custom_inside p{
  font-size:14px;
  line-height:16px;
  color:#000;
  width:60%;
}

/* =========================================================
   Product Grid (kataloq, wishlist, axtarış nəticəsi)
========================================================= */

/* Kart özü */
.product-card{
  border:0 !important;
  border-radius:var(--oem-r-lg) !important;
  background:var(--oem-white);
  overflow:hidden;
  transition: box-shadow .16s ease, transform .16s ease;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.product-card:hover{
  box-shadow:var(--oem-shadow-lg) !important;
  transform:translateY(-1px);
}

/* ---- Şəkil zonası (üst hissə) ---- */
.product-thumb-wrap{
  position:relative;
  width:100%;
  height:190px; /* sabit hündürlük */
  overflow:hidden;
  background:#f7f9fc;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid rgba(0,0,0,.05);
}

/* şəkil içində */
.product-thumb-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  padding:6px;
  transition:transform .25s ease;
}
.product-thumb-img:hover{
  transform:scale(1.05);
}

/* mobil üçün hündürlüyü bir az azaldırıq */
@media (max-width:575.98px){
  .product-thumb-wrap{
    height:150px;
  }
}

/* Brend (üst xırda yazı) */
.product-brand{
  font-size:.7rem;
  line-height:1.2;
  font-weight:500;
  text-transform:none;
  letter-spacing:0;
  color:var(--oem-muted);
  margin-bottom:.2rem;
  word-break:break-word;
}

/* Məhsul adı */
.product-name{
  font-weight:600;
  line-height:1.3;
  font-size:11px;        /* çox balaca və hər yerdə eyni */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
  min-height:2.1em;
  text-transform:none;
}

/* Qiymət (artıq kartın aşağısında istifadə ETMİRİK) */
.product-price{
  display:none !important;
  font-weight:700;
  font-size:.9rem;
  line-height:1.3;
}

/* ❤️ Ürək düyməsi (wishlist toggle) */
.wish-remove{
  position:absolute;
  top:8px;
  right:8px;
  width:32px;
  height:32px;
  border:1px solid rgba(0,0,0,.1);
  border-radius:50%;
  background:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
  padding:0;
}
.wish-remove i{
  font-size:1rem;
  line-height:1;
  color:var(--oem-danger);
}
.wish-remove:hover{
  background:#fff1f1;
}

/* 💰 Qiymət badge (sol yuxarı) */
.price-badge{
  position:absolute;
  top:8px;
  left:8px;
  background:#fff;
  color:#000;
  font-weight:600;
  font-size:.8rem;
  line-height:1.2;
  border-radius:8px;
  padding:4px 8px;
  box-shadow:0 10px 26px rgba(0,0,0,.10);
  border:1px solid rgba(0,0,0,.08);
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

/* Qty + Cart (kartın alt hissəsi) */
.qty-group .form-control{
  width:60px;
  text-align:center;
  border:1px solid rgba(0,0,0,.15);
  height:32px;
  padding:.2rem .4rem;
  font-size:.8rem;
  line-height:1.2;
}
.qty-group .btn{
  border:1px solid rgba(0,0,0,.15);
  height:32px;
  line-height:1.2;
  padding:.25rem .45rem;
  font-size:.8rem;
}
.addToCartBtn{
  background:var(--oem-success);
  border-color:var(--oem-success);
  color:#fff;
  height:32px;
  line-height:1.2;
  padding:.25rem .45rem;
  font-size:.8rem;
}
.addToCartBtn:hover{
  filter:brightness(.95);
}

/* Legacy uyğunluğu (köhnə .product-grid class-ları üçün) */
.product-grid{
  border:0 !important;
  border-radius:var(--oem-r-lg) !important;
  background:var(--oem-white);
  overflow:hidden;
  transition: box-shadow .16s ease, transform .16s ease;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.product-grid:hover{
  box-shadow:var(--oem-shadow-lg);
  transform:translateY(-1px);
}
.product-grid .product-image4 img{
  width:100%;
  height:190px;
  object-fit:contain;
  background:#f7f9fc;
}

/* Mobil üçün kart kompaktlığı */
@media (max-width:575.98px){
  .product-card{
    border-radius:12px !important;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
  }
  .product-thumb-wrap{
    aspect-ratio:1/1;
  }
  .wish-remove{
    width:32px;
    height:32px;
    top:8px;
    right:8px;
  }
  .wish-remove i{
    font-size:.9rem;
  }

  .card-body.p-3{
    padding:.6rem .7rem !important;
  }

  .product-brand{
    font-size:.7rem;
    margin-bottom:.2rem;
  }

  .product-name{
    font-size:11px;
    line-height:1.3;
    min-height:2.1em;
  }

  .qty-group .form-control{
    width:54px;
    height:30px;
    font-size:.8rem;
  }
  .qty-group .btn{
    height:30px;
    font-size:.8rem;
    padding:.2rem .4rem;
  }
  .addToCartBtn{
    height:30px;
    font-size:.8rem;
    padding:.2rem .4rem;
  }
}

/* iOS / Android font smooth */
@supports (-webkit-touch-callout: none){
  .product-name,
  .product-brand{
    -webkit-font-smoothing: antialiased;
  }
}

/* =========================================================
   Cart / Basket
========================================================= */
.cart-item{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  transition: box-shadow .2s;
  padding:12px;
}
.cart-item:hover{
  box-shadow:0 0 10px rgba(0,0,0,.05);
}

.cart-container{
  background:#fff;
  border-radius:12px;
  padding:16px;
  margin-bottom:20px;
  display:flex;
  gap:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  transition:all .2s ease;
}
.cart-container:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.1);
}
.cart-img{
  width:120px;
  height:120px;
  object-fit:contain;
  border-radius:8px;
  background:#f5f5f5;
  flex-shrink:0;
}
.cart-content{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
}
.stock-line{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  margin-bottom:4px;
}
.stock-line .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ccc;
}
.stock-line .in-stock{
  background:#28a745;
}
.cart-price{
  font-weight:700;
  font-size:16px;
  margin-bottom:6px;
}
.cart-price small{
  text-decoration:line-through;
  color:#999;
  font-size:14px;
  margin-right:8px;
}
.cart-name{
  font-size:15px;
  font-weight:500;
  margin-bottom:6px;
}
.cart-qty{
  width:120px;
}
.delete-item{
  position:absolute;
  top:0;
  right:0;
}

/* Table -> mobile for cart */
@media (max-width:768px){
  .cart-container{
    flex-direction:row;
    align-items:flex-start;
    padding:12px;
  }
  .cart-img{
    width:80px;
    height:80px;
  }
  .cart-content{
    margin-left:12px;
  }
  .cart-price strong{
    font-size:14px;
  }
  .cart-name a{
    font-size:13px;
    font-weight:500;
  }
  .cart-qty{
    width:100px;
    height:32px;
  }
  .cart-table thead{
    display:none;
  }
  .cart-table,
  .cart-table tbody,
  .cart-table tr,
  .cart-table td{
    display:block;
    width:100%;
  }
  .cart-table tr{
    margin-bottom:15px;
    border-bottom:2px solid #e2e8f0;
  }
  .cart-table td{
    text-align:left;
    padding:10px;
  }
  .cart-table td:before{
    content:attr(data-label);
    display:block;
    font-weight:600;
    margin-bottom:6px;
    color:#475569;
  }
}

/* Qty control in cart pages */
.qty-control{
  display:flex;
  align-items:center;
  border:1px solid #ccc;
  border-radius:8px;
  overflow:hidden;
  background:#f8f9fa;
}
.qty-control button{
  width:36px;
  height:36px;
  border:none;
}
.qty-input{
  width:60px;
  height:36px;
  border:none;
  text-align:center;
  font-weight:600;
  background:transparent;
}

/* =========================================================
   Filter boxes (sidebar)
========================================================= */
.filter-box{
  background:#fff;
  border:1px solid #ddd;
  border-radius:8px;
  overflow:hidden;
}
.filter-box-header{
  background:#212529;
  color:#fff;
  font-weight:700;
  padding:10px 15px;
  font-size:14px;
  text-transform:uppercase;
}
.filter-box-body{
  padding:10px 15px;
  max-height:250px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#999 #eee;
}
.filter-box-body::-webkit-scrollbar{
  width:6px;
}
.filter-box-body::-webkit-scrollbar-thumb{
  background:#ccc;
  border-radius:3px;
}
.filter-box-body::-webkit-scrollbar-track{
  background:#f9f9f9;
}

.form-check{
  margin-bottom:6px;
  font-size:14px;
}
.form-check-input{
  margin-top:4px;
  margin-right:8px;
  accent-color:#198754;
}

/* =========================================================
   Skeleton loaders
========================================================= */
.skeleton-card{
  background:#f3f3f3;
  border-radius:8px;
  padding:10px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  animation:pulse 1.5s infinite ease-in-out;
}
.skeleton-img,
.skeleton-text,
.skeleton-btn{
  background:#e0e0e0;
  border-radius:4px;
  margin-bottom:10px;
}
.skeleton-img{
  height:140px;
  width:100%;
}
.skeleton-text{
  height:12px;
  width:80%;
}
.skeleton-btn{
  height:32px;
  width:60%;
}
@keyframes pulse{
  0%{background:#e0e0e0;}
  50%{background:#f0f0f0;}
  100%{background:#e0e0e0;}
}

/* =========================================================
   Utilities / Breadcrumbs / Footer
========================================================= */

/* Breadcrumb mobile */
@media (max-width:576px){
  .breadcrumb{
    font-size:13px !important;
    gap:4px !important;
    flex-wrap:nowrap !important;
    white-space:nowrap;
    overflow-x:auto;
  }
  .breadcrumb a{
    font-size:13px !important;
  }
  .breadcrumb-item{
    display:inline-block;
  }
}

.footer{
  width:100%;
  padding:60px 0 30px;
  background:#134858;
  color:#fff;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:cover !important;
}

ul.social-network{
  list-style:none;
  display:inline;
  margin-left:0 !important;
  padding:0;
}
ul.social-network li{
  display:inline;
  margin:0 5px;
}
.social-circle li a{
  display:inline-block;
  position:relative;
  margin:0 auto;
  border-radius:50%;
  text-align:center;
  width:50px;
  height:50px;
  font-size:20px;
  background:#d3d3d3;
}
.social-circle li i{
  line-height:50px;
  color:#fff;
  transition:all .8s;
}
.social-circle li a:hover i{
  transform:rotate(360deg);
  transition:.2s;
}
.social-network a.icoFacebook:hover{ background:#3b5998; }
.social-network a.icoTwitter:hover{ background:#33ccff; }
.social-network a.icoInstagram:hover{ background:#2c6a93; }
.social-network a.icoLinkedin:hover{ background:#007bb7; }
.social-network a.icoRss:hover{ background:#f56505; }
.social-network a.icoGoogle:hover{ background:#bd3518; }
.social-network a.icoVimeo:hover{ background:#0590b8; }

/* =========================================================
   Dark Mode (optional)
========================================================= */
[data-theme="dark"] body,
html.dark body{
  background:#0f1115 !important;
  color:#e5e7eb;
}
[data-theme="dark"] .product-card,
html.dark .product-card{
  background:#171a1f;
  border-color:#23262b;
}
[data-theme="dark"] .wl-subnav,
html.dark .wl-subnav{
  background:#171a1f;
  border-color:#23262b;
}
[data-theme="dark"] .product-brand,
html.dark .product-brand{
  color:#98a2b3;
}
[data-theme="dark"] .wish-remove{
  background:#22252b;
}
[data-theme="dark"] .wish-remove:hover{
  background:#2a2e36;
}

/* ===== Account Page (OEM.az) ===== */
.account-shell {
  min-height: 70vh;
}

.account-head {
  background: #f5f6f8;
  border: 1px solid rgba(0,0,0,.03);
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
}

.account-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: #2f3742;
}

.account-subtle {
  font-size: .8rem;
  color: #6c757d;
}

.account-body {
  margin-top: 1rem;
}

/* sol menyu */
.account-nav {
  background: #fff;
  border: 1px solid rgba(0,0,0,.035);
  border-radius: 14px;
  padding: .4rem;
  box-shadow: 0 6px 20px rgba(15,23,42,0.02);
}

.account-nav-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .6rem;
  border-radius: 10px;
  color: #2f3742;
  text-decoration: none;
  font-size: .86rem;
  transition: .15s ease;
}

.account-nav-item i {
  font-size: 1.05rem;
  width: 20px;
  text-align: center;
}

.account-nav-item:hover {
  background: #eef3fa;
  color: #0d6efd;
}

.account-nav-item.is-active {
  background: #0d6efd;
  color: #fff;
  box-shadow: 0 8px 24px rgba(13,110,253,.22);
}

/* sağ kartlar */
.account-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.03);
  border-radius: 14px;
  padding: 1.1rem 1.3rem 1rem;
  box-shadow: 0 8px 24px rgba(15,23,42,0.02);
}

.account-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  margin-bottom: .55rem;
}

.account-card-head h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: #2f3742;
}

.account-card p {
  font-size: .78rem;
}

/* mobil uyğunluq */
@media (max-width: 991.98px) {
  .account-body {
    flex-direction: column;
  }
}

@media (max-width: 767.98px) {
  .account-head {
    border-radius: 12px;
  }
  .account-nav {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    white-space: nowrap;
    border-radius: 12px;
  }
  .account-nav-item {
    flex-direction: column;
    align-items: flex-start;
    min-width: 120px;
  }
  .account-card {
    border-radius: 12px;
  }
}
/* ===== Hover Zoom (plugin yox) ===== */
.hz-wrap{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.hz-img{
  transition: transform .12s ease-out;
  transform-origin: 50% 50%;
  cursor: zoom-in;
  will-change: transform;
}
.hz-wrap.is-zoom .hz-img{
  transform: scale(2.2) !important;
  cursor: zoom-out;
}

/* ✅ Enə görə yox, cihaz hover dəstəkləmirsə deaktiv et */
@media (hover: none), (pointer: coarse){
  .hz-wrap.is-zoom .hz-img{ transform: none !important; }
  .hz-img{ cursor: default; }
}