:root{
  --lw-bg: #ffffff;
  --lw-card-bg: #ffffff;
  --lw-card-selected-bg: #fbf4e2;
  --lw-card-selected-border: #a47e2c;
  --lw-border: #e5e7eb;
  --lw-text: #111827;
  --lw-muted: #6b7280;
  --lw-accent: #a47e2c;
  --lw-accent-soft: rgba(164, 126, 44, 0.12);
  --lw-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.04);
  --lw-shadow-md: 0 10px 24px rgba(0, 0, 0, 0.06);
  --lw-radius-lg: 16px;
  --lw-radius-md: 14px;
  --lw-radius-sm: 12px;
}

/* =========================
   Page wrapper
========================= */
body:has(.lens-wizard-page) {
  background: #ffffff !important;
}

.lens-wizard-page{
  width: 100%;
  background: #ffffff !important;
}

.lens-wizard-section{
  padding: 20px 16px 40px;
  background: #ffffff;
}

/* Layout: فرم + خلاصه */
.lens-wizard-layout{
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: flex-start;
  background: #ffffff;
}

.lw-main-col{
  min-width: 0;
  background: #ffffff;
}

.lw-summary-col{
  min-width: 0;
}

/* =========================
   Stepper
========================= */
.lw-stepper-wrap{
  margin-bottom: 18px;
}

.lw-stepper{
  position: relative;
  display: block;
  padding-bottom: 8px;
}

/* Progress line */
.lw-stepper-track{
  position: relative;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
  z-index: 0;
  width: 100%;
}

.lw-stepper-fill{
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lw-accent) 0%, #e5c158 50%, var(--lw-accent) 100%);
  background-size: 200% 100%;
  animation: lw-shimmer 3s linear infinite;
  box-shadow: 0 0 10px rgba(164, 126, 44, 0.6), 0 0 4px rgba(164, 126, 44, 0.4);
  transition: width 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
}

.lw-stepper-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0; /* In RTL, the fill grows from right to left, so the leading edge is left */
  height: 100%;
  width: 10px;
  background: #ffffff;
  filter: blur(2px);
  opacity: 0.9;
  border-radius: 999px;
  box-shadow: 0 0 6px #ffffff, 0 0 12px var(--lw-accent);
  animation: lw-pulse 1.5s ease-in-out infinite alternate;
}

[dir="ltr"] .lw-stepper-fill::after {
  left: auto;
  right: 0;
}

@keyframes lw-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes lw-pulse {
  0% {
    opacity: 0.6;
    transform: scaleX(0.8);
  }
  100% {
    opacity: 1;
    transform: scaleX(1.3);
  }
}


/* Each step */
.lw-step{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--lw-border);
  background: #fff;
  color: var(--lw-muted);
  font-size: 13px;
}

.lw-step-number{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--lw-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  background: #fff;
  color: var(--lw-muted);
  flex: 0 0 auto;
}

