/* Light style (zoals jouw page)
   Outside: #FFFFFF
   Inside form: #E9E3DD
   Button: #B38F64
   Button text: #FFFFFF
*/

.nusuk-cropper{
  --page-bg: #FFFFFF;
  --panel-bg: #E9E3DD;
  --primary: #B38F64;
  --radius: 18px;

  --text: #1f1f1f;
  --muted: #5b5b5b;
  --line: rgba(0,0,0,.10);

  background: var(--page-bg);
  color: var(--text);
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 18px;
  box-sizing: border-box;
  font-family: inherit;
}

.nusuk-cropper *{ box-sizing: border-box; }

.nusuk-topbar{
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

/* Mode buttons */
.nusuk-modes{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.nusuk-tab{
  border: 1px solid var(--line);
  background: #fff;
  padding: 10px 14px;
  border-radius: calc(var(--radius) - 6px);
  font-weight: 700;
  cursor: pointer;
}

.nusuk-tab.is-active{
  border-color: rgba(179,143,100,.8);
  box-shadow: 0 1px 0 rgba(179,143,100,.25);
}

/* Blinking privacy warning */
.nusuk-privacy{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: calc(var(--radius) - 6px);
  border: 1px solid rgba(179,143,100,.45);
  background: #fff;
  animation: nusukBlink 1.2s infinite;
}

@keyframes nusukBlink{
  0%, 100% { box-shadow: 0 0 0 rgba(179,143,100,0); }
  50%      { box-shadow: 0 0 0 4px rgba(179,143,100,.18); }
}

.nusuk-privacy-ico{ font-size: 16px; }
.nusuk-privacy-text{
  font-weight: 800;
  font-size: 13px;
  color: #3a2b1f;
}

/* Form box */
.nusuk-form{
  background: var(--panel-bg);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: var(--radius);
  padding: 14px;
}

/* Upload row */
.nusuk-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom: 12px;
}

.nusuk-file{
  flex: 1;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 6px);
  padding: 10px 12px;
}

.nusuk-btn{
  border: 0;
  border-radius: calc(var(--radius) - 6px);
  padding: 11px 14px;
  font-weight: 800;
  cursor: pointer;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
  touch-action: manipulation;
}

.nusuk-btn[disabled]{
  opacity: .55;
  cursor: not-allowed;
}

/* Primary buttons */
.nusuk-download{
  background: var(--primary);
  color: #fff;
  border: 1px solid rgba(0,0,0,.08);
}

.nusuk-download:hover{
  filter: brightness(0.98);
}

/* Layout */
.nusuk-grid{
  display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 14px;
  align-items: start;
}

@media (max-width: 900px){
  .nusuk-grid{ grid-template-columns: 1fr; }
}

/* Croppie wrap */
.nusuk-crop-wrap{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  overflow: hidden;
}

.nusuk-croppie{
  width: 100%;
  min-height: 260px;
}
@media (min-width: 560px){
  .nusuk-croppie{ min-height: 340px; }
}

/* Meta/status */
.nusuk-meta{
  margin-top: 12px;
  display:grid;
  gap: 6px;
  font-size: 14px;
  color: var(--muted);
}

.nusuk-meta strong{ color: var(--text); }

.nusuk-status{
  margin-top: 4px;
  background: #fff;
  border: 1px dashed rgba(0,0,0,.18);
  border-radius: calc(var(--radius) - 6px);
  padding: 10px 12px;
  color: #2a2a2a;
}

/* Preview card */
.nusuk-preview-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
}

.nusuk-preview-title{
  font-weight: 900;
  margin-bottom: 8px;
}

.nusuk-preview-box{
  width: 100%;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
  aspect-ratio: 1 / 1; /* JS sets correct ratio */
  display:flex;
  align-items:center;
  justify-content:center;
}

.nusuk-preview-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:none;
  background: #fff;
}

.nusuk-preview-empty{
  padding: 16px;
  font-size: 13px;
  color: #666;
  text-align:center;
}

/* Download button placement */
.nusuk-download-desktop{
  width: 100%;
  margin-top: 12px;
}

.nusuk-download-mobile{
  display: none;
  width: 100%;
  margin-top: 12px;
}

/* On small devices: hide desktop download in preview, show bottom button */
@media (max-width: 520px){
  .nusuk-download-desktop{ display: none; }
  .nusuk-download-mobile{ display: block; }
}

/* Footer */
.nusuk-footer{
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: #6a6a6a;
}

.nusuk-footer a{
  color: var(--primary);
  font-weight: 900;
  text-decoration: none;
}
.nusuk-footer a:hover{ text-decoration: underline; }

/* Croppie accents */
.nusuk-cropper .cr-slider{ accent-color: var(--primary); }
.nusuk-cropper .cr-viewport{
  box-shadow: 0 0 0 9999px rgba(0,0,0,.45);
  border: 2px solid rgba(179,143,100,.85);
}