/* Store Product - Stable Layout */

.product-page{
  padding: 22px 0 46px 0;
}

.product-title{
  font-weight: 900;
  font-size: 26px;
  margin: 0 0 8px 0;
}

.product-short{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.85;
}

.box{
  background:#fff;
  border:1px solid rgba(17,24,39,.08);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(17,24,39,.04);
}

.product-main-img{
  width:100%;
  height:360px;
  object-fit: cover;
  display:block;
  border-radius: 8px;
}

.product-main-placeholder{
  width:100%;
  height:360px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f8fafc;
  color: rgba(17,24,39,.35);
  font-size:52px;
  border-radius: 8px;
}

.thumbs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 10px;
}

.thumb{
  width:92px;
  height:68px;
  border-radius: 8px;
  overflow:hidden;
  border:1px solid rgba(17,24,39,.10);
  cursor:pointer;
  opacity:.85;
  transition:.15s ease;
  background:#fff;
}

.thumb:hover{
  opacity:1;
  transform: translateY(-1px);
}

.thumb.active{
  border-color: rgba(13,110,253,.45);
  opacity:1;
}

.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.desc{
  padding:14px;
  margin-top: 14px;
}

.desc-title{
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 10px;
}

.desc-text{
  font-size: 13px;
  line-height: 2;
  color: rgba(17,24,39,.82);
}

/* Sidebar */
.sticky{
  position: sticky;
  top: 90px;
}

.license-head{
  padding: 14px;
  border-bottom:1px solid rgba(17,24,39,.06);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.license-title{
  font-weight: 900;
  font-size: 13px;
}

.price small{
  display:block;
  color: var(--muted);
  font-size: 11px;
}

.price strong{
  display:block;
  font-weight: 900;
  font-size: 18px;
  color: var(--primary);
}

.plan-list{
  padding: 12px;
}

.plan{
  border:1px solid rgba(17,24,39,.08);
  border-radius: 8px;
  padding:10px;
  margin-bottom:10px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  transition:.15s ease;
}

.plan:hover{
  border-color: rgba(17,24,39,.12);
  background: rgba(17,24,39,.01);
}

.plan.active{
  border-color: rgba(25,135,84,.35);
  background: rgba(25,135,84,.04);
}

.plan-left{
  display:flex;
  gap:10px;
}

.plan-name{
  font-weight:900;
  font-size:13px;
  margin-bottom:2px;
}

.plan-desc{
  font-size:12px;
  color: var(--muted);
  line-height:1.7;
}

.plan-right{
  min-width:110px;
}

.is-rtl .plan-right{
  text-align:left;
}

.is-ltr .plan-right{
  text-align:right;
}

.plan-right small{
  display:block;
  color: var(--muted);
  font-size:11px;
}

.plan-right strong{
  display:block;
  font-weight:900;
  font-size:14px;
}

.license-footer{
  padding: 14px;
  border-top:1px solid rgba(17,24,39,.06);
  background: rgba(17,24,39,.01);
}

.buy-btn{
  width:100%;
  border-radius: 8px;
  font-weight: 900;
  padding: 11px 12px;
  background: var(--primary);
  border-color: var(--primary);
}

.buy-btn:hover{
  filter: brightness(.95);
}

.buy-note{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
}

/* ✅ FINAL FIX: swap columns correctly in RTL/LTR (large screens only) */
@media (min-width: 992px){

  /* Make flex ordering predictable regardless of html dir */
  .product-page .row.g-4.align-items-start{
    direction: ltr;
  }

  /* ✅ Restore correct text direction INSIDE each column explicitly */
  .is-rtl .product-page .product-main-col,
  .is-rtl .product-page .product-side-col{
    direction: rtl;
    text-align: right;
  }

  .is-ltr .product-page .product-main-col,
  .is-ltr .product-page .product-side-col{
    direction: ltr;
    text-align: left;
  }

  /* LTR: Main left, Sidebar right */
  .is-ltr .product-main-col{ order: 1; }
  .is-ltr .product-side-col{ order: 2; }

  /* RTL: Sidebar left, Main right */
  .is-rtl .product-side-col{ order: 1; }
  .is-rtl .product-main-col{ order: 2; }
}

/* Mobile */
@media(max-width: 991px){
  .sticky{
    position: static;
  }
}

@media(max-width: 575px){
  .product-main-img,
  .product-main-placeholder{
    height:290px;
  }
  .thumb{
    width:80px;
    height:62px;
  }
  .product-title{
    font-size:22px;
  }
}