/* ============================================================
   MK Tech & Soft — v9 UI layer
   1. 3D "Created by" credit (footer)
   2. Ad slot polish + network status states
   No external libraries. Pure CSS 3D (perspective + layered
   text-shadow extrusion). Degrades to a readable flat label.
   ============================================================ */

/* ---------- 1. 3D CREATOR CREDIT ---------- */

.credit-3d {
  --c3-accent: #22d3ee;
  --c3-accent-2: #f59e0b;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem 1.05rem .6rem .7rem;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(34, 211, 238, .13) 0%, rgba(245, 158, 11, .06) 52%, rgba(34, 211, 238, .04) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(0, 0, 0, .22));
  border: 1px solid rgba(34, 211, 238, .32);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .08) inset,
    0 -1px 0 rgba(0, 0, 0, .45) inset,
    0 10px 26px -14px rgba(34, 211, 238, .55),
    0 2px 8px rgba(0, 0, 0, .5);
  perspective: 620px;
  transform-style: preserve-3d;
  transform: translateY(0);
  transition: transform .38s cubic-bezier(.22, 1, .36, 1), box-shadow .38s ease, border-color .38s ease;
  will-change: transform;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.credit-3d:hover,
.credit-3d:focus-visible {
  transform: translateY(-3px) rotateX(7deg);
  border-color: rgba(34, 211, 238, .58);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .12) inset,
    0 -1px 0 rgba(0, 0, 0, .4) inset,
    0 20px 40px -16px rgba(34, 211, 238, .8),
    0 0 0 1px rgba(34, 211, 238, .2),
    0 4px 12px rgba(0, 0, 0, .55);
}
.credit-3d:focus-visible { outline: 2px solid var(--c3-accent); outline-offset: 3px; }

/* 3D monogram cube — kept to a translate-only transform so the
   letterforms stay crisp (any rotateX/rotateY blurs small text). */
.credit-3d__cube {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #38bdf8 0%, #0891b2 68%, #075985 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .45) inset,
    0 -2px 0 rgba(0, 0, 0, .28) inset,
    0 1px 0 #0b3b4a,
    0 2px 0 #072c38,
    0 6px 12px -5px rgba(34, 211, 238, .6);
  transform: translateY(-1px);
  transition: transform .38s cubic-bezier(.22, 1, .36, 1), box-shadow .38s ease;
}
.credit-3d__cube i {
  font-style: normal;
  font-weight: 900;
  font-size: .72rem;
  line-height: 1;
  letter-spacing: .06em;
  color: #04222c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
.credit-3d:hover .credit-3d__cube {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .55) inset,
    0 -2px 0 rgba(0, 0, 0, .28) inset,
    0 2px 0 #0b3b4a,
    0 4px 0 #072c38,
    0 10px 20px -8px rgba(34, 211, 238, .8);
}

.credit-3d__txt {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
  min-width: 0;
}
.credit-3d__label {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8397ab;
}

/* 3D extruded name.
   Readability first: an all-bright face with the depth supplied by a SHORT
   1-2px extrusion plus one tight contact shadow. Long stacked shadows and a
dark gradient stop are what make small 3D text muddy, so neither is used. */
.credit-3d__name {
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: .03em;
  white-space: nowrap;
  color: #f4feff;
  text-shadow:
    0 1px 0 #0d4a5c,
    0 2px 3px rgba(0, 0, 0, .55);
  transform: translateZ(16px);
  transition: text-shadow .38s ease, transform .38s cubic-bezier(.22, 1, .36, 1), filter .38s ease;
}
.credit-3d:hover .credit-3d__name {
  transform: translateZ(30px);
  text-shadow:
    0 1px 0 #0d4a5c,
    0 2px 0 #0a3745,
    0 4px 7px rgba(0, 0, 0, .6),
    0 0 16px rgba(34, 211, 238, .55);
}

/* Gradient face over the extrusion. Every stop stays bright so the lower
   half of each letter never sinks into the dark background. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .credit-3d__name {
    background-image: linear-gradient(180deg, #ffffff 0%, #ecfeff 55%, #bae6fd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 0 rgba(9, 44, 56, .9))
            drop-shadow(0 2px 2px rgba(0, 0, 0, .5));
  }
  .credit-3d:hover .credit-3d__name {
    filter: drop-shadow(0 1px 0 rgba(9, 44, 56, .9))
            drop-shadow(0 2px 0 rgba(9, 44, 56, .6))
            drop-shadow(0 4px 7px rgba(0, 0, 0, .55))
            drop-shadow(0 0 14px rgba(34, 211, 238, .6));
  }
}

/* Small brand label beside the credit. Deliberately lighter in weight than
   the name so the hierarchy reads: name first, brand second. */
.credit-3d__brand {
  flex: 0 0 auto;
  align-self: center;
  margin-left: .3rem;
  padding: .22rem .58rem;
  border-radius: 999px;
  font-size: .57rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #33210a;
  background: linear-gradient(140deg, #fef3c7, #fbbf24 62%, #d97706);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .45) inset,
    0 -1px 0 rgba(120, 53, 15, .3) inset,
    0 2px 6px -3px rgba(245, 158, 11, .5);
  transform: translateZ(10px);
  transition: transform .38s cubic-bezier(.22, 1, .36, 1), box-shadow .38s ease;
  white-space: nowrap;
}
.credit-3d:hover .credit-3d__brand {
  transform: translateZ(18px) translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .5) inset,
    0 -1px 0 rgba(120, 53, 15, .3) inset,
    0 5px 12px -5px rgba(245, 158, 11, .7);
}