.lw-step-label{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active step */
.lw-step--active{
  border-color: rgba(164, 126, 44, 0.22);
  background: #fffaf0;
  color: var(--lw-text);
  box-shadow: var(--lw-shadow-sm);
}

.lw-step--active .lw-step-number{
  border-color: var(--lw-accent);
  background: var(--lw-accent);
  color: #fff;
}

/* Done step */
.lw-step--done{
  border-color: rgba(164, 126, 44, 0.18);
  background: #fff;
}

.lw-step--done .lw-step-number{
  border-color: var(--lw-accent);
  background: #f8f3e7;
  color: var(--lw-accent);
}

/* Skipped step (بدون نمره - non_prescription) */
.lw-step--skipped{
  border-color: rgba(0,0,0,0.08);
  background: #fafafa;
  opacity: 0.55;
}

.lw-step--skipped .lw-step-number{
  border-color: #ccc;
  background: #f0f0f0;
  color: #999;
}

.lw-step--skipped .lw-step-label::after{
  content: ' (اسکیپ)';
  font-size: 0.75em;
  color: #aaa;
}

/* =========================
   Step header
========================= */
.lw-step-header{
  margin-bottom: 18px;
}

.lw-step-title{
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 900;
  color: var(--lw-text);
  line-height: 1.5;
}

.lw-step-subtitle{
  margin: 0;
  font-size: 14px;
  color: var(--lw-muted);
  line-height: 1.9;
}

/* =========================
   Lens type list (Step 1 + دید در Step 2)
========================= */
.lw-lens-type-list,
.lw-lens-type-grid{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

/* Card */
.lw-lens-type-card{
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--lw-radius-md);
  padding: 14px;
  background: #f3f4f6; /* Gray background */
  text-align: right;
  cursor: pointer;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    transform .08s ease,
    background .15s ease;
}

.lw-lens-type-card:hover{
  border-color: rgba(164, 126, 44, 0.35);
  box-shadow: var(--lw-shadow-sm);
  transform: translateY(-1px);
  background: #e5e7eb; /* Slightly darker gray */
}

/* Active/Selected states */
.lw-lens-type-card--active,
.lw-lens-type-card.is-selected,
.lw-lens-type-card[aria-checked="true"]{
  border-color: var(--lw-accent) !important;
  box-shadow: 0 0 0 1.5px var(--lw-accent), 0 4px 14px rgba(164, 126, 44, 0.16) !important;
  background: var(--lw-card-selected-bg, #fbf4e2) !important;
}

/* Disabled */
.lw-lens-type-card--disabled,
.lw-lens-type-card:disabled,
.lw-lens-type-card[aria-disabled="true"]{
  opacity: 0.62;
  cursor: not-allowed;
  background: #fafafa;
  border-style: dashed;
}

.lw-lens-type-card--disabled:hover,
.lw-lens-type-card:disabled:hover,
.lw-lens-type-card[aria-disabled="true"]:hover{
  border-color: var(--lw-border);
  box-shadow: none;
  transform: none;
}

/* Card inner */
.lw-lens-type-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.lw-lens-type-title{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: var(--lw-text);
  line-height: 1.7;
}

.lw-lens-type-tag{
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--lw-accent-soft);
  color: var(--lw-accent);
  white-space: nowrap;
  flex: 0 0 auto;
}

.lw-lens-type-tag--soon{
  background: #f0f1f3;
  color: #6b7280;
}

.lw-lens-type-desc{
  margin: 0;
  font-size: 13px;
  color: var(--lw-muted);
  line-height: 1.85;
}

/* Helper text زیر Step 1 و Method */
.lw-lens-helper-text{
  margin-top: 6px;
  font-size: 13px;
  color: var(--lw-muted);
  line-height: 1.7;
}

/* =========================
   Nav bar (دکمه ادامه / بازگشت)
========================= */
.lw-nav-bar{
  margin-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.lw-back-link{
  border: none;
  background: transparent;
  color: var(--lw-muted);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.lw-back-link:hover{
  color: var(--lw-text);
}

.lw-next-btn{
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  background: var(--lw-accent);
  color: #fff;
  transition: filter .15s ease, transform .08s ease, opacity .15s ease;
  min-width: 220px;
}

.lw-next-btn:disabled{
  opacity: 0.5;
  cursor: default;
}

.lw-next-btn:not(:disabled):hover{
  filter: brightness(.95);
}

.lw-next-btn:not(:disabled):active{
  transform: translateY(1px);
}

/* =========================
   Summary card (ستون راست)
========================= */
.lw-summary-card{
  background: var(--lw-card-bg);
  border-radius: var(--lw-radius-lg);
  border: 1px solid var(--lw-border);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  position: sticky;
  top: 88px;
}

/* ظرف عکس */
.lw-summary-image-wrap{
  width: 100%;
  border-radius: 14px;
  background: #f3f4f6;
  overflow: hidden;
  margin-bottom: 4px;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* خود عکس */
.lw-summary-image-wrap img,
#lw-summary-image{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform: scale(1.12);
  transform-origin: center;
}

.lw-summary-info{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lw-summary-title{
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  color: var(--lw-text);
  line-height: 1.7;
}

.lw-summary-color{
  margin: 0;
  font-size: 13px;
  color: var(--lw-muted);
  line-height: 1.8;
}

.lw-summary-price-row{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.lw-summary-price{
  font-size: 18px;
  font-weight: 800;
  color: var(--lw-text);
}

.lw-summary-compare{
  font-size: 12px;
  color: var(--lw-muted);
  text-decoration: line-through;
}

.lw-summary-note{
  font-size: 12px;
  color: var(--lw-muted);
  margin-top: 4px;
  line-height: 1.8;
  background: #faf7ee;
  border: 1px dashed rgba(164, 126, 44, 0.25);
  border-radius: 12px;
  padding: 10px 12px;
}

/* =========================
   STEP 2 / sub=method
========================= */
.lw-method-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 4px;
}

/* کارت‌های method */
.lw-method-card{
  position: relative;
  width: 100%;
  border-radius: var(--lw-radius-md);
  border: 1px solid transparent;
  padding: 16px 14px 14px;
  background: #f3f4f6; /* Gray background */
  text-align: right;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease,
    transform 120ms ease;
}

.lw-method-card:hover{
  border-color: rgba(164, 126, 44, 0.35);
  background: #e5e7eb; /* Slightly darker gray */
  box-shadow: var(--lw-shadow-sm);
  transform: translateY(-1px);
}

/* حالت انتخاب شده */
.lw-method-card.is-active{
  border-color: var(--lw-accent) !important;
  background: var(--lw-card-selected-bg, #fbf4e2) !important;
  box-shadow: 0 0 0 1.5px var(--lw-accent), 0 4px 14px rgba(164,126,44,0.16) !important;
}

.lw-method-card.is-active::before{
  content:"";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid var(--lw-accent);
  pointer-events: none;
}

/* آیکن روش */
.lw-method-icon{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--lw-accent-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  position: relative;
}

.lw-method-icon--upload::before{
  content:"";
  width: 22px;
  height: 22px;
  display: block;
  background: var(--lw-accent);
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M5 20h14v-2H5v2zm7-16-5.5 5.5 1.42 1.42L11 9.34V16h2V9.34l3.08 3.58L17.5 9.5 12 4z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 20px;
}

.lw-method-icon--manual::before{
  content:"";
  width: 22px;
  height: 22px;
  display: block;
  background: var(--lw-accent);
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm2.92 2.33H5v-.92l8.06-8.06.92.92-8.06 8.06zM20.71 7.04a1.003 1.003 0 0 0 0-1.42l-2.34-2.34a1.003 1.003 0 0 0-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 20px;
}

.lw-method-card h2{
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--lw-text);
  line-height: 1.7;
}

.lw-method-card p{
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--lw-muted);
  line-height: 1.8;
}

.lw-method-benefits{
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.lw-method-benefits li{
  font-size: 12px;
  color: var(--lw-muted);
  line-height: 1.7;
  position: relative;
  padding-right: 14px;
}

.lw-method-benefits li::before{
  content:"•";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--lw-accent);
}

.lw-method-actions{
  margin-top: 20px;
}

/* =========================
   STEP 2 / sub=rx
========================= */
.lw-prescription-wrapper{
  margin-top: 12px;
  background: #f3f4f6; /* Gray background */
  border-radius: var(--lw-radius-md);
  border: 1px solid transparent;
  padding: 14px 14px 16px;
  box-shadow: none;
}

/* جدول نمره */
.lw-prescription-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
  direction: ltr;
}

.lw-prescription-table thead th{
  padding: 8px 4px;
  text-align: center;
  font-weight: 700;
  color: var(--lw-text);
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  direction: rtl;
}

.lw-prescription-table thead th:first-child,
.lw-prescription-table tbody td:first-child {
  width: 22%;
}
.lw-prescription-table thead th:nth-child(2),
.lw-prescription-table tbody td:nth-child(2) {
  width: 26%;
}
.lw-prescription-table thead th:nth-child(3),
.lw-prescription-table tbody td:nth-child(3) {
  width: 26%;
}
.lw-prescription-table thead th:nth-child(4),
.lw-prescription-table tbody td:nth-child(4) {
  width: 26%;
}

.lw-prescription-table thead th span{
  display: block;
  font-size: 11px;
  color: var(--lw-muted);
  margin-top: 2px;
}

.lw-prescription-table tbody td{
  padding: 10px 4px;
  text-align: center;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
  direction: rtl;
}

.lw-prescription-table tbody tr:last-child td{
  border-bottom: none;
}

.lw-eye-label{
  text-align: right !important;
  font-weight: 600;
  color: var(--lw-text);
  line-height: 1.3;
}

/* سلکت‌ها */
.lw-select{
  width: 100%;
  min-width: 0;
  padding: 8px 24px 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--lw-border);
  font-size: 13px;
  color: var(--lw-text);
  background: #fff;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #9ca3af 50%),
    linear-gradient(135deg, #9ca3af 50%, transparent 50%);
  background-position:
    calc(100% - 13px) 50%,
    calc(100% - 9px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

.lw-select:focus{
  border-color: var(--lw-accent);
  box-shadow: 0 0 0 1px rgba(164,126,44,.28);
  background-color: #fffcf5;
}

.lw-rx-select{
  font-variant-numeric: tabular-nums;
  direction: ltr;
  text-align: center;
  text-align-last: center;
  padding: 8px 16px 8px 6px;
  background-position:
    calc(100% - 11px) 50%,
    calc(100% - 7px) 50%;
  background-size: 4px 4px, 4px 4px;
}

.lw-select option[value=""]{
  color: #9ca3af;
}

/* چک‌باکس: نمره یکسان */
.lw-prescription-note{
  margin-top: 12px;
}

.lw-checkbox{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--lw-muted);
  cursor: pointer;
}

.lw-checkbox input[type="checkbox"]{
  width: 16px;
  height: 16px;
}

/* فیلدهای دارای خطا و هشدار محور */
.lw-select.lw-select-error,
.lw-select.is-invalid{
  border-color: #ef4444 !important;
  background-color: #fef2f2 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

.lw-rx-axis-warning{
  margin-top: 14px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #b91c1c;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.5;
}

/* =========================
   STEP 2 / sub=upload
========================= */
.lw-upload-box{
  margin-top: 12px;
  background: #f3f4f6; /* Gray background */
  border-radius: var(--lw-radius-md);
  border: 1px solid transparent;
  padding: 16px 14px 18px;
  box-shadow: none;
}

/* Drop zone */
.lw-upload-area{
  display: block;
  border-radius: 12px;
  border: 1.5px dashed #d1d5db;
  background: #f9fafb;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.lw-upload-area:hover,
.lw-upload-area.lw-upload-area--dragover{
  border-color: var(--lw-accent);
  background: #fffdf6;
  box-shadow: var(--lw-shadow-sm);
}

.lw-upload-inner{
  padding: 18px 14px;
  text-align: center;
}

.lw-upload-icon{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  margin: 0 auto 10px;
  background: var(--lw-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.lw-upload-icon::before{
  content:"";
  width: 24px;
  height: 24px;
  display: block;
  background: var(--lw-accent);
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 22px;
}

.lw-upload-title{
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--lw-text);
}

.lw-upload-subtitle{
  margin: 0;
  font-size: 12px;
  color: var(--lw-muted);
}

/* Preview */
.lw-upload-preview{
  margin-top: 14px;
  font-size: 13px;
  color: var(--lw-text);
}

.lw-upload-preview-content{
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f3f4f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

#lw-upload-filename{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lw-link-button{
  border: none;
  background: transparent;
  color: var(--lw-accent);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.lw-upload-note{
  margin-top: 12px;
  font-size: 13px;
  color: var(--lw-text);
}

.lw-upload-note label{
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

.lw-textarea{
  width: 100%;
  min-height: 80px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--lw-border);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.lw-textarea:focus{
  border-color: var(--lw-accent);
  box-shadow: 0 0 0 1px rgba(164,126,44,.25);
}

/* =========================
   STEP 3 – ساختار دو مرحله‌ای
========================= */

.lw-step3-wrapper{
  margin-top: 12px;
}

/* --- زیرمرحله ۱: انتخاب گروه ویژگی --- */

.lw-feature-group-list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.lw-feature-group-card{
  position: relative;
  border-radius: var(--lw-radius-md);
  border: 1px solid transparent;
  background: #f3f4f6; /* Gray background */
  padding: 16px 18px;
  text-align: right;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background-color 150ms ease,
    transform 100ms ease;
}

.lw-feature-group-icon-wrap {
  flex-shrink: 0;
  width: 74px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lw-feature-group-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06));
  transition: transform 0.2s ease;
}

.lw-feature-group-card:hover .lw-feature-group-img {
  transform: scale(1.06);
}

.lw-feature-group-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lw-feature-group-card:hover{
  border-color: rgba(164,126,44,0.35);
  box-shadow: var(--lw-shadow-sm);
  background: #e5e7eb; /* Slightly darker gray */
  transform: translateY(-1px);
}

.lw-feature-group-card.is-selected,
.lw-feature-group-card[aria-checked="true"]{
  border-color: var(--lw-accent) !important;
  background: var(--lw-card-selected-bg, #fbf4e2) !important;
  box-shadow: 0 0 0 1.5px var(--lw-accent), 0 4px 14px rgba(164,126,44,0.16) !important;
}

.lw-feature-group-card.is-selected::before,
.lw-feature-group-card[aria-checked="true"]::before{
  content:"";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1.5px solid var(--lw-accent);
  pointer-events: none;
}

.lw-feature-group-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lw-feature-group-title{
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  color: var(--lw-text);
  line-height: 1.7;
}

.lw-feature-group-subtitle{
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--lw-muted);
  line-height: 1.8;
}

.lw-feature-group-icon{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--lw-accent-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lw-feature-group-icon .lw-lens-icon{
  width: 20px;
  height: 20px;
}

.lw-feature-group-meta{
  margin: 0;
  font-size: 11px;
  color: var(--lw-muted);
  line-height: 1.7;
}

#lw-feature-group-helper{
  margin-top: 10px;
  font-size: 13px;
  color: var(--lw-muted);
  line-height: 1.8;
}

/* --- زیرمرحله ۲: لیست عدسی‌ها --- */

/* متن توضیح ایندکس پیشنهادی */
#lw-index-info{
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--lw-text);
  background: #fffbeb;
  border-radius: 12px;
  border: 1px solid rgba(234,179,8,0.35);
  padding: 10px 12px;
}

/* لیست کارت‌های عدسی */
.lw-lens-options-list{
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* کارت عدسی */
.lw-lens-option-card {
  position: relative;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  padding: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
}

.lw-lens-option-card:hover {
  border-color: rgba(164,126,44,0.4);
  box-shadow: 0 12px 20px -3px rgba(164,126,44,0.08), 0 4px 6px -2px rgba(164,126,44,0.04);
  transform: translateY(-2px);
}

/* حالت انتخاب شده کارت عدسی */
.lw-lens-option-card--selected {
  border-color: var(--lw-accent);
  background: var(--lw-card-selected-bg, #fbf4e2);
  box-shadow: 0 12px 24px -5px rgba(164,126,44,0.15), 0 0 0 1.5px var(--lw-accent);
}

.lw-lens-option-card--selected::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 2px solid var(--lw-accent);
  pointer-events: none;
}

/* مخفی‌شدن براساس ایندکس پیشنهادی/فیلتر */
.lw-lens-option-card.lw-lens-option-card--hidden {
  display: none !important;
}

/* مخفی کردن بدنه طولانی برای جمع‌وجور شدن کارت */
.lw-lens-option-card .lw-lens-option-body {
  display: none !important;
}

/* ظرف بند انگشتی برند */
.lw-lens-thumbnail-container {
  width: 90px;
  min-width: 90px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}

/* گرادینت‌های داینامیک برای هر برند */
.lw-lens-thumbnail-container--kodak {
  background: linear-gradient(135deg, #ffb03a 0%, #ff7e15 100%);
}
.lw-lens-thumbnail-container--essense {
  background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%);
}
.lw-lens-thumbnail-container--lecco {
  background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
}
.lw-lens-thumbnail-container--china {
  background: linear-gradient(135deg, #9ca3af 0%, #4b5563 100%);
}

.lw-lens-thumbnail-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.lw-lens-shape-graphic {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1.5px dashed rgba(164, 126, 44, 0.15);
  pointer-events: none;
  animation: spin-lens 20s linear infinite;
}

@keyframes spin-lens {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.lw-lens-brand-thumbnail-logo {
  max-width: 80%;
  max-height: 50%;
  height: auto;
  width: auto;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.05));
}

/* جزئیات عدسی */
.lw-lens-details-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

/* HEADER: عنوان + زیرعنوان + تگ‌ها */
.lw-lens-option-header {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ردیف بالا: عنوان، لوگو برند و دکمه اطلاعات */
.lw-lens-option-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
}

/* عنوان کارت */
.lw-lens-option-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.5;
}

/* استایل لوگوی برند */
.lw-lens-brand {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
}

.lw-lens-brand-logo {
  height: 20px;
  width: auto;
  object-fit: contain;
  filter: grayscale(0.1) opacity(0.9);
  transition: all 0.2s ease;
}

.lw-lens-option-card:hover .lw-lens-brand-logo {
  filter: none;
}

/* استایل بج‌های روی کارت (پیشنهادی، بهترین و...) */
.lw-lens-option-badge {
  position: absolute;
  top: -10px;
  right: 16px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
  z-index: 10;
}

.lw-lens-option-badge--recommended {
  background: var(--lw-accent);
  color: #ffffff;
}

.lw-lens-option-badge--best {
  background: #dc2626;
  color: #ffffff;
}

.lw-lens-option-badge--economy {
  background: #0284c7;
  color: #ffffff;
}

.lw-lens-option-badge--popular {
  background: #d97706;
  color: #ffffff;
}

/* ردیف و چیپ‌های مشخصات عدسی */
.lw-lens-specs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  margin-bottom: 2px;
}

.lw-lens-spec-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  line-height: 1;
}

.lw-lens-option-card--selected .lw-lens-spec-chip {
  background: rgba(164, 126, 44, 0.06);
  border-color: rgba(164, 126, 44, 0.2);
  color: #a47e2c;
}

.lw-lens-spec-chip--accessories {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
  color: #166534 !important;
  font-weight: 600;
}
.lw-lens-option-card--selected .lw-lens-spec-chip--accessories,
.cart-embedded-lens-card .lw-lens-spec-chip--accessories {
  background: #ecfdf5 !important;
  border-color: #6ee7b7 !important;
  color: #047857 !important;
}

/* علامت تعجب (اطلاعات بیشتر) */
.lw-lens-option-info {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.lw-lens-option-info:hover {
  z-index: 150;
}

/* دکمه اطلاعات */
.lw-lens-option-title-row:not(:has(.lw-lens-brand)) .lw-lens-option-info {
  margin-inline-start: 4px;
}

.lw-lens-info-trigger {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #64748b;
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}

.lw-lens-info-trigger:hover {
  border-color: var(--lw-accent);
  background: var(--lw-accent-soft);
  color: var(--lw-accent);
}

/* زیرعنوان */
.lw-lens-option-subtitle {
  margin: 0;
  font-size: 12px;
  color: var(--lw-muted);
  line-height: 1.6;
}

/* FOOTER: قیمت + دکمه انتخاب */
.lw-lens-option-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed #e2e8f0;
}

.lw-lens-option-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lw-lens-option-price::before {
  content: "قیمت عدسی:";
  font-size: 10px;
  color: #64748b;
  font-weight: 600;
}

.lw-lens-option-price-value {
  font-size: 15px;
  font-weight: 800;
  color: #1e293b;
}

.lw-lens-option-card--selected .lw-lens-option-price-value {
  color: var(--lw-accent);
}

/* دکمه انتخاب روی کارت عدسی */
.lw-lens-option-select {
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  padding: 6px 20px;
  font-size: 12px;
  font-weight: 700;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.lw-lens-option-select:hover {
  border-color: var(--lw-accent);
  background: var(--lw-accent-soft);
  color: var(--lw-accent);
}

.lw-lens-option-card--selected .lw-lens-option-select {
  background: var(--lw-accent);
  border-color: var(--lw-accent);
  color: #ffffff;
}

.lw-lens-option-card--selected .lw-lens-option-select::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: 4px;
  font-size: 11px;
}

.lw-lens-option-card--selected .lw-lens-option-select::after {
  content: " شده";
}

/* ==================================
   TOOLTIP POPUP DESIGN & BACKDROP OVERLAY
   ================================== */
/* لایه پس‌زمینه بلر و تیره هنگام باز شدن اطلاعات عدسی */
.lw-lens-tooltip-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 10000000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.lw-lens-tooltip-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* باکس پورتال پاپ‌آپ وسط‌چین شده در مرکز صفحه با ابعاد و فونت‌های بزرگ‌تر و خوانا */
.lw-lens-tooltip-portal {
  position: fixed;
  z-index: 10000001;
  top: calc(50% + 28px) !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.95);
  width: 460px;
  max-width: min(480px, calc(100vw - 32px));
  max-height: min(82vh, calc(100vh - 120px));
  padding: 24px 26px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.4), 0 12px 24px -6px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s ease;
  direction: rtl;
  text-align: right;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lw-lens-tooltip-portal.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.lw-lens-tooltip-portal::-webkit-scrollbar {
  width: 5px;
}
.lw-lens-tooltip-portal::-webkit-scrollbar-track {
  background: transparent;
}
.lw-lens-tooltip-portal::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 6px;
}

