/* ═══════════════════════════════════════════════════════════
   Loyalty Points — Member Portal CSS
   Font: Inter  |  Icons: Font Awesome 6
   ═══════════════════════════════════════════════════════════ */
:root {
  --lp-primary: #69bb47;
  --lp-primary-light: #EFF6FF;
  --lp-primary-dark: #1D4ED8;
  --lp-success: #16A34A;
  --lp-success-light: #F0FDF4;
  --lp-warning: #D97706;
  --lp-warning-light: #FFFBEB;
  --lp-danger: #DC2626;
  --lp-danger-light: #FEF2F2;
  --lp-border: #E5E7EB;
  --lp-radius: 12px;
  --lp-radius-sm: 8px;
  --lp-shadow: 0 1px 4px rgba(0, 0, 0, .08);
  --lp-shadow-md: 0 6px 24px rgba(0, 0, 0, .10);
  --lp-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --tier-dong: #B45309;
  --tier-dong-bg: #FEF3C7;
  --tier-bac: #6B7280;
  --tier-bac-bg: #F3F4F6;
  --tier-khuyen-khich: #059669;
  --tier-khuyen-bg: #D1FAE5;
  --tier-vang: #D97706;
  --tier-vang-bg: #FEF3C7;
  --tier-kim: #7C3AED;
  --tier-kim-bg: #EDE9FE;
}

.lp-portal {
  font-family: var(--lp-font);
  color: #111827;
  max-width: 960px;
  margin: 0 auto;
}

.lp-portal * {
  box-sizing: border-box;
}

/* ── Hero card (điểm + hạng) ─────────────────────────────── */
.lp-hero {
  background: linear-gradient(135deg, #69bb47 0%, #69bb47 50%, #0EA5E9 100%);
  border-radius: var(--lp-radius);
  padding: 32px 28px;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.lp-hero::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, .07);
  border-radius: 50%;
}

.lp-hero::after {
  content: '';
  position: absolute;
  bottom: -60px;
  right: 60px;
  width: 140px;
  height: 140px;
  background: rgba(255, 255, 255, .05);
  border-radius: 50%;
}

.lp-hero__greeting {
  font-size: 13px;
  opacity: .8;
  font-weight: 400;
  margin-bottom: 4px;
}

.lp-hero__name {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 16px;
}

