:root {
  --allty-blue-bg: #00197e;
}

body.theme-dark {
  --allty-blue-bg: #fefd02;
}

body.theme-yellow,
body.theme-cyan,
body.theme-red {
  --allty-blue-bg: #000000;
}

.payment-contaner {
  width: 100%;
}

.payment-wrapper-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  max-width: 1440px;
  padding: 50px 100px;
  text-align: center;
  margin: 0 auto;
}

/* ===============================
   PLAN BOX LAYOUT
================================ */
.plan-boxes {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 20px;
}

/* ===============================
   BASE PLAN CARD (LEFT & RIGHT)
================================ */
.basic-plan {
  display: flex;
  flex-direction: column;
  gap: 38px;
  width: 396px;
  background: var(--standerd-white);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  text-align: center;
}

/* ===============================
   PLAN TEXT
================================ */
.plan-txt {
  display: flex;
  flex-direction: column;
  text-transform: capitalize;
  gap: 10px;
}

.plan-txt h3 {
  font-size: 1.667rem;
}
/* ===============================
   PRICE
================================ */
.plan-price {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-price p {
  font-size: 48px;
  font-weight: 600;
  line-height: 58px;
}
.plan-price span {
  font-size: 16px;
  font-weight: 500;
  color: #666666;
}

/* ===============================
   BUTTON (DEFAULT)
================================ */
.plan-price button {
  width: 100%;
  padding: 14px 0;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid #00197e;
  background: #ffffff;
  color: #00197e;
  text-transform: capitalize;
  transition: all 0.2s ease;
}

.plan-price button:hover {
  background-color: #00197e;
  color: #ffffff;
}

/* ===============================
   FEATURES
================================ */
.plan-dtls {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 33px;
  text-align: left;
}

.dtls-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dtls-item svg {
  flex-shrink: 0;
}

.dtls-item p {
  font-size: 18px;
}

/* ===============================
   MOST POPULAR (CENTER CARD)
================================ */

.popular-plan {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  padding: 5px;
  background-color: var(--allty-blue-bg);
  width: 80%;
  max-width: 406px;
}
/* TOP BAR — SAME WIDTH AS CARD */
.popular-txt {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  width: 90%;
  max-width: 356px;
  height: 56px;
  padding: 2px 20px;
  border: 3px solid var(--standerd-white);
  color: var(--standerd-white);
  border-radius: 8px;
  font-size: 20px;
  text-transform: capitalize;
}

/* CENTER CARD FRAME */
.popular-plan .basic-plan {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

/* CENTER BUTTON — FILLED */
.popular-plan .plan-price button {
  background: #00197e;
  color: #ffffff;
}

.popular-plan .plan-price button:hover {
  background-color: #ffffff;
  color: #000000;
}

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

@media screen and (max-width: 1280.98px) {
  .payment-wrapper-container {
    padding: 50px 40px;
  }
}

@media screen and (max-width: 1280.98px) {
  .plan-boxes {
    flex-wrap: wrap;
    justify-content: center; /* Centers the item in the second row */
    gap: 20px;
  }

  /* 1. The Basic Plan (First Item) - Stays Top Left */
  .plan-boxes > :nth-child(1) {
    order: 1;
    flex: 0 0 calc(50% - 20px); /* Takes half width */
    max-width: 396px;
  }

  /* 2. The Premium Plan (Third Item) - Moves to Top Right */
  .plan-boxes > :nth-child(3) {
    order: 2;
    flex: 0 0 calc(50% - 20px); /* Takes half width */
    max-width: 396px;
  }

  /* 3. The Popular Plan (Middle Item) - Drops to Bottom Center */
  .popular-plan {
    order: 3;
  }
}

@media (max-width: 1024.98px) {
  .payment-wrapper-container h2 {
    font-weight: 600;
    font-size: 2.286rem;
  }
}
/* --- Mobile Layout (Standard Stack) --- */
@media (max-width: 750px) {
  .payment-wrapper-container {
    padding: 36px 24px;
  }
  .plan-boxes {
    width: 100%;
    flex-direction: column;
    gap: 24px;
  }
  .basic-plan {
    width: 100%;
  }
  .plan-price button {
    width: 90%;
    margin: 0 auto;
  }
  /* Reset order for mobile so it goes back to 1, 2, 3 vertical */
  .plan-boxes > :nth-child(1),
  .plan-boxes > :nth-child(3),
  .popular-plan {
    order: unset;
    flex: 1;
    width: 100%;
    max-width: 100%;
  }
  .plan-txt p {
    font-size: 1.28rem;
  }
}

/* --- Mobile Layout (Small Phones) --- */
@media (max-width: 480px) {
  .payment-wrapper-container h2 {
    font-size: 2.5rem;
  }
  .plan-txt p {
    font-size: 1.333rem;
  }
}