/* ===========================
   KITTY – FACE SWAP STYLES
   =========================== */

/* --- Candy stripe outer wrapper --- */
#atomic-face-upload-form-container {
  /* the candy border */
  background: repeating-linear-gradient(45deg,#e10600 0 12px,#ffffff 12px 24px);
  padding: 10px;                 /* thickness of the “border */
  border-radius: 22px;
  position: relative;
}



/* --- Inner white card --- */
#atomic-face-upload-form-container .glam-upload-container{
  background:#fff;
  border-radius: 16px;
  padding: 22px;
  position: relative;
}

/* --- Typography --- */
.glam-title{
  margin:0 0 .5rem;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height:1.2;
  letter-spacing:.3px;
}
.glam-intro{
  color:#444;
  margin:.4rem 0 1rem;
}
.glam-intro small{ color:#777; }

/* --- Grid/form layout --- */
.glam-form{ display:grid; gap:.8rem; margin-top:.25rem; }
.glam-label{ font-weight:600; }

/* --- Upload status (spinner row) --- */
.glam-status{
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1rem; margin:.5rem 0 1rem;
  border-radius: 10px;
  background:#fff3f3; border:1px solid #ffd6d6;
  position: relative; z-index: 2;
}
.glam-spinner{
  width:22px; height:22px;
  border:3px solid #ffd1d1;
  border-top-color:#e10600;
  border-radius:50%;
  animation: kfs-spin 1s linear infinite;
}
@keyframes kfs-spin{ to{ transform:rotate(360deg); } }

/* --- Pretty dropzone that still uses the real input --- */
.glam-drop{
  position:relative;
  display:flex; align-items:center; gap:.75rem;
  border:2px dashed #ffd1d1;
  border-radius:14px; padding:1rem;
  background:#fff7f7;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.glam-drop:hover{ border-color:#ffb6b6; background:#fffaf9; box-shadow:0 6px 16px rgba(225,6,0,.08); }
.glam-drop__icon{ width:32px; height:32px; fill:#e10600; flex:0 0 32px; }
.glam-drop__text{ line-height:1.2; color:#5a5a5a; }
.glam-drop__text small{ color:#8a8a8a; }

/* The actual file input covers the drop area */
.glam-input{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0; cursor:pointer;
}

/* If you keep a plain file input (fallback) */
#atomic-face-upload-form-container input[type="file"]{
  margin-top:.5rem;
}
#atomic-face-upload-form-container input[type="file"]::file-selector-button{
  background:#e10600; color:#fff; border:0; border-radius:8px;
  padding:.5rem .9rem; margin-right:.6rem; cursor:pointer;
}

/* --- Upload button --- */
.glam-button{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.8rem 1.1rem;
  border:none; border-radius:12px; font-weight:700; color:#fff;
  background: linear-gradient(135deg,#e10600 0%, #ff4d4d 44%, #ff7b7b 100%);
  box-shadow:0 8px 18px rgba(225,6,0,.25);
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
  cursor:pointer;
}
.glam-button:hover{ filter:saturate(1.05) brightness(1.02); box-shadow:0 10px 22px rgba(225,6,0,.3); }
.glam-button:active{ transform: translateY(1px); }

/* --- Message area just below input --- */
#af-message{ min-height:1.25rem; }
.af-alert{
  border-radius:10px; padding:.75rem 1rem; margin:.4rem 0 .6rem;
  display:flex; gap:.5rem; align-items:flex-start; font-size:.95rem;
}
.af-alert svg{ flex:0 0 18px; width:18px; height:18px; margin-top:2px; }
.af-alert--error{ background:#fff3f3; border:1px solid #ffc7c7; color:#7a1c1c; }
.af-alert--success{ background:#f3fff3; border:1px solid #c7ffc7; color:#1c7a2a; }

/* --- Woo “Glamourise link chip --- */
.gla{
  position:relative; z-index:10;
  display:inline-block;
  background:#fff; border:1px solid #e8e2e2;
  padding:4px 8px; border-radius:8px;
}

/* --- Small screens --- */
@media (max-width: 480px){
  #atomic-face-upload-form-container{ padding:8px; border-radius:18px; }
  #atomic-face-upload-form-container .glam-upload-container{ padding:16px; }
  .glam-drop__text{ font-size:.95rem; }
}


.glam-overlay{
  position:absolute; inset:10px; border-radius:16px;
  background: rgba(255,255,255,.7);
  display:flex; align-items:center; justify-content:center;
  z-index: 5;
}


/* Polaroid look for the uploaded face */
#af-face-display{
  /* frame */
  background:#fff;
  border-radius:6px;
  padding:12px 12px 56px;             /* thicker bottom = Polaroid border */
  width:min(90vw, 340px);
  margin:12px auto;
  text-align:center;

  /* vibe */
  box-shadow:
    0 24px 40px rgba(0,0,0,.16),
    0 6px 14px rgba(0,0,0,.10);
  transform:rotate(-2deg);
  transition:transform .18s ease, box-shadow .18s ease;
  position:relative;
}

#af-face-display:hover{
  transform:rotate(0deg) translateY(-2px);
  box-shadow:
    0 28px 50px rgba(0,0,0,.20),
    0 8px 18px rgba(0,0,0,.12);
}

/* optional “tape” at the top for extra retro */
#af-face-display::before{
  content:"";
  position:absolute;
  top:-10px; left:50%;
  transform:translateX(-50%) rotate(-3deg);
  width:120px; height:22px;
  background:
    linear-gradient(#fff7a8,#ffe57a);
  box-shadow:0 3px 8px rgba(0,0,0,.15);
  border-radius:3px;
  opacity:.9;
}

/* image area inside the frame */
#af-face-display .af-face-preview{
  width:100%;
  aspect-ratio: 4 / 5;                /* keeps a photo-like shape */
  background:#f2f2f2;
  overflow:hidden;
  border-radius:3px;
  margin:0 auto;
}

#af-face-display .af-face-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* caption printed on the thick white border */
#af-face-display .af-uploaded-message{
  position:absolute;
  left:12px; right:12px; bottom:12px;
  margin:0;
  font: 700 0.95rem/1.1 "Patrick Hand", "Segoe Print", "Comic Sans MS", cursive;
  color:#222;
  transform:rotate(-0.5deg);
  opacity:.95;
}

/* tidy the delete button to sit below the polaroid */
#af-face-display #af-delete-face.af-delete-btn{
  margin-top:14px;
  background:#e10600;
  color:#fff;
  border:none;
  padding:.55rem .9rem;
  border-radius:10px;
  font-weight:700;
  box-shadow:0 6px 14px rgba(225,6,0,.22);
  transition:transform .08s ease, box-shadow .18s ease, filter .18s ease;
}
#af-face-display #af-delete-face.af-delete-btn:hover{
  filter:saturate(1.06) brightness(1.02);
  box-shadow:0 8px 18px rgba(225,6,0,.28);
}
#af-face-display #af-delete-face.af-delete-btn:active{
  transform:translateY(1px);
}