.lp-hero__pts-label {
  font-size: 12px;
  opacity: .75;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.lp-hero__pts-val {
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  margin: 4px 0 8px;
  letter-spacing: -1px;
}

.lp-hero__pts-total {
  font-size: 13px;
  opacity: .75;
}

.lp-hero__pts-per-txn {
  font-size: 13px;
  opacity: .85;
  margin-top: 6px;
  font-weight: 500;
}

.lp-hero__pts-per-txn i {
  margin-right: 4px;
}

.lp-hero__pts-per-txn strong {
  color: #FEF3C7;
  font-weight: 700;
}

.lp-hero__tier {
  text-align: center;
  position: relative;
  z-index: 1;
}

.lp-hero__tier-badge {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(255, 255, 255, .3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.lp-hero__tier-badge i {
  font-size: 26px;
}

.lp-hero__tier-badge span {
  font-size: 11px;
  font-weight: 700;
  opacity: .9;
}

.lp-hero__tier-next {
  font-size: 11px;
  opacity: .7;
  margin-top: 8px;
}

/* Progress to next tier */
.lp-progress-bar {
  margin-top: 14px;
}

.lp-progress-bar__track {
  background: rgba(255, 255, 255, .2);
  border-radius: 100px;
  height: 6px;
  overflow: hidden;
}

.lp-progress-bar__fill {
  background: #fff;
  border-radius: 100px;
  height: 100%;
  transition: width .5s ease;
}

.lp-progress-bar__labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  opacity: .7;
  margin-top: 5px;
}

/* ── Grid layout ─────────────────────────────────────────── */
.lp-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

@media (max-width: 640px) {
  .lp-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ── Cards ───────────────────────────────────────────────── */
.lp-card {
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
  overflow: hidden;
}

.lp-card__header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--lp-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lp-card__title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.lp-card__title i {
  color: var(--lp-primary);
  width: 16px;
  text-align: center;
}

.lp-card__body {
  padding: 20px;
}

/* ── Earn form ───────────────────────────────────────────── */
.lp-form-row {
  margin-bottom: 16px;
}

.lp-form-row label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 5px;
}

.lp-form-row label .required {
  color: var(--lp-danger);
  margin-left: 2px;
}

.lp-form-row select,
.lp-form-row input[type=text],
.lp-form-row input[type=number],
.lp-form-row input[type=tel],
.lp-form-row textarea {
  width: 100%;
  font-family: var(--lp-font);
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-sm);
  background: #fff;
  color: #111827;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
padding-left: 34px;
}
input[type="radio"]{
      margin: 0px;
}
.icon-2 i{
      top: 51% !important;
}
#lp-qty , .lp-qty-btn{
  margin: 0px !important;
}
.lp-pack-chip i{
      margin-right: 5px;
}
.lp-form-row select:focus,
.lp-form-row input:focus,
.lp-form-row textarea:focus {
  border-color: var(--lp-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.lp-form-row .hint {
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 4px;
}

.lp-pts-preview {
  background: var(--lp-success-light);
  border: 1px solid #BBF7D0;
  border-radius: var(--lp-radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lp-success);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* ── Button ──────────────────────────────────────────────── */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--lp-font);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: var(--lp-radius-sm);
  border: none;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  white-space: nowrap;
}

.lp-btn--primary {
  background: var(--lp-primary);
  color: #fff;
}

.lp-btn--primary:hover {
  background: var(--lp-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, .3);
}

.lp-btn--outline {
  background: transparent;
  color: #374151;
  border: 1px solid var(--lp-border);
}

.lp-btn--outline:hover {
  background: #F9FAFB;
}

.lp-btn--success {
  background: var(--lp-success);
  color: #fff;
}

.lp-btn--full {
  width: 100%;
}

.lp-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
}

/* ── Rewards grid ────────────────────────────────────────── */
.lp-rewards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (max-width: 480px) {
  .lp-rewards-grid {
    grid-template-columns: 1fr;
  }
}

.lp-reward-card {
  border: 1.5px solid var(--lp-border);
  border-radius: var(--lp-radius-sm);
  padding: 16px;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
}

.lp-reward-card:hover {
  border-color: var(--lp-primary);
  box-shadow: 0 4px 16px rgba(37, 99, 235, .12);
}

.lp-reward-card.selected {
  border-color: var(--lp-primary);
  background: var(--lp-primary-light);
}

.lp-reward-card.disabled {
  opacity: .5;
  cursor: not-allowed;
}

.lp-reward-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.lp-reward-card__name {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.lp-reward-card__val {
  font-size: 13px;
  color: #6B7280;
}

.lp-reward-card__pts {
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-primary);
}

.lp-reward-card__tier {
  font-size: 11px;
  color: var(--lp-warning);
  font-weight: 500;
}

/* ── Transaction history list ────────────────────────────── */
.lp-tx-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lp-tx-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid #F3F4F6;
}

.lp-tx-item:last-child {
  border-bottom: none;
}

.lp-tx-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.lp-tx-item__icon--earn {
  background: var(--lp-success-light);
  color: var(--lp-success);
}

.lp-tx-item__icon--redeem {
  background: var(--lp-danger-light);
  color: var(--lp-danger);
}

.lp-tx-item__icon--adjust {
  background: var(--lp-warning-light);
  color: var(--lp-warning);
}

.lp-tx-item__body {
  flex: 1;
  min-width: 0;
}

