/* =============================================
   AMEX-STYLE MEMBERSHIP CARDS
   Uses: Bootstrap 4, Font Awesome 4.7, Animate.css, Roboto
   ============================================= */

/* ---------- Page / Section Wrapper ---------- */
.amex-section {
  background: #1a1a2e;
  padding: 80px 0 100px;
  position: relative;
  overflow: hidden;
}

.amex-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(205,127,50,0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 50%, rgba(180,180,180,0.06) 0%, transparent 55%);
  pointer-events: none;
}

/* ---------- Heading ---------- */
.amex-heading {
  text-align: center;
  margin-bottom: 14px;
}

.amex-heading h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  color: #ffffff;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.amex-heading h2 span {
  color: #c9a84c;
}

.amex-heading .subtitle {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0;
}

/* ---------- Limited Badge ---------- */
.amex-limited-badge {
  display: inline-block;
  background: linear-gradient(90deg, #e94560, #c0392b);
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  padding: 6px 22px;
  border-radius: 50px;
  margin-bottom: 55px;
  box-shadow: 0 4px 18px rgba(233,69,96,0.45);
  animation: badgePulse 2.2s infinite;
}

@keyframes badgePulse {
  0%   { box-shadow: 0 0 0 0   rgba(233,69,96,0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(233,69,96,0);   }
  100% { box-shadow: 0 0 0 0   rgba(233,69,96,0);    }
}

/* ============================================================
   BASE CARD SHELL  (credit-card proportions  85.6 × 53.98 mm)
   We use aspect-ratio + max-width to keep it card-shaped.
   ============================================================ */
.amex-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1.586 / 1;          /* standard credit-card ratio */
  border-radius: 18px;
  overflow: hidden;
  margin: 0 auto 30px;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(.25,.8,.25,1),
              box-shadow 0.4s cubic-bezier(.25,.8,.25,1);
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.amex-card:hover {
  transform: perspective(900px) rotateY(-6deg) rotateX(3deg) scale(1.04);
}

/* ---- shared inner layout ---- */
.amex-card-inner {
  position: absolute;
  inset: 0;
  padding: 22px 26px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ---- noise/grain texture overlay ---- */
.amex-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: cover;
  pointer-events: none;
  border-radius: 18px;
  opacity: 0.55;
}

/* ---- shine sweep on hover ---- */
.amex-card .card-shine {
  position: absolute;
  top: -100%;
  left: -75%;
  width: 50%;
  height: 300%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.18) 50%,
    transparent 60%
  );
  transform: skewX(-15deg);
  transition: left 0.6s ease, top 0.6s ease;
  pointer-events: none;
  z-index: 10;
}

.amex-card:hover .card-shine {
  left: 130%;
  top: -100%;
}

/* ============================================================
   TOP ROW  — logo + chip
   ============================================================ */
.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* Amex-style wordmark */
.card-logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.card-logo .logo-main {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.card-logo .logo-sub {
  font-size: 0.48rem;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: 2px;
}

/* EMV chip */
.card-chip {
  width: 38px;
  height: 28px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.card-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 5px;
}

.card-chip::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 55%;
  border-radius: 3px;
  border: 1.5px solid rgba(0,0,0,0.25);
}

/* ============================================================
   MIDDLE ROW  — type badge + contactless
   ============================================================ */
.card-middle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-type-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 30px;
  border: 1.5px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(4px);
}

/* contactless icon (3 arcs) */
.card-contactless {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0.6;
}

.card-contactless span {
  display: block;
  border-radius: 50%;
  border-style: solid;
  border-color: transparent;
}

.card-contactless span:nth-child(1) { width:8px;  height:8px;  border-width:1.5px; }
.card-contactless span:nth-child(2) { width:14px; height:14px; border-width:1.5px; }
.card-contactless span:nth-child(3) { width:20px; height:20px; border-width:1.5px; }

/* ============================================================
   BOTTOM ROW  — plan name + member since + network logo
   ============================================================ */
.card-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.card-info {}

.card-plan-name {
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.1;
}

.card-plan-sub {
  font-size: 0.52rem;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.65;
  margin-top: 3px;
}

/* Amex centurion-style silhouette (CSS-only) */
.card-network {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.55;
}

.card-network .centurion {
  font-size: 1.6rem;
  line-height: 1;
}

