/* ---------- ORIGINAL STYLES (kept unchanged) ---------- */
/* assets/css/style.css - updated so action buttons stay in one row on desktop,
   still stack on mobile; includes hover/focus effects and order-form styles */

/* Base */
body .lpt-root, body .lpt-order-root { font-family: Arial, Helvetica, sans-serif; color:#111; }
.lpt-root .lpt-header, .lpt-order-root .lpt-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:12px; }
.lpt-root h2, .lpt-order-root h2 { margin:0; font-size:20px; }
.lpt-root .auth, .lpt-order-root .auth { font-size:13px; color:#374151; display:flex; align-items:center; gap:8px; }
.lpt-root .auth button, .lpt-order-root .auth button { margin-left:8px; padding:6px 10px; border-radius:6px; border:none; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease; }
.lpt-root .auth .logout, .lpt-order-root .auth .logout { background:#ef4444; color:#fff; }
.lpt-root .auth .loginbtn, .lpt-order-root .auth .loginbtn { background:#10b981; color:#fff; }

/* Filters and table */
.lpt-root .filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; align-items:flex-end; }
.lpt-root .filters label { font-size:13px; display:block; margin-bottom:4px; }
.lpt-root .filters .filter {
  background:#fff;
  padding:8px;
  border-radius:6px;
  border:1px solid #e5e7eb;
  min-width:140px;
  flex: 0 1 180px;
}

.lpt-root table { width:100%; border-collapse:collapse; background:#fff; }
.lpt-root th { text-align:left; padding:8px; background:#10b981; color:#fff; font-weight:600; }
.lpt-root td { padding:8px; border-bottom:1px solid #e6e6e6; vertical-align:middle; }
.lpt-root a.sample { text-decoration:underline; color:#0369a1; }

/* Summary area */
.lpt-root .summary { display:flex; gap:10px; margin-top:16px; align-items:flex-start; }
.lpt-root .summary .box { padding:12px; border-radius:8px; background:#fff; border:1px solid #e6e6e6; min-width:140px; flex: 0 0 auto; }

/* IMPORTANT: make actions a flex row on desktop so buttons stay in one line */
.lpt-root .actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Buttons styling */
.lpt-root .actions button,
.lpt-root .actions .btn-edit,
.lpt-root .actions .btn-confirm,
.lpt-root .actions .btn-send {
  margin: 0; /* remove extra margins so layout is consistent */
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  white-space: nowrap;
}

/* Individual button colors */
.lpt-root .btn-edit { background:#22c55e; color:#fff; }
.lpt-root .btn-budget { background:#8b5cf6; color:#fff; }
.lpt-root .btn-all {
  background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
  color:#fff;
}
.lpt-root .btn-confirm { background:#facc15; color:#000; }
.lpt-root .btn-send { background:#06b6d4; color:#fff; }

.lpt-root .notes { margin-top:8px; font-size:13px; color:#6b7280; }

/* Legend */
.lpt-root .legend { background:#f8fafc; padding:12px; border-radius:8px; border:1px solid #eef2ff; }
.lpt-root .small { font-size:13px; color:#374151; }

.lpt-root input[type="number"].price-input { width:80px; padding:6px; border-radius:6px; border:1px solid #d1d5db; text-align:right; }
.lpt-root input[type="number"].filter-input {
  width:100%;
  padding:6px;
  border-radius:6px;
  border:1px solid #d1d5db;
  box-sizing:border-box;
}
.lpt-root .filters .filter.budget-filter {
  min-width:180px;
}

.lpt-root .filters .filter.budget-filter input {
  font-weight:600;
}
.lpt-root input[type="text"], .lpt-root input[type="email"], .lpt-root input[type="password"] { padding:6px; border-radius:6px; border:1px solid #d1d5db; }
.lpt-root select { padding:6px; border-radius:6px; border:1px solid #d1d5db; }
.lpt-root a.link { color:#0369a1; text-decoration:underline; }
.lpt-root .button-disabled { opacity:0.55; pointer-events:none; }

/* Hover/focus */
.lpt-root button:hover, .lpt-root button:focus, .lpt-order-root button:hover, .lpt-order-root button:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(13,110,253,0.08);
  outline: none;
  opacity: 0.98;
}

/* All button special hover */
.lpt-root .btn-all:hover,
.lpt-root .btn-all:focus {
  background:#ea580c; /* darker orange */
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(249,115,22,0.35);
  outline: none;
}

/* Active (click) state */
.lpt-root .btn-all:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(249,115,22,0.25);
}

.lpt-root button:active, .lpt-order-root button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Responsive behavior */
/* On smaller screens, we allow the buttons to wrap/stack for touch usability */
@media (max-width: 768px) {
  .lpt-root .lpt-header { flex-direction: column; align-items: flex-start; gap:8px; }
  .lpt-root .filters { gap:8px; align-items:stretch; }
  .lpt-root table, .lpt-root th, .lpt-root td { font-size:14px; }
  .lpt-root th, .lpt-root td { padding:8px 6px; }
  .lpt-root .summary { display:flex; flex-direction:column; gap:12px; align-items:stretch; }
  .lpt-root .summary .box { width:100%; min-width:0; }
  /* allow buttons to wrap and expand on mobile for easy tapping */
  .lpt-root .actions { flex-wrap: wrap; }
    .lpt-root .actions button { flex: 1 1 45%; min-width: 140px; }
  .lpt-root input[type="number"].price-input { width:100%; max-width:140px; box-sizing:border-box; }
}

/* Order form specific styles */
.lpt-order-form { background:#fff; padding:16px; border-radius:8px; border:1px solid #e6e6e6; }
.lpt-order .lpt-row { margin-bottom:10px; display:flex; flex-direction:column; gap:6px; }
.lpt-order .lpt-row label { font-weight:600; }
.lpt-order .lpt-input { padding:8px; border:1px solid #d1d5db; border-radius:6px; width:100%; box-sizing:border-box; }
.lpt-pairs { margin:8px 0 12px 0; }
.lpt-pair { background:#fbfbfb; padding:10px; border-radius:6px; margin-bottom:8px; border:1px solid #efefef; display:flex; flex-direction:column; gap:6px; }
.lpt-pair label { font-weight:600; }
.btn-add { background:#06b6d4; color:#fff; padding:8px 12px; border-radius:6px; border:none; cursor:pointer; margin-top:8px; display:inline-block; }
.btn-del { background:#ef4444; color:#fff; padding:6px 10px; border-radius:6px; border:none; cursor:pointer; align-self:flex-start; }
.lpt-actions { margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }

/* Match action button styles for order form as well */
.lpt-order .btn-edit { background:#22c55e; color:#fff; padding:8px 12px; border-radius:6px; border:none; cursor:pointer; }
.lpt-order .btn-confirm { background:#facc15; color:#000; padding:8px 12px; border-radius:6px; border:none; cursor:pointer; }
.lpt-order .btn-send { background:#06b6d4; color:#fff; padding:8px 12px; border-radius:6px; border:none; cursor:pointer; }
.lpt-message { margin-top:12px; font-weight:600; }

/* locked state */
.lpt-order.locked .lpt-input, .lpt-order.locked .pair-url, .lpt-order.locked .pair-kw { background:#f3f4f6; }

/* accessibility focus states */
button:focus, input:focus, select:focus, a:focus {
  outline: 3px solid rgba(59,130,246,0.15);
  outline-offset: 2px;
}

/* small screens for order form */
@media (max-width: 480px) {
  .lpt-order .lpt-row { gap:4px; }
  .lpt-actions button { flex:1 1 100%; }
}

/* ---------- PAYMENT DETAILS STYLES (updated to match sheet image) ---------- */

.lpt-payment-container {
  padding: 18px;
  max-width: 1160px;
  margin: 0 auto;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

.lpt-invoice {
  background: #fff;
  border-radius: 8px;
  padding: 14px;
  border: 1px solid #e6e6e6;
  overflow: hidden; /* ensure inner borders never render outside rounded corners */
}

/* Grid like a spreadsheet: 5 columns */
.lpt-invoice-row {
  display: grid;
  /* Flexible columns to prevent overflow on narrow containers */
  grid-template-columns: 170px 170px minmax(0, 1fr) 170px minmax(240px, 1fr);
  gap: 8px;
  align-items: stretch;
  padding: 6px 2px;
}

/* Thick green header borders like the mock */
.lpt-invoice-row.header {
  grid-template-columns: 170px 170px minmax(0, 1fr) 170px minmax(240px, 1fr);
  margin-bottom: 6px;
}
.lpt-invoice-row.header .col {
  background: #f8fff9;
  border: 6px solid #10b981;         /* bold green border */
  border-radius: 6px;
  color: #0b3d2e;
  font-weight: 700;
  padding: 12px 10px;
  text-align: left;
}

/* Data cells mimic sheet boxes */
.lpt-invoice-row .col {
  background:#fff;
  border:1px solid #dfe7e7;
  border-radius: 4px;
  min-height: 54px;
  padding: 10px 12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.col.order-no { font-weight:800; color:#dc2626; }

/* Keep PayPal cell inside; allow wrapping of long emails */
.col.paypal {
  text-align:center;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Summary column lines */
.lpt-invoice-row .summary div { line-height: 1.6; }
.final-line { margin-top:8px; font-weight:700; white-space: nowrap; }  /* keep “Send $… to paypal id:” on one line */

/* Quantity column values */
.qty-val, .price-val, .final-val { font-weight:700; }
.order-no-value { color:#dc2626; font-weight:800; font-size:16px; }

/* Spacer */
.lpt-spacer { height: 18px; }

/* Deadline block like highlighted rows */
.deadline-block {
  display:flex;
  gap:12px;
  align-items:center;
  margin: 18px 0;
  flex-wrap:wrap;
}
.deadline-label {
  background:#fef3c7;
  padding:8px 12px;
  border-radius:4px;
  font-weight:700;
  border:1px solid #f3e8c6;
}
.deadline-range {
  padding:8px 12px;
  border:1px solid #e3e3e3;
  border-radius:4px;
  font-weight:700;
  background:#fff;
}
.deadline-dates {
  width:100%;
  margin-top:6px;
  font-weight:700;
  text-align:left;
}

/* View Reports button centered; text is RED per request */
.lpt-view-reports { display:flex; justify-content:center; margin: 14px 0 10px; }
.view-reports-btn {
  background:#10b981;
  color:#dc2626 !important;          /* force red text even if theme overrides anchor colors */
  padding:12px 34px;
  border-radius:6px;
  text-decoration:none;
  font-weight:700;
  display:inline-block;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.view-reports-btn:hover,
.view-reports-btn:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(16,185,129,.25);
}

/* Notes at the bottom */
.lpt-notes { margin-top:12px; text-align:center; font-size:14px; color:#1f2937; }
.lpt-notes p { margin:8px 0; }
.lpt-notes strong { font-weight:700; }

/* Responsive tweaks */
@media (max-width: 1024px) {
  .lpt-invoice-row,
  .lpt-invoice-row.header {
    grid-template-columns: 150px 150px minmax(0, 1fr) 150px minmax(200px, 1fr);
  }
}
@media (max-width: 900px) {
  .lpt-invoice-row,
  .lpt-invoice-row.header {
    grid-template-columns: 1fr 1fr; /* stack into two columns */
    gap:10px;
  }
  .col.paypal { text-align:left; }
}
@media (max-width: 560px) {
  .lpt-invoice-row,
  .lpt-invoice-row.header {
    grid-template-columns: 1fr; /* single column on small phones */
  }
  .lpt-invoice { padding: 12px; }
  .view-reports-btn { width:100%; text-align:center; }
}
@media (max-width: 360px) {
  .lpt-payment-container { padding:12px; }
  .view-reports-btn { padding:10px; font-size:15px; }
}
/* ---------- End Payment Details Styles ---------- */

/* ---------- CLIENT REPORT PAGE STYLES ---------- */

.lpt-user-reports {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

.lpt-user-reports h2 {
  margin: 0 0 18px 0;
  font-size: 24px;
  color: #111827;
}

.lpt-report-box {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 22px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.lpt-report-header {
  font-size: 15px;
  color: #111827;
  margin-bottom: 14px;
  line-height: 1.6;
}

.lpt-pay-paid,
.lpt-pay-unpaid {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  vertical-align: middle;
}

.lpt-pay-paid {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

.lpt-pay-unpaid {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.lpt-progress-bar {
  width: 100%;
  height: 16px;
  background: #f3f4f6;
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 10px 0;
  border: 1px solid #e5e7eb;
  display: flex;
}

.lpt-progress-bar .done,
.lpt-progress-bar .proceeding,
.lpt-progress-bar .pending {
  height: 100%;
  transition: width .25s ease;
}

.lpt-progress-bar .done {
  background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
}

.lpt-progress-bar .proceeding {
  background: linear-gradient(90deg, #fde68a 0%, #facc15 100%);
}

.lpt-progress-bar .pending {
  background: linear-gradient(90deg, #fca5a5 0%, #ef4444 100%);
}

.lpt-progress-text {
  font-size: 14px;
  color: #374151;
  margin-bottom: 14px;
  line-height: 1.6;
}

.lpt-view-order {
  margin: 12px 0 16px 0;
}

.lpt-view-order a {
  display: inline-block;
  background: #10b981;
  color: #fff;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.lpt-view-order a:hover,
.lpt-view-order a:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(16,185,129,.25);
  opacity: .98;
}

.lpt-report-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  overflow: hidden;
}

.lpt-report-table thead th {
  background: #10b981;
  color: #fff;
  font-weight: 700;
  text-align: left;
  padding: 10px 8px;
  border: 1px solid #0ea371;
  white-space: nowrap;
}

.lpt-report-table tbody td {
  padding: 10px 8px;
  border: 1px solid #e5e7eb;
  vertical-align: middle;
  color: #111827;
}

.lpt-report-table tbody tr:nth-child(even) {
  background: #fafafa;
}

.lpt-report-table a {
  color: #0369a1;
  text-decoration: underline;
}

.lpt-report-table td.status-done,
.lpt-report-table td.status-proceeding,
.lpt-report-table td.status-pending {
  font-weight: 700;
  white-space: nowrap;
}

.lpt-report-table td.status-done {
  color: #15803d;
  background: #dcfce7;
}

.lpt-report-table td.status-proceeding {
  color: #a16207;
  background: #fef3c7;
}

.lpt-report-table td.status-pending {
  color: #b91c1c;
  background: #fee2e2;
}

.lpt-report-table td:first-child {
  white-space: nowrap;
  width: 60px;
}

.lpt-report-table td:last-child {
  min-width: 120px;
}

@media (max-width: 1024px) {
  .lpt-user-reports {
    padding: 14px;
  }

  .lpt-report-box {
    padding: 14px;
  }

  .lpt-report-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  .lpt-user-reports h2 {
    font-size: 20px;
  }

  .lpt-report-header {
    font-size: 14px;
  }

  .lpt-progress-text {
    font-size: 13px;
  }

  .lpt-view-order a {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}

/* ---------- END CLIENT REPORT PAGE STYLES ---------- */

/* =========================================================
   LIVE ANIMATED REPORT UPGRADE
   ========================================================= */

/* Live updating top status */

.lpt-live-status{
  display:flex;
  align-items:center;
  gap:8px;
  margin:14px 0 10px;
  color:#166534;
  font-size:14px;
  font-weight:600;
}

.lpt-live-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.55);
  animation:lptPulse 1.4s infinite;
}

/* Animated progress */

.lpt-progress-track{
  display:flex;
  width:100%;
  height:20px !important;
  border-radius:999px !important;
  overflow:hidden;
  background:#e5e7eb;
  box-shadow:
    0 0 0 1px rgba(34,197,94,.18),
    0 8px 22px rgba(34,197,94,.12);
  margin:10px 0 22px;
}

.lpt-progress-fill{
  height:100%;
  position:relative;
  overflow:hidden;
  text-align:center;
  line-height:20px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.lpt-progress-fill::after{
  content:"";
  position:absolute;
  top:0;
  left:-45%;
  width:45%;
  height:100%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.55),
    transparent
  );
  animation:lptShine 1.7s infinite;
}

.lpt-progress-done{
  background:linear-gradient(90deg,#16a34a,#22c55e);
  color:#fff;
}

.lpt-progress-processing{
  background:#facc15;
  color:#111827;
}

.lpt-progress-pending{
  background:#ef4444;
  color:#fff;
}

/* Table rows */

.lpt-report-table tbody tr.lpt-row-done td{
  background:#f0fdf4;
}

.lpt-report-table tbody tr.lpt-row-processing td{
  background:#fffdf5;
}

.lpt-report-table tbody tr.lpt-row-pending td{
  background:#fef2f2;
}

/* subtle moving shine */

.lpt-report-table tbody tr.lpt-row-done td::after,
.lpt-report-table tbody tr.lpt-row-processing td::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.28),
    transparent
  );
  animation:lptSweep 2.2s infinite;
  pointer-events:none;
}

.lpt-report-table td{
  position:relative;
  overflow:hidden;
}

/* Status badges */

.lpt-status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:125px;
  padding:8px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
}

/* Done */

.lpt-status-done{
  background:#dcfce7;
  color:#166534;
}

.lpt-status-done .lpt-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#22c55e;
  animation:lptPulseGreen 1.8s infinite;
}

/* Processing */

.lpt-status-processing{
  background:#fef3c7;
  color:#92400e;
}

.lpt-spinner{
  width:12px;
  height:12px;
  border:2px solid rgba(245,158,11,.3);
  border-top-color:#f59e0b;
  border-radius:50%;
  animation:lptSpin .9s linear infinite;
}

/* Pending */

.lpt-status-pending{
  background:#fee2e2;
  color:#991b1b;
}

.lpt-status-pending .lpt-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ef4444;
  animation:lptPulseRed 1.5s infinite;
}

/* Updating / waiting */

.lpt-live-updating,
.lpt-waiting{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:110px;
  font-weight:700;
  position:relative;
}

.lpt-live-updating{
  color:#2563eb;
}

.lpt-waiting{
  color:#dc2626;
}

.lpt-dots{
  display:inline-block;
  width:18px;
  text-align:left;
}

.lpt-dots::after{
  content:"";
  animation:lptDots 1.5s infinite steps(1);
}

/* View Link animated */

.lpt-view-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 16px;
  border-radius:999px;
  background:#dbeafe;
  color:#2563eb !important;
  font-weight:700;
  text-decoration:none !important;
  position:relative;
  overflow:hidden;
  transition:.25s ease;
}

.lpt-view-link:hover{
  background:#bfdbfe;
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(37,99,235,.18);
  text-decoration:none !important;
}

.lpt-view-link:focus,
.lpt-view-link:active{
  text-decoration:none !important;
}

.lpt-link-pulse{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2563eb;
  animation:lptLinkPulse 1.3s infinite;
}

.lpt-view-link::after{
  content:"";
  position:absolute;
  top:0;
  left:-40%;
  width:40%;
  height:100%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.55),
    transparent
  );
  animation:lptLinkSweep 2s infinite;
}

/* Popup */

.lpt-reload-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.58);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999999;
  animation:lptFadeIn .3s ease;
}

.lpt-reload-popup{
  width:min(92%,480px);
  background:#fff;
  border-radius:22px;
  padding:34px 28px;
  box-shadow:
    0 25px 60px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.25);
  text-align:center;
  position:relative;
  overflow:hidden;
  animation:lptPopupUp .35s ease;
}

.lpt-reload-loader{
  position:relative;
  width:80px;
  height:80px;
  margin:0 auto 18px;
}

.lpt-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:4px solid transparent;
  border-top-color:#22c55e;
  animation:lptSpin 1.2s linear infinite;
}

.lpt-ring:nth-child(2){
  inset:8px;
  border-top-color:#3b82f6;
  animation-duration:1.7s;
  animation-direction:reverse;
}

.lpt-ring:nth-child(3){
  inset:16px;
  border-top-color:#a855f7;
  animation-duration:2.2s;
}

.lpt-reload-progress{
  width:100%;
  height:10px;
  background:#e2e8f0;
  border-radius:999px;
  overflow:hidden;
  margin-top:22px;
}

.lpt-reload-progress-fill{
  width:35%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    #22c55e,
    #3b82f6,
    #a855f7
  );
  animation:lptLoadingBar 1.6s ease-in-out infinite;
}

/* Animations */

@keyframes lptSpin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

@keyframes lptSweep{
  from{transform:translateX(-100%);}
  to{transform:translateX(100%);}
}

@keyframes lptDots{
  0%{content:"";}
  25%{content:".";}
  50%{content:"..";}
  75%{content:"...";}
  100%{content:"";}
}

@keyframes lptPulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.55);}
  70%{box-shadow:0 0 0 8px rgba(34,197,94,0);}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0);}
}

@keyframes lptPulseGreen{
  0%{opacity:1;}
  50%{opacity:.45;}
  100%{opacity:1;}
}

@keyframes lptPulseRed{
  0%{opacity:1;}
  50%{opacity:.35;}
  100%{opacity:1;}
}

@keyframes lptShine{
  from{left:-45%;}
  to{left:110%;}
}

@keyframes lptLinkPulse{
  0%{
    transform:scale(1);
    opacity:1;
  }

  50%{
    transform:scale(1.45);
    opacity:.45;
  }

  100%{
    transform:scale(1);
    opacity:1;
  }
}

@keyframes lptLinkSweep{
  from{
    left:-40%;
  }

  to{
    left:120%;
  }
}

@keyframes lptFadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

@keyframes lptPopupUp{
  from{
    opacity:0;
    transform:translateY(18px) scale(.96);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes lptLoadingBar{
  0%{
    transform:translateX(-120%);
  }

  100%{
    transform:translateX(320%);
  }
}

/* =========================================================
   FIX: Animate /client5/ summary progress bar
   Uses old summary classes: .lpt-progress-bar .done/.proceeding/.pending
   ========================================================= */

.lpt-progress-bar{
  height:20px !important;
  border-radius:999px !important;
  overflow:hidden;
  background:#e5e7eb !important;
  box-shadow:
    0 0 0 1px rgba(34,197,94,.18),
    0 8px 22px rgba(34,197,94,.12);
}

.lpt-progress-bar .done,
.lpt-progress-bar .proceeding,
.lpt-progress-bar .pending{
  position:relative;
  overflow:hidden;
  height:100%;
}

.lpt-progress-bar .done::after,
.lpt-progress-bar .proceeding::after,
.lpt-progress-bar .pending::after{
  content:"";
  position:absolute;
  top:0;
  left:-45%;
  width:45%;
  height:100%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.55),
    transparent
  );
  animation:lptShine 1.7s infinite;
}

.lpt-progress-bar .done{
  background:linear-gradient(90deg,#16a34a,#22c55e) !important;
}

.lpt-progress-bar .proceeding{
  background:#facc15 !important;
}

.lpt-progress-bar .pending{
  background:#ef4444 !important;
}