.lp-tx-item__label {
  font-size: 13px;
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-tx-item__meta {
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 1px;
}

.lp-tx-item__pts {
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}

.lp-tx-item__pts--pos {
  color: var(--lp-success);
}

.lp-tx-item__pts--neg {
  color: var(--lp-danger);
}

.lp-tx-item__pts-per-txn {
  font-size: 12px;
  color: #6B7280;
  margin-top: 4px;
  font-weight: 500;
}

.lp-tx-item__pts-per-txn i {
  margin-right: 4px;
  color: var(--lp-primary);
}

.lp-tx-item__pts-per-txn strong {
  color: var(--lp-primary);
  font-weight: 700;
}

/* ── Status badges ───────────────────────────────────────── */
.lp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 100px;
}

.lp-badge--pending {
  background: var(--lp-warning-light);
  color: var(--lp-warning);
}

.lp-badge--approved {
  background: var(--lp-success-light);
  color: var(--lp-success);
}

.lp-badge--rejected {
  background: var(--lp-danger-light);
  color: var(--lp-danger);
}

.lp-badge--completed {
  background: var(--lp-success-light);
  color: var(--lp-success);
}

.lp-badge--processing {
  background: #EEF2FF;
  color: #4F46E5;
}

/* ── Tabs ────────────────────────────────────────────────── */
.lp-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--lp-border);
  margin-bottom: 20px;
}

.lp-tab-btn {
  padding: 10px 18px;
  font-family: var(--lp-font);
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.lp-tab-btn:hover {
  color: var(--lp-primary);
}

.lp-tab-btn.active {
  color: var(--lp-primary);
  border-bottom-color: var(--lp-primary);
  font-weight: 600;
}

.lp-tab-panel {
  display: none;
}

.lp-tab-panel.active {
  display: block;
}

/* ── Notices ─────────────────────────────────────────────── */
.lp-notice {
  padding: 14px 18px;
  border-radius: var(--lp-radius-sm);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
}

.lp-notice a {
  color: inherit;
  font-weight: 600;
}

.lp-notice--success {
  background: var(--lp-success-light);
  color: #166534;
  border-left: 3px solid var(--lp-success);
}

.lp-notice--error {
  background: var(--lp-danger-light);
  color: #991B1B;
  border-left: 3px solid var(--lp-danger);
}

.lp-notice--info {
  background: var(--lp-primary-light);
  color: #69bb47;
  border-left: 3px solid var(--lp-primary);
}

.lp-notice--warning {
  background: var(--lp-warning-light);
  color: #92400E;
  border-left: 3px solid var(--lp-warning);
}

/* ── Loading spinner ─────────────────────────────────────── */
.lp-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lp-spin .65s linear infinite;
}

.lp-spinner--dark {
  border-color: var(--lp-border);
  border-top-color: var(--lp-primary);
}

@keyframes lp-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Empty state ─────────────────────────────────────────── */
.lp-empty {
  text-align: center;
  padding: 40px 20px;
  color: #9CA3AF;
}

.lp-empty i {
  font-size: 36px;
  opacity: .35;
  display: block;
  margin-bottom: 10px;
}

.lp-empty p {
  margin: 0;
  font-size: 14px;
}

/* ── Register form ───────────────────────────────────────── */
.lp-register {
  max-width: 500px;
  margin: 0 auto;
}

.lp-register__header {
  text-align: center;
  margin-bottom: 28px;
}

.lp-register__header i {
  font-size: 40px;
  color: var(--lp-primary);
}

.lp-register__header h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 12px 0 6px;
}

.lp-register__header p {
  font-size: 14px;
  color: #6B7280;
  margin: 0;
}

/* ── Confirm modal ───────────────────────────────────────── */
.lp-confirm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.lp-confirm-overlay.open {
  display: flex;
}

.lp-confirm-box {
  background: #fff;
  border-radius: 14px;
  padding: 28px 24px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
}

.lp-confirm-box i {
  font-size: 36px;
  color: var(--lp-primary);
  margin-bottom: 14px;
}

.lp-confirm-box h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
}

.lp-confirm-box p {
  font-size: 14px;
  color: #6B7280;
  margin: 0 0 20px;
}

