/* ---------------------------------------------------------------------------
   Mahshad Eshghi — "Porcelain" (design 1a)
   Layout/appearance knobs that are meant to be edited live in config.php.
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  background: #f7f3ef;
  color: #2c2622;
  font-family: 'Vazirmatn', 'Tahoma', system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; }

@keyframes drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-3%); }
}

/* --- background collage ---------------------------------------------------- */

.backdrop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.collage {
  position: absolute;
  inset: -8% -2%;
  display: flex;
  gap: 8px;
  opacity: var(--bg-opacity, .54);
  filter: saturate(.62) contrast(.97);
  animation: drift 40s ease-in-out infinite alternate;
}

.collage__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.collage__col img {
  width: 100%;
  display: block;
  border-radius: 6px;
}

.scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 70% at 50% 42%,
    rgba(247, 243, 239, var(--scrim-center, .84)) 0%,
    rgba(247, 243, 239, var(--scrim-mid, .62)) 55%,
    rgba(247, 243, 239, var(--scrim-edge, .36)) 100%);
}

/* Four columns is the phone composition; wider screens get the extra columns. */
@media (max-width: 699px) {
  .collage__col--wide { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .collage { animation: none; }
}

/* --- content --------------------------------------------------------------- */

.stage {
  position: relative;
  z-index: 1;
  container-type: inline-size;
  width: min(100%, 460px);
  margin-inline: auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 4cqw, 26px);
  padding: clamp(24px, 6cqw, 40px);
  padding-top: max(clamp(24px, 6cqw, 40px), env(safe-area-inset-top));
  padding-bottom: max(clamp(24px, 6cqw, 40px), env(safe-area-inset-bottom));
}

/* Short screens (older phones, landscape): tighten the rhythm rather than
   shrink the type, so everything still lands on one screen. */
@media (max-height: 700px) {
  .stage {
    gap: clamp(10px, 3cqw, 20px);
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}

.avatar {
  width: var(--profile-size, 128px);
  height: var(--profile-size, 128px);
  object-fit: cover;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(44, 38, 34, .18),
    0 0 0 9px rgba(255, 255, 255, .6),
    0 18px 38px -16px rgba(44, 38, 34, .5);
}

.identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.identity__role {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Vazirmatn', serif;
  font-size: clamp(12px, 3cqw, 15px);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: #9a8d81;
}

.identity__name {
  margin: 0;
  font-size: clamp(37px, 9.8cqw, 50px);
  font-weight: 500;
  letter-spacing: -.01em;
}

.identity__tagline {
  margin: 0;
  font-size: clamp(16px, 4cqw, 19px);
  font-weight: 300;
  color: #6c625a;
}

.rule {
  width: clamp(28px, 8cqw, 44px);
  height: 1px;
  background: #c9bdb1;
}

/* --- services -------------------------------------------------------------- */

.services {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 2.4cqw, 12px);
}

.service {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.service img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(44, 38, 34, .10),
    0 8px 18px -12px rgba(44, 38, 34, .5);
}

.service span {
  font-size: clamp(12px, 3.1cqw, 14px);
  color: #5d544c;
  text-align: center;
  line-height: 1.35;
}

/* --- actions --------------------------------------------------------------- */

.actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2.4cqw, 12px);
  margin-top: clamp(2px, 2cqw, 10px);
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 99px;
  padding: clamp(13px, 3.4cqw, 18px) 18px;
  font-size: clamp(16px, 4.3cqw, 20px);
  transition: background-color .2s ease, opacity .2s ease;
}

.btn--primary {
  background: #2c2622;
  color: #f7f3ef;
  font-weight: 500;
}

.btn--primary:hover { background: #463c35; }

.btn__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(26px, 6.4cqw, 32px);
  height: clamp(26px, 6.4cqw, 32px);
  border-radius: 50%;
  background: #f7f3ef;
  flex: none;
}

.btn__badge img { width: 76%; height: 76%; }

.btn--ghost {
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(44, 38, 34, .14);
  font-weight: 400;
}