/* footer row must wrap gracefully once the credit is added */
.footer-bottom {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3, .75rem);
}
.footer-bottom .credit-3d { order: 3; flex: 0 0 auto; }
@media (min-width: 860px) {
  .footer-bottom .credit-3d { order: 2; margin-left: auto; margin-right: auto; }
  .footer-bottom .legal { order: 3; }
}

@media (max-width: 720px) {
  .credit-3d { width: 100%; justify-content: flex-start; padding: .58rem .8rem .58rem .62rem; gap: .5rem; }
  .credit-3d__name { font-size: .86rem; white-space: normal; }
  .credit-3d__brand { margin-left: auto; }
  .credit-3d__cube { width: 27px; height: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .credit-3d,
  .credit-3d:hover,
  .credit-3d:focus-visible { transform: none; transition: none; }
  .credit-3d__cube,
  .credit-3d:hover .credit-3d__cube,
  .credit-3d__name,
  .credit-3d:hover .credit-3d__name,
  .credit-3d__brand,
  .credit-3d:hover .credit-3d__brand { transform: none; transition: none; }
}

/* ---------- 2. AD SLOT STATES ---------- */

/* Reserves the slot box. Declared here so it applies on BOTH the blog pages
   (which also load blog.css) and the shop pages (which do not). */
.ad-slot {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px dashed var(--line-strong, rgba(120, 141, 163, .3));
  border-radius: var(--r, var(--r-sm, 12px));
  background: rgba(8, 13, 25, .6);
  color: var(--muted, #6b7f93);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: var(--s-5, 1.25rem) var(--s-4, 1rem);
  overflow: hidden;
}
/* One clear disclosure label on every slot box (blog.css already sets this,
   repeating it here keeps shop pages identical and avoids a double label). */
.ad-slot[data-ad]::before {
  content: "Advertisement";
  position: absolute;
  top: 8px;
  font-size: .68rem;
  letter-spacing: .14em;
  opacity: .6;
}
.ad-slot ins { display: block; width: 100%; }
.ad-slot--leader { min-height: 92px; margin: var(--s-5, 1.25rem) 0; }
.ad-slot--inline { min-height: 250px; margin: var(--s-6, 1.5rem) 0; }
.ad-slot--side { min-height: 250px; margin-bottom: var(--s-5, 1.25rem); }
.ad-slot--footer { min-height: 92px; margin-top: var(--s-7, 2rem); }

/* Hidden whenever no configured network is running. ads.js decides. */
.ad-slot--off { display: none !important; }

/* network tag shown on the placeholder box so it is obvious which
   network a slot is reserved for */
.ad-slot__tag {
  display: block;
  font-size: .6rem;
  letter-spacing: .14em;
  opacity: .75;
  margin-top: .3rem;
}

/* the injected network render target */
.ad-slot .ad-slot__mount { display: block; width: 100%; }
.ad-slot iframe { max-width: 100%; }

/* ---------- 3. PAYMENT DETAILS (v10) ---------- */

.pay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s-4, 1rem);
  margin-top: var(--s-5, 1.25rem);
}

.pay-card {
  border: 1px solid var(--line, rgba(148, 163, 184, .16));
  border-radius: var(--r, 14px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .16));
  padding: var(--s-4, 1rem) var(--s-4, 1rem) var(--s-3, .75rem);
}

.pay-card__h {
  margin: 0 0 .6rem;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent, #22d3ee);
}

.pay-line {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .5rem 0;
  border-top: 1px solid var(--line, rgba(148, 163, 184, .12));
}
.pay-line:first-of-type { border-top: 0; }

.pay-line__k {
  flex: 0 0 8.5rem;
  font-size: .78rem;
  color: var(--muted, #8798b5);
}

.pay-line__v {
  flex: 1 1 auto;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--text, #eef3ff);
  word-break: break-word;
}

.pay-line.is-pending .pay-line__v { color: var(--muted, #8798b5); font-weight: 500; }

.pay-line__tag {
  flex: 0 0 auto;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .22rem .5rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 165, 36, .4);
  background: rgba(245, 165, 36, .1);
  color: #fcd34d;
}

.copy-btn {
  flex: 0 0 auto;
  font: inherit;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: .34rem .6rem;
  border-radius: 8px;
  border: 1px solid rgba(34, 211, 238, .38);
  background: rgba(34, 211, 238, .1);
  color: #a5f3fc;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.copy-btn:hover {
  background: rgba(34, 211, 238, .2);
  border-color: rgba(34, 211, 238, .68);
  transform: translateY(-1px);
}
.copy-btn:focus-visible { outline: 2px solid var(--accent, #22d3ee); outline-offset: 2px; }

.pay-warn {
  margin-top: var(--s-5, 1.25rem);
  padding: .85rem 1rem;
  border-radius: var(--r, 14px);
  border: 1px solid rgba(245, 165, 36, .38);
  background: rgba(245, 165, 36, .08);
  color: #fcd34d;
  font-size: .86rem;
  line-height: 1.6;
}
.pay-warn b { color: #fde68a; }
.pay-warn a { color: #fff; text-decoration: underline; }

@media (max-width: 560px) {
  .pay-line__k { flex: 0 0 100%; }
  .pay-line__v { flex: 1 1 auto; }
  .copy-btn { width: 100%; text-align: center; }
}

/* Long CTA labels (e.g. "WhatsApp par order confirm karein — +92 ...") do not fit
   a 390px viewport as a single nowrap line; let them wrap instead of overflowing. */
.btn-wrap {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.45;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (max-width: 640px) {
  .btn-wrap { display: block; width: 100%; }
}