.transaction-card {
      border-radius: 12px;
      background-color: #ffffff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      padding: 1rem;
      margin-bottom: 1rem;
      transition: all 0.3s;
  }

  .transaction-card:hover {
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  }


  .transaction-info {
      flex-grow: 1;
      padding-left: 1rem;
  }

  .login-card {
      border-left: 4px solid #0d6efd;
  }

  .login-meta {
      font-size: 0.9rem;
      color: #6c757d;
  }

  .text-18 {
      font-size: calc(1.575rem + 3.9vw) !important;
  }

  @media (min-width: 1200px) {
      .text-18 {
          font-size: 4.5rem !important;
      }
  }

  .text-17 {
      width: calc(170px + 3.9vw) !important;
  }

  @media (min-width: 9700px) {
      .text-17 {
          width: 300px !important;
      }
  }

  .plan-card {
      border: none;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
      background-color: #fff;
      transition: all 0.3s ease-in-out;
  }

  .plan-card:hover {
      transform: translateY(-5px);
  }

  .plan-header {
      padding: 1.5rem;
      color: #fff;
      text-align: center;
  }

  .plan-body {
      padding: 2rem 1.5rem;
  }

  .plan-price {
      font-size: 1.4rem;
      font-weight: bold;
      color: #212529;
  }

  .plan-feature {
      font-size: 0.95rem;
      color: #6c757d;
      margin: 0.25rem 0;
  }

  @media (max-width: 767.98px) {
      .plan-card {
          margin-bottom: 1.5rem;
      }

      .plan-body {
          text-align: center;
      }
  }

  .profit-card {
      border-radius: 12px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
      margin-bottom: 20px;
      transition: box-shadow 0.3s ease;
      background-color: #fff;
  }

  .profit-card:hover {
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  }

  .profit-logo {
      width: 60px;
      height: 60px;
      object-fit: contain;
      margin-right: 20px;
  }

  .profit-label {
      color: #6c757d;
      font-weight: 600;
  }

  .profit-row {
      align-items: center;
  }

  @media (max-width: 575.98px) {
      .profit-header {
          font-size: 1.1rem;
      }

      .profit-logo {
          width: 50px;
          height: 50px;
          margin-right: 15px;
      }
  }

  .alert-box {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      background-color: #ffe5e5;
      border-left: 4px solid #e63946;
      border-radius: 8px;
      padding: 16px;
      font-family: 'Segoe UI', sans-serif;
      color: #5a1e1e;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      max-width: 100%;
      margin-top: 15px;
  }

  .alert-box i {
      font-size: 20px;
      color: #e63946;
      margin-top: 2px;
  }

  .alert-content label {
      font-weight: 600;
      display: block;
      margin-bottom: 4px;
      font-size: 14px;
  }

  .alert-content p {
      margin: 0;
      font-size: 14px;
      line-height: 1.5;
  }

  @media (max-width: 576px) {
      .alert-box {
          flex-direction: column;
          align-items: flex-start;
      }

      .alert-box i {
          margin-bottom: 4px;
      }
  }

  .bank-details-card {
      background-color: #f9fafb;
      border-radius: 10px;
      padding: 24px;
      margin: 20px auto;
      font-family: 'Segoe UI', sans-serif;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
      color: #333;
  }

  .bank-details-card h2 {
      margin-bottom: 20px;
      font-size: 20px;
      color: #2b2d42;
      border-bottom: 2px solid #ddd;
      padding-bottom: 10px;
  }

  .bank-detail {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px dashed #ddd;
  }

  .bank-detail:last-child {
      border-bottom: none;
  }

  .label {
      font-weight: 600;
      color: #555;
  }

  .value {
      color: #1a1a1a;
      font-weight: 500;
      text-align: right;
      word-break: break-word;
  }

  @media (max-width: 480px) {
      .bank-detail {
          flex-direction: column;
          align-items: flex-start;
      }

      .value {
          text-align: left;
          margin-top: 5px;
      }
  }

  .transaction-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.5rem;
  }

  .txn-icon {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #dee2e6;
  }

  .section-title {
      color: #6c757d;
      margin-bottom: .5rem;
  }

  .section-value {
      font-weight: 600;
      color: #212529;
  }

  .reason-box {
      background-color: #ffe8e8;
      border-left: 4px solid #dc3545;
      padding: 1rem;
      margin-top: 1rem;
      border-radius: 10px;
      color: #dc3545;
  }

  .divider {
      border-top: 1px solid #dee2e6;
      margin: 1.5rem 0;
  }

  .verify-card {
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
      max-width: 450px;
      width: 100%;
      text-align: center;
      padding: 30px;
  }

  .verify-card img {
      width: 120px;
      margin-bottom: 20px;
  }

  .verify-text {
      color: #555;
      font-size: 15px;
      margin-bottom: 25px;
  }

  .footer-text {
      font-size: 13px;
      color: #888;
      margin-top: 25px;
  }

  .transaction-item {
      background: white;
      border-radius: 10px;
      padding: 15px 20px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.3s;
  }

  .transaction-item:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .transaction-item.pending {
      border-left: 4px solid #ff9800;
  }

  .transaction-item.completed {
      border-left: 4px solid #4CAF50;
  }

  .transaction-item.cancelled {
      border-left: 4px solid #f44336;
  }

  .leading-18 {
      line-height: 18px !important;
  }


  .update-card {
      border-left: 5px solid #635bfe;
      border-radius: 10px;
      transition: .2s;
  }

  .update-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
  }

  .update-badge {
      font-size: 0.75rem;
      padding: 0.25rem 0.5rem;
      border-radius: 5px;
  }

  .update-img {
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 8px;
  }

  .timeline-scroll {
      max-height: 300px;
      overflow-y: auto;
      padding-right: 10px;
  }

  .timeline-scroll::-webkit-scrollbar {
      width: 6px;
  }

  .timeline-scroll::-webkit-scrollbar-thumb {
      background-color: #ced4da;
      border-radius: 3px;
  }

  .timeline-item {
      border-left: 3px solid #0d6efd;
      margin-left: 1rem;
      padding-left: 1rem;
      position: relative;
      margin-bottom: 1.5rem;
  }

  .timeline-item::before {
      content: "";
      position: absolute;
      left: -8px;
      top: 5px;
      background-color: #0d6efd;
      border-radius: 50%;
      width: 12px;
      height: 12px;
  }



  .btn-up {
      display: inline-block;
      font-weight: 400;
      line-height: 1.5;
      color: #198754;
      text-align: center;
      text-decoration: none;
      vertical-align: middle;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      background-color: transparent;
      border: 1px solid #198754;
      padding: 0.375rem 0.75rem;
      font-size: 1rem;
      border-radius: 0.375rem;
      transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
          border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

  .btn-up:hover {
      color: #fff;
      background-color: #198754;
      border-color: #198754;
  }

  .btn-up:focus {
      outline: 0;
      box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5);
  }

  .btn-up:disabled,
  .btn-up.disabled {
      pointer-events: none;
      opacity: 0.65;
      color: #198754;
      background-color: transparent;
  }

  .btn-up:active,
  .btn-up.active {
      color: #fff;
      background-color: #198754;
      border-color: #198754;
  }

  .btn-down {
      display: inline-block;
      font-weight: 400;
      line-height: 1.5;
      color: #dc3545;
      text-align: center;
      text-decoration: none;
      vertical-align: middle;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      background-color: transparent;
      border: 1px solid #dc3545;
      padding: 0.375rem 0.75rem;
      font-size: 1rem;
      border-radius: 0.375rem;
      transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
          border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

  .btn-down:hover {
      color: #fff;
      background-color: #dc3545;
      border-color: #dc3545;
  }

  .btn-down:focus {
      outline: 0;
      box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
  }

  .btn-down:disabled,
  .btn-down.disabled {
      pointer-events: none;
      opacity: 0.65;
      color: #dc3545;
      background-color: transparent;
  }

  .btn-down:active,
  .btn-down.active {
      color: #fff;
      background-color: #dc3545;
      border-color: #dc3545;
  }

  .trade-options input[type="radio"].btn-check:checked+.btn-up {
      color: #fff;
      background-color: #198754;
      border-color: #198754;
  }

  .trade-options input[type="radio"].btn-check:checked+.btn-down {
      color: #fff;
      background-color: #dc3545;
      border-color: #dc3545;
  }

  .ico-progress {
      height: 7px;
      border-radius: 10px;
  }


  .crypto-icon {
      width: 30px;
      height: 30px;
      object-fit: contain;
  }

  .swap-btn {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background: #fff;
      border: 1px solid #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: -25px auto;
      z-index: 10;
      position: relative;
  }

  .swap-btn i {
      font-size: 1.2rem;
      color: #0d6efd;
      cursor: pointer;
  }

  /* ===== SUCCESS CHECK ANIMATION ===== */
  .success-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 130px;
  }

  .success-checkmark {
      width: 90px;
      height: 90px;
      position: relative;
      display: inline-block;
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.6s ease;
  }

  .success-checkmark.active {
      opacity: 1;
      transform: scale(1);
  }

  .check-icon {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      display: block;
      stroke-width: 2;
      stroke: #28a745;
      stroke-miterlimit: 10;
      box-shadow: inset 0px 0px 0px #28a745;
      animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
  }

  .check-icon__circle {
      stroke-dasharray: 166;
      stroke-dashoffset: 166;
      stroke-width: 2;
      stroke-miterlimit: 10;
      stroke: #28a745;
      fill: none;
      animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
  }

  .check-icon__check {
      transform-origin: 50% 50%;
      stroke-dasharray: 48;
      stroke-dashoffset: 48;
      stroke-width: 3;
      stroke: #fff;
      fill: none;
      animation: stroke 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
  }

  @keyframes stroke {
      100% {
          stroke-dashoffset: 0;
      }
  }

  @keyframes scale {

      0%,
      100% {
          transform: none;
      }

      50% {
          transform: scale3d(1.1, 1.1, 1);
      }
  }

  @keyframes fill {
      100% {
          box-shadow: inset 0px 0px 0px 45px #28a745;
      }
  }

  .pin-input {
      width: 45px;
      height: 55px;
      font-size: 1.5rem;
      border: 2px solid #ced4da;
      border-radius: 10px;
      transition: all 0.2s ease-in-out;
  }

      .banner-slide {
            border-radius: 1rem;
            overflow: hidden;
            position: relative;
            z-index: 1;
        }

        .banner-image {
            width: 220px;
            height: auto;
            object-fit: contain;
            filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.25));
            transition: transform 0.5s ease;
        }

        .banner-slide:hover .banner-image {
            transform: scale(1.05);
        }


        @media (max-width: 768px) {
            .banner-image {
                width: 150px;
                margin-top: 1rem;
            }
        }


  /* Info banner */
    .info-banner {
        background: linear-gradient(#eaf4fb, #e8f0f6);
        border-radius: 12px;
        padding: 14px 14px;
        display: flex;
        gap: 12px;
        align-items: flex-start;
        margin-bottom: 18px;
        position: relative;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
    }

    .info-banner .i {
        flex: 0 0 28px;
        height: 28px;
        border-radius: 50%;
        background: #dfeff9;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1c6fb0;
        font-weight: 700;
    }

    .info-banner .text {
        font-size: 14px;
        color: #333;
        line-height: 1.2;
    }

    .info-banner .link {
        color: #1a6ad6;
        text-decoration: underline;
        font-weight: 600;
    }

    .info-banner .close-x {
        position: absolute;
        right: 12px;
        top: 10px;
        color: #666;
        cursor: pointer;
        font-size: 18px;
    }

        /* danger banner */
    .danger-banner {
        background: var(--primary);
        border-radius: 12px;
        padding: 14px 14px;
        display: flex;
        gap: 12px;
        align-items: flex-start;
        margin-bottom: 18px;
        position: relative; 
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
    }

    .danger-banner .i {
        flex: 0 0 28px;
        height: 28px;
        border-radius: 50%;
        background: #dfeff9;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary);
        font-weight: 700;
    }

    .danger-banner .text {
        font-size: 14px;
        color: #fffcfcff;
        line-height: 1.2;
    }

    .danger-banner .link {
        color: #1a6ad6;
        text-decoration: underline;
        font-weight: 600;
    }

    .danger-banner .close-x {
        position: absolute;
        right: 12px;
        top: 10px;
        color: #fffdfdff;
        cursor: pointer;
        font-size: 18px;
    }

    /* Bank card */
    .bank-card {
        background: white;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 6px 20px rgba(23, 23, 23, 0.07);
        margin-bottom: 18px;
    }

    .bank-card .header {
        background: linear-gradient(180deg, var(--primary), var(--primary-two));
        color: white;
        padding: 18px;
        font-family: var(--display-font);
        font-size: 22px;
        font-weight: 700;
    }

    .bank-card .body {
        padding: 18px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .balance {
        font-family: "Montserrat", sans-serif;
        font-size: 29px;
        font-weight: 800;
        letter-spacing: 0.5px;
    }

    /* Big red savings banner */
    .savings {
        background: var(--primary);
        color: white;
        border-radius: 12px;
        padding: 28px 20px;
        text-align: center;
        margin-bottom: 18px;
        box-shadow: 0 6px 20px rgba(177, 16, 27, 0.08);
    }

    .savings h2 {
        font-family: "Montserrat", sans-serif;
        font-weight: 700;
        font-size: 34px;
        margin: 0 0 8px 0;
        letter-spacing: 0.2px;
    }

    .savings a {
        color: rgba(255, 255, 255, 0.95);
        font-weight: 600;
    }

    /* appointment card */
    .appt-card {
        background: white;
        border-radius: 12px;
        padding: 18px;
        margin-bottom: 18px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
    }

    .appt-card .label {
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.6px;
    }

    .appt-card h3 {
        margin: 8px 0 8px 0;
        font-size: 28px;
        font-weight: 800;
        font-family: "Montserrat", sans-serif;
    }

    .appt-card p {
        color: #7a7a7a;
        margin: 0 0 12px 0;
    }

    .schedule-btn {
        display: block;
        width: 100%;
        text-align: center;
        padding: 10px 12px;
        font-weight: 700;
        text-transform: uppercase;
        border-radius: 8px;
        border: 0;
        background: transparent;
        color: #1a5fbf;
    }

    /* small responsive tweaks */
    @media (max-width:420px) {

        .balance {
            font-size: 30px;
        }

        .savings h2 {
            font-size: 30px;
        }
    }