/* ==========================================================================
   The online application page
   One page that carries the whole application: the cover being bought, the
   people covered, the documents that back it and the way it is paid for. It
   reuses the site's own type, colours and controls, so it reads as part of the
   site rather than as a form bolted onto it.
   ========================================================================== */

.apply-main{
  background:#f3f5fa;
  padding:2rem 0 3rem;
}

.apply-intro{
  max-width:760px;
  margin:0 auto 1.6rem;
  text-align:center;
}

.apply-kicker{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  padding:0.34rem 0.8rem;
  border-radius:999px;
  background:#e6fbf9;
  color:#01545f;
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.06em;
}

.apply-intro h1{
  margin:0.7rem 0 0.4rem;
  color:var(--primary-navy);
  font-size:clamp(1.7rem,3.4vw,2.4rem);
  line-height:1.15;
}

.apply-intro p{
  margin:0;
  color:#475569;
  font-size:0.95rem;
}

/* What the reader came in from: the quote they clicked Apply on. */
.apply-quote-note{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  margin-top:0.9rem;
  padding:0.55rem 0.95rem;
  border-radius:12px;
  border:1px solid #b7dedd;
  background:#eaf6f5;
  color:#01545f;
  font-size:0.85rem;
  font-weight:600;
}

/* An empty note is nothing at all, not an empty pill: the rule above sets a
   display of its own, which would otherwise win over the hidden attribute. */
.apply-quote-note[hidden]{
  display:none;
}

.apply-form{
  max-width:980px;
  margin:0 auto;
  display:grid;
  gap:1.1rem;
}

.apply-card{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:18px;
  padding:1.1rem 1.2rem 1.25rem;
  box-shadow:0 4px 12px rgba(15,23,42,0.04);
}

.apply-card-head{
  display:flex;
  align-items:center;
  gap:0.7rem;
  margin-bottom:0.95rem;
  padding-bottom:0.7rem;
  border-bottom:1px solid #eef2f6;
}

.apply-card-head .apply-step{
  flex:0 0 auto;
  width:30px;
  height:30px;
  border-radius:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--primary-navy);
  color:#fff;
  font-size:0.85rem;
  font-weight:800;
}

.apply-card-head strong{
  display:block;
  color:var(--primary-navy);
  font-size:0.98rem;
}

.apply-card-head small{
  display:block;
  color:#64748b;
  font-size:0.76rem;
}

.apply-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:0.85rem;
}

.apply-field{
  display:flex;
  flex-direction:column;
  gap:0.3rem;
  min-width:0;
}

.apply-field.apply-wide,
.apply-grid .apply-wide{
  grid-column:1 / -1;
}

.apply-field > span{
  color:#475569;
  font-size:0.75rem;
  font-weight:700;
}

.apply-field > span small{
  color:#94a3b8;
  font-weight:500;
}

.apply-field input,
.apply-field select,
.apply-field textarea{
  width:100%;
  padding:0.6rem 0.7rem;
  border:1.5px solid #d9e0e8;
  border-radius:10px;
  background:#fff;
  color:var(--text-dark);
  font-size:0.88rem;
  font-family:inherit;
  outline:none;
}

.apply-field textarea{
  resize:vertical;
  line-height:1.5;
}

.apply-field input:focus,
.apply-field select:focus,
.apply-field textarea:focus{
  border-color:#017a78;
  box-shadow:0 0 0 3px rgba(1,122,120,0.10);
}

.apply-field input.is-missing,
.apply-field select.is-missing{
  border-color:#c62828;
  box-shadow:0 0 0 3px rgba(198,40,40,0.10);
}

/* --- the documents ------------------------------------------------------ */

.apply-docs{
  display:grid;
  gap:0.28rem;
  margin:0 0 0.9rem;
  padding:0;
  list-style:none;
}

.apply-docs li{
  position:relative;
  padding-left:1.15rem;
  color:#334155;
  font-size:0.84rem;
}

.apply-docs li::before{
  content:"";
  position:absolute;
  left:0.32rem;
  top:0.62rem;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#017a78;
}

