#shopPage {
  --gold: #f0a90b;
  --gold-dark: #c8860a;
  --parchment: #f1e9d7;
  --card-bg: #f7ead4;
  --card-border: #cba76a;
  --brown: #4a3418;
  --brown-soft: #6b4e28;
  --orange: #ee7d0e;

  width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vmin, 24px);
  padding: 3vmin;
  box-sizing: border-box;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at center, rgba(66, 44, 20, 0.35), rgba(30, 18, 8, 0.92)),
    #2a1a0c;
  font-family: var(--Rubik, "Rubik", "Cairo", "Tajawal", sans-serif);
}

.shop-topbar {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: linear-gradient(180deg, #fff7e2, #f4e2ba);
  border: 2px solid var(--gold-dark);
  border-radius: 999px;
  padding: 0.32em 1.15em 0.32em 0.5em;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  color: var(--brown);
  font-weight: 800;
  direction: ltr;
}
.shop-topbar img {
  width: clamp(22px, 3.4vmin, 32px);
  height: auto;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}
.shop-topbar .bal {
  font-size: clamp(1rem, 2.4vmin, 1.5rem);
  letter-spacing: 0.5px;
}
.shop-topbar .lbl {
  font-size: clamp(0.68rem, 1.5vmin, 0.95rem);
  font-weight: 700;
  opacity: 0.7;
  padding-inline-start: 0.15em;
}

.shop-panel {
  position: relative;
  width: min(94vw, 880px);
  max-width: 100%;
  min-width: 0;
  background: url(../images/shop/frame.png) no-repeat center / 100% 100%;
  padding: 8.2% 4.6% 9.5%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.55));
}

.shop-close {
  position: absolute;
  top: -2.2%;
  right: -1.4%;
  width: 8.4%;
  aspect-ratio: 1;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
  z-index: 5;
}
.shop-close .gem {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.4));
}
.shop-close .x {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 46%;
  height: 46%;
  object-fit: contain;
}
.shop-close:hover { transform: scale(1.07); }
.shop-close:active { transform: scale(0.94); }

.shop-grid {
  flex: 1;
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(172px, auto);
  gap: clamp(8px, 1.7%, 18px);
  min-height: 0;
}

.pkg-wide {
  grid-column: 1 / -1;
}
.pkg-wide .pkg-main {
  justify-content: center;
  gap: clamp(24px, 8vw, 90px);
}

.pkg {
  position: relative;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: clamp(8px, 1.4vmin, 14px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.pkg-main {
  position: relative;
  flex: 1;
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(6px, 1.4vmin, 14px) clamp(8px, 1.8vmin, 16px) clamp(4px, 1vmin, 10px);
  gap: 4px;
  min-height: 0;
}

.pkg-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(4px, 1vmin, 9px);
  z-index: 2;
}

.pkg-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  background: #fff;
  border: 1px solid #e6dcc7;
  border-radius: 999px;
  padding: 0.18em 0.7em 0.18em 0.28em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), inset 0 1px 0 #fff;
}
.pkg-pill img {
  width: clamp(16px, 2.6vmin, 26px);
  height: clamp(16px, 2.6vmin, 26px);
  object-fit: contain;
  flex: none;
}
.pkg-pill span {
  font-weight: 800;
  color: var(--brown);
  font-size: clamp(0.8rem, 2vmin, 1.35rem);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.pkg-bonus {
  font-weight: 700;
  color: var(--brown-soft);
  font-size: clamp(0.7rem, 1.6vmin, 1.05rem);
  padding-inline-start: 0.4em;
  white-space: nowrap;
}

.pkg-visual {
  flex: none;
  width: 42%;
  max-width: 130px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pkg-visual img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.25));
}

