/* ===========================================================
   TAMIL EYEWEAR — Virtual Try-On (client-side, camera-based)
   =========================================================== */

.tryon-modal{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.72);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s var(--ease),visibility .35s;
  padding:20px;
  overflow:hidden;
}
.tryon-modal.is-open{opacity:1;visibility:visible;pointer-events:auto;}

.tryon-panel{
  position:relative;
  width:min(1100px,94vw);
  height:min(850px,94vh);
  background:var(--cream);border-radius:16px;box-shadow:var(--shadow-lg);
  padding:16px 20px 18px;
  transform:translateY(18px) scale(.98);
  transition:transform .35s var(--ease);
  overflow:hidden;
  display:flex;flex-direction:column;
  min-height:0;
}
.tryon-modal.is-open .tryon-panel{transform:translateY(0) scale(1);}

.tryon-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;flex:0 0 auto;
}
.tryon-header-left{display:flex;align-items:center;gap:10px;min-width:0;}
.tryon-back{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:var(--white);color:var(--charcoal);font-size:16px;
  cursor:pointer;transition:all .25s var(--ease);display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.tryon-back:hover{background:var(--charcoal);color:#fff;}
.tryon-header-text{min-width:0;}
.tryon-eyebrow{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;
  display:block;
}
.tryon-header h3{
  font-family:var(--serif);font-size:18px;color:var(--black);margin:2px 0 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tryon-close{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:var(--white);color:var(--charcoal);font-size:20px;line-height:1;
  cursor:pointer;transition:all .25s var(--ease);display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.tryon-close:hover{background:var(--charcoal);color:#fff;transform:rotate(90deg);}

/* Camera stage: the dominant element */
.tryon-stage{
  position:relative;width:100%;flex:1 1 auto;min-height:0;
  background:#15130f;border-radius:16px;overflow:hidden;
}
.tryon-stage video,.tryon-stage canvas{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scaleX(-1); /* mirror for a natural selfie view */
}
.tryon-stage video{display:none;}
.tryon-stage.is-active video{display:block;}
.tryon-stage canvas{pointer-events:none;}
.tryon-stage.is-active video{display:block;}

/* Idle state: camera not yet started */
.tryon-idle{
  position:absolute;inset:0;z-index:4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:#fff;text-align:center;padding:20px;
}
.tryon-stage.is-active .tryon-idle{display:none;}
.tryon-idle p{font-size:14px;color:rgba(255,255,255,.75);margin:0;max-width:280px;}

.tryon-guide{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  pointer-events:none;transition:opacity .3s var(--ease);z-index:3;
}
.tryon-stage.is-tracking .tryon-guide{opacity:0;}
.tryon-stage:not(.is-active) .tryon-guide{opacity:0;}
.tryon-guide-oval{
  width:44%;height:64%;border:2px dashed rgba(255,255,255,.5);border-radius:50%;
  animation:tryon-pulse 2.2s ease-in-out infinite;
}
.tryon-guide-text{color:rgba(255,255,255,.75);font-size:13px;text-align:center;animation:tryon-fade-in .5s var(--ease);}

@keyframes tryon-pulse{
  0%,100%{opacity:.55;transform:scale(1);}
  50%{opacity:.9;transform:scale(1.03);}
}
@keyframes tryon-fade-in{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}

/* Floating camera controls (top-right, over the video) */
.tryon-stage-actions{
  position:absolute;top:14px;right:14px;z-index:6;
  display:flex;gap:8px;
}
.tryon-icon-btn{
  width:40px;height:40px;border-radius:50%;border:none;
  background:rgba(20,17,14,.55);color:#fff;font-size:16px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .2s var(--ease),transform .2s var(--ease);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.tryon-icon-btn:hover:not(:disabled){background:rgba(20,17,14,.8);transform:translateY(-2px);}
.tryon-icon-btn:active:not(:disabled){transform:translateY(0) scale(.93);}
.tryon-icon-btn:disabled{opacity:.4;cursor:not-allowed;}

/* Compact Stop Camera control, floats bottom-left over the video */
.tryon-stop-pill{
  position:absolute;bottom:14px;left:14px;z-index:6;
  display:none;align-items:center;gap:6px;
  background:rgba(20,17,14,.55);color:#fff;border:none;border-radius:20px;
  font-size:12px;font-family:var(--sans);padding:8px 14px;cursor:pointer;
  transition:background .2s var(--ease),transform .2s var(--ease);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.tryon-stop-pill:hover{background:rgba(150,40,30,.75);transform:translateY(-2px);}
.tryon-stop-pill:active{transform:translateY(0);}
.tryon-stage.is-active ~ .tryon-stop-pill,
.tryon-stage.is-active .tryon-stop-pill{display:flex;}

/* Small floating status pill, bottom-center */
.tryon-status{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:6;
  background:rgba(20,17,14,.6);color:#fff;font-size:12px;text-align:center;
  padding:7px 16px;border-radius:20px;font-family:var(--sans);
  transition:background .3s;white-space:nowrap;max-width:88%;overflow:hidden;text-overflow:ellipsis;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;align-items:center;gap:6px;
  animation:tryon-fade-in .4s var(--ease);
}
.tryon-status::before{
  content:'';width:7px;height:7px;border-radius:50%;background:#8a8074;flex:0 0 auto;
  transition:background .3s;
}
.tryon-status.is-ok::before{animation:tryon-dot-pulse 1.6s ease-in-out infinite;}
.tryon-status.is-error::before{background:#e05a45;}
.tryon-status.is-ok::before{background:#3ecb72;}
.tryon-status.is-error{background:rgba(90,25,20,.75);}
.tryon-status.is-ok{background:rgba(20,60,32,.7);}

@keyframes tryon-dot-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(62,203,114,.5);}
  50%{box-shadow:0 0 0 4px rgba(62,203,114,0);}
}

/* Bottom bar: start button (idle) / frame carousel (active) */
.tryon-bottom{flex:0 0 auto;min-height:0;}

.tryon-start-row{
  display:flex;justify-content:center;margin-top:14px;
}
.tryon-start-row .btn{
  min-width:220px;justify-content:center;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.tryon-start-row .btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.2);}
.tryon-start-row .btn:active{transform:translateY(0);}

.tryon-carousel-label{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8a8074;
  margin:14px 0 8px;display:none;
}
.tryon-carousel{
  display:none;gap:10px;overflow-x:auto;overflow-y:hidden;padding-bottom:4px;
  scrollbar-width:thin;
}
.tryon-carousel-item{
  flex:0 0 auto;width:72px;height:56px;border-radius:8px;overflow:hidden;
  border:2px solid transparent;cursor:pointer;background:#fff;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  animation:tryon-item-in .35s var(--ease) backwards;
}
.tryon-carousel-item img{width:100%;height:100%;object-fit:cover;display:block;}
.tryon-carousel-item:hover{transform:translateY(-3px);box-shadow:0 6px 14px rgba(0,0,0,.15);}
.tryon-carousel-item.is-active{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.12);}

@keyframes tryon-item-in{
  from{opacity:0;transform:translateY(8px) scale(.9);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

.tryon-panel.is-camera-active .tryon-start-row{display:none;}
.tryon-panel.is-camera-active .tryon-carousel-label,
.tryon-panel.is-camera-active .tryon-carousel{display:flex;}

.tryon-disclaimer{
  font-size:11px;color:#8a8074;line-height:1.5;text-align:center;
  margin:10px 0 0;flex:0 0 auto;
}

/* Captured photo preview */
.tryon-capture-preview{
  position:absolute;inset:0;z-index:8;background:#15130f;
  display:flex;align-items:center;justify-content:center;
  animation:tryon-fade-in .3s var(--ease);
}
.tryon-capture-preview[hidden]{display:none;}
.tryon-capture-preview img{width:100%;height:100%;object-fit:contain;animation:tryon-item-in .4s var(--ease);}
.tryon-capture-actions{
  position:absolute;left:0;right:0;bottom:16px;z-index:9;
  display:flex;gap:12px;justify-content:center;
}
.tryon-capture-actions .btn{transition:transform .2s var(--ease),box-shadow .2s var(--ease);}
.tryon-capture-actions .btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.25);}

/* Tablet */
@media (max-width:900px){
  .tryon-panel{width:95vw;height:92vh;}
}

/* Mobile */
@media (max-width:600px){
  .tryon-modal{padding:0;}
  .tryon-panel{
    width:100vw;height:100dvh;border-radius:0;
    padding:calc(12px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom));
  }
  .tryon-header h3{font-size:16px;}
  .tryon-guide-oval{width:60%;height:42%;}
  .tryon-carousel-item{width:64px;height:50px;}
  .tryon-disclaimer{display:none;}
}

@media (max-width:400px){
  .tryon-icon-btn{width:36px;height:36px;font-size:14px;}
  .tryon-carousel-item{width:58px;height:46px;}
}