.lp-confirm-box__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .lp-hero {
    grid-template-columns: 1fr;
  }

  .lp-hero__tier {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .lp-hero__pts-val {
    font-size: 38px;
  }
}

/* ── QR Landing page specific ────────────────────────────── */
.lp-qr-page .required {
  color: var(--lp-danger);
}

.lp-qr-page .lp-card {
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════
   Earn Form — Tích điểm (không cần login)
   ══════════════════════════════════════════════════════════ */

/* Hero banner */
.lp-earn-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #69bb47 0%, #69bb47 55%, #0EA5E9 100%);
  border-radius: var(--lp-radius);
  padding: 24px 22px;
  color: #fff;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.lp-earn-hero::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  background: rgba(255, 255, 255, .07);
  border-radius: 50%;
}

.lp-earn-hero__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.lp-earn-hero__title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
}

.lp-earn-hero__sub {
  font-size: 13px;
  opacity: .82;
  margin: 0;
}

/* Phone input wrap */
.lp-phone-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.lp-phone-icon {
  position: absolute;
  left: 12px;
  color: #9CA3AF;
  font-size: 13px;
  pointer-events: none;
}

.lp-phone-wrap input {
  padding-left: 34px !important;
  flex: 1;
}

#lp-phone-status {
  position: absolute;
  right: 12px;
  line-height: 1;
  display: none;
}

/* Required asterisk */
.lp-req {
  color: var(--lp-danger);
  margin-left: 2px;
}

/* Points preview */
.lp-pts-preview {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--lp-success-light);
  border: 1px solid #BBF7D0;
  border-radius: var(--lp-radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--lp-success);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Success box */
.lp-success-box {
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
  padding: 36px 24px;
  text-align: center;
  box-shadow: var(--lp-shadow);
}

.lp-success-box__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--lp-success-light);
  border: 2px solid #BBF7D0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  font-size: 32px;
  color: var(--lp-success);
}

.lp-success-box__title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
}

.lp-success-box__msg {
  font-size: 14px;
  color: #6B7280;
  margin: 0 0 24px;
  line-height: 1.6;
}

/* Zalo CTA */
.lp-zalo-cta {
  background: #F0F9FF;
  border: 1.5px solid #BAE6FD;
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.lp-zalo-cta__label {
  font-size: 14px;
  font-weight: 500;
  color: #0C4A6E;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-zalo-cta__sub {
  font-size: 12px;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 6px;
}
#lp-product-code{
      height: auto;
}
.lp-hero__name{
  color: #fff;
}
.lp-btn--zalo {
  background: #69ba47;
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--lp-radius-sm);
  width: 100%;
  transition: background .15s, transform .15s;
}

.lp-btn--zalo:hover {
  background: #0057D9;
  transform: translateY(-1px);
}

.lp-btn--zalo i {
  margin-right: 4px;
}

/* ── Lookup result ────────────────────────────────────────── */
.lp-lookup-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--lp-border);
  margin-bottom: 16px;
}

.lp-lookup-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--lp-primary-light);
  color: var(--lp-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}

.lp-lookup-info {
  flex: 1;
  min-width: 0;
}

.lp-lookup-name {
  font-size: 16px;
  font-weight: 700;
}

.lp-lookup-phone {
  font-size: 13px;
  color: #9CA3AF;
  margin-top: 2px;
}

.lp-lookup-tier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 100px;
  flex-shrink: 0;
}

/* Points grid */
.lp-lookup-pts-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 4px;
}

@media (max-width: 480px) {
  .lp-lookup-pts-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.lp-lookup-pts-item {
  background: var(--lp-neutral-light);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-sm);
  padding: 14px 12px;
  text-align: center;
}

.lp-lookup-pts-item--main {
  background: var(--lp-primary-light);
  border-color: #BFDBFE;
}

.lp-lookup-pts-val {
  font-size: 28px;
  font-weight: 800;
  color: var(--lp-primary);
  line-height: 1;
}

