/* reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
  font-family: 'Segoe UI', sans-serif;
}

/* background full-screen (via background.js) */
body {
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* overlay utama */
.overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;      /* center vertikal */
  background: rgba(255,255,255,0.9);
  border-radius: 12px;
  padding: 2rem;
  max-width: 600px;
  width: 90%;
  min-height: auto;             /* sesuai konten */
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  margin: auto;                 /* center kotak */
}

/* logo */
.logo {
  width: 120px;
  margin-bottom: 1rem;
}

/* judul */
.overlay h2 {
  font-size: 1.75rem;
  color: #333;
  line-height: 1.3;
  margin-bottom: 1rem;
}

/* countdown */
.countdown {
  font-size: 1.4rem;
  font-weight: bold;
  margin: 1rem 0;
  color: #444;
}

/* form input */
.overlay form input[type="text"] {
  width: 100%;
  padding: 0.6rem;
  margin: 0.75rem 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}

/* tombol utama */
.overlay form button,
.btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
}
.overlay form button {
  background-color: #007bff;
  color: #fff;
  width: 100%;
  margin-top: 0.5rem;
}
.overlay form button:hover {
  background-color: #0056b3;
}

/* kartu hasil */
.card {
  width: 100%;
  max-width: 500px;
  margin: 1rem auto;
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  text-align: center;
}
.card.success { border-left: 5px solid #28a745; }
.card.error   { border-left: 5px solid #dc3545; }

/* judul & paragraf kartu */
.card h3 { margin-bottom: 0.5rem; color: #333; }
.card p  { margin: 0.5rem 0; color: #555; }

/* tombol unduh / kembali */
.btn-download,
.btn-back {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
}
.btn-download { background-color: #28a745; }
.btn-download:hover { background-color: #218838; }
.btn-back { background-color: #6c757d; }
.btn-back:hover { background-color: #5a6268; }

/* pesan error */
#error {
  color: #dc3545;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.share-buttons {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.share-buttons .share-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: opacity 0.2s;
}
.share-buttons .share-btn img {
  width: 24px;
  height: 24px;
}
.share-buttons .whatsapp  { background-color: #25D366; }
.share-buttons .telegram  { background-color: #0088CC; }
.share-buttons .facebook  { background-color: #3b5998; }
.share-buttons .twitter   { background-color: #1DA1F2; }
.share-buttons .threads   { background-color: #000; }
.share-buttons .instagram {
  background: radial-gradient(circle at 30% 107%,
    #fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);
}
.share-buttons .share-btn:hover {
  opacity: 0.85;
}

/* footer */
.footer {
  text-align: center;
  font-size: 0.8rem;
  color: #666;
  margin-top: 2rem;
}

.error-msg {
  color: #dc3545;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* responsive */
@media (max-width: 400px) {
  .overlay { padding: 1.5rem; }
  .overlay h2 { font-size: 1.5rem; }
  .countdown    { font-size: 1.2rem; }
  .share-buttons { gap: 0.5rem; }
}