:root { --accent:#6f42c1; }
      body { background: #fff; color: #000000;}
      .hero { 
          color: #fff; }
      .card-validator { max-width: 980px; margin: -80px auto 0; }
      .result { min-height: 120px; }
      .logo-small { height:36px; object-fit:contain; }

      /* Hero fade and slide-in on load */
.hero {
  opacity: 0;
  background-color:white;
  transform: translateY(40px);
  animation: heroEnter 1.3s ease-out forwards;
}

@keyframes heroEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animate text separately for extra wow */
.hero h1 {
  opacity: 0;
  transform: translateY(20px);
  animation: textPop 1s ease-out forwards;
  animation-delay: 0.4s;
}

.hero p {
  opacity: 0;
  transform: translateY(20px);
  animation: textPop 1s ease-out forwards;
  animation-delay: 0.8s;
}

@keyframes textPop {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Button float-in and hover effect */
.hero .btn {
  opacity: 0;
  transform: translateY(20px);
  animation: buttonShow 1s ease-out forwards;
  animation-delay: 1.2s;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hero .btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(255,255,255,0.3);
}
@keyframes buttonShow {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Image float animation */
.hero img {
  opacity: 0;
  transform: scale(0.95) translateY(30px);
  animation: imagePop 1.2s ease-out forwards;
  animation-delay: 1.4s;
}
@keyframes imagePop {
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Continuous gentle floating effect */
.hero img {
  animation: imagePop 1.2s ease-out forwards, floatY 4s ease-in-out infinite;
  animation-delay: 1.4s, 2.6s;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Subtle background gradient shimmer */
/*.herocine {*/
/*  background: linear-gradient(120deg, #004aad, #007bff);*/
  /*background-size: 200% 200%;*/
/*  animation: gradientShift 8s ease infinite;*/
/*}*/
/*@keyframes gradientShift {*/
/*  0% { background-position: 0% 50%; }*/
/*  50% { background-position: 100% 50%; }*/
/*  100% { background-position: 0% 50%; }*/
/*}*/

        /*.herocine {*/
        /*  position: relative;*/
        /*  background: url('./giftcard.jpg') no-repeat center center/cover;*/
        /*  opacity: 1;*/
        /*  min-height: 90vh;*/
          /* color: #fff; */
        /*}*/


        /* .hero .overlay {
          position: absolute;
          inset: 0;
          /* background: rgba(0, 0, 0, 0.75); strong black overlay */
          /* z-index: 1; */
        /* } */ 

        /* glass morphism effect for the content box */
        .glass {
          background: rgba(0, 0, 0, 0.35); /* transparent black */
          backdrop-filter: blur(8px);       /* the glass blur */
          -webkit-backdrop-filter: blur(8px);
          border-radius: 15px;
          padding: 2rem;
          z-index: 2;
        }

      /* Card type grid */
      .card-type-grid { display:flex; flex-wrap:wrap; gap:0.75rem; }
      .card-type { width:130px; padding:0.5rem; border-radius:8px; border:1px solid #e9e9ef; background:#fff; text-align:center; cursor:pointer; }
      .card-type img { max-width:100%; max-height:48px; display:block; margin:0 auto 0.35rem; }
      .card-type.active { box-shadow:0 6px 18px rgba(111,66,193,0.12); border-color:rgba(111,66,193,0.35); }

      /* Chat widget
      #chatWidget { position:fixed; right:20px; bottom:20px; width:340px; max-height:520px; display:flex; flex-direction:column; border-radius:12px; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,0.12); }
      #chatHeader { background:var(--accent); color:#fff; padding:0.6rem 1rem; font-weight:600; }
      #chatMessages { padding:0.75rem; overflow:auto; background:#fafafa; flex:1; }
      .chat-msg { margin-bottom:0.5rem; padding:0.5rem 0.6rem; border-radius:8px; display:inline-block; max-width:80%; }
      .chat-msg.user { background:#e8eafe; margin-left:auto; }
      .chat-msg.bot { background:#fff; border:1px solid #eee; }
      #chatInputBox { padding:0.6rem; background:#fff; display:flex; gap:0.5rem; border-top:1px solid #eee; }

      footer { background:#fff; border-top:1px solid #e9ecef; }

      @media (max-width:600px) {
        .card-type { width:48%; }
        #chatWidget { width:92%; right:4%; }
      } */

          .modal-content {
      background-color: #111;
      color: #fff;
      border-radius: 15px;
      border: 1px solid #333;
    }
    .modal-dialog { max-width: 500px; margin: auto; }
    .modal.fade .modal-dialog {
      transform: scale(0.95) translateY(25px);
      transition: all 0.35s ease;
    }
    .modal.show .modal-dialog {
      transform: scale(1) translateY(0);
    }

    /* BUTTONS */
    .btn { border-radius: 10px; transition: all 0.3s ease; }
    .btn:hover { transform: translateY(-2px); }
    .btn-primary { background-color: #00b894; border: none; }
    .btn-outline-secondary { border-color: #555; color: #ddd; }
    .btn-outline-secondary:hover { background-color: #333; }

    /* INPUTS */
    input, select {
      background-color: #0f0f0f !important;
      color: #fff !important;
      border: 1px solid #333 !important;
    }
    input:focus, select:focus {
      border-color: #00b894 !important;
      box-shadow: none !important;
    }

    /* CARD DISPLAY GRID */
    .card {
      background: #0b0b0b;
      border: 1px solid #1c1c1c;
      border-radius: 12px;
      height: 100%;
      transition: all 0.4s ease;
      /* height: 320px; */
      display: flex;
      flex-direction: column;
      /* justify-content: space-between; */
      opacity: 0;
      transform: translateY(60px) scale(0.98);
      animation: supermanUp 0.8s ease forwards;
    }

    .card:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 0 25px rgba(0, 184, 148, 0.3);
    }

    /* Superman calm rise animation */
    @keyframes supermanUp {
      from { opacity: 0; transform: translateY(60px) scale(0.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .card img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: all 0.3s ease;
      filter: brightness(0.95);
    }
    .card img:hover { transform: scale(1.07); filter: brightness(1.1); }

    .card-body h6 { font-weight: 500; letter-spacing: 0.3px; }

    /* Smart Image Upload Box */
    .border-dashed {
      border: 2px dashed #444;
      border-radius: 10px;
      padding: 10px;
      transition: all 0.3s ease;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 130px;
      background: #0a0a0a;
    }
    .border-dashed:hover { border-color: #00b894; background-color: #111; }

    .img-preview {
      max-width: 180px;
      max-height: 110px;
      border-radius: 10px;
      display: none;
      object-fit: contain;
    }
    .preview-text { color: #777; font-size: 0.9rem; text-align: center; }

    /* Card thumb (small preview beside name) */
    .card-thumb {
      width: 55px;
      height: 35px;
      object-fit: contain;
      border-radius: 6px;
      border: 1px solid #555;
      background: #111;
      margin-right: 10px;
    }

    .purchase-img-preview {
      width: 100%;
      height: 160px;
      object-fit: contain;
      border-radius: 10px;
      background: #0b0b0b;
      border: 1px solid #222;
      margin-bottom: 12px;
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

    /* Smooth entry for all cards */
    .row-cols-md-3 > .col:nth-child(1) .card { animation-delay: 0.1s; }
    .row-cols-md-3 > .col:nth-child(2) .card { animation-delay: 0.2s; }
    .row-cols-md-3 > .col:nth-child(3) .card { animation-delay: 0.3s; }
    .row-cols-md-3 > .col:nth-child(4) .card { animation-delay: 0.4s; }
    .row-cols-md-3 > .col:nth-child(5) .card { animation-delay: 0.5s; }
    .row-cols-md-3 > .col:nth-child(6) .card { animation-delay: 0.6s; }
    .row-cols-md-3 > .col:nth-child(7) .card { animation-delay: 0.7s; }
    .row-cols-md-3 > .col:nth-child(8) .card { animation-delay: 0.8s; }
    

    /* Subtle navbar animation */
.navbar {
  animation: slideDown 0.8s ease-out;
}
@keyframes slideDown {
  from {transform: translateY(-100%);}
  to {transform: translateY(0);}
}