.lp-lookup-pts-label {
  font-size: 11px;
  color: #6B7280;
  margin-top: 4px;
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════
   Earn Form v1.3 — Brand chips, Pack chips, Qty stepper
   ══════════════════════════════════════════════════════════ */

/* Input with icon */
.lp-input-wrap {
  position: relative;
}

.lp-input-icon {
  position: absolute;
  left: 13px;
  top: 35%;
  transform: translateY(-50%);
  color: #9CA3AF;
  font-size: 13px;
  pointer-events: none;
  z-index: 1;
}

.lp-input {
  width: 100%;
  font-family: var(--lp-font);
  font-size: 14px;
  padding: 10px 14px;
  border: 1.5px solid var(--lp-border);
  border-radius: var(--lp-radius-sm);
  background: #fff;
  color: #111827;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
}

.lp-input--icon {
  padding-left: 38px;
}

.lp-input:focus {
  border-color: var(--lp-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}

.lp-input-status {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.lp-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.lp-optional {
  font-size: 12px;
  font-weight: 400;
  color: #9CA3AF;
  margin-left: 4px;
}

.lp-hint {
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 5px;
}

.lp-icon--success {
  color: var(--lp-success);
  font-size: 14px;
}

.lp-icon--primary {
  color: var(--lp-primary);
  font-size: 14px;
}

/* Spinner sm */
.lp-spinner--sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

/* ── Items list in form ─────────────────────────────────── */
#row-items {
  margin-top: 20px;
}

.lp-items-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #EFF6FF 0%, #F0F9FF 100%);
  border: 1.5px solid #BFDBFE;
  border-radius: var(--lp-radius) var(--lp-radius) 0 0;
  font-size: 14px;
  font-weight: 600;
  color: #1E40AF;
}

.lp-items-header > i {
  font-size: 16px;
  color: #3B82F6;
}

.lp-items-total-pts {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #D97706;
  background: #FFFBEB;
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid #FDE68A;
}

.lp-items-total-pts i {
  font-size: 14px;
}

.lp-items-total-pts strong {
  font-weight: 700;
  color: #B45309;
}

#lp-items-list {
  border: 1.5px solid var(--lp-border);
  border-top: none;
  border-radius: 0 0 var(--lp-radius) var(--lp-radius);
  background: #fff;
  overflow: hidden;
}

.lp-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #F3F4F6;
  background: #fff;
  transition: background .15s;
}

.lp-item-row:last-child {
  border-bottom: none;
}

.lp-item-row:hover {
  background: #F9FAFB;
}

.lp-item-row__info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #374151;
  font-weight: 500;
}

.lp-item-row__info .lp-chip--brand {
  background: #F3F4F6;
  color: #374151;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lp-item-row__info .lp-chip--blue {
  background: #EFF6FF;
  color: #1D4ED8;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  margin-left: auto;
  flex-shrink: 0;
}

.lp-item-row__remove {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid #FCA5A5;
  background: #FEF2F2;
  color: #DC2626;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all .15s;
  flex-shrink: 0;
}

.lp-item-row__remove:hover {
  background: #DC2626;
  border-color: #DC2626;
  color: #fff;
  transform: scale(1.05);
}

.lp-item-row__remove i {
  transition: transform .15s;
}

.lp-item-row__remove:hover i {
  transform: rotate(90deg);
}

/* ── Brand chips ────────────────────────────────────────── */
.lp-brand-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 480px) {
  .lp-brand-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.lp-brand-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  border: 1.5px solid var(--lp-border);
  border-radius: var(--lp-radius-sm);
  cursor: pointer;
  transition: all .15s;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  text-align: center;
  user-select: none;
}

.lp-brand-chip i {
  font-size: 20px;
  color: #9CA3AF;
  transition: color .15s;
}

.lp-brand-chip:hover {
  border-color: var(--lp-primary);
  background: var(--lp-primary-light);
  color: var(--lp-primary);
}

.lp-brand-chip:hover i {
  color: var(--lp-primary);
}

.lp-brand-chip.selected {
  border-color: var(--lp-primary);
  background: var(--lp-primary-light);
  color: var(--lp-primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .15);
}

