/*==============================================================================
    PAYMENT SECTION
==============================================================================*/

.fe-payment {
  position: relative;

  padding: 6rem 0;

  overflow: hidden;

  background:
    radial-gradient(
      circle at top right,
      rgba(37, 99, 235, 0.08),
      transparent 35%
    ),
    linear-gradient(180deg, #ffffff, #f8fafc);
}

.fe-payment::before {
  content: "";

  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(rgba(37, 99, 235, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.04) 1px, transparent 1px);

  background-size: 42px 42px;

  pointer-events: none;
}

/*==============================================================================
    HEADER
==============================================================================*/

.fe-payment-header {
  max-width: 820px;

  margin: 0 auto 4rem;

  text-align: center;

  position: relative;

  z-index: 2;
}

.fe-payment-header .fe-section-badge {
  display: inline-flex;

  align-items: center;

  gap: 0.7rem;

  padding: 0.8rem 1.3rem;

  border-radius: 999px;

  background: #eff6ff;

  color: #2563eb;

  font-weight: 700;

  margin-bottom: 1.5rem;
}

.fe-payment-header .fe-section-title {
  font-size: clamp(2.3rem, 4vw, 3.5rem);

  font-weight: 800;

  line-height: 1.2;

  color: #0f172a;

  margin-bottom: 1rem;
}

.fe-payment-header .fe-section-subtitle {
  max-width: 720px;

  margin: auto;

  color: #64748b;

  line-height: 1.8;

  font-size: 1.05rem;
}

/*==============================================================================
    HIGHLIGHTS
==============================================================================*/

.fe-payment-highlights {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1.5rem;

  margin-bottom: 3rem;
}

.fe-payment-highlight {
  display: flex;

  align-items: center;

  gap: 1rem;

  padding: 1.5rem;

  border-radius: 24px;

  background: #fff;

  border: 1px solid #e5e7eb;

  transition: 0.35s;

  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.fe-payment-highlight:hover {
  transform: translateY(-6px);

  box-shadow: 0 20px 40px rgba(37, 99, 235, 0.12);
}

.fe-payment-highlight i {
  width: 60px;

  height: 60px;

  border-radius: 18px;

  display: grid;

  place-items: center;

  font-size: 1.35rem;

  color: #fff;

  background: linear-gradient(135deg, #2563eb, #60a5fa);
}

.fe-payment-highlight strong {
  display: block;

  color: #0f172a;

  margin-bottom: 0.25rem;

  font-size: 1rem;
}

.fe-payment-highlight span {
  color: #64748b;

  font-size: 0.9rem;
}

/*==============================================================================
    UPI APPS
==============================================================================*/

.fe-payment-apps {
  margin-bottom: 4rem;

  text-align: center;
}

.fe-payment-apps > span {
  display: block;

  margin-bottom: 1.5rem;

  font-weight: 700;

  color: #475569;
}

.fe-payment-app-list {
  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 1rem;
}

.fe-payment-app {
  display: flex;

  align-items: center;

  gap: 0.7rem;

  padding: 0.85rem 1.3rem;

  border-radius: 999px;

  background: #fff;

  border: 1px solid #e5e7eb;

  font-weight: 600;

  transition: 0.3s;
}

.fe-payment-app:hover {
  background: #2563eb;

  color: #fff;

  border-color: #2563eb;

  transform: translateY(-4px);
}

.fe-payment-app i {
  font-size: 1.1rem;
}

/*==============================================================================
    GRID
==============================================================================*/

.fe-payment-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;

  align-items: start;
}

/*==============================================================================
    BASE CARD
==============================================================================*/

.fe-payment-card {
  position: relative;

  overflow: hidden;

  border-radius: 30px;

  background: #fff;

  border: 1px solid #e5e7eb;

  padding: 2rem;

  transition: 0.4s;

  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.06);
}

.fe-payment-card:hover {
  transform: translateY(-10px);

  box-shadow: 0 30px 60px rgba(37, 99, 235, 0.12);
}

.fe-payment-card::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 5px;

  background: linear-gradient(90deg, #2563eb, #60a5fa);
}

/*==============================================================================
    CARD HEADER
==============================================================================*/

.fe-payment-card__header {
  display: flex;

  align-items: center;

  gap: 1rem;

  margin-bottom: 1.5rem;
}

.fe-payment-card__icon {
  width: 70px;

  height: 70px;

  border-radius: 22px;

  display: grid;

  place-items: center;

  font-size: 1.5rem;

  color: #fff;

  background: linear-gradient(135deg, #2563eb, #60a5fa);

  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.25);
}

.fe-payment-card__badge {
  display: inline-flex;

  align-items: center;

  padding: 0.45rem 0.9rem;

  border-radius: 999px;

  background: #eff6ff;

  color: #2563eb;

  font-size: 0.82rem;

  font-weight: 700;

  margin-bottom: 0.45rem;
}

.fe-payment-card h3 {
  font-size: 1.45rem;

  font-weight: 700;

  color: #0f172a;
}

.fe-payment-card__text {
  color: #64748b;

  line-height: 1.8;

  margin-bottom: 2rem;
}
/*==============================================================================
    QR CARD
==============================================================================*/

.fe-payment-card--qr {
  text-align: center;
}

.fe-payment-qr {
  position: relative;

  width: 260px;

  height: 260px;

  margin: 2rem auto;

  display: flex;

  align-items: center;

  justify-content: center;
}

/*==============================================================================
    QR RINGS
==============================================================================*/

.fe-payment-qr__ring {
  position: absolute;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  border: 2px dashed rgba(37, 99, 235, 0.18);

  animation: paymentPulse 3s infinite;
}

.fe-payment-qr__ring.ring-two {
  width: 220px;

  height: 220px;

  animation-delay: 1.2s;

  border-color: rgba(59, 130, 246, 0.28);
}

@keyframes paymentPulse {
  0% {
    transform: scale(0.92);

    opacity: 0.3;
  }

  70% {
    transform: scale(1.08);

    opacity: 0.08;
  }

  100% {
    transform: scale(0.92);

    opacity: 0.3;
  }
}

/*==============================================================================
    QR FRAME
==============================================================================*/

.fe-payment-qr__frame {
  position: relative;

  z-index: 2;

  width: 190px;

  height: 190px;

  background: #fff;

  padding: 14px;

  border-radius: 24px;

  border: 1px solid #e5e7eb;

  box-shadow: 0 25px 45px rgba(37, 99, 235, 0.12);

  transition: 0.35s;
}

.fe-payment-card:hover .fe-payment-qr__frame {
  transform: scale(1.04);
}

.fe-payment-qr__frame img {
  width: 100%;

  height: 100%;

  object-fit: contain;

  border-radius: 14px;
}

/*==============================================================================
    SECURITY BADGES
==============================================================================*/

.fe-payment-security {
  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 0.75rem;

  margin: 2rem 0;
}

.fe-payment-security__item {
  display: flex;

  align-items: center;

  gap: 0.55rem;

  padding: 0.7rem 1rem;

  border-radius: 999px;

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  font-size: 0.9rem;

  font-weight: 600;

  color: #334155;

  transition: 0.3s;
}

.fe-payment-security__item:hover {
  background: #2563eb;

  color: #fff;

  border-color: #2563eb;
}

.fe-payment-security__item i {
  color: #22c55e;
}

.fe-payment-security__item:hover i {
  color: #fff;
}

/*==============================================================================
    PAYMENT STEPS
==============================================================================*/

.fe-payment-steps {
  margin-top: 2rem;

  display: flex;

  flex-direction: column;

  gap: 1rem;
}

.fe-payment-step {
  display: flex;

  align-items: flex-start;

  gap: 1rem;

  padding: 1rem;

  border-radius: 18px;

  background: #f8fafc;

  border: 1px solid #e5e7eb;

  transition: 0.3s;
}

.fe-payment-step:hover {
  background: #eff6ff;

  border-color: #bfdbfe;
}

.fe-payment-step span {
  width: 42px;

  height: 42px;

  flex-shrink: 0;

  border-radius: 50%;

  display: grid;

  place-items: center;

  background: linear-gradient(135deg, #2563eb, #3b82f6);

  color: #fff;

  font-weight: 700;
}

.fe-payment-step strong {
  display: block;

  color: #0f172a;

  margin-bottom: 0.3rem;
}

.fe-payment-step p {
  margin: 0;

  color: #64748b;

  line-height: 1.6;

  font-size: 0.92rem;
}

/*==============================================================================
    INFO BOX
==============================================================================*/

.fe-payment-info {
  display: flex;

  align-items: flex-start;

  gap: 1rem;

  margin-top: 2rem;

  padding: 1.2rem;

  border-radius: 20px;

  background: linear-gradient(135deg, #eff6ff, #f8fbff);

  border: 1px solid #bfdbfe;
}

.fe-payment-info i {
  width: 44px;

  height: 44px;

  flex-shrink: 0;

  border-radius: 14px;

  display: grid;

  place-items: center;

  background: #2563eb;

  color: #fff;

  font-size: 1rem;
}

.fe-payment-info strong {
  display: block;

  color: #0f172a;

  margin-bottom: 0.35rem;
}

.fe-payment-info p {
  margin: 0;

  color: #64748b;

  line-height: 1.7;
}

/*==============================================================================
    FLOATING ANIMATION
==============================================================================*/

@keyframes qrFloat {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0);
  }
}

.fe-payment-qr__frame {
  animation: qrFloat 5s ease-in-out infinite;
}

/*==============================================================================
    TABLET
==============================================================================*/

@media (max-width: 992px) {
  .fe-payment-qr {
    width: 220px;

    height: 220px;
  }

  .fe-payment-qr__frame {
    width: 170px;

    height: 170px;
  }
}

/*==============================================================================
    MOBILE
==============================================================================*/

@media (max-width: 768px) {
  .fe-payment-qr {
    width: 200px;

    height: 200px;
  }

  .fe-payment-qr__frame {
    width: 160px;

    height: 160px;
  }

  .fe-payment-security {
    justify-content: center;
  }
}
/*==============================================================================
    PAYMENT DETAILS CARD
==============================================================================*/

.fe-payment-card--details {
  display: flex;

  flex-direction: column;

  height: 100%;
}

/*==============================================================================
    DETAILS LIST
==============================================================================*/

.fe-payment-details {
  display: flex;

  flex-direction: column;

  gap: 1rem;

  margin-bottom: 2rem;
}

.fe-payment-detail {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 1rem;

  padding: 1.2rem;

  border-radius: 20px;

  background: #f8fafc;

  border: 1px solid #e5e7eb;

  transition: 0.35s;
}

.fe-payment-detail:hover {
  border-color: #93c5fd;

  background: #eff6ff;
}

.fe-payment-detail__left {
  display: flex;

  align-items: center;

  gap: 1rem;

  min-width: 0;
}

.fe-payment-detail__icon {
  width: 54px;

  height: 54px;

  border-radius: 16px;

  background: linear-gradient(135deg, #2563eb, #3b82f6);

  display: grid;

  place-items: center;

  color: #fff;

  flex-shrink: 0;

  font-size: 1.1rem;
}

.fe-payment-detail label {
  display: block;

  margin-bottom: 0.35rem;

  color: #64748b;

  font-size: 0.82rem;

  font-weight: 600;
}

.fe-payment-detail strong {
  display: block;

  color: #0f172a;

  font-size: 1rem;

  font-weight: 700;

  word-break: break-all;
}

/*==============================================================================
    VERIFIED STATUS
==============================================================================*/

.fe-payment-status {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0.55rem 1rem;

  border-radius: 999px;

  background: #dcfce7;

  color: #15803d;

  font-weight: 700;

  font-size: 0.82rem;

  white-space: nowrap;
}

/*==============================================================================
    COPY BUTTON
==============================================================================*/

.fe-copy-btn {
  min-width: 110px;

  padding: 0.8rem 1rem;

  border-radius: 14px;

  font-weight: 600;

  transition: 0.3s;
}

.fe-copy-btn:hover {
  transform: translateY(-3px);
}

/*==============================================================================
    CHECKLIST
==============================================================================*/

.fe-payment-checklist {
  margin-top: 1rem;

  padding: 1.5rem;

  border-radius: 22px;

  background: linear-gradient(135deg, #ffffff, #f8fafc);

  border: 1px solid #e5e7eb;
}

.fe-payment-checklist h4 {
  margin: 0 0 1rem;

  color: #0f172a;

  font-size: 1.1rem;

  font-weight: 700;
}

.fe-payment-checklist ul {
  list-style: none;

  padding: 0;

  margin: 0;

  display: grid;

  gap: 0.9rem;
}

.fe-payment-checklist li {
  display: flex;

  align-items: center;

  gap: 0.8rem;

  color: #475569;

  font-size: 0.95rem;
}

.fe-payment-checklist i {
  width: 24px;

  color: #22c55e;

  font-size: 1rem;
}

/*==============================================================================
    WHATSAPP BUTTON
==============================================================================*/

.fe-payment-whatsapp {
  margin-top: 2rem;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 0.8rem;

  width: 100%;

  padding: 1rem 1.5rem;

  border-radius: 18px;

  background: linear-gradient(135deg, #16a34a, #22c55e);

  color: #fff;

  text-decoration: none;

  font-weight: 700;

  font-size: 1rem;

  box-shadow: 0 18px 35px rgba(22, 163, 74, 0.25);

  transition: 0.35s;
}

.fe-payment-whatsapp:hover {
  transform: translateY(-5px);

  box-shadow: 0 24px 45px rgba(22, 163, 74, 0.35);
}

.fe-payment-whatsapp i {
  font-size: 1.3rem;
}

/*==============================================================================
    ALERT
==============================================================================*/

.fe-payment-alert {
  display: flex;

  gap: 1rem;

  align-items: flex-start;

  margin-top: 1.5rem;

  padding: 1.2rem;

  border-radius: 18px;

  background: #fff7ed;

  border: 1px solid #fed7aa;
}

.fe-payment-alert i {
  width: 42px;

  height: 42px;

  flex-shrink: 0;

  border-radius: 12px;

  display: grid;

  place-items: center;

  background: #f97316;

  color: #fff;
}

.fe-payment-alert p {
  margin: 0;

  color: #7c2d12;

  line-height: 1.7;
}

.fe-payment-alert strong {
  color: #9a3412;
}

/*==============================================================================
    RESPONSIVE
==============================================================================*/

@media (max-width: 768px) {
  .fe-payment-detail {
    flex-direction: column;

    align-items: flex-start;
  }

  .fe-copy-btn {
    width: 100%;
  }

  .fe-payment-status {
    width: 100%;
  }

  .fe-payment-whatsapp {
    width: 100%;
  }
}
/*==============================================================================
    WHATSAPP SUPPORT CARD
==============================================================================*/

.fe-payment-card--support {
  display: flex;

  flex-direction: column;

  height: 100%;
}

.fe-payment-waqr {
  position: relative;

  width: 240px;

  height: 240px;

  margin: 2rem auto;

  display: flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;
}

.fe-payment-waqr__ring {
  position: absolute;

  inset: 0;

  border-radius: 50%;

  border: 2px dashed rgba(34, 197, 94, 0.25);

  animation: waPulse 3s infinite;
}

@keyframes waPulse {
  0% {
    transform: scale(0.92);

    opacity: 0.35;
  }

  70% {
    transform: scale(1.08);

    opacity: 0.05;
  }

  100% {
    transform: scale(0.92);

    opacity: 0.35;
  }
}

.fe-payment-waqr img {
  width: 180px;

  height: 180px;

  padding: 14px;

  border-radius: 24px;

  background: #fff;

  border: 1px solid #e5e7eb;

  object-fit: contain;

  box-shadow: 0 20px 45px rgba(22, 163, 74, 0.15);
}

/*==============================================================================
    CONTACT
==============================================================================*/

.fe-payment-contact {
  display: flex;

  align-items: center;

  gap: 1rem;

  padding: 1.25rem;

  border-radius: 20px;

  background: #f8fafc;

  border: 1px solid #e5e7eb;

  margin-bottom: 2rem;
}

.fe-payment-contact__icon {
  width: 58px;

  height: 58px;

  border-radius: 18px;

  display: grid;

  place-items: center;

  background: linear-gradient(135deg, #16a34a, #22c55e);

  color: #fff;

  font-size: 1.3rem;
}

.fe-payment-contact label {
  display: block;

  color: #64748b;

  font-size: 0.82rem;

  margin-bottom: 0.3rem;
}

.fe-payment-contact strong {
  color: #0f172a;

  font-size: 1.05rem;
}

/*==============================================================================
    REQUIRED DETAILS
==============================================================================*/

.fe-payment-required {
  padding: 1.6rem;

  border-radius: 22px;

  background: #f8fafc;

  border: 1px solid #e5e7eb;

  margin-bottom: 2rem;
}

.fe-payment-required h4 {
  margin: 0 0 1rem;

  color: #0f172a;

  font-size: 1.1rem;
}

.fe-payment-required ul {
  list-style: none;

  padding: 0;

  margin: 0;

  display: grid;

  gap: 0.9rem;
}

.fe-payment-required li {
  display: flex;

  align-items: center;

  gap: 0.75rem;

  color: #475569;
}

.fe-payment-required i {
  width: 24px;

  color: #16a34a;
}

/*==============================================================================
    CHAT BUTTON
==============================================================================*/

.fe-payment-chat-btn {
  width: 100%;

  justify-content: center;

  background: linear-gradient(135deg, #16a34a, #22c55e);

  color: #fff;
}

/*==============================================================================
    PAYMENT GUIDE
==============================================================================*/

.fe-payment-guide {
  margin-top: 5rem;

  padding: 4rem;

  border-radius: 32px;

  background: #fff;

  border: 1px solid #e5e7eb;

  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.05);
}

.fe-payment-guide__header {
  text-align: center;

  margin-bottom: 3rem;
}

.fe-payment-guide__timeline {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 2rem;
}

.fe-payment-guide__step {
  position: relative;

  text-align: center;

  padding: 2rem;

  border-radius: 24px;

  background: #f8fafc;

  border: 1px solid #e5e7eb;

  transition: 0.35s;
}

.fe-payment-guide__step:hover {
  transform: translateY(-8px);

  background: #eff6ff;
}

.fe-payment-guide__step span {
  display: inline-grid;

  place-items: center;

  width: 60px;

  height: 60px;

  border-radius: 50%;

  background: linear-gradient(135deg, #2563eb, #3b82f6);

  color: #fff;

  font-weight: 700;

  margin-bottom: 1rem;
}

.fe-payment-guide__step h4 {
  margin-bottom: 0.8rem;

  color: #0f172a;
}

.fe-payment-guide__step p {
  color: #64748b;

  line-height: 1.7;
}

/*==============================================================================
    TRUST BAR
==============================================================================*/

.fe-payment-trust {
  margin-top: 4rem;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1.5rem;
}

.fe-payment-trust__item {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.8rem;

  padding: 1.5rem;

  border-radius: 20px;

  background: #fff;

  border: 1px solid #e5e7eb;

  font-weight: 700;

  transition: 0.35s;
}

.fe-payment-trust__item:hover {
  transform: translateY(-6px);

  background: #2563eb;

  color: #fff;
}

.fe-payment-trust__item i {
  color: #22c55e;

  font-size: 1.2rem;
}

.fe-payment-trust__item:hover i {
  color: #fff;
}

/*==============================================================================
    RESPONSIVE
==============================================================================*/

@media (max-width: 1200px) {
  .fe-payment-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fe-payment-guide__timeline {
    grid-template-columns: repeat(2, 1fr);
  }

  .fe-payment-trust {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 992px) {
  .fe-payment-highlights {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .fe-payment {
    padding: 4rem 0;
  }

  .fe-payment-grid {
    grid-template-columns: 1fr;
  }

  .fe-payment-highlights {
    grid-template-columns: 1fr;
  }

  .fe-payment-guide {
    padding: 2rem;
  }

  .fe-payment-guide__timeline {
    grid-template-columns: 1fr;
  }

  .fe-payment-trust {
    grid-template-columns: 1fr;
  }

  .fe-payment-waqr {
    width: 200px;

    height: 200px;
  }

  .fe-payment-waqr img {
    width: 150px;

    height: 150px;
  }
}

@media (max-width: 576px) {
  .fe-payment-card {
    padding: 1.5rem;
  }

  .fe-payment-card__header {
    flex-direction: column;

    text-align: center;
  }

  .fe-payment-contact {
    flex-direction: column;

    text-align: center;
  }

  .fe-payment-app-list {
    justify-content: center;
  }

  .fe-payment-app {
    width: 100%;

    justify-content: center;
  }
}