.btn--ghost:hover { background: #fff; }

.icon {
  width: clamp(17px, 4.2cqw, 21px);
  height: clamp(17px, 4.2cqw, 21px);
}

.row {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(8px, 2.4cqw, 12px);
}

.tile {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(44, 38, 34, .12);
  border-radius: 20px;
  padding: 10px 12px;
  overflow: hidden;
  font: inherit;
  color: inherit;
  transition: background-color .2s ease;
}

.tile:hover { background: #fff; }

.tile--card {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.icon--card { width: clamp(24px, 6cqw, 30px); height: auto; }

.tile__text {
  font-size: clamp(12px, 3cqw, 13.5px);
  line-height: 1.5;
  color: #5d544c;
  text-align: center;
}

.tile--map .tile__text { text-align: start; }

/* --- map thumbnail --------------------------------------------------------- */

.map {
  position: relative;
  width: var(--map-box, 72px);
  height: var(--map-box, 72px);
  border-radius: 13px;
  overflow: hidden;
  flex: none;
  background: #e8e4df;
}

.map__tiles {
  position: absolute;
  top: 0;
  left: 0;
  width: 768px;
  height: 768px;
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(3, 256px);
  grid-template-rows: repeat(3, 256px);
  transform-origin: 0 0;
  filter: saturate(.55);
}

.map__tiles img { width: 256px; height: 256px; display: block; }

.map__pin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #e07a5f;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}

/* --- attribution ----------------------------------------------------------- */

.attrib {
  margin: 2px 0 0;
  font-size: 9px;
  letter-spacing: .02em;
  color: rgba(93, 84, 76, .5);
  direction: ltr;
}

/* --- card overlay ---------------------------------------------------------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  background: rgba(28, 24, 21, .42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}

.overlay[hidden] { display: none; }

.overlay__panel {
  width: min(100%, 380px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: auto;
}

/* --- the card itself ------------------------------------------------------- */

.bankcard {
  position: relative;
  aspect-ratio: 1.586;          /* ISO/IEC 7810 ID-1 — a real card's proportions */
  container-type: inline-size;
  width: 100%;
  font: inherit;
  text-align: start;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
  border-radius: 18px;
  padding: clamp(15px, 5.5%, 22px);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 140% at 88% 8%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(145deg, #fdf8ee 0%, #f4e6c8 42%, #e8d3a6 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 0 0 1px rgba(151, 122, 61, .22),
    0 24px 48px -18px rgba(44, 38, 34, .6);
  overflow: hidden;
  color: #3a2f22;
}

.bankcard:active { transform: scale(.985); }
.bankcard:focus-visible { outline: 2px solid #f7f3ef; outline-offset: 3px; }
.bankcard[disabled] { cursor: default; }

/* “کپی شد ✓” confirmation, centred on the card face */
.bankcard__toast {
  position: absolute;
  inset: auto 0 44%;
  margin-inline: auto;
  width: fit-content;
  padding: 7px 16px;
  border-radius: 99px;
  background: rgba(44, 38, 34, .88);
  color: #f7f3ef;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  z-index: 2;
}

.bankcard__toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* soft sheen across the face */
.bankcard::after {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 120%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 58%);
  pointer-events: none;
}

.bankcard__head {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.bankcard__logo {
  height: clamp(40px, 15cqw, 54px);
  width: auto;
  object-fit: contain;
}

.bankcard__bank {
  font-size: clamp(12px, 4cqw, 14px);
  font-weight: 600;
  color: #8f1d1d;
  letter-spacing: .01em;
}

.bankcard__chip {
  width: clamp(29px, 10.5cqw, 38px);
  height: auto;
  margin-top: auto;
  align-self: flex-end;   /* RTL cross-end = the left side of the card */
}

.bankcard__number {
  direction: ltr;
  text-align: left;
  margin-top: 10px;
  font-size: clamp(17px, 6cqw, 21px);
  font-weight: 500;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: #2f2619;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
  /* selectable even inside the button, so long-press → Copy stays possible */
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

.bankcard__number::selection { background: rgba(44, 38, 34, .22); }

.bankcard__foot {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.bankcard__holder {
  font-size: clamp(12px, 4cqw, 14px);
  font-weight: 500;
  color: #4a3d2c;
}

.bankcard__label {
  font-size: clamp(9px, 3cqw, 11px);
  color: rgba(74, 61, 44, .62);
}

.overlay__copy {
  align-self: center;
  background: #2c2622;
  color: #f7f3ef;
  border: 0;
  border-radius: 99px;
  padding: 10px 20px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.overlay__copy:hover { background: #463c35; }
.overlay__copy:active { transform: scale(.98); }

.overlay__hint {
  margin: -6px 0 0;
  text-align: center;
  font-size: 11px;
  color: rgba(247, 243, 239, .72);
}

/* Visible to screen readers only — announces the copy result. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}