.badge {
  position: absolute;
  left: 54%;
  bottom: 24%;
  transform: translate(-50%, 50%) rotate(-8deg);
  width: clamp(30px, 5.6vmin, 52px);
  aspect-ratio: 1;
  background: var(--orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: clamp(0.6rem, 1.5vmin, 1rem);
  z-index: 3;
  clip-path: polygon(
    50% 0%, 61% 18%, 79% 10%, 76% 30%, 96% 30%, 82% 46%,
    100% 60%, 79% 62%, 85% 82%, 64% 76%, 61% 97%, 50% 80%,
    39% 97%, 36% 76%, 15% 82%, 21% 62%, 0% 60%, 18% 46%,
    4% 30%, 24% 30%, 21% 10%, 39% 18%
  );
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}

.pkg-foot {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(3px, 0.8vmin, 8px) clamp(8px, 1.8vmin, 16px);
  background: rgba(120, 90, 45, 0.09);
  border-top: 2px solid rgba(120, 90, 45, 0.28);
}
.pkg-price {
  font-weight: 800;
  color: var(--brown);
  font-size: clamp(0.85rem, 2.1vmin, 1.4rem);
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.pkg-price .cur {
  font-size: 0.72em;
  font-weight: 700;
  opacity: 0.75;
}
.buy-btn {
  border: none;
  background: url(../images/shop/buy-btn.png) no-repeat center / 100% 100%;
  width: clamp(34px, 5.4vmin, 52px);
  height: clamp(26px, 4.2vmin, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.1s ease;
}
.buy-btn img {
  width: 62%;
  height: 62%;
  object-fit: contain;
}
.buy-btn:hover { filter: brightness(1.08); }
.buy-btn:active { transform: scale(0.92); }

@media (max-width: 620px) {
  .shop-panel {
    aspect-ratio: auto;
    padding: 12% 5% 14%;
  }
  .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(128px, auto);
    gap: 8px;
  }
  .pkg-visual { width: 40%; }
}

@media (max-width: 480px) {
  .shop-panel { padding: 15% 6% 16%; }
  .shop-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(96px, auto);
  }
  .pkg-visual { width: 34%; }
}

@media (max-width: 380px) {
  .pkg-main { padding: 8px 10px 6px; }
  .pkg-foot { padding: 4px 10px; }
  .pkg-pill span { font-size: 0.9rem; }
}

/* ===================== Payment modal ===================== */
.pay-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  font-family: var(--Rubik, "Rubik", "Cairo", sans-serif);
}
.pay-modal.open { display: flex; }
.pay-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 6, 2, 0.72);
  backdrop-filter: blur(2px);
}
.pay-box {
  position: relative;
  width: min(94vw, 420px);
  max-height: 92svh;
  overflow-y: auto;
  background: linear-gradient(180deg, #fbf3e0, #f2e4c6);
  border: 3px solid #e0a92a;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  padding: clamp(18px, 4vmin, 30px);
  color: #4a3418;
  text-align: center;
}
.pay-x {
  position: absolute;
  top: 8px;
  inset-inline-end: 12px;
  background: none;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  color: #9a7b4a;
  cursor: pointer;
}
.pay-x:hover { color: #4a3418; }
.pay-title {
  font-weight: 900;
  font-size: clamp(1.1rem, 2.6vmin, 1.5rem);
  color: #5a3d12;
  margin-bottom: 14px;
}
.pay-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  direction: ltr;
  background: #fff;
  border: 1px solid #e6d6b3;
  border-radius: 999px;
  padding: 0.35em 1em;
  margin-bottom: 18px;
  font-weight: 800;
}
.pay-summary img { width: 24px; height: 24px; }
.pay-summary .pay-amt { color: #b8791a; }
.pay-methods {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.pay-method {
  border: 2px solid #d9c298;
  background: #fff;
  border-radius: 12px;
  padding: 0.7em 0.3em;
  font-weight: 800;
  font-size: clamp(0.72rem, 1.7vmin, 0.95rem);
  color: #4a3418;
  cursor: pointer;
  transition: all 0.12s ease;
}
.pay-method.vf.active { border-color: #e60000; background: #ffe9e9; color: #b30000; }
.pay-method.or.active { border-color: #ff7900; background: #fff0e0; color: #c85f00; }
.pay-method.et.active { border-color: #4caf3f; background: #e9f7e6; color: #2f7a26; }
.pay-method:hover { transform: translateY(-2px); }
.pay-field {
  display: block;
  text-align: start;
  margin-bottom: 12px;
}
.pay-field > span {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 5px;
  color: #6b4e28;
}
.pay-field input {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #d9c298;
  border-radius: 10px;
  padding: 0.7em 0.9em;
  font-size: 1.1rem;
  letter-spacing: 2px;
  text-align: center;
  direction: ltr;
  background: #fff;
  color: #4a3418;
}
.pay-field input:focus { outline: none; border-color: #e0a92a; }
.pay-error {
  color: #c0392b;
  font-size: 0.85rem;
  min-height: 1.1em;
  margin-bottom: 8px;
  font-weight: 700;
}
.pay-submit {
  width: 100%;
  border: 1px solid wheat;
  background: #57321c;
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  padding: 0.75em 1em;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.pay-submit:hover { background: #774325; }
.pay-submit:active { transform: scale(0.98); }
.pay-submit:disabled { opacity: 0.6; cursor: default; }
.pay-cancel {
  width: 100%;
  margin-top: 8px;
  background: none;
  border: none;
  color: #9a7b4a;
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.9rem;
}
.pay-instructions {
  background: #fff7e4;
  border: 1px dashed #e0a92a;
  border-radius: 10px;
  padding: 0.9em 1em;
  font-size: clamp(0.85rem, 2vmin, 1.05rem);
  line-height: 1.7;
  margin-bottom: 16px;
}
.pay-instructions b { color: #b8791a; font-size: 1.15em; }
.pay-spinner {
  width: 42px;
  height: 42px;
  margin: 6px auto 12px;
  border: 4px solid #e6d6b3;
  border-top-color: #e0a92a;
  border-radius: 50%;
  animation: paySpin 0.9s linear infinite;
}
@keyframes paySpin { to { transform: rotate(360deg); } }
.pay-status {
  font-weight: 700;
  color: #6b4e28;
  margin-bottom: 16px;
  min-height: 1.2em;
}
.pay-done {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #4caf3f;
  color: #fff;
  font-size: 2.2rem;
  line-height: 64px;
  box-shadow: 0 6px 16px rgba(76, 175, 63, 0.5);
}