* { box-sizing: border-box; }

body {
  font-family: 'Tahoma', 'Segoe UI', sans-serif;
  background: linear-gradient(160deg, #f3effa 0%, #ece3f7 45%, #e6d9f2 100%);
  min-height: 100vh;
  margin: 0;
  direction: rtl;
  color: #2b2b2b;
}

.app-header {
  background: linear-gradient(90deg, #1a1a2e 0%, #23408e 55%, #6b4ba1 100%);
  color: #fff;
  padding: 18px 28px;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.layout {
  display: flex;
  gap: 32px;
  padding: 32px 24px 60px;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
  align-items: flex-start;
}

.form-panel {
  flex: 1.1;
  min-width: 380px;
  background: #fff;
  border-radius: 16px;
  padding: 28px 32px;
  box-shadow: 0 4px 18px rgba(107,75,161,0.10);
}

.preview-panel {
  flex: 1;
  min-width: 340px;
  position: sticky;
  top: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.form-panel h3 {
  color: #23408e;
  margin-top: 0;
  border-bottom: 2px solid #ece3f7;
  padding-bottom: 12px;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 20px;
}

.field-grid .full { grid-column: 1 / -1; }

.form-panel label {
  display: block;
  font-size: 13px;
  color: #6b6b6b;
  margin: 14px 0 6px;
  font-weight: 600;
}

.form-panel input,
.form-panel textarea,
.form-panel select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd4ea;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  background: #fbfaff;
  transition: border-color 0.15s;
}

.form-panel input:focus,
.form-panel textarea:focus {
  outline: none;
  border-color: #a689d1;
  background: #fff;
}

.form-panel textarea { resize: vertical; min-height: 50px; }

.section-divider {
  margin: 28px 0 8px;
  border: none;
  border-top: 1px dashed #ddd4ea;
}

.map-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(43,43,43,0.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.map-modal.open { display: flex; }

.map-modal-inner {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  width: 90%;
  max-width: 520px;
}

.btn {
  display: inline-block;
  background: #6b4ba1;
  color: #fff;
  border: none;
  padding: 11px 24px;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  margin-top: 18px;
}

.btn:hover { opacity: 0.9; }
.btn.secondary { background: #888; }
.btn.wa { background: #25D366; }
.btn.decline { background: #b33; }

/* --- Invitation card --- */
.invite-card {
  width: 380px;
  max-width: 100%;
  background: #faf8fd;
  border: 2px solid #c9b8e3;
  border-radius: 8px;
  padding: 28px 20px;
  text-align: center;
  position: relative;
  box-shadow: 0 6px 20px rgba(107,75,161,0.12);
  background-image: radial-gradient(circle at top left, rgba(201,184,227,0.15), transparent 60%);
  font-family: 'Amiri', 'Traditional Arabic', serif;
  display: flex;
  flex-direction: column;
}

/* When a template's artwork is concentrated at the top, flip the content order
   so the text block sits in the empty area at the bottom instead */
.invite-card.decoration-top {
  flex-direction: column-reverse;
}

/* Text color variant for templates with a dark/busy background */
.invite-card.light-text {
  color: #fff;
}
.invite-card.light-text .basmala,
.invite-card.light-text .verse,
.invite-card.light-text .heading,
.invite-card.light-text .family-prefix,
.invite-card.light-text .family-name,
.invite-card.light-text .subline,
.invite-card.light-text .relation-label,
.invite-card.light-text .lineage,
.invite-card.light-text .guest-name,
.invite-card.light-text .details,
.invite-card.light-text .venue,
.invite-card.light-text .closing,
.invite-card.light-text strong {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.65);
}
.invite-card.light-text .venue a {
  color: #f0e8ff;
}

.invite-card .basmala {
  font-size: 13px;
  color: #1a1a1a;
  margin-bottom: 6px;
  font-weight: bold;
}

.invite-card .verse {
  font-size: 13px;
  color: #1a1a1a;
  line-height: 1.9;
  margin-bottom: 18px;
  text-wrap: balance;
  font-weight: bold;
}

.invite-card .heading {
  font-size: 14px;
  color: #000;
  margin-bottom: 6px;
}

.invite-card .families-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 14px;
}

.invite-card .family-col {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.invite-card .family-prefix {
  font-size: 14px;
  color: #1a1a1a;
  font-weight: bold;
}

.invite-card .family-name {
  font-size: 22px;
  font-weight: bold;
  color: #000;
}

.invite-card .subline {
  font-size: 13px;
  color: #1a1a1a;
  margin-bottom: 10px;
  font-weight: bold;
}

.invite-card .names-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: 14px;
  margin-bottom: 4px;
}

.invite-card .name-col {
  flex: 1;
  min-width: 0;
}

.invite-card .relation-label {
  font-size: 12px;
  color: #4b2e83;
  margin-bottom: 2px;
  font-weight: bold;
}

.invite-card .names-divider {
  flex: 0 0 auto;
  align-self: center;
  padding: 0 12px;
  color: #1a1a1a;
  font-weight: bold;
}

.invite-card .lineage {
  font-size: 12px;
  color: #1a1a1a;
}

.invite-card .guest-name {
  font-size: 16px;
  font-weight: bold;
  margin: 16px 0 6px;
  color: #4b2e83;
}

.invite-card .details {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 18px 0;
  font-size: 13px;
  color: #1a1a1a;
  font-weight: bold;
}

.invite-card .extra-times {
  font-size: 12px;
  color: #555;
  margin-bottom: 12px;
}

.invite-card .venue {
  font-size: 13px;
  margin-bottom: 6px;
  color: #1a1a1a;
  font-weight: bold;
}

.invite-card .venue a {
  color: #4b2e83;
  text-decoration: underline;
}

.invite-card .closing {
  font-size: 12px;
  color: #1a1a1a;
  margin-top: 16px;
  font-weight: bold;
}

.rsvp-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

.rsvp-status {
  margin-top: 16px;
  font-weight: bold;
}

table.guest-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: 13px;
}

table.guest-table th, table.guest-table td {
  border: 1px solid #eee;
  padding: 8px;
  text-align: right;
}

table.guest-table th { background: #f4f1ea; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
}
.badge.pending { background: #eee; color: #666; }
.badge.confirmed { background: #d4f4dd; color: #1a7a3a; }
.badge.declined { background: #f8d7da; color: #a33; }