/* ============================================================
   LOAN SYSTEM — USER.CSS  (supplementary / page-specific)
   All widths are 100% — no fixed caps. Works at any viewport.
   ============================================================ */

/* ── Page containers are full-width inside ls-main-content ── */
.ls-dashboard,
.ls-loan-apply-page,
.ls-loan-details-page,
.ls-loan-list-page,
.ls-personal-info-page,
.ls-profile-page,
.ls-card-page,
.ls-help-page { width: 100%; }

/* ── WordPress theme hard-reset on plugin pages ── */
body.ls-full-page { overflow-x: hidden; }
body.ls-full-page .entry-content > *:first-child { margin-top: 0; }

/* ── Input number spinner hide ── */
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── Smooth scroll ── */
html { scroll-behavior: smooth; }

/* ── Font smoothing ── */
.ls-app-wrapper * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ── Sticky submit area ── */
.ls-form-submit-area {
    position: sticky;
    bottom: 80px;
    z-index: 10;
    background: linear-gradient(to top, var(--ls-bg) 80%, transparent);
    padding-top: 14px;
    padding-bottom: 12px;
}

/* ── Profile completion progress ── */
.ls-profile-progress { margin: 12px 0 18px; }
.ls-profile-progress-bar { height: 8px; background: rgba(255,255,255,.25); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.ls-profile-progress-fill { height: 100%; background: #4ade80; border-radius: 4px; transition: width .6s ease; }
.ls-profile-progress-text { color: rgba(255,255,255,.85); font-size: .78rem; text-align: right; display: block; }

/* ── Loan list page section header ── */
.ls-loan-list-page .ls-section-header { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--ls-border); }

/* ── Balance counter animation numbers ── */
.ls-balance-amount,
.ls-loan-detail-amount,
.ls-stat-value,
.ls-loan-amount,
.ls-duration-value,
.ls-emi-value { font-family: 'Noto Sans Bengali', var(--ls-font) !important; }

/* ── Upload progress bar (inside upload boxes) ── */
.ls-upload-progress {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px; background: var(--ls-border);
}
.ls-upload-progress-bar { height: 100%; background: var(--ls-success); width: 0; transition: width .3s; }

/* ── File accepted badge ── */
.ls-upload-badge {
    position: absolute; top: 6px; right: 6px;
    background: var(--ls-success); color: #fff;
    border-radius: 50%; width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    font-size: .65rem; box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* ── Shimmer skeleton loaders ── */
.ls-shimmer {
    background: linear-gradient(90deg, #f0f4f8 25%, #e2e8f0 50%, #f0f4f8 75%);
    background-size: 200% 100%;
    animation: ls-shimmer 1.5s infinite;
    border-radius: 8px;
}
@keyframes ls-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.ls-shimmer-card { height: 180px; border-radius: 18px; margin-bottom: 18px; }
.ls-shimmer-line { height: 14px; margin-bottom: 10px; }
.ls-shimmer-line.ls-sl-short { width: 60%; }
.ls-shimmer-line.ls-sl-med   { width: 80%; }

/* ── Admin note fade-in ── */
.ls-admin-note { animation: ls-fade-in .4s ease; }
@keyframes ls-fade-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* ── Bottom nav hidden (on scroll down) ── */
.ls-bottom-nav { transition: transform .25s ease; }
.ls-nav-hidden  { transform: translateY(100%); }

/* ── Char counter ── */
.ls-char-count { font-size: .72rem; color: var(--ls-text-light); text-align: right; margin-top: 3px; }

/* ── Swipeable back gesture indicator ── */
.ls-back-swipe-hint { display: none; }

/* ── Card page: actions row ── */
.ls-card-actions { display: flex; gap: 10px; margin-top: 6px; }
.ls-card-actions .ls-btn { flex: 1; }

/* ── Virtual card flip animation ── */
.ls-card-flip-wrap { perspective: 800px; }
.ls-card-flip-inner { transition: transform .5s; transform-style: preserve-3d; position: relative; }
.ls-card-flip-inner.flipped { transform: rotateY(180deg); }
.ls-card-face { backface-visibility: hidden; position: absolute; width: 100%; }
.ls-card-face-back { transform: rotateY(180deg); }

/* ── Loan apply – package grid on tablet ── */
@media (min-width: 600px) {
    .ls-packages-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (min-width: 960px) {
    .ls-packages-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Auth page – wider desktop layout ── */
@media (min-width: 960px) {
    .ls-auth-hero { flex: 1.3; }
    .ls-auth-form-panel { flex: 1; }
}

/* ── Dashboard quick stats – wider screens ── */
@media (min-width: 600px) {
    .ls-quick-stats { grid-template-columns: repeat(3, 1fr); }
}

/* ── Profile menu – wider screens ── */
@media (min-width: 768px) {
    .ls-profile-menu { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ── Help page – two-column on desktop ── */
@media (min-width: 768px) {
    .ls-help-page { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
    .ls-faq-section { grid-column: 1 / -1; }
}

/* ── Personal info form – 3-column upload grid on desktop ── */
@media (min-width: 768px) {
    .ls-upload-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Loan details EMI table responsive ── */
@media (max-width: 480px) {
    .ls-emi-table { font-size: .76rem; }
    .ls-emi-table th, .ls-emi-table td { padding: 8px 8px; }
}

/* ── Fix WordPress twenty* themes padding ── */
body.ls-full-page .entry-content,
body.ls-full-page .post-content {
    padding: 0 !important;
    max-width: 100% !important;
}