/* sell.css – BEAUTIFUL & MODERN VERSION (2025) */
:root{
  --max-width:960px;
  --accent:#1d4ed8;
  --bg:#ffffff;
  --muted:#6b7280;
  --card:#f8fafc;
  --shadow:0 8px 32px rgba(15,23,36,0.08);
  --radius:14px;
}

body { font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:#0f1724; line-height:1.5; }

main {
  max-width: var(--max-width);
  margin: 0 auto 8rem;   /* ← THIS IS THE KEY: 8rem bottom margin */
  padding: 2rem 1rem 6rem; /* ← extra bottom padding just in case */
  text-align: center;
}

h1 {
  font-size: clamp(2rem,5vw,2.6rem);
  text-align:center;
  margin-bottom:0.6rem;
  color:#0f1724;
}

.lead {
  font-size:1.15rem;
  color:var(--muted);
  text-align:center;
  max-width:720px;
  margin:0 auto 3rem;
}

/* Form Grid – beautiful two-column on desktop */
.form-grid {
  display:grid;
  gap:1.6rem;
  margin-top:2rem;
}
@media (min-width:768px) {
  .form-grid { grid-template-columns:1fr 1fr; }
}
.full-width { grid-column:1/-1; }

/* Input styling – clean & premium */
label {
  display:block;
  font-weight:600;
  margin-bottom:0.5rem;
  color:#1e293b;
}
input, select, textarea {
  width:100%;
  padding:0.9rem 1rem;
  border:1px solid rgba(15,23,36,0.12);
  border-radius:12px;
  font-size:1rem;
  background:white;
  transition:border 0.2s;
}
input:focus, select:focus, textarea:focus {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(29,78,216,0.12);
}
textarea { min-height:130px; resize:vertical; }

/* Map – gorgeous */
#map {
  height:420px !important;
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(15,23,36,0.08);
  cursor:crosshair;
}

/* Photo Upload – stunning drop zone */
.photo-upload {
  border:3px dashed #cbd5e1;
  border-radius:16px;
  padding:2.5rem 1.5rem;
  text-align:center;
  background:#fafbff;
  cursor:pointer;
  transition:all .25s;
  background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239ca3af' fill-opacity='0.2'%3E%3Cpath d='M20 10v20m-10-10h20'/%3E%3C/g%3E%3C/svg%3E");
  background-position:center;
  background-repeat:no-repeat;
}
.photo-upload:hover, .photo-upload.dragover {
  border-color:var(--accent);
  background-color:#f0f7ff;
  background-image:none;
}
.photo-upload p {
  margin:0.8rem 0 0;
  color:#475569;
}
.photo-upload strong { color:#1e293b; font-size:1.1rem; }

.photo-preview {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:1rem;
  justify-content:center;
}
.photo-preview img {
  width:110px;
  height:110px;
  object-fit:cover;
  border-radius:12px;
  border:3px solid white;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

/* Submit button – big & bold */
button[type="submit"] {
  width:100%;
  padding:1.1rem;
  background:var(--accent);
  color:white;
  border:none;
  border-radius:14px;
  font-size:1.15rem;
  font-weight:700;
  cursor:pointer;
  transition:background .2s;
  margin-top:1rem;
}
button[type="submit"]:hover {
  background:#1e40af;
}

/* Success message */
.success {
  background:#ecfdf5;
  color:#065f46;
  padding:1.8rem;
  border-radius:16px;
  text-align:center;
  font-weight:600;
  font-size:1.2rem;
  border:1px solid #a7f3d0;
  margin-top:2rem;
  display:none;
}
.success.show { display:block; animation:fadeIn 0.6s; }
@keyframes fadeIn { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

/* Language toggle – black inactive text (as requested) */
.lang-btn {
  color:#000000 !important;
  font-weight:600;
}
.lang-btn[aria-pressed="true"] {
  color:white !important;
  background:var(--accent);
  border-color:var(--accent);
}
/* MAKE SURE THE BUTTON IS CLICKABLE – NEVER REMOVE */
#paid-trigger,
.paid-btn,
button {
  pointer-events: auto !important;
  cursor: pointer !important;
}