/* ==========================================================================
   Share payment proof - the form under the payment details on the Pay
   Insurer page. A white card on the page's own background, matching the
   insurer cards above it.
   ========================================================================== */

.payment-proof-block {
  padding: 2.2rem 0 3.4rem;
}

.payment-proof-card {
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(1.2rem, 3vw, 2.1rem);
  background: #ffffff;
  border: 1px solid #e2e8e4;
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(1,57,71, 0.10);
}

.payment-proof-head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding-bottom: 1rem;
  margin-bottom: 1.15rem;
  border-bottom: 1px solid #eef2f2;
}

.payment-proof-head h2 {
  margin: 0 0 0.3rem;
  color: var(--primary-navy, #013947);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 800;
  line-height: 1.2;
}

.payment-proof-head p {
  margin: 0;
  color: #5b6b62;
  font-size: 0.86rem;
  line-height: 1.55;
}

.payment-proof-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ecf6f7;
  color: #016f6d;
  font-size: 1rem;
}

.payment-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.payment-proof-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.9rem;
  min-width: 0;
}

.payment-proof-field label {
  font-size: 0.76rem;
  font-weight: 700;
  color: #475569;
}

.payment-proof-field label small {
  font-weight: 500;
  color: #8a9a90;
}

.payment-proof-field input[type="text"],
.payment-proof-field input[type="email"],
.payment-proof-field textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid #d1d9e6;
  border-radius: 10px;
  background: #fff;
  color: #1e293b;
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
}

.payment-proof-field input[type="text"]:focus,
.payment-proof-field input[type="email"]:focus,
.payment-proof-field textarea:focus {
  border-color: #86b5b3;
  box-shadow: 0 0 0 3px rgba(1,111,109, 0.08);
}

/* The pasted payment message is a quoted block, so it reads as text, not as a
   one-line entry. */
.payment-proof-message-field textarea {
  min-height: 96px;
  line-height: 1.5;
  resize: vertical;
}

.payment-proof-message-field {
  margin-bottom: 0.9rem;
}

.payment-proof-field input.payment-proof-error {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* The file control is the label itself, so it looks like a drop area rather
   than the browser's default button. */
.payment-proof-attach {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.85rem;
  border: 1.5px dashed #bcd5d6;
  border-radius: 12px;
  background: #f5fbfb;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.payment-proof-attach:hover {
  border-color: #7fb5b8;
  background: #f1f8f8;
}

.payment-proof-attach i {
  color: #016f6d;
  font-size: 0.95rem;
}

.payment-proof-attach span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.payment-proof-attach strong {
  color: #013947;
  font-size: 0.85rem;
}

.payment-proof-attach small {
  color: #6b7c72;
  font-size: 0.72rem;
}

.payment-proof-attach input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.payment-proof-filelist {
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.payment-proof-filelist li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  background: #f4f8f8;
  color: #013947;
  font-size: 0.78rem;
}

.payment-proof-filelist li i { color: #016f6d; }
.payment-proof-filelist li small { margin-left: auto; color: #6b7c72; }

.payment-proof-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.3rem;
}

.payment-proof-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.5rem;
  border: 0;
  border-radius: 40px;
  background: #016f6d;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.payment-proof-submit:hover:not(:disabled) {
  background: #124c4f;
  transform: translateY(-2px);
}

.payment-proof-submit:disabled {
  opacity: 0.75;
  cursor: progress;
  transform: none;
}

.payment-proof-note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
}

.payment-proof-note.is-pending { color: #5b6b62; }
.payment-proof-note.is-ok { color: #016f6d; font-weight: 700; }
.payment-proof-note.is-error { color: #b91c1c; font-weight: 700; }

body[data-mobile="true"] .payment-proof-block { padding: 1.4rem 0 2.4rem; }
body[data-mobile="true"] .payment-proof-grid { grid-template-columns: 1fr; }
body[data-mobile="true"] .payment-proof-card { border-radius: 16px; }
body[data-mobile="true"] .payment-proof-submit { width: 100%; }

/* ===== as a sub-container of the Pay Insurer block =====
   Under the payment details the proof form is one more card in the same block,
   the same width and radius as the NCBA instalment card above it, so the two
   read as part of one page rather than as two sections. */
.payment-block .payment-proof-block {
    width: 100%;
    max-width: 1100px;
    margin: 1.5rem auto 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.payment-block .payment-proof-card {
    max-width: none;
    margin: 0;
    padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1rem, 2.4vw, 1.5rem) clamp(1.2rem, 2.6vw, 1.7rem);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* The two ways to send the same proof sit side by side. */
.payment-proof-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.72rem 1.5rem;
    border: 0;
    border-radius: 40px;
    background: #25d366;
    color: #083335;
    font-size: 0.86rem;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.payment-proof-whatsapp:hover {
    background: #1da851;
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 640px) {
    .payment-proof-actions { flex-direction: column; align-items: stretch; }
    .payment-proof-submit,
    .payment-proof-whatsapp { width: 100%; }
}