.lp-brand-chip.selected i {
  color: var(--lp-primary);
}

/* ── Packaging chips ────────────────────────────────────── */
.lp-pack-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (min-width: 480px) {
  .lp-pack-grid {
    flex-direction: row;
  }
}

.lp-pack-chip {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border: 1.5px solid var(--lp-border);
  border-radius: var(--lp-radius-sm);
  cursor: pointer;
  transition: all .15s;
  background: #fff;
  user-select: none;
}

.lp-pack-chip i {
  font-size: 20px;
  color: #9CA3AF;
  flex-shrink: 0;
  transition: color .15s;
}

.lp-pack-chip__name {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  line-height: 1.3;
}

.lp-pack-chip__pts {
  font-size: 12px;
  font-weight: 700;
  color: var(--lp-success);
  margin-top: 2px;
}

.lp-pack-chip>div {
  display: flex;
  flex-direction: column;
}

.lp-pack-chip:hover {
  border-color: var(--lp-primary);
  background: var(--lp-primary-light);
}

.lp-pack-chip:hover i {
  color: var(--lp-primary);
}

.lp-pack-chip.selected {
  border-color: var(--lp-primary);
  background: var(--lp-primary-light);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .15);
}

.lp-pack-chip.selected i {
  color: var(--lp-primary);
}

.lp-pack-chip.selected .lp-pack-chip__name {
  color: var(--lp-primary);
}

/* ── Qty stepper ────────────────────────────────────────── */
.lp-qty-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--lp-border);
  border-radius: var(--lp-radius-sm);
  overflow: hidden;
  width: fit-content;
  min-width: 160px;
}

.lp-qty-btn {
  width: 44px;
  height: 44px;
  background: #F9FAFB;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #6B7280;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}

.lp-qty-btn:hover {
  background: var(--lp-primary-light);
  color: var(--lp-primary);
}

.lp-qty-input {
  flex: 1;
  min-width: 60px;
  border: none;
  outline: none;
  font-family: var(--lp-font);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: #111827;
  padding: 0 8px;
  background: #fff;
  -moz-appearance: textfield;
}

.lp-qty-input::-webkit-outer-spin-button,
.lp-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* ── Points preview ─────────────────────────────────────── */
.lp-pts-preview {
  margin-top: 12px;
  padding: 11px 14px;
  background: var(--lp-success-light);
  border: 1px solid #BBF7D0;
  border-radius: var(--lp-radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--lp-success);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lp-pts-note {
  font-size: 12px;
  font-weight: 400;
  color: #6B7280;
}

/* ── Button large ───────────────────────────────────────── */
.lp-btn--lg {
  font-size: 15px;
  padding: 13px 20px;
}

/* ── Success chips ──────────────────────────────────────── */
.lp-success-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}

.lp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 100px;
}

.lp-chip--blue {
  background: var(--lp-primary-light);
  color: var(--lp-primary);
}

.lp-chip--gray {
  background: #F3F4F6;
  color: #374151;
}

/* ── Form row spacing ───────────────────────────────────── */
.lp-form-row {
  margin-bottom: 18px;
}

/* select style override */
.lp-input-wrap select.lp-input {
  cursor: pointer;
}
/* ── Earn form navigation buttons ──────────────────────── */
.lp-earn-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.lp-earn-nav__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--lp-radius);
  border: 1.5px solid var(--lp-border);
  background: #fff;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s;
}

.lp-earn-nav__btn:hover {
  border-color: var(--lp-primary);
  color: var(--lp-primary);
  background: var(--lp-primary-light);
  text-decoration: none;
}

.lp-earn-nav__btn--accent {
  background: var(--lp-primary-light);
  border-color: var(--lp-primary);
  color: var(--lp-primary);
}

.lp-earn-nav__btn--accent:hover {
  background: var(--lp-primary);
  color: #fff;
}

/* ── Success box navigation row ─────────────────────────── */
.lp-success-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}