/* generator.css */

/* ===== Reset básico e box-sizing ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===== Altura total da viewport ===== */
html, body {
  height: 100vh;
  width: 100vw;
}

/* ===== Gradiente fixo no body ===== */
body#preview-body {
  background:
    linear-gradient(to bottom, var(--bg1,#000000), var(--bg2,#444444))
    fixed no-repeat;
  background-size: cover;

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    env(safe-area-inset-top,20px)
    12px
    env(safe-area-inset-bottom,20px)
    env(safe-area-inset-left,12px);

  font-family: sans-serif;
  overflow: hidden; /* só .generator-box rola */
  transition: background .2s;
}

/* ===== Container central com scroll interno ===== */
.generator-box {
  background: rgba(255,255,255,0.8);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);

  width: 100%;
  max-width: 800px;

  max-height: calc(
    100vh
    - (env(safe-area-inset-top,20px))
    - (env(safe-area-inset-bottom,20px))
  );
  overflow-y: auto;

  display: flex;
  flex-direction: column;
  gap: 16px;

  padding:
    32px /* topo */
    32px /* direita */
    calc(32px + env(safe-area-inset-bottom,20px)) /* bottom */
    32px /* esquerda */;
}

/* ===== Scrollbar customizada (opcional) ===== */
.generator-box::-webkit-scrollbar {
  width: 8px;
}
.generator-box::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}

/* ===== Tipografia ===== */
.generator-box h1 {
  font-size: 1.6rem;
  color: #333;
  text-align: center;
  margin-bottom: 1.5rem;
}
.generator-box label {
  display: block;
  font-size: 0.95rem;
  color: #444;
  margin-bottom: 0.5rem;
}

/* ===== Inputs (texto, file, color e sem type) ===== */
.generator-box input[type="text"],
.generator-box input[type="file"],
.generator-box input[type="color"],
.generator-box input:not([type]) {
  width: 100%;
  padding: 8px 12px;
  font-size: 0.95rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 1rem;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.generator-box input[type="text"]:focus,
.generator-box input[type="file"]:focus,
.generator-box input[type="color"]:focus,
.generator-box input:not([type]):focus {
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.2);
}

/* ===== Color picker com altura fixa ===== */
.generator-box input[type="color"] {
  height: 40px;
  padding: 0;
  border: none;
}

/* ===== Botões “➕” ===== */
.add-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.add-buttons button {
  flex: 1 1 120px;
  padding: 12px 16px;
  font-size: 0.95rem;
  font-weight: 500;
  background: #f0f0f0;
  border: 1px solid #bbb;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s, box-shadow .2s;
}
.add-buttons button:hover {
  background: #e2e2e2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* ===== Cards gerados ===== */
#cards-container {
  display: grid;
  gap: 12px;
}
#cards-container .card {
  background: rgba(255,255,255,0.5);
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 12px;
  position: relative;
}
#cards-container .card .remove {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}

/* ===== Botão de submit ===== */
.generator-box button[type="submit"] {
  margin-top: 8px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 14px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, box-shadow .2s;
}
.generator-box button[type="submit"]:hover {
  background: #0056b3;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ===== Responsivo até 600px ===== */
@media (max-width: 600px) {
  body#preview-body {
    align-items: flex-start;
    padding-top: env(safe-area-inset-top,20px);
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 20px;
  }
  .generator-box {
    max-width: 100%;
    max-height: calc(
      100vh
      - (env(safe-area-inset-top,20px))
      - (env(safe-area-inset-bottom,20px))
      - 24px
    );
    margin: 20px;
    padding: 24px 16px calc(24px + env(safe-area-inset-bottom,20px)) 16px;
  }
}