.apply-docs li em{
  color:#94a3b8;
  font-style:normal;
}

#applyForm .personal-attach-control{
  display:flex;
  align-items:center;
  gap:0.7rem;
  padding:0.8rem 0.95rem;
  border:1.5px dashed #b7dedd;
  border-radius:12px;
  background:#f7fbfb;
  cursor:pointer;
}

#applyForm .personal-attach-control:hover{
  border-color:#017a78;
  background:#eff8f8;
}

#applyForm .personal-attach-control > i{
  width:32px;
  height:32px;
  border-radius:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#e6fbf9;
  color:#01545f;
}

#applyForm .personal-attach-control span{
  display:flex;
  flex-direction:column;
  line-height:1.25;
}

#applyForm .personal-attach-control strong{
  color:var(--primary-navy);
  font-size:0.85rem;
}

#applyForm .personal-attach-control small{
  color:#64748b;
  font-size:0.72rem;
}

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

#applyForm .personal-attach-list{
  display:grid;
  gap:0.35rem;
  margin:0.7rem 0 0;
  padding:0;
  list-style:none;
}

#applyForm .personal-attach-list li{
  display:flex;
  align-items:center;
  gap:0.5rem;
  padding:0.45rem 0.6rem;
  border:1px solid #e2e8f0;
  border-radius:9px;
  background:#fff;
  font-size:0.8rem;
}

#applyForm .personal-attach-list li i{
  color:#017a78;
}

#applyForm .personal-attach-list li .attach-name{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#334155;
}

#applyForm .personal-attach-list li .attach-size{
  color:#94a3b8;
  font-size:0.72rem;
}

#applyForm .personal-attach-list li button{
  border:0;
  background:transparent;
  color:#b91c1c;
  cursor:pointer;
  padding:0.1rem 0.25rem;
}

#applyForm .personal-attach-note{
  margin:0.55rem 0 0;
  color:#64748b;
  font-size:0.74rem;
}

#applyForm .personal-attach-note.is-error{ color:#b91c1c; }
#applyForm .personal-attach-note.is-warning{ color:#b45309; }

/* --- how it is paid ----------------------------------------------------- */

.apply-pay{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:0.7rem;
  margin-bottom:0.95rem;
}

.apply-pay-option{
  display:flex;
  gap:0.6rem;
  padding:0.8rem 0.85rem;
  border:1.5px solid #d9e0e8;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
}

.apply-pay-option input{
  margin-top:0.2rem;
  accent-color:#017a78;
}

.apply-pay-option strong{
  display:block;
  color:var(--primary-navy);
  font-size:0.87rem;
}

.apply-pay-option small{
  display:block;
  color:#64748b;
  font-size:0.74rem;
  line-height:1.45;
}

.apply-pay-option:has(input:checked){
  border-color:#017a78;
  background:#f2fbfa;
}

/* --- sending ------------------------------------------------------------ */

.apply-submit{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:18px;
  padding:1.1rem 1.2rem 1.2rem;
  box-shadow:0 4px 12px rgba(15,23,42,0.04);
}

.apply-declaration{
  margin:0 0 0.85rem;
  color:#475569;
  font-size:0.82rem;
}

.apply-actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.7rem;
}

.apply-send,
.apply-whatsapp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:0.8rem 1.5rem;
  border:0;
  border-radius:40px;
  font-size:0.92rem;
  font-weight:700;
  cursor:pointer;
}

.apply-send{
  background:#017a78;
  color:#fff;
}

