.rasa-products-lite-widget{
  --blue:#2563eb;
  --indigo:#4338ca;
  --cyan:#38bdf8;
  --dark:#07111f;
  --dark2:#0f172a;
  --text:#ffffff;
  --soft:rgba(255,255,255,.72);
  --muted:rgba(255,255,255,.48);
  --line:rgba(255,255,255,.10);
  --grad:linear-gradient(135deg,#2563eb,#4338ca);
  direction:rtl;
  width:100%;
  color:var(--text);
  box-sizing:border-box;
  overflow:hidden;
}

.rasa-products-lite-widget,
.rasa-products-lite-widget *{
  box-sizing:border-box;
}

.rasa-products-lite-widget a{
  text-decoration:none;
}

.rp-section{
  position:relative;
  overflow:hidden;
  padding:6rem 5rem;
  background:
    radial-gradient(circle at 12% 12%,rgba(37,99,235,.18),transparent 30%),
    radial-gradient(circle at 88% 18%,rgba(56,189,248,.10),transparent 30%),
    linear-gradient(135deg,#07111f 0%,#0f172a 62%,#111827 100%);
}

.rp-section::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:56px 56px;
  opacity:.7;
  pointer-events:none;
}

.rp-inner{
  position:relative;
  z-index:2;
  max-width:1240px;
  margin:0 auto;
}

.rp-head{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:2.5rem;
  align-items:end;
  margin-bottom:3rem;
  animation:rpFadeUp .8s ease both;
}

.rp-kicker{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  color:#93c5fd;
  font-size:.78rem;
  font-weight:900;
  margin-bottom:1rem;
}

.rp-kicker::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:linear-gradient(135deg,#38bdf8,#2563eb);
  box-shadow:0 0 0 6px rgba(56,189,248,.12);
}

.rp-title{
  margin:0;
  font-size:clamp(2rem,4vw,3.35rem);
  line-height:1.15;
  font-weight:950;
  color:#fff;
}

.rp-title span{
  background:linear-gradient(135deg,#93c5fd,#38bdf8,#c7d2fe);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.rp-desc{
  margin:0;
  color:var(--soft);
  font-size:.96rem;
  line-height:2.05;
  max-width:560px;
}

.rp-head-pills{
  display:flex;
  align-items:center;
  gap:.7rem;
  flex-wrap:wrap;
  margin-top:1.25rem;
}

.rp-pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.56rem .85rem;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.78);
  font-size:.72rem;
  font-weight:800;
}

.rp-pill::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#38bdf8;
  box-shadow:0 0 12px rgba(56,189,248,.65);
}

.rp-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.4rem;
}

.rp-card{
  position:relative;
  overflow:hidden;
  min-height:560px;
  padding:1.45rem;
  border-radius:30px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 20px 54px rgba(0,0,0,.18);
  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    border-color .35s ease,
    box-shadow .35s ease,
    background .35s ease;
  animation:rpFadeUp .8s ease both;
}

.rp-card:nth-child(2){
  animation-delay:.08s;
}

.rp-card:hover{
  transform:translateY(-7px);
  background:rgba(255,255,255,.075);
  border-color:rgba(147,197,253,.32);
  box-shadow:0 24px 70px rgba(37,99,235,.22);
}

.rp-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 0%,rgba(56,189,248,.17),transparent 36%),
    radial-gradient(circle at 100% 78%,rgba(67,56,202,.22),transparent 42%);
  pointer-events:none;
}

.rp-card-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
}

.rp-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.3rem;
}

.rp-product-mark{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
}

.rp-icon{
  width:56px;
  height:56px;
  border-radius:19px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  flex-shrink:0;
}

.rp-icon svg{
  width:27px;
  height:27px;
  stroke:currentColor;
}

.rp-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.42rem .75rem;
  border-radius:999px;
  background:rgba(56,189,248,.12);
  color:#bfdbfe;
  border:1px solid rgba(147,197,253,.20);
  font-size:.67rem;
  font-weight:900;
  white-space:nowrap;
}