/* دکمه ضربدر بستن پاپ‌آپ */
.lw-tooltip-close-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  line-height: 1;
  z-index: 2;
}

.lw-tooltip-close-btn:hover {
  background: #fee2e2;
  color: #ef4444;
  border-color: #fca5a5;
  transform: scale(1.05);
}

/* مخفی‌سازی تولتیپ‌های درون‌کارتی قدیمی */
.lw-lens-info-tooltip,
.lw-portal-arrow {
  display: none !important;
}

.lw-tooltip-inner {
  display: flex;
  flex-direction: column;
}

.lw-tooltip-header {
  margin-bottom: 12px;
  padding-left: 32px; /* فضا برای دکمه ضربدر در گوشه چپ */
}

.lw-tooltip-title {
  margin: 0;
  font-size: 17.5px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.4;
  letter-spacing: -0.2px;
}

.lw-tooltip-bullets {
  margin: 0 0 16px 0;
  padding: 0 18px 0 0;
  list-style-type: disc;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lw-tooltip-bullets li {
  font-size: 13.5px;
  color: #334155;
  line-height: 1.6;
  font-weight: 500;
}

.lw-tooltip-bullets li::marker {
  color: #0f172a;
  font-size: 12px;
}

.lw-tooltip-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin: 0;
  padding: 12px 14px;
  list-style: none;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
}