.apply-send:hover{ background:#01545f; }

.apply-send[disabled]{ opacity:0.6; cursor:progress; }

.apply-whatsapp{
  background:#25D366;
  color:#fff;
}

.apply-whatsapp:hover{ background:#1da851; }

.apply-status{
  margin:0.85rem 0 0;
  padding:0.7rem 0.85rem;
  border-radius:10px;
  font-size:0.85rem;
}

.apply-status.is-ok{
  background:#eaf6f5;
  border:1px solid #b7dedd;
  color:#01545f;
}

.apply-status.is-error{
  background:#fef2f2;
  border:1px solid #fecaca;
  color:#b91c1c;
}

.apply-footnote{
  margin:0.95rem 0 0;
  color:#64748b;
  font-size:0.76rem;
  line-height:1.55;
}

.apply-footnote a{ color:#017a78; font-weight:600; }

@media (max-width:640px){
  .apply-card{ padding:0.95rem 1rem 1.05rem; border-radius:15px; }
  .apply-actions{ flex-direction:column; }
  .apply-send,.apply-whatsapp{ width:100%; }
}

/* --- children, one record each --- */

.apply-children{
  display:grid;
  gap:0.8rem;
  margin-bottom:0.6rem;
}

.apply-child{
  padding:0.85rem 0.9rem 0.35rem;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#fbfdfd;
}

.apply-child-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.6rem;
  margin-bottom:0.6rem;
}

.apply-child-head strong{
  color:var(--primary-navy);
  font-size:0.85rem;
}

.apply-child-remove{
  border:0;
  background:transparent;
  color:#b91c1c;
  font-size:0.75rem;
  font-weight:700;
  cursor:pointer;
}

.apply-add-child{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  padding:0.45rem 0.85rem;
  border:1.5px solid #b7dedd;
  border-radius:999px;
  background:#f2fbfa;
  color:#01545f;
  font-size:0.78rem;
  font-weight:700;
  cursor:pointer;
}

.apply-add-child:hover{ background:#e6f6f5; border-color:#017a78; }

/* The block is a grid, and a grid's own display rule beats the browser's
   [hidden] default, so hiding it is said here outright. */
.apply-grid[hidden],
.apply-field[hidden],
.apply-children[hidden],
/* The same trap catches anything inside a card that carries its own display
   rule - the spouse block, the instalment panel, the payment details and the
   third payment option among them. Nothing in this form is meant to be shown
   while it is hidden, so it is said once for the lot. */
.apply-card [hidden]{ display:none; }

.apply-download{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:0.8rem 1.5rem;
  border:1.5px solid #017a78;
  border-radius:40px;
  background:#fff;
  color:#01545f;
  font-size:0.92rem;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
}

.apply-download:hover{ background:#e6f6f5; }
.apply-download.is-off{ opacity:0.55; }

/* ===== where the money goes =====
   The insurer's payment options, shown under "How you will pay" once the
   insurer is chosen, and the same list in the pop-up. */
.apply-pay-insurer{
  margin:0.9rem 0 0;
  padding:0.85rem 1rem;
  border:1.5px solid var(--pay-sub, #d7e7e6);
  border-radius:14px;
  background:var(--pay-bg, #f7fcfc);
}

.apply-pay-insurer-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:0.75rem;
  flex-wrap:wrap;
}

/* The insurer's own mark, and its palette underneath: the same logo the payment
   popup shows, so the details are recognisably theirs. */
.apply-pay-logo{
  width:44px;
  height:44px;
  flex:0 0 auto;
  object-fit:contain;
  padding:4px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--pay-sub, #d7e7e6);
}

.apply-pay-insurer-head > div{ flex:1 1 auto; min-width:0; }
.apply-pay-insurer-head strong{ display:block; color:var(--pay-brand, #0f3d46); font-size:0.9rem; }
.apply-pay-insurer-head small{ display:block; margin-top:0.15rem; color:#64748b; font-size:0.75rem; }

.apply-pay-open{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  padding:0.45rem 0.85rem;
  border:1.5px solid var(--pay-sub, #b7dedd);
  border-radius:999px;
  background:#fff;
  color:var(--pay-brand, #01545f);
  font-size:0.78rem;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}

.apply-pay-open:hover{ background:var(--pay-bg, #e6f6f5); border-color:var(--pay-brand, #017a78); }

/* A document asked for where it belongs: the file control sits under its own
   label, and the note under it says what has been chosen there. */
.apply-field input[type="file"].personal-attach-input{
  padding:0.45rem 0.5rem;
  border:1.5px dashed #cfdfe0;
  border-radius:10px;
  background:#f7fcfc;
  font-size:0.78rem;
  color:#475569;
  cursor:pointer;
}

.apply-field input[type="file"].personal-attach-input:hover{ border-color:#9ec7c9; background:#f2fbfa; }

.apply-upload-note{
  display:block;
  margin-top:0.2rem;
  color:#64748b;
  font-size:0.7rem;
}

.apply-upload-note.is-on{ color:#016f6d; font-weight:700; }

/* The sample that goes with a slot: a file to take away and fill in. */
.apply-sample-download{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  align-self:flex-start;
  margin:0.15rem 0 0.35rem;
  padding:0.4rem 0.8rem;
  border:1.5px solid #b7dedd;
  border-radius:999px;
  background:#f2fbfa;
  color:#01545f;
  font-size:0.76rem;
  font-weight:700;
  text-decoration:none;
}

.apply-sample-download:hover{ background:#e6f6f5; border-color:#017a78; }
.apply-sample-note{ display:block; margin-top:0.3rem; color:#64748b; font-size:0.7rem; line-height:1.45; }

/* The three ways a group can give its members, side by side. */
.apply-member-modes{
  display:grid;
  gap:0.6rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-top:0.35rem;
}

.apply-mode{
  display:flex;
  gap:0.55rem;
  padding:0.7rem 0.8rem;
  border:1.5px solid #d9e0e8;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  align-items:flex-start;
}

.apply-mode:hover{ border-color:#9ec7c9; }
.apply-mode:has(input:checked){ border-color:#017a78; background:#f2fbfa; }
.apply-mode input{ margin-top:0.2rem; }
.apply-mode span{ display:block; min-width:0; }
.apply-mode strong{ display:block; color:#0f3d46; font-size:0.82rem; }
.apply-mode small{ display:block; margin-top:0.15rem; color:#64748b; font-size:0.72rem; }

/* The dependants question sits beside the heading it belongs to. */
.apply-dependants-choice{
  display:flex;
  gap:0.45rem;
  flex-wrap:wrap;
  margin-left:auto;
}

.apply-dependants-choice[hidden]{ display:none; }

.apply-mode-inline{
  flex-direction:row;
  align-items:center;
  gap:0.4rem;
  padding:0.4rem 0.75rem;
  border-radius:999px;
}

.apply-mode-inline strong{ font-size:0.76rem; }

/* The members' rows carry a textarea for pre-existing conditions, which the
   form's own field styles already cover. */

/* ===== a group's families =====
   Each family is its own block: the principal member, the people joining them,
   and the two buttons that carry the list on. */
.apply-family{
  padding:0.7rem 0.8rem;
  border:1px solid #e2eef0;
  border-radius:14px;
  background:#fbfdfd;
}

.apply-family + .apply-family{ margin-top:0.7rem; }
.family-members .apply-member,
.family-dependants .apply-member{ background:#fff; }
.family-dependants:not(:empty){ margin-top:0.6rem; }

.family-actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  margin-top:0.6rem;
}

.apply-pay-methods{
  margin-top:0.7rem;
  display:grid;
  gap:0.6rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}

.apply-pay-method{
  border:1px solid var(--pay-sub, #e2eef0);
  border-radius:12px;
  background:#fff;
  padding:0.6rem 0.7rem;
}

.apply-pay-method h4{
  margin:0 0 0.4rem;
  font-size:0.78rem;
  color:var(--pay-brand, #01545f);
  border-bottom:1px solid var(--pay-sub, #e2eef0);
  padding-bottom:0.3rem;
}
.apply-pay-rows{ display:grid; gap:0.3rem; }
.apply-pay-row{ display:flex; justify-content:space-between; gap:0.6rem; font-size:0.74rem; }
.apply-pay-row span{ color:#64748b; }
.apply-pay-row strong{ color:#0f172a; text-align:right; font-weight:700; word-break:break-word; }
.apply-pay-empty{ margin:0.2rem 0 0; color:#64748b; font-size:0.78rem; }

.apply-pay-modal{
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  background:rgba(6,36,42,0.55);
}

/* The overlay is a flex box, and a flex's display rule beats the browser's
   [hidden] default, so hiding it is said here outright. */
.apply-pay-modal[hidden]{ display:none; }

.apply-pay-modal-card{
  position:relative;
  width:min(720px,100%);
  max-height:88vh;
  overflow:auto;
  background:#fff;
  border-radius:18px;
  padding:1.2rem 1.25rem 1rem;
  box-shadow:0 24px 60px rgba(2,32,38,0.35);
}

.apply-pay-modal-close{
  position:absolute;
  top:0.5rem;
  right:0.7rem;
  border:0;
  background:transparent;
  font-size:1.4rem;
  line-height:1;
  color:#64748b;
  cursor:pointer;
}

.apply-pay-modal-card{
  border-top:4px solid var(--pay-brand, #017a78);
}

.apply-pay-modal-card h3{ margin:0 2rem 0.2rem 0; font-size:1.05rem; color:var(--pay-brand, #0f3d46); }
.apply-pay-modal-note{ margin:0 0 0.8rem; color:#64748b; font-size:0.78rem; }
.apply-pay-modal-actions{ display:flex; gap:0.6rem; justify-content:flex-end; margin-top:1rem; }

.apply-pay-modal-wa,
.apply-pay-modal-done{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  padding:0.5rem 0.95rem;
  border-radius:999px;
  font-size:0.8rem;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
}

.apply-pay-modal-wa{ border:1.5px solid #b7dedd; background:#fff; color:#01545f; }
.apply-pay-modal-done{ border:1.5px solid var(--pay-brand, #017a78); background:var(--pay-brand, #017a78); color:#fff; }

/* ===== the medical questionnaire =====
   One block per member, each opening the insurer's own Yes/No questions. */
.apply-medical-members{
  display:grid;
  gap:0.7rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

.member-medical-block{
  display:flex;
  flex-direction:column;
  padding:0.7rem 0.8rem;
  border:1px solid #e2eef0;
  border-radius:12px;
  background:#fff;
}

/* ===== the NCBA instalment plan =====
   Shown when the client picks the instalment option: the figures and the
   bank's own form. */
.apply-ipf{
  margin:0.9rem 0 0;
  padding:0.9rem 1rem;
  border:1.5px solid #d7e7e6;
  border-radius:14px;
  background:#f7fcfc;
}

/* A block whose own display rule would otherwise beat the browser default. */
.apply-ipf[hidden]{ display:none; }

.apply-ipf-head strong{ display:block; color:#0f3d46; font-size:0.9rem; }
.apply-ipf-head small{ display:block; margin-top:0.15rem; color:#64748b; font-size:0.75rem; }
.apply-ipf-inputs{ margin-top:0.7rem; max-width:320px; }
.apply-ipf-rows{ margin-top:0.75rem; display:grid; gap:0.35rem; }

.apply-ipf-row{
  display:flex;
  justify-content:space-between;
  gap:0.75rem;
  font-size:0.8rem;
  padding:0.3rem 0.55rem;
  border-radius:8px;
  background:#fff;
  border:1px solid #e2eef0;
}

.apply-ipf-row span{ color:#64748b; }
.apply-ipf-row strong{ color:#0f172a; font-weight:700; }
.apply-ipf-row.is-strong{ background:#eaf6f5; border-color:#b7dedd; }
.apply-ipf-row.is-strong strong{ color:#01545f; }
.apply-ipf-empty{ margin:0.7rem 0 0; color:#64748b; font-size:0.8rem; }
.apply-ipf-note{ margin:0.75rem 0 0; color:#475569; font-size:0.78rem; }
.apply-ipf-note.is-off{ color:#b45309; font-weight:600; }

.apply-ipf-download{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  margin-top:0.85rem;
  padding:0.65rem 1.15rem;
  border:0;
  border-radius:999px;
  background:#017a78;
  color:#fff;
  font-size:0.82rem;
  font-weight:700;
  cursor:pointer;
}

.apply-ipf-download:hover{ background:#01545f; }
.apply-ipf-download[disabled]{ opacity:0.55; cursor:not-allowed; }