.rp-name{
  margin:0;
  font-size:1.72rem;
  line-height:1.35;
  font-weight:950;
  color:#fff;
}

.rp-subtitle{
  margin-top:.25rem;
  color:#93c5fd;
  font-size:.86rem;
  font-weight:850;
  line-height:1.7;
}

.rp-product-desc{
  margin:0 0 1.25rem;
  color:rgba(255,255,255,.70);
  font-size:.9rem;
  line-height:1.95;
}

.rp-image-placeholder{
  position:relative;
  height:220px;
  margin:0 0 1.35rem;
  border-radius:24px;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.035)),
    radial-gradient(circle at 20% 15%,rgba(56,189,248,.14),transparent 35%),
    radial-gradient(circle at 90% 80%,rgba(37,99,235,.16),transparent 42%);
  border:1px dashed rgba(147,197,253,.34);
  display:flex;
  align-items:center;
  justify-content:center;
}

.rp-image-placeholder::before{
  content:"";
  position:absolute;
  inset:15px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:28px 28px;
}

.rp-image-placeholder img{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:20px;
}

.rp-image-placeholder span{
  position:relative;
  z-index:2;
  width:82px;
  height:82px;
  border-radius:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size:1rem;
  font-weight:950;
}

.rp-features{
  display:grid;
  gap:.58rem;
  margin-top:auto;
}

.rp-feature{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  color:rgba(255,255,255,.74);
  font-size:.82rem;
  line-height:1.75;
}

.rp-check{
  width:20px;
  height:20px;
  border-radius:50%;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(56,189,248,.14);
  border:1px solid rgba(56,189,248,.25);
  color:#93c5fd;
  margin-top:.18rem;
}

.rp-check svg{
  width:12px;
  height:12px;
  stroke:currentColor;
}

.rp-card-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  margin-top:1.35rem;
  padding-top:1.05rem;
  border-top:1px solid rgba(255,255,255,.09);
}

.rp-actions{
  display:flex;
  align-items:center;
  gap:.65rem;
  flex-wrap:wrap;
}

.rp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding:.75rem 1.05rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:900;
  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.rp-btn-primary{
  background:linear-gradient(135deg,#2563eb,#4338ca);
  color:#fff;
  box-shadow:0 12px 28px rgba(37,99,235,.24);
}

.rp-btn-primary:hover{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(37,99,235,.32);
}

.rp-btn-outline{
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.13);
}

.rp-btn-outline:hover{
  color:#fff;
  background:rgba(255,255,255,.13);
  border-color:rgba(147,197,253,.30);
  transform:translateY(-2px);
}

.rp-status{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  color:rgba(255,255,255,.48);
  font-size:.7rem;
  font-weight:800;
  white-space:nowrap;
}

.rp-status::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 14px rgba(34,197,94,.7);
}

@keyframes rpFadeUp{
  from{opacity:0;transform:translateY(24px);}
  to{opacity:1;transform:none;}
}

@media(max-width:1024px){
  .rp-section{padding:5.5rem 2rem;}
  .rp-head{grid-template-columns:1fr;gap:1.4rem;}
  .rp-grid{grid-template-columns:1fr;}
  .rp-card{min-height:auto;}
}

@media(max-width:768px){
  .rp-section{padding:4.5rem 1.25rem;}
  .rp-title{font-size:2rem;}
  .rp-card{border-radius:24px;padding:1.2rem;}
  .rp-card-top{flex-direction:column;align-items:flex-start;}
  .rp-name{font-size:1.42rem;}
  .rp-image-placeholder{height:185px;border-radius:22px;}
  .rp-card-bottom{flex-direction:column;align-items:stretch;}
  .rp-actions{width:100%;display:grid;grid-template-columns:1fr;}
  .rp-btn{width:100%;}
  .rp-status{justify-content:center;}
}
