/* BeautyBook Mobile Camera Capture + Preview - r226. Mobile-only; desktop hides it. */
.bb-cam-bar{ display:none; }
@media(max-width:768px){
  .bb-cam-bar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:10px 0 4px;
  }
  .bb-cam-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    padding:12px 20px;
    width:100%;
    max-width:320px;
    border:1px solid #7d1f43;
    border-radius:12px;
    background:#7d1f43;
    color:#fff;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 2px 6px rgba(125,31,67,.18);
    transition:background .15s, transform .1s;
    -webkit-tap-highlight-color:transparent;
  }
  .bb-cam-btn:active{ transform:scale(.98); background:#8E3450; }
  .bb-cam-ic{ font-size:18px; line-height:1; }
  .bb-cam-prev{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    max-width:320px;
    padding:8px 10px;
    border:1px solid #EAD3DC;
    border-radius:12px;
    background:#FFFDFE;
    box-shadow:0 1px 4px rgba(125,31,67,.10);
    opacity:1;
    animation:bbCamPrevIn .28s ease both;

  }
  .bb-cam-prev.bb-cam-prev-in{ opacity:1; transform:translateY(0); }
  .bb-cam-prev-img{
    width:44px;
    height:44px;
    flex:0 0 44px;
    object-fit:cover;
    border-radius:8px;
    border:1px solid #EAD3DC;
    background:#f6ece7;
  }
  .bb-cam-prev-meta{
    display:flex;
    flex-direction:column;
    justify-content:center;
    line-height:1.2;
    overflow:hidden;
    flex:1 1 auto;
  }
  .bb-cam-prev-meta b{
    font-size:13px;
    font-weight:600;
    color:#7A2E44;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .bb-cam-prev-meta small{
    font-size:11px;
    color:#B76E85;
  }
  .bb-cam-prev-ok{
    flex:0 0 auto;
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#7d1f43;
    color:#fff;
    font-size:14px;
    font-weight:700;
  }
  .bb-cam-prev-bar{
    position:absolute;
    left:0; bottom:0;
    height:3px;
    width:100%;
    border-bottom-left-radius:12px;
    border-bottom-right-radius:12px;
    overflow:hidden;
    background:#EAD3DC;
    display:none;
  }
  .bb-cam-prev-bar::before{
    content:"";
    position:absolute;
    left:0; top:0; bottom:0;
    width:40%;
    background:linear-gradient(90deg,#B76E85,#7d1f43,#B76E85);
    border-radius:3px;
    animation:bbCamProg 1.1s ease-in-out infinite;
  }
  .bb-cam-prev{ position:relative; }
  .bb-cam-prev.bb-cam-uploading .bb-cam-prev-bar{ display:block; }
  .bb-cam-prev.bb-cam-uploading .bb-cam-prev-ok{ opacity:0; transform:scale(.6); }
  .bb-cam-prev-ok{ transition:opacity .2s ease, transform .2s ease; }
  .bb-cam-prev.bb-cam-ok .bb-cam-prev-ok{ background:#1f7d4f; }
  .bb-cam-prev.bb-cam-ok .bb-cam-prev-state{ color:#1f7d4f; font-weight:600; }
  .bb-cam-prev-state{ transition:color .2s ease; }
  .bb-cam-prev{ transition:opacity .35s ease, transform .35s ease, margin .35s ease, padding .35s ease; }
  .bb-cam-prev.bb-cam-fade{ opacity:0; transform:translateY(-4px); }
}
@keyframes bbCamPrevIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes bbCamProg{
  0%{ transform:translateX(-100%); }
  50%{ transform:translateX(80%); }
  100%{ transform:translateX(260%); }
}