/*
 * DURIM Telegram compatibility layer.
 * IMPORTANT: visual product/card/cart layout intentionally comes from the
 * original styles.css + shop-enhancements.css. This file only styles new
 * controls/classes that did not exist in the original UI.
 */

body.telegram-miniapp {
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-tap-highlight-color: transparent;
}

/* Telegram handles authentication automatically. */
body.telegram-miniapp #nav-auth,
body.telegram-miniapp #nav-user {
  display: none !important;
}

/* New 4-way filter row; does not touch the original product grid. */
.mini-sort-tabs {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 14px;
  padding: 4px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: #fafbf7;
}

.mini-sort-tab {
  min-width: 0;
  min-height: 38px;
  padding: 7px 5px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: .73rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.mini-sort-tab.active {
  background: var(--accent);
  color: #fff;
}

/* Keep new card markup aligned while preserving original dimensions/colors. */
.mini-product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mini-product-card .product-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.mini-product-card .mini-add-to-cart {
  width: 100%;
  margin-top: auto;
}

/* The original discount badge remains the only strong sale accent. */
.mini-product-card.discounted {
  border-color: var(--rule);
  box-shadow: none;
}

.mini-product-card .sale-price,
.sale-detail-price {
  color: inherit;
}

/* New cart price row; original cart drawer sizing/behavior is untouched. */
.cart-item-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: .72rem;
}

.cart-item-price-row strong {
  color: var(--ink);
  white-space: nowrap;
}

/* Current checkout validation. */
.field-error {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 2px rgba(196, 58, 58, .08);
}

/* Simple success state before Telegram closes the Mini App. */
.mini-order-success {
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 18px;
  text-align: center;
}

@media (max-width: 480px) {
  .mini-sort-tabs {
    gap: 4px;
    padding: 3px;
  }

  .mini-sort-tab {
    min-height: 34px;
    padding-inline: 3px;
    font-size: .66rem;
  }
}

/* Telegram Mini App product grid: two larger, non-overlapping cards. */
body.telegram-miniapp .mini-products-grid,
body.telegram-miniapp .discount-products-grid,
body.durim-mobile-ui .mini-products-grid,
body.durim-mobile-ui .discount-products-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: 12px !important;
}

body.telegram-miniapp .mini-products-grid .mini-product-card,
body.telegram-miniapp .discount-products-grid .discount-product-card,
body.durim-mobile-ui .mini-products-grid .mini-product-card,
body.durim-mobile-ui .discount-products-grid .discount-product-card {
  min-width: 0;
  height: 100%;
}

body.telegram-miniapp .mini-products-grid .product-body,
body.telegram-miniapp .discount-products-grid .discount-product-info,
body.durim-mobile-ui .mini-products-grid .product-body,
body.durim-mobile-ui .discount-products-grid .discount-product-info {
  padding: 11px 10px 12px;
}

body.telegram-miniapp .mini-products-grid .product-name,
body.telegram-miniapp .discount-products-grid .discount-product-name,
body.durim-mobile-ui .mini-products-grid .product-name,
body.durim-mobile-ui .discount-products-grid .discount-product-name {
  display: block !important;
  height: auto !important;
  min-height: 4.2em;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal;
  line-height: 1.4 !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-overflow: clip;
  font-size: .86rem;
}

body.telegram-miniapp .mini-products-grid .product-img,
body.telegram-miniapp .discount-products-grid .discount-product-image,
body.durim-mobile-ui .mini-products-grid .product-img,
body.durim-mobile-ui .discount-products-grid .discount-product-image {
  aspect-ratio: 1 / 1;
}

/* Description is always expanded in the product detail view. */
body.telegram-miniapp .detail-desc-wrap .detail-desc,
body.durim-mobile-ui .detail-desc-wrap .detail-desc,
.detail-desc-wrap.is-collapsed .detail-desc {
  max-height: none !important;
  overflow: visible !important;
}
.detail-desc-wrap.is-collapsed::after { display: none !important; }
.detail-desc-toggle { display: none !important; }

/* The image stack moves with the finger while the next image enters beside it. */
.gallery-main.durim-swipe-ready { touch-action: pan-y; user-select: none; }
.gallery-main.durim-swipe-ready > img { will-change: transform; }
.gallery-swipe-preview {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: var(--r-lg);
  pointer-events: none;
  z-index: 2;
  will-change: transform;
}

/* Compact gallery thumbnails; the main image remains unchanged. */
body.telegram-miniapp .gallery-thumbs,
body.durim-mobile-ui .gallery-thumbs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}
body.telegram-miniapp .gallery-thumb,
body.durim-mobile-ui .gallery-thumb {
  width: min(52px, 100%);
  justify-self: center;
  border-width: 1px;
  border-radius: 6px;
}
.gallery-main.durim-swipe-ready > #gallery-main-image {
  position: relative;
  z-index: 1;
}

/* Back-to-top button: appears after one screen and sits near the vertical middle. */
#durim-back-to-top {
  position: fixed;
  right: 16px;
  top: 56%;
  bottom: auto;
  z-index: 1100;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--accent), var(--accent-hover));
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(30,40,10,.28);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
#durim-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
#durim-back-to-top:active { transform: scale(.95); }
@media (max-width: 560px) {
  #durim-back-to-top { right: 14px; top: 56%; width: 44px; height: 44px; }
}

/* Telegram Mini App’da mahsulot rasmi uzoq bosilganda menyu chiqmasin */
body.telegram-miniapp .product-img img,
body.telegram-miniapp .gallery-main img,
body.telegram-miniapp .gallery-thumb img,
body.durim-mobile-ui .product-img img,
body.durim-mobile-ui .gallery-main img,
body.durim-mobile-ui .gallery-thumb img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}