/* ============================================================
   frame-finder.css — "اكتشف الإطار المناسب لك"
   يتبع نفس منطق tryon-modal / visiontest-modal الموجودة بـ styles.css
   (نفس متغيرات الألوان --copper/--beige/--black-soft ونفس نمط الخطوط)
   ============================================================ */

.ff-modal{
  position:fixed;inset:0;z-index:1002;display:none;align-items:center;justify-content:center;
  background:rgba(10,10,9,.96);padding:16px;
}
.ff-modal.open{display:flex;}
.ff-stage{
  position:relative;width:100%;max-width:480px;max-height:94vh;overflow-y:auto;
  background:var(--black-soft,#3A3A37);border-radius:16px;padding:30px 22px 26px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.ff-close{
  position:absolute;top:14px;left:14px;z-index:5;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;
  font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;
}

.ff-panel{display:none;width:100%;flex-direction:column;align-items:center;}
.ff-panel--active{display:flex;}

.ff-eyebrow{color:var(--copper-light,#B79A7D);font-size:12.5px;letter-spacing:2px;font-family:'Tajawal',sans-serif;margin-bottom:8px;}
.ff-h{font-family:'Cairo',sans-serif;font-weight:800;font-size:18.5px;color:var(--beige,#F1EFE8);margin-bottom:10px;line-height:1.4;}
.ff-note{font-family:'Tajawal',sans-serif;font-size:13.5px;color:var(--gray,#B4B2A9);line-height:1.8;margin-bottom:18px;max-width:360px;}
.ff-tip{font-family:'Tajawal',sans-serif;font-size:13px;color:var(--copper-light,#B79A7D);line-height:1.7;
  background:rgba(183,154,125,.1);border-radius:10px;padding:10px 12px;margin-bottom:16px;max-width:360px;}
.ff-disclaimer{font-family:'Tajawal',sans-serif;font-size:11.5px;color:rgba(180,178,169,.75);line-height:1.7;margin-top:16px;}

/* ---------- مربع رفع الصورة ---------- */
.ff-upload-box{
  width:100%;max-width:320px;padding:34px 18px;border:2px dashed rgba(241,239,232,.28);
  border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:10px;
  cursor:pointer;color:var(--beige,#F1EFE8);font-family:'Tajawal',sans-serif;font-size:14px;
  transition:border-color .2s ease,background .2s ease;
}
.ff-upload-box:hover{border-color:var(--copper-light,#B79A7D);background:rgba(183,154,125,.06);}
.ff-upload-icon{font-size:30px;}

/* ---------- معاينة الصورة ---------- */
.ff-preview-wrap{
  width:100%;max-width:240px;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  border:3px solid var(--copper-light,#B79A7D);margin-bottom:20px;background:#111;
}
.ff-preview-wrap img{width:100%;height:100%;object-fit:cover;}

.ff-actions-row{display:flex;gap:10px;width:100%;max-width:320px;flex-wrap:wrap;justify-content:center;}
.ff-actions-row .btn-primary,.ff-actions-row .btn-ghost{flex:1;min-width:130px;text-align:center;}

/* ---------- مؤشر التحميل ---------- */
.ff-spinner{
  width:44px;height:44px;border-radius:50%;border:3px solid rgba(241,239,232,.15);
  border-top-color:var(--copper-light,#B79A7D);animation:ffSpin 0.85s linear infinite;margin-bottom:18px;
}
@keyframes ffSpin{to{transform:rotate(360deg);}}

/* ---------- نتيجة التحليل ---------- */
.ff-result-head{display:flex;flex-direction:column;align-items:center;margin-bottom:6px;}
.ff-result-emoji{font-size:40px;margin-bottom:8px;}

.ff-products-grid{
  width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:6px 0 18px;
}
@media (max-width:380px){.ff-products-grid{grid-template-columns:1fr;}}

.ff-prod-card{
  background:rgba(241,239,232,.05);border:1px solid rgba(241,239,232,.12);border-radius:10px;
  padding:12px 10px 14px;display:flex;flex-direction:column;align-items:center;
}
.ff-prod-thumb{width:100%;height:74px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;}
.ff-prod-thumb img{max-width:100%;max-height:100%;object-fit:contain;}
.ff-prod-noimg{font-size:26px;opacity:.6;}
.ff-prod-name{font-family:'Cairo',sans-serif;font-size:12.5px;font-weight:700;color:var(--beige,#F1EFE8);
  margin-bottom:4px;line-height:1.4;min-height:32px;display:flex;align-items:center;justify-content:center;}
.ff-prod-price{font-family:'Tajawal',sans-serif;font-size:12px;color:var(--copper-light,#B79A7D);margin-bottom:10px;}
.ff-prod-actions{display:flex;gap:6px;width:100%;}
.ff-prod-btn{
  flex:1;font-family:'Tajawal',sans-serif;font-size:11px;padding:6px 4px;border-radius:14px;
  border:1px solid var(--copper-light,#B79A7D);background:transparent;color:var(--beige,#F1EFE8);
  cursor:pointer;text-decoration:none;text-align:center;transition:background .2s ease,color .2s ease;
}
.ff-prod-btn:hover{background:var(--copper,#7A6249);color:#fff;}
.ff-prod-btn--wa{background:var(--copper,#7A6249);color:#fff;border-color:var(--copper,#7A6249);}
.ff-prod-btn--wa:hover{background:var(--copper-light,#B79A7D);}

.ff-empty-note{font-family:'Tajawal',sans-serif;font-size:13px;color:var(--gray,#B4B2A9);line-height:1.8;
  grid-column:1/-1;margin-bottom:12px;}