
/* Vinpree Loan Application / Eligibility / Tracking */
.apply-page,.track-page,.eligibility-page{background:#f5f8fc}
.apply-page,.track-page{padding:48px 0 70px}
.eligibility-page{padding:46px 0 70px}

/* Eligibility form */
.apply-shell{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(390px,.72fr);
  align-items:stretch;
  background:#fff;
  border:1px solid #dce7f2;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(25,65,105,.08);
}
.apply-form-side{padding:38px 42px}
.apply-head h1{
  font-size:clamp(34px,4vw,48px);
  line-height:1.05;
  margin:0 0 10px;
  color:#12375f;
}
.apply-head p{color:#687c92;margin:0 0 28px}
.apply-simple-form{display:grid;gap:20px}
.apply-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.apply-grid label,.track-form label{font-size:13px;font-weight:800;color:#25466c}
.apply-grid input,.apply-grid select,.track-form input{
  width:100%;
  margin-top:7px;
  padding:12px 13px;
  border:1px solid #ccd9e7;
  border-radius:10px;
  background:#fff;
  font:inherit;
  color:#203c5d;
}
.apply-grid input:focus,.apply-grid select:focus,.track-form input:focus{
  outline:2px solid #d4e8ff;
  border-color:#6aa9ef;
}
.apply-full{grid-column:1/-1}
.apply-consent{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:#64788e;
  font-size:12px;
  line-height:1.5;
}
.apply-consent input{margin-top:3px}
.apply-next,.track-form button{
  border:0;
  border-radius:10px;
  background:#0b57d0;
  color:#fff;
  padding:13px 24px;
  font-weight:850;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 9px 22px rgba(11,87,208,.18);
}
.apply-next{justify-self:end}
.apply-error{
  background:#fff0f0;
  color:#a62d2d;
  border:1px solid #f3cdcd;
  border-radius:10px;
  padding:11px 13px;
  margin-bottom:18px;
}

/* Right-side image: one clean image, no conflicting rules */
.apply-image-side{
  position:relative;
  min-height:690px;
  background:#eaf4ff;
  overflow:hidden;
}
.apply-image-side>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}
.apply-trust{
  position:absolute;
  z-index:2;
  left:18px;
  right:18px;
  bottom:18px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  padding:13px;
  border:1px solid rgba(211,225,239,.95);
  border-radius:13px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  color:#21486f;
  font-size:12px;
  font-weight:800;
  text-align:center;
}

/* Eligibility result */
.eligibility-result-card{
  background:#fff;
  border:1px solid #dce7f2;
  border-radius:20px;
  padding:38px;
  box-shadow:0 18px 50px rgba(25,65,105,.08);
}
.eligibility-success{text-align:center;max-width:780px;margin:0 auto}
.eligibility-check{
  width:72px;height:72px;border-radius:50%;
  display:grid;place-items:center;
  background:#e8f8ef;color:#1ca15b;
  font-size:38px;font-weight:900;margin:0 auto 16px;
}
.eligibility-success h1{font-size:44px;margin:0 0 10px;color:#12375f}
.eligibility-lead{font-size:17px;color:#61768c;margin:0 auto 16px;max-width:720px}
.eligibility-badge{
  display:inline-flex;padding:9px 14px;border-radius:999px;
  background:#eaf8ef;color:#1d7a47;font-weight:850;font-size:13px;
}
.eligibility-summary{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:14px;margin:30px 0;
}
.eligibility-summary>div{
  border:1px solid #dce7f2;border-radius:13px;
  padding:18px;background:#f9fbfd;
}
.eligibility-summary span,.eligibility-summary strong{display:block}
.eligibility-summary span{font-size:12px;color:#788a9c}
.eligibility-summary strong{margin-top:6px;color:#153b65;font-size:18px}
.eligibility-lenders,.eligibility-docs{
  margin-top:30px;padding-top:28px;border-top:1px solid #e5edf5;
}
.eligibility-lenders h2,.eligibility-docs h2{
  font-size:28px;margin:0 0 8px;color:#153b65;
}
.eligibility-lenders p,.eligibility-docs p{color:#687c91}
.eligibility-lender-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:18px;
}
.eligibility-lender{
  height:78px;border:1px solid #dce7f2;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;padding:10px;text-align:center;color:#24476e;
}
.eligibility-lender img{max-width:130px;max-height:42px;object-fit:contain}
.eligibility-doc-placeholders{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:18px 0;
}
.eligibility-doc-placeholders>div{
  border:1px dashed #a9bfd5;border-radius:12px;
  padding:16px;color:#2b4d71;font-weight:800;font-size:13px;background:#fafdff;
}
.eligibility-doc-placeholders span{
  display:block;color:#0b6de0;font-size:11px;margin-top:7px;
}
.eligibility-upload-btn{
  display:inline-flex;text-decoration:none;background:#0b57d0;color:#fff;
  border-radius:10px;padding:13px 18px;font-weight:850;
}
.eligibility-disclaimer{
  margin-top:28px;background:#fff7e7;border:1px solid #f1dfb5;
  border-radius:12px;padding:16px;color:#715b2a;font-size:13px;line-height:1.6;
}

/* Documents placeholder - customer-facing, integration-ready */
.apply-next-placeholder{
  background:#fff;border:1px solid #dce7f2;border-radius:18px;
  padding:42px;max-width:950px;
}
.apply-next-placeholder h1{font-size:40px;margin:0 0 12px;color:#12375f}
.apply-next-placeholder p{color:#667b90}
.doc-placeholder-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:22px 0;
}
.doc-placeholder-grid>div{
  border:1px dashed #a9bfd5;border-radius:12px;padding:18px;background:#fafdff;
}
.doc-placeholder-grid strong,.doc-placeholder-grid span{display:block}
.doc-placeholder-grid span{color:#75899d;font-size:12px;margin-top:5px}
.apply-next-note{
  background:#eef6ff;border-radius:12px;padding:18px;margin:22px 0;color:#21496f;
}

/* Track application */
.track-lookup-card{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.72fr);
  background:#fff;
  border:1px solid #dce7f2;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(25,65,105,.08);
}
.track-form-col{padding:38px 42px}
.track-form-col h1{
  font-size:clamp(34px,4vw,48px);line-height:1.06;
  color:#12375f;margin:0 0 10px;
}
.track-form-col>p{color:#687c92;margin:0 0 28px}
.track-form{display:grid;gap:17px}
.track-help{margin-top:22px;border-top:1px solid #e6edf4;padding-top:18px}
.track-help strong{display:block;color:#23466e}
.track-help-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.track-help-actions a{
  padding:9px 12px;border-radius:8px;background:#eef5fd;color:#0b57d0;
  text-decoration:none;font-size:12px;font-weight:800;
}
.track-image-col{
  background:#eaf4ff;
  display:flex;align-items:flex-end;justify-content:center;
  min-height:500px;overflow:hidden;
}
.track-image-col img{
  width:100%;height:100%;object-fit:cover;object-position:center center;display:block;
}
.track-result-card{
  margin-top:24px;background:#fff;border:1px solid #dce7f2;
  border-radius:20px;padding:30px;box-shadow:0 14px 40px rgba(25,65,105,.06);
}
.track-result-head{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.track-result-head>div{
  background:#f8fbfe;border:1px solid #e0e8f1;border-radius:12px;padding:16px;
}
.track-result-head span,.track-result-head strong{display:block}
.track-result-head span{font-size:12px;color:#778a9d}
.track-result-head strong{margin-top:4px;color:#153c66}
.track-timeline{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin:30px 0}
.track-stage{text-align:center;position:relative}
.track-stage:before{
  content:"";position:absolute;top:17px;left:-50%;right:50%;
  height:2px;background:#d7e1eb;z-index:0;
}
.track-stage:first-child:before{display:none}
.track-stage>span{
  position:relative;z-index:1;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:#e5ebf1;color:#7a8a99;
  margin:0 auto 9px;font-weight:900;
}
.track-stage strong{font-size:11px;color:#6d7d8d;display:block}
.track-stage.done>span{background:#20ad68;color:#fff}
.track-stage.done:before{background:#20ad68}
.track-stage.current>span{background:#0b6de0;color:#fff}
.track-stage.current strong{color:#174e88}
.track-action-box{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  background:#fff7e7;border:1px solid #f0dfb7;border-radius:13px;padding:18px;
}
.track-action-box strong{color:#8a5a00}
.track-action-box p{margin:5px 0 0;color:#7d6738;font-size:13px}
.track-action-box a{
  white-space:nowrap;background:#ff6a00;color:#fff;text-decoration:none;
  border-radius:9px;padding:11px 14px;font-weight:850;
}

/* Responsive */
@media(max-width:900px){
  .apply-shell,.track-lookup-card{grid-template-columns:1fr}
  .apply-form-side,.track-form-col{padding:30px}
  .apply-image-side{min-height:540px}
  .track-image-col{min-height:420px}
  .eligibility-summary,.track-result-head{grid-template-columns:1fr}
  .eligibility-lender-grid{grid-template-columns:repeat(2,1fr)}
  .eligibility-doc-placeholders{grid-template-columns:1fr 1fr}
  .track-timeline{grid-template-columns:1fr 1fr}
  .track-stage:before{display:none}
}
@media(max-width:600px){
  .apply-page,.track-page{padding:24px 0 50px}
  .apply-grid,.doc-placeholder-grid,.eligibility-lender-grid,
  .eligibility-doc-placeholders,.track-timeline{grid-template-columns:1fr}
  .apply-full{grid-column:auto}
  .apply-form-side,.track-form-col{padding:24px 18px}
  .apply-next{width:100%}
  .apply-image-side{min-height:460px}
  .apply-trust{grid-template-columns:1fr}
  .eligibility-result-card{padding:24px 18px}
  .eligibility-success h1{font-size:34px}
  .track-action-box{align-items:flex-start;flex-direction:column}
}


/* Track Application v4 – isolated bank-style layout */
.track-page{background:#f5f8fc!important;padding:48px 0 70px!important}
.track-hero-card{display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(360px,.72fr)!important;background:#fff!important;border:1px solid #dce7f2!important;border-radius:20px!important;overflow:hidden!important;box-shadow:0 18px 50px rgba(25,65,105,.08)!important}
.track-copy{padding:42px!important}
.track-copy h1{font-size:clamp(34px,4vw,48px)!important;line-height:1.06!important;color:#12375f!important;margin:0 0 12px!important}
.track-copy>p{color:#687c92!important;margin:0 0 28px!important;font-size:16px!important}
.track-form-modern{display:grid!important;grid-template-columns:1fr 1fr!important;gap:16px!important;align-items:end!important}
.track-form-modern label{display:block!important;color:#25466c!important;font-weight:800!important;font-size:13px!important}
.track-form-modern input{display:block!important;width:100%!important;margin-top:8px!important;padding:13px 14px!important;border:1px solid #ccd9e7!important;border-radius:10px!important;background:#fff!important;font:inherit!important;color:#203c5d!important;box-sizing:border-box!important}
.track-form-modern input:focus{outline:2px solid #d4e8ff!important;border-color:#6aa9ef!important}
.track-form-modern button{grid-column:1/-1!important;border:0!important;border-radius:10px!important;background:#0b57d0!important;color:#fff!important;padding:14px 18px!important;font-weight:850!important;font-size:15px!important;cursor:pointer!important;box-shadow:0 9px 22px rgba(11,87,208,.18)!important}
.track-info-strip{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:10px!important;margin-top:24px!important}
.track-info-strip>div{border:1px solid #dce7f2!important;background:#f8fbfe!important;border-radius:12px!important;padding:14px!important;min-width:0!important}
.track-info-strip span{display:block!important;width:34px!important;height:34px!important;border-radius:50%!important;background:#eaf4ff!important;color:#0b6de0!important;display:grid!important;place-items:center!important;font-weight:900!important;margin-bottom:8px!important}
.track-info-strip strong,.track-info-strip small{display:block!important}.track-info-strip strong{font-size:13px!important;color:#1f446c!important}.track-info-strip small{font-size:11px!important;color:#75899c!important;margin-top:3px!important}
.track-help-modern{margin-top:22px!important;padding-top:18px!important;border-top:1px solid #e6edf4!important}.track-help-modern>strong{display:block!important;color:#23466e!important}.track-help-modern>div{display:flex!important;gap:10px!important;flex-wrap:wrap!important;margin-top:10px!important}.track-help-modern a{padding:9px 12px!important;border-radius:8px!important;background:#eef5fd!important;color:#0b57d0!important;text-decoration:none!important;font-size:12px!important;font-weight:800!important}
.track-visual{position:relative!important;min-height:520px!important;background:#eaf4ff!important;overflow:hidden!important}.track-visual img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important;display:block!important}
.track-result-card{margin-top:24px!important;background:#fff!important;border:1px solid #dce7f2!important;border-radius:20px!important;padding:30px!important;box-shadow:0 14px 40px rgba(25,65,105,.06)!important}
@media(max-width:900px){.track-hero-card{grid-template-columns:1fr!important}.track-copy{padding:30px!important}.track-visual{min-height:430px!important}.track-form-modern{grid-template-columns:1fr!important}.track-form-modern button{grid-column:auto!important}.track-info-strip{grid-template-columns:1fr!important}}
@media(max-width:600px){.track-page{padding:24px 0 50px!important}.track-copy{padding:24px 18px!important}.track-visual{min-height:380px!important}}

/* Final Track image correction */
.track-image-col{
  position:relative !important;
  min-height:520px !important;
  background:#eaf4ff !important;
  overflow:hidden !important;
}
.track-image-col img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
}

/* Track image v3: clean illustration, predictable fit */
.track-image-col{
  position:relative !important;
  min-height:560px !important;
  background:#eaf4ff !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:28px !important;
}
.track-image-col img{
  position:static !important;
  width:100% !important;
  height:100% !important;
  max-width:520px !important;
  max-height:650px !important;
  object-fit:contain !important;
  object-position:center center !important;
  border-radius:18px !important;
  display:block !important;
}
@media(max-width:900px){
  .track-image-col{min-height:420px !important}
  .track-image-col img{max-height:480px !important}
}

/* Final Personal Loan flow */
.eligibility-reference{margin-top:12px;color:#6f8296;font-size:13px}
.document-upload-card,.consent-card,.application-success-card{
  background:#fff;border:1px solid #dce7f2;border-radius:20px;
  box-shadow:0 18px 50px rgba(25,65,105,.08);
  padding:38px;max-width:1050px;
}
.document-head h1,.consent-card h1,.application-success-card h1{
  margin:0 0 10px;color:#12375f;font-size:clamp(34px,4vw,46px);
}
.document-head p,.consent-card>p,.application-success-card>p{color:#687c92}
.document-reference{
  display:inline-flex;margin-top:10px;padding:8px 12px;border-radius:999px;
  background:#eef6ff;color:#21496f;font-size:13px
}
.document-upload-form{display:grid;gap:12px;margin-top:24px}
.document-upload-row{
  display:grid;grid-template-columns:1fr minmax(260px,420px);gap:18px;
  align-items:center;padding:16px;border:1px solid #dce7f2;border-radius:12px;background:#fbfdff;
}
.document-upload-row strong,.document-upload-row small{display:block}
.document-upload-row strong{color:#21456d}
.document-upload-row small{margin-top:4px;color:#74879a}
.document-upload-row input{width:100%}
.document-security{
  padding:13px;border-radius:10px;background:#eef8f2;color:#28714b;font-size:12px;
}
.document-actions{
  display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:12px;
}
.document-actions>a{color:#0b57d0;text-decoration:none;font-weight:800}
.document-actions button{
  border:0;border-radius:10px;background:#0b57d0;color:#fff;padding:13px 20px;
  font-weight:850;cursor:pointer
}
.consent-summary{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0;
}
.consent-summary>div{
  padding:16px;border:1px solid #dce7f2;border-radius:12px;background:#f9fbfd;
}
.consent-summary span,.consent-summary strong{display:block}
.consent-summary span{font-size:12px;color:#7a8b9c}
.consent-summary strong{margin-top:5px;color:#173e68}
.consent-form{display:grid;gap:14px}
.consent-form>label{
  display:flex;align-items:flex-start;gap:10px;padding:16px;border:1px solid #dce7f2;
  border-radius:12px;background:#fff;color:#536a82;line-height:1.55;
}
.consent-form>label input{margin-top:4px}
.consent-form a{color:#0b57d0}
.consent-note{
  padding:15px;border:1px solid #f1dfb5;border-radius:12px;background:#fff7e7;
  color:#715b2a;font-size:13px;line-height:1.6;
}
.application-success-card{text-align:center}
.success-checkmark{
  width:78px;height:78px;border-radius:50%;display:grid;place-items:center;
  background:#e8f8ef;color:#20a963;font-size:42px;font-weight:900;margin:0 auto 16px;
}
.success-id-box{
  max-width:520px;margin:24px auto;padding:20px;border-radius:14px;background:#eef6ff;
  border:1px solid #d4e7fb;
}
.success-id-box span,.success-id-box strong{display:block}
.success-id-box span{font-size:12px;color:#6f8294}
.success-id-box strong{font-size:26px;color:#0b57d0;margin-top:7px}
.success-status-note{color:#526a82}
.success-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:24px 0}
.success-actions a{
  padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:850;
  border:1px solid #c9d8e8;color:#20496f
}
.success-actions a.primary{background:#0b57d0;color:#fff;border-color:#0b57d0}
.success-disclaimer{
  max-width:760px;margin:0 auto;padding:14px;border-radius:10px;background:#fff7e7;
  color:#715b2a;font-size:12px;line-height:1.6;
}
@media(max-width:800px){
  .document-upload-row{grid-template-columns:1fr}
  .consent-summary{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .document-upload-card,.consent-card,.application-success-card{padding:24px 18px}
  .document-actions{align-items:stretch;flex-direction:column}
  .document-actions button,.document-actions>a{width:100%;text-align:center}
  .consent-summary{grid-template-columns:1fr}
}