.card-network .net-label {
  font-size: 0.38rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* ============================================================
   CARD COLOUR THEMES
   ============================================================ */

/* ---- BRONZE (Type 1 — Starter) ---- */
.amex-card.bronze {
  background: linear-gradient(
    135deg,
    #3d1f00 0%,
    #7a4010 20%,
    #cd7f32 45%,
    #a0522d 65%,
    #6b3a1f 85%,
    #3d1f00 100%
  );
  box-shadow:
    0 20px 50px rgba(139,69,19,0.55),
    inset 0 1px 0 rgba(255,200,120,0.3);
}

.amex-card.bronze:hover {
  box-shadow:
    0 30px 70px rgba(139,69,19,0.7),
    inset 0 1px 0 rgba(255,200,120,0.3);
}

.amex-card.bronze .card-logo .logo-main,
.amex-card.bronze .card-logo .logo-sub,
.amex-card.bronze .card-plan-name,
.amex-card.bronze .card-plan-sub {
  color: #ffe0b0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.amex-card.bronze .card-chip::before {
  background: linear-gradient(135deg, #e8a060, #c07030, #e8a060);
}

.amex-card.bronze .card-chip::after {
  border-color: rgba(80,40,0,0.4);
}

.amex-card.bronze .card-type-badge {
  color: #ffe0b0;
  border-color: rgba(255,200,120,0.5);
  background: rgba(0,0,0,0.2);
}

.amex-card.bronze .card-contactless span {
  border-right-color: #ffe0b0;
}

.amex-card.bronze .card-network {
  color: #ffe0b0;
}

/* ---- GOLD (Type 2 — Standard) ---- */
.amex-card.gold {
  background: linear-gradient(
    135deg,
    #5c4200 0%,
    #b8860b 20%,
    #ffd700 45%,
    #daa520 65%,
    #b8860b 85%,
    #5c4200 100%
  );
  box-shadow:
    0 20px 50px rgba(184,134,11,0.55),
    inset 0 1px 0 rgba(255,255,180,0.4);
}

.amex-card.gold:hover {
  box-shadow:
    0 30px 70px rgba(184,134,11,0.7),
    inset 0 1px 0 rgba(255,255,180,0.4);
}

.amex-card.gold .card-logo .logo-main,
.amex-card.gold .card-logo .logo-sub,
.amex-card.gold .card-plan-name,
.amex-card.gold .card-plan-sub {
  color: #3d2800;
  text-shadow: 0 1px 2px rgba(255,255,200,0.4);
}

.amex-card.gold .card-chip::before {
  background: linear-gradient(135deg, #ffe066, #c9a800, #ffe066);
}

.amex-card.gold .card-chip::after {
  border-color: rgba(80,60,0,0.35);
}

.amex-card.gold .card-type-badge {
  color: #3d2800;
  border-color: rgba(80,60,0,0.4);
  background: rgba(255,255,255,0.2);
}

.amex-card.gold .card-contactless span {
  border-right-color: #3d2800;
}

.amex-card.gold .card-network {
  color: #3d2800;
}

/* ---- PLATINUM (Type 3 — Professional) ---- */
.amex-card.platinum {
  background: linear-gradient(
    135deg,
    #5a5a5a 0%,
    #b0b0b0 20%,
    #e8e8e8 45%,
    #c0c0c0 65%,
    #909090 85%,
    #5a5a5a 100%
  );
  box-shadow:
    0 20px 50px rgba(100,100,100,0.6),
    inset 0 1px 0 rgba(255,255,255,0.5);
}

.amex-card.platinum:hover {
  box-shadow:
    0 30px 70px rgba(100,100,100,0.75),
    inset 0 1px 0 rgba(255,255,255,0.5);
}

.amex-card.platinum .card-logo .logo-main,
.amex-card.platinum .card-logo .logo-sub,
.amex-card.platinum .card-plan-name,
.amex-card.platinum .card-plan-sub {
  color: #1a1a1a;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}

.amex-card.platinum .card-chip::before {
  background: linear-gradient(135deg, #e0e0e0, #a0a0a0, #e0e0e0);
}

.amex-card.platinum .card-chip::after {
  border-color: rgba(0,0,0,0.2);
}

.amex-card.platinum .card-type-badge {
  color: #1a1a1a;
  border-color: rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.3);
}

.amex-card.platinum .card-contactless span {
  border-right-color: #1a1a1a;
}

.amex-card.platinum .card-network {
  color: #1a1a1a;
}

/* ---- BLACK (Type 4 — Elite) ---- */
.amex-card.black {
  background: linear-gradient(
    135deg,
    #000000 0%,
    #1a1a1a 25%,
    #2d2d2d 50%,
    #1a1a1a 75%,
    #000000 100%
  );
  box-shadow:
    0 20px 50px rgba(0,0,0,0.85),
    inset 0 1px 0 rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
}

.amex-card.black:hover {
  box-shadow:
    0 30px 80px rgba(0,0,0,0.95),
    0 0 40px rgba(255,255,255,0.06),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

.amex-card.black .card-logo .logo-main,
.amex-card.black .card-logo .logo-sub,
.amex-card.black .card-plan-name,
.amex-card.black .card-plan-sub {
  color: #d4af37;
  text-shadow: 0 0 12px rgba(212,175,55,0.4);
}

.amex-card.black .card-chip::before {
  background: linear-gradient(135deg, #d4af37, #8b7320, #d4af37);
}

.amex-card.black .card-chip::after {
  border-color: rgba(0,0,0,0.4);
}

.amex-card.black .card-type-badge {
  color: #d4af37;
  border-color: rgba(212,175,55,0.45);
  background: rgba(0,0,0,0.4);
}

.amex-card.black .card-contactless span {
  border-right-color: #d4af37;
}

.amex-card.black .card-network {
  color: #d4af37;
}

/* ============================================================
   CARD LABEL BELOW CARD
   ============================================================ */
.card-label {
  text-align: center;
  margin-top: -10px;
  margin-bottom: 10px;
}

.card-label .plan-title {
  font-family: 'Roboto', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
  .amex-card {
    max-width: 340px;
  }
  .amex-heading h2 {
    font-size: 2rem;
  }
}

@media (max-width: 767.98px) {
  .amex-section {
    padding: 60px 0 80px;
  }
  .amex-heading h2 {
    font-size: 1.7rem;
  }
  .amex-card {
    max-width: 360px;
  }
}

@media (max-width: 575.98px) {
  .amex-heading h2 {
    font-size: 1.45rem;
  }
  .amex-card {
    max-width: 100%;
  }
}