.lw-tooltip-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.lw-tooltip-check {
  color: #c28e28; /* Warm golden amber like sample photo */
  font-weight: 900;
  font-size: 15px;
  line-height: 1.2;
  flex-shrink: 0;
  margin-top: 1px;
}

.lw-tooltip-feature-name {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.4;
}

.lw-tooltip-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lw-tooltip-footnote {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

.lw-lens-info-trigger.is-active {
  border-color: var(--lw-accent) !important;
  background: var(--lw-accent-soft) !important;
  color: var(--lw-accent) !important;
  box-shadow: 0 0 0 3px rgba(164, 126, 44, 0.22) !important;
}

@media (max-width: 640px) {
  .lw-lens-tooltip-portal {
    width: calc(100vw - 28px);
    max-width: 380px;
    padding: 18px 18px;
    border-radius: 16px;
  }
  .lw-tooltip-title {
    font-size: 16px;
  }
  .lw-tooltip-bullets li {
    font-size: 12.5px;
  }
  .lw-tooltip-features-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px;
  }
  .lw-tooltip-feature-name {
    font-size: 12px;
  }
}

/* =========================
   STEP 4 – Review box
========================= */
.lw-review-box{
  margin-top: 12px;
  background: #f3f4f6; /* Gray background */
  border-radius: var(--lw-radius-md);
  border: 1px solid transparent;
  padding: 20px 18px;
  box-shadow: none;
  font-size: 13px;
  color: var(--lw-text);
}

.lw-review-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lw-review-frame-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 0;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 10;
}

.lw-review-frame-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  padding: 0;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .lw-review-frame-preview {
    aspect-ratio: 16 / 10;
    max-height: 380px;
  }
}

.lw-review-section {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding-bottom: 15px;
}

.lw-review-section:last-of-type {
  border-bottom: none;
}

.lw-review-section-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--lw-accent);
  border-right: 3px solid var(--lw-accent);
  padding-right: 8px;
}

.lw-review-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  line-height: 1.6;
}

.lw-review-label {
  color: #666;
  font-weight: 500;
}

.lw-review-value {
  color: #222;
  font-weight: 600;
}

.lw-review-table-wrap {
  margin-top: 10px;
  overflow-x: auto;
}

.lw-review-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 5px;
  font-size: 12px;
}

.lw-review-table th, .lw-review-table td {
  border: 1px solid var(--lw-border);
  padding: 8px;
  text-align: center;
}

.lw-review-table th {
  background-color: #fafafa;
  font-weight: bold;
}

.lw-review-summary-total {
  background: rgba(164, 126, 44, 0.05);
  border-radius: var(--lw-radius-sm);
  padding: 12px 14px;
  border: 1px dashed var(--lw-accent);
  margin-top: 10px;
}

.lw-review-item--total {
  margin-bottom: 0;
  align-items: center;
}

.lw-review-item--total .lw-review-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--lw-text);
}

.lw-review-item--total .lw-review-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--lw-accent);
}

.text-success {
  color: #2e7d32 !important;
}

.text-danger {
  color: #c62828 !important;
}

.text-muted {
  color: #757575 !important;
}

