/* style.css - komponen kustom (Tailwind tetap aktif untuk util-class) */
:root { --radius: 0.75rem; }
html, body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; }
body { overflow-x: hidden; }

/* Animations */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.loader-small {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.5);
  border-radius: 50%;
  display: inline-block;
  border-top-color: #fff;
  animation: spin .8s linear infinite;
}

/* Checkbox custom (pilih gambar / pilih semua) */
.custom-checkbox {
  appearance: none; -webkit-appearance: none;
  background-color: rgba(255,255,255,.8);
  backdrop-filter: blur(4px);
  border: 2px solid #cbd5e1;
  width: 28px; height: 28px;
  border-radius: 8px; cursor: pointer;
  position: relative; transition: all .2s ease-in-out;
  display: grid; place-content: center;
}
.custom-checkbox:hover { border-color: #3b82f6; }
.custom-checkbox:checked { background-color: #3b82f6; border-color: #3b82f6; }
.custom-checkbox:checked::before {
  content: '✓'; font-size: 18px; font-weight: 700; color: #fff; transform: translateY(-1px);
}

/* Kartu gambar hasil */
.image-container {
  position: relative;
  border: 2px solid transparent;
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.image-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}
.image-container .custom-checkbox {
  position: absolute; top: .75rem; left: .75rem; z-index: 10;
  opacity: 0; transform: scale(.8);
  transition: opacity .3s, transform .3s;
}
.image-container:hover .custom-checkbox, .image-container.selected .custom-checkbox {
  opacity: 1; transform: scale(1);
}
.image-container.selected {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.4);
}
.animate-fadeInUp { animation: fadeInUp .5s ease-out forwards; }

/* Tabs (Estetik / Sticker / Ekstrim) */
.filter-tabs-container {
  display: flex;
  border-radius: .5rem;
  background: #f1f5f9;
  padding: .25rem;
  border: 1px solid #e2e8f0;
}
.filter-tab-label {
  flex: 1; text-align: center;
  padding: .5rem .75rem; border-radius: .375rem; cursor: pointer;
  font-weight: 500; font-size: .875rem; color: #475569;
  transition: all .2s; border: 2px solid transparent;
}
.filter-tab-label.active {
  background: #fff; color: #2563eb; font-weight: 600;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 /.1), 0 1px 2px -1px rgb(0 0 0 /.1);
}

/* Sticker options */
.sticker-options-container {
  border: 1px solid #e2e8f0; padding: 1rem; border-radius: .5rem; margin-top: .75rem;
  animation: fadeInUp .3s ease-out;
}
.sticker-options-container.hidden { display: none; }
.frame-type-label {
  cursor: pointer; text-align: center; width: 100%;
  padding: .75rem; color: #475569; background: #fff;
  border: 1px solid #e2e8f0; border-radius: .5rem; font-size: .875rem; font-weight: 600;
  transition: all .2s;
}
.frame-type-label:hover { background: #f8fafc; }
input[type="radio"]:checked + .frame-type-label {
  border-color: #3b82f6; background: #eff6ff; color: #2563eb;
  box-shadow: 0 0 0 2px rgba(59,130,246,.4);
}

/* Modal alert */
.modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,.5); z-index: 50; }
.modal.hidden { display: none; }
.modal-card { background: #fff; border-radius: .75rem; max-width: 28rem; width: 90%; padding: 1rem; }