/* Layout wrapper */
.wrap {
  max-width: 1040px;
  margin: 28px auto;
  padding: 0 16px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #fff;
}

/* Cards (sections) */
.card {
  background: #242424;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
}

/* Section titles */
.card h2 {
  margin-top: 0;
  font-size: 18px;
  color: #fff;
}

/* Row grid */
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 900px) {
  .row { grid-template-columns: 1fr; }
}

/* Inputs, selects, textareas */
input,
select,
textarea {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 0 12px !important;
  border: 1px solid #444 !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  background: #303030 !important;
  color: #fff !important;
  height: 44px !important;
  line-height: 44px !important;
}

/* Textareas */
textarea {
  min-height: 90px !important;
  height: auto !important; /* allow textareas to expand */
  resize: vertical;
}

/* Select dropdowns */
select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  background: #303030 url("data:image/svg+xml;utf8,<svg fill='white' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>")
    no-repeat right 12px center !important;
  background-size: 16px 16px !important;
  padding-right: 36px !important;
}

/* Buttons */
.btn {
  padding: 11px 16px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
}
.btn.primary {
  background: linear-gradient(135deg, #22d3ee, #3b82f6) !important;
  color: #fff !important;
  border: none !important;
}
.btn.ghost {
  background: #444;
  color: #fff;
}

/* Writers block */
.writerBlock {
  background: #2a2a2a;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #333; /* subtle separator */
}
.writerBlock:last-child {
  border-bottom: none; /* no border after last block */
}

/* Remove button */
.writerBlock .rm {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 20px;   /* space above Remove button */
  margin-bottom: 10px;
}

/* Footer (Generate / Reset buttons) */
.footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Validation message */
#shareValidation {
  margin-top: 8px;
  font-size: 13px;
}

/* Placeholders in dropdowns */
select option[disabled][selected][hidden] {
  color: #888; /* gray out placeholder text */
}
select:invalid {
  color: #888 !important;
}

/* Wrapper that enforces uniform height */
.field-wrapper {
  position: relative;
  height: 44px;               /* lock height */
  display: flex;
}

.field-wrapper select,
.field-wrapper input[type="date"] {
  flex: 1;
  height: 100%;                /* match wrapper height */
  padding: 0 36px 0 12px;      /* same padding as inputs */
  font-size: 15px;
  border: 1px solid #444;
  border-radius: 10px;
  background-color: #303030;
  color: #fff;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  line-height: normal;
}

/* Custom dropdown arrow */
.field-wrapper select {
  background: #303030 url("data:image/svg+xml;utf8,<svg fill='white' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>")
    no-repeat right 12px center;
  background-size: 16px;
}

/* Custom calendar icon */
.field-wrapper input[type="date"] {
  background: #303030 url("data:image/svg+xml;utf8,<svg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20'><path d='M7 10h10v2H7zm0 4h7v2H7zm12-9h-1V3h-2v2H8V3H6v2H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zM5 19V8h14v11H5z'/></svg>")
    no-repeat right 12px center;
  background-size: 18px;
  padding-right: 36px;
}
/* Error message box */
#errorBox {
  display: none;
  margin: 12px 0;
  padding: 10px 14px;
  border-radius: 8px;
  background-color: #3a0d0d; /* dark red background */
  color: #ff6b6b;            /* bright red text */
  font-weight: bold;
  font-size: 14px;
}