/* =========================
   ریسپانسیو
========================= */
@media (max-width: 960px){
  .lens-wizard-layout{
    grid-template-columns: 1fr;
  }

  .lw-summary-col{
    display: none !important;
  }

  .lw-feature-group-list{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px){
  .lens-wizard-section{
    padding: 16px 10px 32px;
  }

  .lw-step-title{
    font-size: 20px;
  }

  .lw-next-btn{
    min-width: 0;
    flex: 1;
    text-align: center;
  }

  .lw-stepper{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .lw-step-label{
    font-size: 11px;
  }

  .lw-lens-option-card{
    padding: 12px;
    gap: 12px;
  }

  .lw-lens-thumbnail-container {
    width: 70px;
    min-width: 70px;
    border-radius: 8px;
  }

  .lw-lens-thumbnail-circle {
    width: 50px;
    height: 50px;
  }

  .lw-lens-option-title{
    font-size: 13.5px;
  }

  .lw-lens-option-subtitle{
    font-size: 11px;
  }

  .lw-lens-tag-item {
    font-size: 10px;
    gap: 4px;
  }

  .lw-lens-tags-row {
    gap: 8px;
  }

  .lw-lens-option-footer {
    padding-top: 6px;
  }

  .lw-lens-option-price-value {
    font-size: 12.5px;
  }

  .lw-lens-option-select {
    padding: 5px 14px;
    font-size: 11px;
  }

  /* بهینه‌سازی جدول نمره و سلکت‌ها در نسخه موبایل */
  .lw-prescription-wrapper {
    padding: 12px 6px 14px;
  }

  .lw-prescription-table {
    font-size: 12px;
  }

  .lw-prescription-table thead th {
    padding: 6px 2px;
    font-size: 11.5px;
  }

  .lw-prescription-table thead th span {
    font-size: 9.5px;
  }

  .lw-prescription-table tbody td {
    padding: 8px 2px;
  }

  .lw-prescription-table thead th:first-child,
  .lw-prescription-table tbody td:first-child {
    width: 22%;
  }

  .lw-prescription-table thead th:nth-child(2),
  .lw-prescription-table tbody td:nth-child(2),
  .lw-prescription-table thead th:nth-child(3),
  .lw-prescription-table tbody td:nth-child(3),
  .lw-prescription-table thead th:nth-child(4),
  .lw-prescription-table tbody td:nth-child(4) {
    width: 26%;
  }

  .lw-prescription-table .lw-eye-label {
    font-size: 11px;
    line-height: 1.25;
    padding-left: 1px !important;
    padding-right: 2px !important;
    word-break: keep-all;
  }

  .lw-rx-select {
    font-size: 12px;
    padding: 6px 13px 6px 3px;
    border-radius: 6px;
    background-position:
      calc(100% - 9px) 50%,
      calc(100% - 5px) 50%;
    background-size: 4px 4px, 4px 4px;
  }
}
/* =========================
   Warranty badge (گارانتی شکست عدسی)
========================= */

.lw-lens-warranty{
  display: none !important; /* پنهان کردن گارانتی قدیمی عدسی */
}

/* =========================
   بنر گارانتی فریم در کارت عدسی (استایل جدید تب گوشه‌ای با انحنای مقعر)
   ========================= */

.lw-frame-warranty-banner {
  --banner-height: 28px;
  position: absolute;
  bottom: 0;
  left: 0;
  height: var(--banner-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  border-bottom-left-radius: 15px; /* هماهنگ با انحنای کارت اصلی */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  z-index: 10;
  transition: all 0.2s ease;
  
  /* فقط خط مرزی بالا برای اتصال مداوم به شیارها */
  border-top: 1px solid var(--banner-border-color);
  border-bottom: none;
  border-left: none;
  border-right: none;
  background-color: var(--banner-bg-color);
}

/* شیار بالای تب (اتصال به لبه چپ کارت) */
.lw-frame-warranty-banner::before {
  content: var(--banner-icon-content, "");
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--banner-icon-color);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: var(--banner-height);
  height: var(--banner-height);
  bottom: calc(100% - 1px); /* هم‌پوشانی خفیف برای تراز دقیق */
  left: 0;
  background-color: var(--banner-bg-color);
  border-top-right-radius: var(--banner-height); /* انحنای مقعر شیار */
  border-top: 1px solid var(--banner-border-color);
  border-right: 1px solid var(--banner-border-color);
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1;
}

/* شیار سمت راست تب (اتصال به لبه پایین کارت) */
.lw-frame-warranty-banner::after {
  content: "";
  position: absolute;
  width: var(--banner-height);
  height: var(--banner-height);
  bottom: 0;
  left: calc(100% - 1px); /* هم‌پوشانی خفیف برای تراز دقیق */
  background-color: var(--banner-bg-color);
  border-top-right-radius: var(--banner-height); /* انحنای مقعر شیار */
  border-top: 1px solid var(--banner-border-color);
  border-right: 1px solid var(--banner-border-color);
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1;
}

.lw-frame-warranty-banner--green {
  --banner-bg-color: #e8f7ed;
  --banner-border-color: rgba(22, 101, 52, 0.12);
  --banner-icon-content: "\f3ed"; /* fa-shield-halved */
  --banner-icon-color: #16a34a;
  background-color: var(--banner-bg-color);
  color: #166534;
}

.lw-frame-warranty-banner--golden {
  --banner-bg-color: #fffbeb;
  --banner-border-color: rgba(180, 83, 9, 0.15);
  --banner-icon-content: "\f521"; /* fa-crown */
  --banner-icon-color: #f59e0b;
  background-color: var(--banner-bg-color);
  color: #b45309;
  box-shadow: 2px -2px 8px rgba(180, 83, 9, 0.04);
}

.lw-frame-warranty-golden-pill,
.lw-frame-warranty-green-pill {
  display: inline-block;
  color: #fff;
  font-size: 8.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 100px;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.lw-frame-warranty-golden-pill {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.lw-frame-warranty-green-pill {
  background: linear-gradient(135deg, #10b981, #059669);
}

/* Tooltip برای بنر گارانتی فریم */
.lw-frame-warranty-banner-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: auto;
  min-width: 210px;
  max-width: 250px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #111827;
  color: #f9fafb;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.7;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 25;
  text-align: right;
  transition: opacity .2s, transform .2s;
  transform: translateY(4px);
}

.lw-frame-warranty-banner-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 14px;
  right: auto;
  border-width: 6px;
  border-style: solid;
  border-color: #111827 transparent transparent transparent;
}

.lw-frame-warranty-banner:hover .lw-frame-warranty-banner-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* =========================
   Desktop Split Screen Layout (60/40)
========================= */
@media (min-width: 961px) {
  body:has(.lens-wizard-page) {
    padding-top: 0 !important;
    overflow: hidden;
  }

  .lens-wizard-page {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #ffffff;
  }

  .lens-wizard-section {
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }

  .lens-wizard-layout {
    height: 100%;
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: 6fr 4fr; /* 60% Wizard on the right, 40% Product on the left in RTL */
    gap: 0;
    align-items: stretch;
  }

  .lw-main-col {
    height: 100%;
    overflow-y: auto;
    padding: 0 60px 100px;
    background: #ffffff;
    box-sizing: border-box;
    scroll-behavior: smooth;
  }

  /* Sleek custom scrollbar for Wizard section */
  .lw-main-col::-webkit-scrollbar {
    width: 6px;
  }
  .lw-main-col::-webkit-scrollbar-track {
    background: transparent;
  }
  .lw-main-col::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 999px;
  }
  .lw-main-col::-webkit-scrollbar-thumb:hover {
    background: #d1d5db;
  }

  .lw-summary-col {
    height: 100%;
    background: #f9fafb; /* Soft light-gray background */
    border-right: 1px solid var(--lw-border); /* Separate the sections */
    padding: 60px 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .lw-summary-card {
    position: static;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .lw-summary-image-wrap {
    background: transparent;
    aspect-ratio: 16 / 10;
    margin-bottom: 12px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lw-summary-image-wrap img,
  #lw-summary-image {
    transform: scale(1.35); /* Scale up product image */
    transform-origin: center;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .lw-summary-info {
    align-items: center;
    text-align: center;
    gap: 8px;
  }

  .lw-summary-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--lw-text);
  }

  .lw-summary-color {
    font-size: 15px;
    color: var(--lw-muted);
  }

  .lw-summary-price-row {
    justify-content: center;
    margin-top: 4px;
    gap: 12px;
  }

  .lw-summary-price {
    font-size: 22px;
    color: var(--lw-accent);
  }

  .lw-summary-compare {
    font-size: 15px;
  }

  .lw-summary-note {
    text-align: center;
    margin-top: 12px;
    background: #faf7ee;
    border: 1px dashed rgba(164, 126, 44, 0.2);
    color: #7c5e1c;
    border-radius: 12px;
    padding: 10px 14px;
  }

  /* Sticky progress bar spanning full width of the wizard column */
  .lw-stepper-wrap {
    position: sticky;
    top: 0;
    z-index: 10;
    margin-left: -60px;
    margin-right: -60px;
    background: #ffffff;
    padding: 0; /* Full width: no padding */
    margin-bottom: 30px;
    border-bottom: none;
  }

  .lw-stepper {
    display: block;
    padding: 0;
  }

  .lw-stepper-track {
    position: relative;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px; /* Sleek, matches global, not overly thick */
    border-radius: 0; /* Flat line */
    width: 100%;
    background: #f1f2f4;
    overflow: visible; /* Allows the glow of the fill to radiate outside the track */
  }

  .lw-stepper-fill {
    height: 100%;
    border-radius: 0; /* Flat line */
    background: linear-gradient(90deg, var(--lw-accent) 0%, #e5c158 50%, var(--lw-accent) 100%);
    background-size: 200% 100%;
    animation: lw-shimmer 3s linear infinite;
    box-shadow: 0 0 10px rgba(164, 126, 44, 0.6), 0 0 4px rgba(164, 126, 44, 0.4);
    transition: width 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
}

/* ==========================================================================
   اضافات نسخه ذخیره شده و مودال احراز هویت
   ========================================================================== */

/* آیکن استفاده از نسخه ذخیره شده */
.lw-method-icon--saved::before {
  content: "";
  width: 22px;
  height: 22px;
  display: block;
  background: var(--lw-accent);
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2zm0-4H7V7h10v2zm0 8H7v-2h10v2z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 20px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2zm0-4H7V7h10v2zm0 8H7v-2h10v2z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 20px;
}

/* مودال احراز هویت ویزارد */
.lw-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  backdrop-filter: blur(5px);
  animation: lw-fade-in 0.2s ease-out;
}

.lw-modal-card {
  background: #ffffff;
  width: 100%;
  max-width: 440px;
  border-radius: var(--lw-radius-lg);
  padding: 30px 24px;
  position: relative;
  box-shadow: var(--lw-shadow-md);
  animation: lw-slide-up 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  direction: rtl;
}

@keyframes lw-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes lw-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.lw-modal-close {
  position: absolute;
  top: 18px;
  left: 18px;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--lw-muted);
  transition: color 0.15s;
  padding: 0;
}

.lw-modal-close:hover {
  color: var(--lw-text);
}

.lw-modal-tabs {
  display: flex;
  border-bottom: 2px solid var(--lw-border);
  margin-bottom: 24px;
  margin-top: 10px;
  gap: 16px;
}

.lw-modal-tab {
  flex: 1;
  text-align: center;
  padding: 12px;
  background: none;
  border: none;
  font-size: 16px;
  font-weight: 800;
  color: var(--lw-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
  font-family: inherit;
}

.lw-modal-tab.active {
  color: var(--lw-accent);
  border-bottom-color: var(--lw-accent);
}

.lw-modal-alert {
  background: #fde8e8;
  color: #e53e3e;
  padding: 12px;
  border-radius: var(--lw-radius-sm);
  margin-bottom: 20px;
  font-size: 14px;
  text-align: right;
  border: 1px solid #fbd5d5;
  font-weight: bold;
}

.lw-modal-alert.success {
  background: #f0fdf4;
  color: #16a34a;
  border-color: #bbf7d0;
}

.lw-modal-form .lw-form-group {
  margin-bottom: 20px;
  text-align: right;
}

.lw-modal-form .lw-form-group label {
  display: block;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--lw-text);
}

.lw-modal-form .lw-form-group input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--lw-border);
  border-radius: var(--lw-radius-sm);
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.lw-modal-form .lw-form-group input:focus {
  outline: none;
  border-color: var(--lw-accent);
  box-shadow: 0 0 0 3px var(--lw-accent-soft);
}

.lw-modal-form input[type="tel"],
.lw-modal-form input[type="password"],
.lw-modal-form input[type="email"] {
  text-align: left;
  direction: ltr;
}

.lw-modal-btn {
  width: 100%;
  padding: 14px;
  background: var(--lw-accent);
  color: #ffffff;
  border: none;
  border-radius: var(--lw-radius-sm);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.lw-modal-btn:hover {
  background: #8e6d24;
}

.lw-modal-btn:active {
  transform: scale(0.98);
}

/* کارت‌های نسخه‌های ذخیره شده */
.lw-saved-prescriptions-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.lw-saved-rx-card {
  background: #ffffff;
  border: 2px solid var(--lw-border);
  border-radius: var(--lw-radius-lg);
  padding: 18px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  text-align: right;
  overflow: hidden;
}

.lw-saved-rx-card:hover {
  border-color: rgba(164, 126, 44, 0.4);
  box-shadow: var(--lw-shadow-sm);
  transform: translateY(-2px);
}

.lw-saved-rx-card.is-active {
  border-color: var(--lw-accent) !important;
  background: var(--lw-card-selected-bg, #fbf4e2) !important;
  box-shadow: 0 0 0 1.5px var(--lw-accent), var(--lw-shadow-md) !important;
}

.lw-saved-rx-card::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 18px;
  left: 18px;
  font-size: 18px;
  color: var(--lw-accent);
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.25s ease;
}

.lw-saved-rx-card.is-active::after {
  opacity: 1;
  transform: scale(1);
}

.lw-saved-rx-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--lw-border);
  padding-bottom: 8px;
  padding-left: 24px; /* Space for checkmark */
}

.lw-saved-rx-name {
  font-size: 16px;
  font-weight: 900;
  color: var(--lw-text);
}

.lw-saved-rx-date {
  font-size: 12px;
  color: var(--lw-muted);
}

.lw-saved-rx-card-details {
  overflow-x: auto;
}

.lw-saved-rx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 320px;
}

.lw-saved-rx-table th,
.lw-saved-rx-table td {
  padding: 6px 8px;
  text-align: center;
  border: 1px solid var(--lw-border);
}

