/* --------------------------------------------------
   File‑Upload Layout: One row per upload type
   -------------------------------------------------- */

/* 1) Wrapper: one row per upload */
.saa-upload-grid {
  display: grid;
  row-gap: 1.5rem;
  margin: 2rem 0;
  padding: 2rem;
  background-color: #fafafa;
}

/* 2) Each row: two equal halves */
.saa-upload-row {
  display: grid;
  grid-template-columns: 50% 50%;  /* <- exactly half/half */
  gap: 1rem;
  align-items: center;
}

/* 3) Left cell: description text */
.saa-upload-row .upload-desc {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.4;
}

.upload-desc .upload-title {
    font-size: 1.1rem;
    font-weight: bold;
}

/* 4) Right cell: upload control container */
.saa-upload-row .upload-control {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* 5) Make the drop‑area fill the entire right half */
.saa-upload-row .upload-control .file-drop-area {
  width: 100%;
  box-sizing: border-box;
}

/* 6) Drop‑area styling */
.file-drop-area {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4em 1em;
  border: 2px dashed #ccc;
  border-radius: 6px;
  background: #fcfdfe;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  color: #000;
  margin: 0 20px 0;
}

.file-drop-area:hover,
.file-drop-area.is-active {
  border-color: #007cba;
  background: #e6f7ff;
}

/* 7) Fake button label inside drop‑area */
.file-drop-area .fake-btn {
  color: #1a1c20;
  padding: 0.4em 0.8em;
  border-radius: 4px;
  font-size: 0.9em;
  pointer-events: none;
  text-align: center;
  font-size: 1.2rem;
}

/* 8) Invisible native file-input to catch clicks */
.file-drop-area .file-input {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}
/* --------------------------------------
   Responsive: stack the two columns
   under each other on small screens
   -------------------------------------- */
@media (max-width: 768px) {
  .saa-upload-row {
    grid-template-columns: 1fr;     /* single column */
  }
  .saa-upload-row .upload-control {
    margin-top: 0.75rem;            /* space before the control */
  }
}
/* Pills */
.saa-badge {
  display:inline-block;
  font-size:12px;
  line-height:1;
  padding:4px 8px;
  border-radius:999px;
  margin-left:8px;
  vertical-align:middle;
  font-weight:600;
}
.saa-badge--required { background:#ffe8e6; color:#a32100; border:1px solid #ffc3bb; }
.saa-badge--optional { background:#eef7ff; color:#084c8d; border:1px solid #cfe6ff; }

.saa-field-hint {
  font-size:12px;
  margin-top:6px;
  opacity:.9;
}

/* Hide Woo's default markers so only our pill shows */
.woocommerce form .form-row abbr.required,
.woocommerce-billing-fields abbr.required,
.woocommerce form .form-row .optional,
.woocommerce-billing-fields .optional {
  display: none !important;
}
/* Hide Woo's built-in markers */
.woocommerce form .form-row abbr.required,
.woocommerce .form-row .optional {
  display: none !important;
}

/* Pills (match the ones you used on uploads) */
.saa-badge{
  display:inline-block;
  margin-left:.5rem;
  padding:.15rem .5rem;
  border-radius:999px;
  font-size:.8rem;
  line-height:1;
  vertical-align:middle;
  font-weight:600;
}
.saa-badge--required{ background:#ffe4e0; color:#c0392b; }
.saa-badge--optional{ background:#e6f0ff; color:#1f5fbf; }