/* =============================
   Modal/Overlay Styles
   ============================= */

.modal{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0, 0, 0, 0.5);
    padding-top:0; /* removed previously added top padding that created gap */
    z-index:2000;
    display:none;
    /* Removed overflow-y:auto - handle scrolling in modal-body instead */
    /* Removed top/side safe-area padding to prevent duplication; handled in header */
}
.modal.active{display:flex;}

.modal-content{
    background:var(--gradient-surface);
    border:none;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    box-shadow:var(--shadow-lg);
    /* Replaced slide/transform animation (causes iOS double-tap bug on selects) with fade-only */
    animation:modalFadeIn 0.25s ease-out;
    /* Ensure content doesn't overflow */
    overflow-y:auto; /* scroll container */
    -webkit-overflow-scrolling:touch;
    border-radius:0; /* remove curves */
}

@keyframes modalFadeIn{
    from{opacity:0;}
    to{opacity:1;}
}

.modal-header{
    /* Center title with left back button */
    display:flex;
    align-items:center;
    justify-content:flex-start; /* allow h2 to center via flex grow */
    position:sticky; /* stick within scroll container */
    top:0;
    z-index:10; /* above body content */
    padding:calc(env(safe-area-inset-top) + 12px) 28px 12px 28px;
    border-bottom:2px solid var(--border-light);
    flex-shrink:0;
    background:var(--gradient-surface); /* Ensure solid background */
}
.modal-header h2{
    margin:0;
    font-size:24px;
    font-weight:700;
    color:var(--text);
    flex:1;
    text-align:center;
}

.close-btn{
    display:none;
}

/* New back button styling */
.back-btn{
  /* Modern icon-style back button using shared patterns */
  appearance:none;
  background:transparent;
  border:1px solid transparent;
  color:var(--text-secondary);
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  font-size:26px;
  font-weight:500;
  line-height:1;
  cursor:pointer;
  touch-action:manipulation;
  transition:background var(--transition-fast) var(--ease), color var(--transition-fast) var(--ease), box-shadow var(--transition-fast) var(--ease), transform var(--transition-fast) var(--ease), border-color var(--transition-fast) var(--ease);
  margin:0 14px 0 -6px;
}
.back-btn:hover{background:var(--bg-secondary);color:var(--text);border-color:var(--border);box-shadow:var(--shadow-sm);}
.back-btn:active{transform:scale(.92);}
.back-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}

.modal-body{
    padding:20px 28px 28px 28px; /* slightly reduced top padding since header already expanded */
    padding-top:12px; /* normal spacing only */
    /* Remove extra space for fixed footer */
    padding-bottom:32px; /* keep footer breathing space */
    overflow-y:auto;
    overflow-x:hidden;
    flex:1;
    min-height:0;
    /* Enable smooth scrolling on iOS */
    -webkit-overflow-scrolling:touch;
}

body.no-scroll{overflow:hidden;touch-action:none;}

.modal-footer{
    position:static; /* changed from fixed so it won't jump on iOS when keyboard opens */
    bottom:auto;left:auto;right:auto; /* reset */
    z-index:auto; /* no special stacking needed */
    padding:12px 20px calc(env(safe-area-inset-bottom) + 12px) 20px; /* keep safe-area bottom padding */
    border-top:1px solid var(--border);
    background:var(--gradient-surface);
    flex-shrink:0;
}
@media (prefers-color-scheme: dark){
  .modal-footer{background:var(--gradient-surface);}
}

.modal-footer .row{display:flex;gap:12px;width:100%;}
@media(max-width:740px){
  .modal-footer .row .btn{flex:1;}
}

/* Scanner modal needs higher z-index to appear above editor */
#scannerModal{z-index:3000}

#interactive {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 16px;
    background: #000;
    box-shadow: var(--shadow-lg);
}

#interactive video {
    width: 100%;
    height: auto;
    display: block;
}

#interactive canvas {
    position: absolute;
    top: 0;
    left: 0;
}

#interactive canvas.drawingBuffer {
    z-index: 1;
}

video{
    width:100%;
    border-radius:16px;
    background:#000;
    box-shadow:var(--shadow-lg);
}