.lw-saved-rx-table th {
  background: #f9fafb;
  color: var(--lw-muted);
  font-weight: 800;
}

.lw-saved-rx-table td {
  color: var(--lw-text);
  font-family: inherit;
}

.lw-saved-rx-table td:first-child {
  font-weight: 800;
  background: #f9fafb;
  text-align: right;
  width: 90px;
}

.lw-no-saved-rx {
  background: #ffffff;
  border: 1px dashed var(--lw-border);
  border-radius: var(--lw-radius-lg);
  padding: 30px 20px;
  text-align: center;
  color: var(--lw-muted);
  font-size: 14px;
}

.lw-saved-rx-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 16px;
}

.lw-add-new-rx-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--lw-accent);
  background: var(--lw-accent-soft);
  color: var(--lw-accent);
  border-radius: var(--lw-radius-md);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.lw-add-new-rx-btn:hover {
  background: var(--lw-accent);
  color: #ffffff;
  box-shadow: var(--lw-shadow-sm);
}

/* PD selection styling in form */
.lw-pd-section-wrapper .lw-pd-type-toggle {
  display: flex;
  gap: 16px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.lw-pd-select-container {
  background: #f9fafb;
  border: 1px solid var(--lw-border);
  border-radius: var(--lw-radius-md);
  padding: 14px;
  display: inline-block;
  min-width: 160px;
}

.lw-pd-select-container .lw-select {
  direction: ltr;
  text-align: left;
  font-variant-numeric: tabular-nums;
  padding: 8px 28px 8px 12px;
}

/* ==============================================
   AI OCR — Loading State
   ============================================== */
.lw-ocr-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 16px;
  text-align: center;
}

.lw-ocr-loading-spinner {
  position: relative;
  width: 64px;
  height: 64px;
}

.lw-ocr-spinner-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--lw-accent);
  animation: lw-ocr-spin 1s linear infinite;
}

.lw-ocr-spinner-ring--2 {
  inset: 8px;
  border-top-color: transparent;
  border-right-color: var(--lw-accent);
  opacity: 0.5;
  animation-duration: 0.7s;
  animation-direction: reverse;
}

@keyframes lw-ocr-spin {
  to { transform: rotate(360deg); }
}

.lw-ocr-loading-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--lw-text);
  margin: 0;
}

.lw-ocr-loading-sub {
  font-size: 0.82rem;
  color: var(--lw-muted);
  margin: 0;
}

/* ==============================================
   AI OCR — Result Card
   ============================================== */
.lw-ocr-result {
  background: #fff;
  border: 1.5px solid var(--lw-border);
  border-radius: var(--lw-radius-lg);
  padding: 20px;
  margin-top: 16px;
  animation: lw-ocr-fadein 0.35s ease;
}

@keyframes lw-ocr-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Header row (badge + edit toggle) ── */
.lw-ocr-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.lw-ocr-result-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
  border: 1px solid rgba(34, 197, 94, 0.25);
  transition: background 0.2s, color 0.2s;
}

.lw-ocr-badge-icon {
  font-size: 1rem;
}

.lw-step-voice-btn {
  background: var(--lw-accent-soft, rgba(99, 102, 241, 0.1));
  border: 1.5px solid var(--lw-accent, #6366f1);
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--lw-accent, #6366f1);
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.08);
}

.lw-step-voice-btn:hover {
  background: var(--lw-accent, #6366f1);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.lw-step-voice-btn--speaking {
  background: #ef4444 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
  animation: lwVoicePulse 1.4s infinite ease-in-out;
}

.lw-ocr-speak-btn {
  background: var(--lw-accent-soft, rgba(99, 102, 241, 0.1));
  border: 1.5px solid var(--lw-accent, #6366f1);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--lw-accent, #6366f1);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.lw-ocr-speak-btn:hover {
  background: var(--lw-accent, #6366f1);
  color: #ffffff;
}

.lw-ocr-speak-btn--speaking {
  background: #ef4444 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
  animation: lwVoicePulse 1.4s infinite ease-in-out;
}

@keyframes lwVoicePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    transform: scale(1.03);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    transform: scale(1);
  }
}

/* confidence-based badge colors */
.lw-ocr-badge--high {
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
  border-color: rgba(34, 197, 94, 0.25);
}

.lw-ocr-badge--medium {
  background: rgba(234, 179, 8, 0.1);
  color: #92400e;
  border-color: rgba(234, 179, 8, 0.3);
}

.lw-ocr-badge--low {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.25);
}

.lw-ocr-edit-toggle {
  background: none;
  border: 1.5px solid var(--lw-border);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--lw-muted);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  font-family: inherit;
}

.lw-ocr-edit-toggle:hover {
  border-color: var(--lw-accent);
  color: var(--lw-accent);
  background: var(--lw-accent-soft);
}

.lw-ocr-speak-btn {
  background: var(--lw-accent-soft, rgba(99, 102, 241, 0.1));
  border: 1.5px solid var(--lw-accent, #6366f1);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--lw-accent, #6366f1);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.lw-ocr-speak-btn:hover {
  background: var(--lw-accent, #6366f1);
  color: #ffffff;
}

/* ── Prescription Table ── */
.lw-ocr-table-wrap {
  overflow-x: auto;
}

.lw-ocr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin-bottom: 12px;
  direction: ltr;
}

.lw-ocr-table th,
.lw-ocr-table td {
  padding: 10px 12px;
  text-align: center;
  border: 1px solid var(--lw-border);
}

.lw-ocr-table thead th {
  background: #f9fafb;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--lw-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lw-ocr-eye-label {
  font-weight: 700;
  color: var(--lw-text);
  text-align: right;
  direction: ltr;
  white-space: nowrap;
  padding-right: 16px !important;
}

.lw-ocr-eye-label small {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--lw-muted);
  margin-top: 2px;
}

/* ── Input fields inside table ── */
.lw-ocr-input {
  width: 90px;
  padding: 6px 8px;
  border: 1.5px solid var(--lw-border);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  color: var(--lw-text);
  background: #f9fafb;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  -moz-appearance: textfield;
  font-family: 'Courier New', monospace;
}

.lw-ocr-input::-webkit-inner-spin-button,
.lw-ocr-input::-webkit-outer-spin-button {
  opacity: 0;
}

.lw-ocr-input[readonly] {
  cursor: default;
  background: #f3f4f6;
}

.lw-ocr-input--editable {
  background: #fff !important;
  border-color: var(--lw-accent) !important;
  box-shadow: 0 0 0 3px var(--lw-accent-soft);
  cursor: text !important;
}

.lw-ocr-input--editable:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--lw-accent-soft);
}

/* ── PD row below table ── */
.lw-ocr-pd-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding: 10px 12px;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px solid var(--lw-border);
  direction: rtl;
}

.lw-ocr-pd-row label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--lw-text);
  flex: 1;
}

.lw-ocr-pd-input {
  width: 80px !important;
}

.lw-ocr-pd-row span {
  font-size: 0.78rem;
  color: var(--lw-muted);
}

/* ==============================================
   AI OCR — Warning Banner
   ============================================== */
.lw-ocr-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.3);
  color: #92400e;
  font-size: 0.82rem;
  margin-top: 12px;
  direction: rtl;
}

/* ==============================================
   AI OCR — Error State
   ============================================== */
.lw-ocr-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px;
  gap: 10px;
  background: #fff;
  border: 1.5px solid #fecdd3;
  border-radius: var(--lw-radius-lg);
  margin-top: 16px;
}

.lw-ocr-error-icon {
  font-size: 2.4rem;
  margin-bottom: 4px;
}

.lw-ocr-error p {
  margin: 0;
}

.lw-ocr-error #lw-ocr-error-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: #b91c1c;
}

.lw-ocr-error-hint {
  font-size: 0.8rem;
  color: var(--lw-muted);
}

.lw-ocr-retry-btn {
  margin-top: 6px;
  padding: 8px 20px;
  border: 1.5px solid var(--lw-accent);
  border-radius: 10px;
  background: none;
  color: var(--lw-accent);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, color 0.2s;
}

.lw-ocr-retry-btn:hover {
  background: var(--lw-accent);
  color: #fff;
}

/* ==============================================
   Responsive adjustments
   ============================================== */
@media (max-width: 480px) {
  .lw-ocr-table th,
  .lw-ocr-table td {
    padding: 7px 6px;
  }

  .lw-ocr-input {
    width: 70px;
    font-size: 0.82rem;
  }

  .lw-ocr-result-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .lw-feature-group-card {
    padding: 12px 14px;
    gap: 12px;
  }

  .lw-feature-group-icon-wrap {
    width: 58px;
    height: 46px;
  }
}

/* ==============================================
   Sunglasses Selection Styling
   ============================================== */
.lw-sunglasses-options-wrapper {
  animation: lwFadeIn 0.3s ease-out;
}

@keyframes lwFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.lw-sunglasses-rx-buttons .lw-button {
  background: white;
  border: 1.5px solid var(--lw-border);
  color: var(--lw-text);
  cursor: pointer;
  transition: all 0.3s ease;
}

