/* =====================================================================
   TM PIRATES compatibility skin for Game Top-up Builder (GTB)

   GTB নিজের markup (.gtb-region-item / .gtb-amount-card) ব্যবহার করে,
   thwvsf swatch markup না — তাই মূল tmpirates CSS এখানে কাজ করে না।
   এই ফাইলটা GTB-এর নিজের ক্লাসগুলোর উপরেই tmpirates-এর সায়ান/পিংক/গোল্ড
   নিয়ন লুক বসিয়ে দেয়, যাতে দুটো প্লাগইন একই ভিজ্যুয়াল ভাষায় কথা বলে।

   frontend.css-এর পরে লোড হয় (enqueue dependency), তাই override করতে
   কোনো !important লাগেনি — normal CSS specificity/order-এই কাজ করছে।
   ===================================================================== */

.gtb-form-wrap {
  --gtb-cyan: #00f3ff;
  --gtb-pink: #bc13fe;
  --gtb-gold: #ffd700;
  --gtb-bg-card: #232928;
  --gtb-bg-card-2: #262c2b;
  --gtb-border-neon: rgba(255,255,255,0.08);

  /* GTB নিজের accent variable-গুলো এখানে re-map করা হচ্ছে, ফলে
     .gtb-amount-card.gtb-active, hover glow, ইত্যাদি সব জায়গায়
     স্বয়ংক্রিয়ভাবে tmpirates রঙ বসে যাবে — GTB-এর মূল CSS বদলানোর
     দরকার হয়নি। */
  --gtb-accent: var(--gtb-cyan);
  --gtb-accent-2: var(--gtb-pink);
  --gtb-accent-ring: rgba(0,243,255,0.22);
}

/* ---- Amount card: dark neon card, glow (no icon ball) ---- */
.gtb-amount-card {
  background: radial-gradient(120% 140% at 15% 0%, rgba(255,215,0,.08), transparent 55%), var(--gtb-bg-card) !important;
  border: 1.5px solid var(--gtb-border-neon) !important;
  border-radius: 12px !important;
  position: relative;
  overflow: visible !important;
}

.gtb-amount-card:hover,
.gtb-amount-card:focus {
  border-color: var(--gtb-cyan) !important;
  box-shadow: 0 0 14px rgba(0,243,255,.25) !important;
  animation: none !important; /* tmpirates ভাষায় bounce নেই, শুধু glow */
}

.gtb-amount-card.gtb-active {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--gtb-cyan), var(--gtb-pink)) !important;
  box-shadow: 0 0 18px rgba(0,243,255,.35), 0 0 26px rgba(188,19,254,.25) !important;
}

.gtb-amount-card.gtb-active .gtb-amount-name {
  color: #fff !important;
}

/* ---- Price wrap: normal (no discount) ---- */
.gtb-amount-price-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.gtb-amount-price {
  color: var(--gtb-cyan);
  background: rgba(0,243,255,.12);
}

.gtb-amount-card.gtb-active .gtb-amount-price {
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
}

/* ---- Discount: strikethrough old price + badge ---- */
.gtb-amount-price-old {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--gtb-muted, #8892a4);
  text-decoration: line-through;
  opacity: .75;
  white-space: nowrap;
}

.gtb-amount-card.gtb-active .gtb-amount-price-old {
  color: rgba(255,255,255,.75);
}

.gtb-discount-badge {
  position: absolute;
  top: -8px;
  left: -8px;
  background: linear-gradient(135deg, var(--gtb-pink), var(--gtb-gold));
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(188,19,254,.4);
  z-index: 3;
  letter-spacing: .2px;
}

/* ---- Region avatar: subtle neon ring instead of flat purple ---- */
.gtb-region-item:hover .gtb-region-avatar {
  border-color: var(--gtb-cyan) !important;
  box-shadow: 0 4px 14px rgba(0,243,255,.25) !important;
}

.gtb-region-item.gtb-active .gtb-region-avatar {
  border-color: var(--gtb-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0,243,255,.22), 0 4px 14px rgba(0,243,255,.25) !important;
}

.gtb-region-item.gtb-active .gtb-region-avatar::after {
  background: linear-gradient(135deg, var(--gtb-cyan), var(--gtb-pink)) !important;
}

/* ---- Field titles: cyan accent, like tmpirates section headers ---- */
.gtb-field-title {
  color: var(--gtb-cyan, inherit);
}

@media (max-width: 480px) {
  .gtb-amount-price-old {
    font-size: 9.5px;
  }
  .gtb-discount-badge {
    font-size: 9px;
    padding: 1.5px 6px;
  }
}