.lw-sunglasses-rx-buttons .lw-button:hover {
  border-color: var(--lw-accent);
  color: var(--lw-accent);
}

.lw-sunglasses-rx-buttons .lw-button.is-selected {
  background: var(--lw-accent);
  border-color: var(--lw-accent);
  color: white;
  box-shadow: 0 4px 12px rgba(164, 126, 44, 0.25);
}

.lw-tint-preview-box {
  transition: transform 0.3s ease;
}

.lw-lens-type-card:hover .lw-tint-preview-box {
  transform: scale(1.02);
}

.lw-tint-preview-box div {
  transition: background 0.3s ease;
}

/* ==============================================
   Compact Gray Lens Cards Layout
   ============================================== */
.lw-lens-option-card {
  position: relative;
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  background: #f3f4f6 !important; /* light gray background */
  padding: 12px 16px 36px 16px !important;
  cursor: pointer;
  display: flex !important;
  flex-direction: row !important; /* side-by-side layout */
  align-items: center !important;
  gap: 16px !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: none !important;
}

.lw-lens-option-card:hover {
  background: #eaecef !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.lw-lens-option-card--selected {
  border-color: var(--lw-accent) !important;
  background: var(--lw-card-selected-bg, #fbf4e2) !important; /* distinct warm gold tone contrasting clearly with background */
  box-shadow: 0 0 0 1.5px var(--lw-accent), 0 6px 18px rgba(164, 126, 44, 0.16) !important;
}

/* Custom Brand Badge Thumbnail */
.lw-lens-thumbnail-container-custom {
  width: 92px;
  height: 92px;
  min-width: 92px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  background: #fff;
  transition: transform 0.2s ease;
}

.lw-lens-option-card:hover .lw-lens-thumbnail-container-custom {
  transform: scale(1.03);
}

.lw-lens-brand-thumbnail-img-custom {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transform: scale(1.20) !important;
}

/* Details Section */
.lw-lens-option-header {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* Title Row layout - flex container holding title on right and info trigger on top-left */
.lw-lens-option-title-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  padding-left: 4px !important;
  padding-inline-end: 4px !important;
}

.lw-lens-option-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  margin: 0 !important;
  line-height: 1.45 !important;
  display: inline-block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  word-break: break-word !important;
}

/* Meta row below title: contains English title on one side and Price on the other */
.lw-lens-meta-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
  min-height: 18px !important;
}

.lw-lens-title-en {
  display: block !important;
  font-size: 0.75rem !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  direction: ltr !important;
  text-align: right !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Info trigger container positioned at top-left of card header inside card bounds */
.lw-lens-option-info {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  margin-inline-end: 14px !important; /* هل دادن به سمت داخل/راست کارت در RTL */
  margin-left: 14px !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 10 !important;
}

.lw-lens-option-card:hover {
  z-index: 2;
}

/* جلوگیری از هایلایت/پررنگ شدن کارت هنگام هاور روی علامت اطلاعات یا باز بودن مشخصات */
.lw-lens-option-card:has(.lw-lens-option-info:hover),
.lw-lens-option-card:has(.lw-lens-info-trigger.is-active) {
  background: #f3f4f6 !important;
  border-color: #e5e7eb !important;
  transform: none !important;
  box-shadow: none !important;
  z-index: 1 !important;
}

.lw-lens-option-card:has(.lw-lens-option-info:hover) .lw-lens-thumbnail-container-custom,
.lw-lens-option-card:has(.lw-lens-info-trigger.is-active) .lw-lens-thumbnail-container-custom {
  transform: none !important;
}

.lw-lens-option-card--selected:has(.lw-lens-option-info:hover),
.lw-lens-option-card--selected:has(.lw-lens-info-trigger.is-active) {
  border-color: var(--lw-accent) !important;
  background: var(--lw-card-selected-bg, #fbf4e2) !important;
  box-shadow: 0 0 0 1.5px var(--lw-accent) !important;
  transform: none !important;
  z-index: 1 !important;
}

.lw-landing-link {
  transition: all 0.2s ease !important;
}

.lw-landing-link:hover {
  color: #785a1a !important;
  text-decoration: underline !important;
}

/* لینک / دکمه اطلاعات بیشتر بدون پس‌زمینه و کادر اضافه */
.lw-lens-info-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 2px !important;
  height: auto !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #0284c7 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  z-index: 10 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  box-shadow: none !important;
}

.lw-lens-info-trigger .lw-lens-info-icon {
  font-size: 12px !important;
  color: #0284c7 !important;
  transition: color 0.2s ease !important;
}

.lw-lens-info-trigger .lw-lens-info-text {
  font-size: 11px !important;
  color: #0284c7 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  transition: color 0.2s ease !important;
}

.lw-lens-info-trigger::after {
  /* لایه نامرئی اطراف دکمه برای تاچ آسان‌تر روی موبایل */
  content: "";
  position: absolute;
  inset: -6px;
  background: transparent;
}

.lw-lens-info-trigger.is-active,
.lw-lens-info-trigger:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  z-index: 10 !important;
}

.lw-lens-info-trigger.is-active .lw-lens-info-icon,
.lw-lens-info-trigger.is-active .lw-lens-info-text,
.lw-lens-info-trigger:hover .lw-lens-info-icon,
.lw-lens-info-trigger:hover .lw-lens-info-text {
  color: #0369a1 !important;
}

/* قیمت عدسی در ردیف متا */
.lw-lens-option-price-custom {
  margin-inline-start: auto !important; /* هل دادن قیمت به چپ در RTL */
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.lw-lens-option-price-value {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.lw-lens-option-card--selected .lw-lens-option-price-value {
  color: var(--lw-accent) !important;
}

/* Hide original brand logo and select button */
.lw-lens-brand {
  display: none !important;
}

.lw-lens-option-footer,
.lw-lens-option-select {
  display: none !important;
}

/* کارت عدسی در مرحله ۴ بررسی */
.lw-review-lens-card {
  cursor: default !important;
  user-select: auto !important;
  box-shadow: 0 0 0 1.5px var(--lw-accent), 0 4px 14px rgba(164, 126, 44, 0.1) !important;
}

.lw-review-lens-card:hover {
  transform: none !important;
}

.lw-review-lens-card .lw-lens-info-trigger {
  cursor: pointer !important;
}

/* بهینه‌سازی دقیق نسخه موبایل */
@media (max-width: 576px) {
  .lw-lens-option-card {
    padding: 10px 10px 34px 10px !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
  .lw-lens-thumbnail-container-custom {
    width: 72px !important;
  }
  .lw-lens-title-en {
    font-size: 11px !important;
    max-width: 140px !important;
  }
  .lw-lens-option-price-value {
    font-size: 13.5px !important;
  }
  .lw-lens-option-subtitle {
    font-size: 11px !important;
    line-height: 1.45 !important;
  }
  .lw-lens-spec-chip {
    font-size: 10px !important;
    padding: 2.5px 7px !important;
  }
}

/* --- LENS WIZARD GUIDE & GLOW EFFECTS --- */
.lw-guide-banner {
  display: flex;
  align-items: center;
  gap: 15px;
  background: linear-gradient(135deg, #FFF9E6 0%, #FFF3CC 100%);
  border: 1px solid #FFC72C;
  border-radius: var(--radius-md, 8px);
  padding: 15px 20px;
  margin-bottom: 25px;
  color: #8A6D00;
  box-shadow: 0 4px 15px rgba(255, 199, 44, 0.15);
  animation: lwFadeIn 0.3s ease;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.6;
  direction: rtl;
}

.lw-guide-banner--error {
  background: linear-gradient(135deg, #FDF2F2 0%, #FDE8E8 100%);
  border-color: #E63946;
  color: #9B1C1C;
  box-shadow: 0 4px 15px rgba(230, 57, 70, 0.1);
}

.lw-guide-banner-icon {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lwPulse 2s infinite;
}

.lw-guide-banner--error .lw-guide-banner-icon {
  animation: none;
}

.lw-guide-banner-text strong {
  font-weight: 800;
  color: #0d0e15;
}

.lw-guide-banner--error .lw-guide-banner-text strong {
  color: #0d0e15;
}

/* Glow effects */
.lw-guide-glow {
  position: relative;
  border: 2px solid #FFC72C !important;
  box-shadow: 0 0 15px rgba(255, 199, 44, 0.6) !important;
  animation: lwGlowPulse 2s infinite !important;
}

.lw-marked-glow {
  position: relative;
  border: 2px solid #FFC72C !important;
  box-shadow: 0 0 20px rgba(255, 199, 44, 0.8) !important;
  animation: lwGlowPulseGold 2.5s infinite !important;
}

@keyframes lwFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes lwPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes lwGlowPulse {
  0% { box-shadow: 0 0 5px rgba(255, 199, 44, 0.4); border-color: #FFC72C; }
  50% { box-shadow: 0 0 18px rgba(255, 199, 44, 0.8); border-color: #E6B000; }
  100% { box-shadow: 0 0 5px rgba(255, 199, 44, 0.4); border-color: #FFC72C; }
}

@keyframes lwGlowPulseGold {
  0% { box-shadow: 0 0 8px rgba(255, 199, 44, 0.5); border-color: #FFC72C; }
  50% { box-shadow: 0 0 25px rgba(255, 199, 44, 0.95); border-color: #FFF; }
  100% { box-shadow: 0 0 8px rgba(255, 199, 44, 0.5); border-color: #FFC72C; }
}




/* Sunglasses Color Grid */
#lw-sunglasses-color-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 16px !important;
}

#lw-sunglasses-color-list .lw-sun-color-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px;
}

#lw-sunglasses-color-list .lw-sun-color-card.lw-lens-type-card--hidden,
#lw-sunglasses-color-list .lw-sun-color-card[hidden],
#lw-sunglasses-color-list .lw-sun-color-card[style*="display: none"] {
  display: none !important;
}

#lw-sunglasses-color-list .lw-sun-color-card .lw-lens-type-desc {
  margin-top: auto !important;
  font-size: 0.88rem !important;
  color: var(--lw-muted) !important;
}


/* Sunglasses Darkness Grid */
#lw-sunglasses-darkness-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 16px !important;
}

#lw-sunglasses-darkness-list .lw-sun-darkness-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px;
}

#lw-sunglasses-darkness-list .lw-sun-darkness-card.lw-lens-type-card--hidden,
#lw-sunglasses-darkness-list .lw-sun-darkness-card[hidden],
#lw-sunglasses-darkness-list .lw-sun-darkness-card[style*="display: none"] {
  display: none !important;
}

#lw-sunglasses-darkness-list .lw-sun-darkness-card .lw-lens-type-desc {
  margin-top: auto !important;
  font-size: 0.88rem !important;
  color: var(--lw-muted) !important;
}


/* Sunglasses Gradient Grid */
#lw-sunglasses-gradient-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
}

#lw-sunglasses-gradient-list .lw-sun-gradient-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px;
}

#lw-sunglasses-gradient-list .lw-sun-gradient-card.lw-lens-type-card--hidden,
#lw-sunglasses-gradient-list .lw-sun-gradient-card[hidden],
#lw-sunglasses-gradient-list .lw-sun-gradient-card[style*="display: none"] {
  display: none !important;
}

#lw-sunglasses-gradient-list .lw-sun-gradient-card .lw-lens-type-desc {
  margin-top: auto !important;
  font-size: 0.88rem !important;
  color: var(--lw-muted) !important;
}

/* Sunglasses Material & Custom Lenses Layout */
#lw-sunglasses-material-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

.lw-sun-addon-card {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none;
}

.lw-sun-addon-card:hover {
  border-color: #0284c7 !important;
  background: #f0f9ff !important;
  transform: translateY(-1px);
}

.lw-sun-addon-card.lw-sun-addon-card--active,
.lw-sun-addon-card.is-checked {
  border-color: #0284c7 !important;
  background: #e0f2fe !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25) !important;
}

.lw-sun-addon-card--express {
  border-color: #f59e0b !important;
  background: #fffbeb !important;
}

.lw-sun-addon-card--express:hover {
  border-color: #d97706 !important;
  background: #fef3c7 !important;
  transform: translateY(-1px);
}

.lw-sun-addon-card--express.lw-sun-addon-card--active,
.lw-sun-addon-card--express.is-checked {
  border-color: #d97706 !important;
  background: #fde68a !important;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.3) !important;
}

.lw-sun-mat-card {
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.lw-sun-mat-card:hover {
  border-color: var(--lw-accent) !important;
}

.lw-sun-mat-card.lw-lens-option-card--selected {
  border-color: var(--lw-accent) !important;
  background: var(--lw-card-selected-bg, #fbf4e2) !important;
  box-shadow: 0 0 0 2px var(--lw-accent) !important;
}

/* ========================================================
   کارت راهنمای تصویری آپلود نسخه (Visual Step 2 Guide)
   ======================================================== */
.lw-upload-guide-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f0f9ff 100%);
  border: 1px solid #e0f2fe;
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px -2px rgba(2, 132, 199, 0.06);
}

.lw-upload-guide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.lw-upload-guide-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0284c7;
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.lw-upload-guide-subtitle {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

.lw-upload-guide-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.lw-upload-guide-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.lw-upload-guide-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.08);
  border-color: #38bdf8;
}

.lw-upload-guide-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
}

.lw-upload-guide-info strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 3px;
}

.lw-upload-guide-info p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #64748b;
}

@media (max-width: 768px) {
  .lw-upload-guide-steps {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .lw-upload-guide-card {
    padding: 14px 16px;
  }
}

/* ========================================================
   کارت عدسی نشانه‌گذاری‌شده در صفحه اول ویزارد (Step 1 Marked Lens Card)
   ======================================================== */
.lw-marked-lens-container {
  width: 100%;
  margin-bottom: 20px;
  animation: lwMarkedFadeIn 0.35s ease-out;
}

@keyframes lwMarkedFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.lw-lens-type-card.lw-marked-lens-card {
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 60%, #fef3c7 100%);
  border: 2px solid #f59e0b;
  border-radius: 16px;
  padding: 18px 20px;
  text-align: right;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 18px -2px rgba(245, 158, 11, 0.18), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  width: 100%;
}

.lw-lens-type-card.lw-marked-lens-card:hover {
  transform: translateY(-3px);
  border-color: #d97706;
  box-shadow: 0 8px 24px -4px rgba(245, 158, 11, 0.28), 0 4px 8px -2px rgba(0, 0, 0, 0.06);
}

.lw-lens-type-card.lw-marked-lens-card.is-selected,
.lw-lens-type-card.lw-marked-lens-card.lw-lens-type-card--active {
  border-color: #b45309;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.3), 0 8px 25px rgba(245, 158, 11, 0.3);
}

.lw-marked-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 10px;
}

.lw-marked-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(180, 83, 9, 0.3);
  letter-spacing: -0.2px;
}

.lw-marked-unmark-btn {
  background: rgba(0, 0, 0, 0.06);
  border: none;
  color: #78350f;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.lw-marked-unmark-btn:hover {
  background: #fee2e2;
  color: #dc2626;
}

.lw-marked-content-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.lw-marked-info-side {
  flex: 1;
  min-width: 240px;
}

.lw-marked-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 6px 0;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lw-marked-meta-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.lw-marked-tag {
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.15);
  color: #92400e;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.lw-marked-lens-wrapper {
  margin-bottom: 24px;
  background: #ffffff;
  border-radius: 18px;
  padding: 16px;
  border: 2px solid #f59e0b;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.15);
  position: relative;
}

.lw-marked-lens-wrapper .lw-marked-top-bar {
  margin-bottom: 12px;
}

.lw-marked-lens-full-card {
  margin-bottom: 0 !important;
  cursor: pointer;
  border: 1.5px solid #f59e0b !important;
  background: #ffffff !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.08) !important;
  transition: all 0.25s ease !important;
}

.lw-marked-lens-full-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.18) !important;
  border-color: #d97706 !important;
}

.lw-marked-card-action-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(245, 158, 11, 0.3);
  display: flex;
  justify-content: flex-end;
}

.lw-marked-card-action-footer .lw-marked-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: #ffffff;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 800;
  border: none;
  box-shadow: 0 2px 8px rgba(180, 83, 9, 0.3);
  transition: all 0.2s ease;
  pointer-events: auto;
  cursor: pointer;
}

.lw-marked-lens-full-card:hover .lw-marked-select-btn {
  transform: translateX(-4px);
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.4);
}

@media (max-width: 640px) {
  .lw-marked-content-grid {
    flex-direction: column;
    align-items: flex-start;
  }
  .lw-marked-cta-side {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed rgba(245, 158, 11, 0.3);
    padding-top: 10px;
    margin-top: 6px;
  }
}

/* =========================================================
   بنر حالت ویرایش عدسی از سبد خرید (Edit Mode Banner)
========================================================= */
.lw-edit-mode-banner {
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
  border: 1.5px solid #bfdbfe;
  border-radius: 14px;
  padding: 12px 18px;
  margin-bottom: 20px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08);
  animation: lw-fade-in-down 0.35s ease-out;
}

@keyframes lw-fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lw-edit-mode-banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.lw-edit-mode-banner-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lw-edit-mode-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #2563eb;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.lw-edit-mode-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lw-edit-mode-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #1e40af;
}

.lw-edit-mode-prod {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
}

.lw-btn-cancel-edit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #ffffff;
  color: #dc2626;
  border: 1px solid #fca5a5;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.06);
}

.lw-btn-cancel-edit:hover {
  background: #fef2f2;
  border-color: #ef4444;
  color: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.12);
}

@media (max-width: 640px) {
  .lw-edit-mode-banner-content {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .lw-btn-cancel-edit {
    justify-content: center;
    width: 100%;
  }
}