@import "https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap";@font-face {
  font-family: 'IRANSansX';
  src: url('/fonts/IranSansX/IRANSansX-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IRANSansX';
  src: url('/fonts/IranSansX/IRANSansX-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IRANSansX';
  src: url('/fonts/IranSansX/IRANSansX-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IRANSansX';
  src: url('/fonts/IranSansX/IRANSansX-DemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IRANSansX';
  src: url('/fonts/IranSansX/IRANSansX-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IRANSansX';
  src: url('/fonts/IranSansX/IRANSansX-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IRANSansX';
  src: url('/fonts/IranSansX/IRANSansX-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* ===== NAVBAR CSS VARIABLES ===== */
:root {
  --nav-fg: 0 0% 10%;
  --nav-muted: 0 0% 50%;
  --nav-accent: 220 80% 55%;
  --nav-accent-fg: 0 0% 100%;
  --nav-border: 0 0% 0%;
  --nav-glass: 0 0% 100%;
  --nav-glass-alpha: 0.95;
  --nav-border-alpha: 0.1;
  --nav-pill-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.55) 100%);
  --nav-pill-border: rgba(255, 255, 255, 0.6);
  --nav-pill-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  --nav-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.93) 100%);
  --nav-panel-border: rgba(0, 0, 0, 0.09);
  --nav-panel-shadow: 0 13.5px 28.5px rgba(15, 23, 42, 0.14);
  --nav-panel-blur: blur(2.25px) saturate(108%);
  --nav-lite-bg: rgba(255, 255, 255, 0.97);
  --nav-lite-border: rgba(0, 0, 0, 0.07);
  --nav-lite-shadow: 0 7.5px 18px rgba(15, 23, 42, 0.08);
  --nav-cat-bg-alpha: 0.02;
  --nav-cat-bg-color: 0 0% 0%;
}

html.dark {
  --nav-fg: 0 0% 95%;
  --nav-muted: 0 0% 60%;
  --nav-accent: 220 80% 55%;
  --nav-accent-fg: 0 0% 100%;
  --nav-border: 0 0% 100%;
  --nav-glass: 230 40% 12%;
  --nav-glass-alpha: 0.98;
  --nav-border-alpha: 0.1;
  --nav-pill-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
  --nav-pill-border: rgba(255, 255, 255, 0.15);
  --nav-pill-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
  --nav-panel-bg: linear-gradient(180deg, rgba(10, 16, 28, 0.95) 0%, rgba(15, 21, 34, 0.93) 100%);
  --nav-panel-border: rgba(255, 255, 255, 0.09);
  --nav-panel-shadow: 0 13.5px 30px rgba(0, 0, 0, 0.34);
  --nav-lite-bg: rgba(17, 23, 35, 0.97);
  --nav-lite-border: rgba(255, 255, 255, 0.07);
  --nav-lite-shadow: 0 7.5px 18px rgba(0, 0, 0, 0.18);
  --nav-cat-bg-alpha: 0.03;
  --nav-cat-bg-color: 0 0% 100%;
}

/* ===== NAVBAR ===== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 24px;
  background: transparent;
}

@media (max-width: 1179px) {
  .navbar {
    flex-direction: row-reverse;
    padding: 9px 12px;
  }
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.brand:hover {
  transform: translateY(-2px);
}

.brand img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.brand-text {
  font-size: 19.5px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-shadow:
    0 0 4.5px rgba(255, 255, 255, 0.7),
    0 0 9px rgba(255, 255, 255, 0.42),
    0 0 13.5px rgba(255, 255, 255, 0.18);
  transition: color 0.15s ease, text-shadow 0.15s ease;
}

html.dark .brand-text {
  color: #fff;
  text-shadow:
    0 0 4.5px rgba(0, 0, 0, 0.62),
    0 0 9px rgba(0, 0, 0, 0.34),
    0 0 13.5px rgba(0, 0, 0, 0.18);
}

@media (max-width: 1179px) {
  .brand {
    order: 1;
  }

  .brand img {
    width: 30px;
    height: 30px;
  }

  .brand-text {
    font-size: 12.75px;
  }
}

/* Pill */
.pill {
  position: absolute;
  left: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 525px;
  min-width: 0;
  height: 39px;
  padding: 0 12px;
  border-radius: 7499.25px;
  background: var(--nav-pill-bg);
  border: 0.75px solid var(--nav-pill-border);
  box-shadow: var(--nav-pill-shadow);
  backdrop-filter: blur(22.5px) saturate(160%);
  -webkit-backdrop-filter: blur(22.5px) saturate(160%);
  transform: translateX(-50%);
}

@media (min-width: 1180px) {
  .pill {
    display: flex;
  }
}

#nav-links {
  display: flex;
  align-items: center;
  gap: 3px;
  transition: opacity 0.16s ease, visibility 0.16s ease;
}

.pill.search-active #nav-links {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 4.5px;
  padding: 7.5px 13.5px;
  border: none;
  border-radius: 7499.25px;
  background: none;
  color: hsl(var(--nav-fg) / 0.85);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.15s ease, transform 0.15s ease;
}

.pill-link:hover,
.pill-link:focus-visible,
.mega.is-open > .pill-link,
.dropdown.is-open > .pill-link {
  background: transparent;
  color: hsl(var(--nav-fg));
}

.pill-link:focus-visible {
  outline: 2px solid hsl(var(--nav-accent) / 0.45);
  outline-offset: 2px;
}

.pill-link::before {
  content: '';
  position: absolute;
  right: 13.5px;
  left: 13.5px;
  bottom: 4.5px;
  height: 1.5px;
  border-radius: 749.25px;
  background: linear-gradient(90deg, #38bdf8 0%, #2563eb 100%);
  transform: scaleX(0);
  transform-origin: right center;
  opacity: 0;
  transition: transform 0.28s ease, opacity 0.18s ease;
  pointer-events: none;
}

.pill-link:hover::before,
.pill-link:focus-visible::before,
.pill-link.active::before,
.mega.is-open > .pill-link::before,
.dropdown.is-open > .pill-link::before {
  transform: scaleX(1);
  opacity: 1;
}


.pill-link svg {
  width: 12px;
  height: 12px;
  transition: transform 0.15s ease;
}

.pill-link:hover svg,
.pill-link:focus-visible svg,
.mega.is-open > .pill-link svg,
.dropdown.is-open > .pill-link svg {
  transform: translateY(1.5px);
}

/* Search mode inside pill */
.search-bar {
  position: absolute;
  inset: 0 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, visibility 0.16s ease;
}

.pill.search-active .search-bar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.search-bar input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: hsl(var(--nav-fg));
  font-family: inherit;
  font-size: 11.25px;
  font-weight: 500;
}

.search-bar input::placeholder {
  color: hsl(var(--nav-muted));
}

.search-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: hsl(var(--nav-muted));
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.search-close:hover,
.search-close:focus-visible {
  background: hsl(var(--nav-fg) / 0.1);
  color: hsl(var(--nav-fg));
}

/* Search results */
.search-results {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  left: 0;
  max-height: 300px;
  overflow-y: auto;
  padding: 10.5px;
  border-radius: 12px;
  z-index: 200;
  background: var(--nav-lite-bg);
  border: 0.75px solid var(--nav-lite-border);
  box-shadow: var(--nav-lite-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

.search-results.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  will-change: opacity, transform;
}

.search-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 9px;
  color: hsl(var(--nav-fg) / 0.85);
  font-size: 13.5px;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.search-result-item:hover,
.search-result-item:focus-visible,
.search-result-item.is-active {
  background: hsl(var(--nav-fg) / 0.05);
  color: hsl(var(--nav-fg));
}

.search-result-label {
  font-weight: 500;
}

.search-result-item .cat {
  flex-shrink: 0;
  font-size: 12px;
  color: hsl(var(--nav-muted));
}

.search-empty {
  padding: 18px 12px;
  text-align: center;
  color: hsl(var(--nav-muted));
  font-size: 13.5px;
}

/* Actions */
.actions {
  display: flex;
  align-items: center;
  gap: 7.5px;
  flex-shrink: 0;
}

@media (max-width: 1179px) {
  .actions {
    order: 3;
    flex-direction: row-reverse;
  }
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  border: 0.75px solid var(--nav-lite-border);
  background: var(--nav-lite-bg);
  color: hsl(var(--nav-fg) / 0.72);
  cursor: pointer;
  box-shadow: var(--nav-lite-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.action-btn:hover,
.action-btn:focus-visible {
  color: hsl(var(--nav-fg));
  transform: scale(1.04);
}

html:not(.dark) .action-btn {
  border-color: rgba(255, 255, 255, 0.54);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(30, 30, 30, 0.75);
}

html:not(.dark) .action-btn:hover,
html:not(.dark) .action-btn:focus-visible {
  background: rgba(255, 255, 255, 0.84);
  color: rgba(0, 0, 0, 0.9);
}

.action-btn.desktop {
  display: none;
}

@media (min-width: 1180px) {
  .action-btn.desktop {
    display: inline-flex;
  }
}

.action-btn.mobile {
  display: inline-flex;
}

@media (min-width: 1180px) {
  .action-btn.mobile {
    display: none;
  }
}

.download-btn {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border: none;
  border-radius: 7499.25px;
  background: linear-gradient(to bottom right, hsl(var(--nav-accent)), hsl(220 80% 40%));
  color: hsl(var(--nav-accent-fg));
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.download-btn:hover,
.download-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(37, 99, 235, 0.4);
}

@media (min-width: 1180px) {
  .download-btn {
    display: inline-flex;
  }
}

/* ===== DROPDOWN ===== */
.dropdown,
.mega {
  position: relative;
}

.dropdown-panel,
.mega-panel {
  contain: layout paint;
}

.dropdown-panel {
  background: var(--nav-lite-bg);
  border: 0.75px solid var(--nav-lite-border);
  box-shadow: var(--nav-lite-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.mega-panel {
  background: var(--nav-panel-bg);
  border: 0.75px solid var(--nav-panel-border);
  box-shadow: var(--nav-panel-shadow);
  backdrop-filter: var(--nav-panel-blur);
  -webkit-backdrop-filter: var(--nav-panel-blur);
}

.search-results,
.mobile-panel {
  contain: layout paint;
}

.dropdown-panel {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  min-width: 220px;
  padding: 8px;
  border-radius: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  z-index: 100;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.dropdown-bridge {
  position: absolute;
  bottom: -2px;
  left: -10px;
  right: -10px;
  height: 27px;
  transform: translateY(100%);
  z-index: 99;
}

.dropdown:is(:hover, :focus-within, .is-open) .dropdown-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  will-change: opacity, transform;
}

.dropdown-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 9px;
  border-radius: 10px;
  color: hsl(var(--nav-fg) / 0.85);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus-visible {
  background: hsl(var(--nav-accent) / 0.15);
  color: hsl(var(--nav-fg));
}

.dropdown-item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px hsl(var(--nav-accent) / 0.38);
}

.dropdown-item .lbl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}

.dropdown-item .dsc {
  padding-inline-start: 36px;
  font-size: 11px;
  color: hsl(var(--nav-muted));
}

.g2p-menu-icon {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 1px solid hsl(var(--nav-accent) / 0.14);
  border-radius: 9px;
  color: hsl(var(--nav-accent));
  background: linear-gradient(145deg, hsl(var(--nav-accent) / 0.13), hsl(190 85% 48% / 0.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.g2p-menu-icon svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.dark .g2p-menu-icon {
  border-color: hsl(var(--nav-accent) / 0.22);
  background: linear-gradient(145deg, hsl(var(--nav-accent) / 0.2), hsl(190 85% 48% / 0.1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ===== MEGA DROPDOWN ===== */
.mega-panel {
  position: absolute;
  top: calc(100% + 9px);
  right: 50%;
  display: flex;
  gap: 0;
  width: 780px;
  max-width: 95vw;
  padding: 14px;
  border-radius: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(50%) translateY(-8px);
  z-index: 100;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.mega:is(:hover, :focus-within, .is-open) .mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(50%) translateY(0);
  will-change: opacity, transform;
}

.mega-bridge {
  position: absolute;
  bottom: -2px;
  left: -20px;
  right: -20px;
  height: 27px;
  transform: translateY(100%);
  z-index: 99;
}

.mega-sidebar {
  width: 184px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 0.75px solid hsl(var(--nav-fg) / 0.1);
}

.mega-cat-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: hsl(var(--nav-fg) / 0.7);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.mega-cat-btn:hover,
.mega-cat-btn:focus-visible {
  background: hsl(var(--nav-accent) / 0.18);
  color: hsl(var(--nav-fg));
}

.mega-cat-btn:focus-visible,
.gift-subcat-btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px hsl(var(--nav-accent) / 0.38);
}

.mega-cat-btn.active {
  background: hsl(var(--nav-accent) / 0.12);
  color: hsl(var(--nav-fg));
  box-shadow: inset -2px 0 0 hsl(var(--nav-accent));
}

.mega-cat-btn.active:focus-visible {
  box-shadow: inset -2px 0 0 hsl(var(--nav-accent)), inset 0 0 0 1.5px hsl(var(--nav-accent) / 0.3);
}

.mega-cat-btn.active .g2p-menu-icon,
.mega-cat-btn:hover .g2p-menu-icon,
.mega-cat-btn:focus-visible .g2p-menu-icon {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, hsl(var(--nav-accent)), hsl(190 85% 42%));
}

.mega-content {
  flex: 1;
  min-height: 276px;
  height: min(312px, calc(100vh - 112px));
  max-height: 312px;
  overflow-y: auto;
  padding-left: 4px;
}

.mega-panel[data-active-category="main"] .mega-content,
.mega-panel[data-active-category="bills"] .mega-content,
.mega-panel[data-active-category="virtual"] .mega-content {
  min-height: 0;
  height: auto;
}

.mega-pane {
  display: none;
}

.mega-pane.is-active {
  display: block;
}

/* Main services */
.main-service {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding: 9px 10px;
  border: 0.75px solid hsl(var(--nav-fg) / 0.1);
  border-radius: 11px;
  background: hsl(var(--nav-cat-bg-color) / var(--nav-cat-bg-alpha));
  color: hsl(var(--nav-fg));
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.main-service:hover,
.main-service:focus-visible {
  background: hsl(var(--nav-accent) / 0.14);
  border-color: hsl(var(--nav-accent) / 0.28);
  transform: translateX(-4px);
}

.main-service .g2p-menu-icon--service {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}

.main-service .name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

/* Gift */
.mega-pane[data-pane="gift"] {
  height: 100%;
}

.gift-3col {
  display: flex;
  gap: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.gift-subcats {
  contain: layout paint style;
  width: 170px;
  max-height: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 8px;
  padding: 2px 2px 2px 8px;
  border-left: 0.75px solid hsl(var(--nav-fg) / 0.1);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.gift-subcat-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: hsl(var(--nav-fg) / 0.7);
  font-family: inherit;
  font-size: 12.75px;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.gift-subcat-btn:hover,
.gift-subcat-btn:focus-visible {
  background: hsl(var(--nav-accent) / 0.18);
  color: hsl(var(--nav-fg));
}

.gift-subcat-btn.active {
  background: hsl(var(--nav-accent) / 0.12);
  color: hsl(var(--nav-fg));
  box-shadow: inset -2px 0 0 hsl(var(--nav-accent));
}

.gift-subcat-btn.active:focus-visible {
  box-shadow: inset -2px 0 0 hsl(var(--nav-accent)), inset 0 0 0 1.5px hsl(var(--nav-accent) / 0.3);
}

.gift-subcat-btn .g2p-menu-icon {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
  border-radius: 8px;
}

.gift-subcat-btn .g2p-menu-icon svg {
  width: 15px;
  height: 15px;
}

.gift-subcat-btn.active .g2p-menu-icon {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, hsl(var(--nav-accent)), hsl(190 85% 42%));
}

.gift-items {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.gift-items-pane {
  contain: layout paint style;
  display: none;
  flex-direction: column;
  gap: 4.5px;
  height: 100%;
  max-height: 100%;
}

.gift-items-pane.is-active {
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-left: 6px;
}

.gift-subcats::-webkit-scrollbar,
.gift-items-pane::-webkit-scrollbar {
  width: 6px;
}

.gift-subcats::-webkit-scrollbar-track,
.gift-items-pane::-webkit-scrollbar-track {
  background: transparent;
}

.gift-subcats::-webkit-scrollbar-thumb,
.gift-items-pane::-webkit-scrollbar-thumb {
  background: hsl(var(--nav-fg) / 0.18);
  border-radius: 749.25px;
}

.gift-item {
  content-visibility: auto;
  contain-intrinsic-size: 45px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 8px;
  color: hsl(var(--nav-fg) / 0.8);
  font-size: 13.25px;
  line-height: 1.4;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.gift-item:hover,
.gift-item:focus-visible {
  background: hsl(var(--nav-fg) / 0.08);
  color: hsl(var(--nav-fg));
  transform: translateX(-4px);
}

.gift-item-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 6px;
  background: hsl(var(--nav-fg) / 0.06);
  padding: 3px;
}

.gift-item-logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

html:not(.dark) .gift-item-logo img[src$="/images/logos/steam.svg"] {
  filter: brightness(0);
}

html.dark .gift-item-logo img[src$="/images/logos/steam.svg"],
html.dark .gift-item-logo img[src$="/images/logos/playstation.svg"] {
  filter: brightness(0) invert(1);
}

.gift-item-name {
  font-weight: 500;
}

/* eSIM */
.esim-section {
  margin-bottom: 14px;
}

.esim-section:first-child {
  margin-top: 0;
}

.esim-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: hsl(var(--nav-fg));
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
}

.esim-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.esim-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 6px 7px;
  border: 0.75px solid hsl(var(--nav-fg) / 0.1);
  border-radius: 7.5px;
  background: hsl(var(--nav-cat-bg-color) / var(--nav-cat-bg-alpha));
  color: hsl(var(--nav-fg) / 0.7);
  font-size: 12.5px;
  line-height: 1.4;
  text-align: right;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.esim-item:hover,
.esim-item:focus-visible {
  background: hsl(var(--nav-accent) / 0.15);
  color: hsl(var(--nav-fg));
  border-color: hsl(var(--nav-accent) / 0.3);
}

.esim-country-flag {
  display: block;
  width: 24px;
  height: 18px;
  flex: 0 0 24px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px hsl(var(--nav-fg) / 0.12);
}

/* Virtual */
.virtual-grid.is-active {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.virtual-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 0.75px solid hsl(var(--nav-fg) / 0.1);
  border-radius: 9px;
  background: hsl(var(--nav-cat-bg-color) / var(--nav-cat-bg-alpha));
  color: hsl(var(--nav-fg));
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.virtual-item:hover,
.virtual-item:focus-visible {
  background: hsl(var(--nav-accent) / 0.15);
  transform: translateY(-2px);
}

.virtual-item .country {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.virtual-item .country-en {
  color: hsl(var(--nav-muted));
  font-size: 11.5px;
  line-height: 1.35;
}

/* Bills */
.bill-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding: 8px 9px;
  border: 0.75px solid hsl(var(--nav-fg) / 0.1);
  border-radius: 9px;
  background: hsl(var(--nav-cat-bg-color) / var(--nav-cat-bg-alpha));
  color: hsl(var(--nav-fg));
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.bill-item:hover,
.bill-item:focus-visible {
  background: hsl(var(--nav-accent) / 0.15);
  transform: translateX(-4px);
}

.bill-main {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.bill-item-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 33px;
  width: 33px;
  height: 33px;
  padding: 4.5px;
  border-radius: 9px;
  border: 0.75px solid hsl(var(--nav-fg) / 0.08);
  background: hsl(var(--nav-fg) / 0.03);
}

.bill-item-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bill-label {
  font-size: 13.5px;
  line-height: 1.45;
}

.bill-badge {
  padding: 3px 6px;
  border-radius: 7499.25px;
  background: hsl(var(--nav-accent) / 0.2);
  color: hsl(var(--nav-accent));
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
}

.bill-note {
  margin-top: 12px;
  padding: 9px;
  border: 0.75px dashed hsl(var(--nav-fg) / 0.1);
  border-radius: 6px;
  background: hsl(var(--nav-cat-bg-color) / var(--nav-cat-bg-alpha));
  color: hsl(var(--nav-muted));
  font-size: 13.5px;
  line-height: 1.45;
}

/* ===== MOBILE MENU ===== */
.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.64);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.mobile-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 330px;
  padding: 19.5px;
  overflow-y: auto;
  background: var(--nav-panel-bg);
  border-left: 0.75px solid var(--nav-panel-border);
  box-shadow: var(--nav-panel-shadow);
  backdrop-filter: var(--nav-panel-blur);
  -webkit-backdrop-filter: var(--nav-panel-blur);
  transform: translateX(13.5px);
  transition: transform 0.18s ease;
}

.mobile-overlay.open .mobile-panel {
  transform: translateX(0);
  will-change: transform;
}

.mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: ltr;
  margin-bottom: 15px;
  padding-bottom: 12px;
  border-bottom: 0.75px solid hsl(var(--nav-fg) / 0.1);
}

.mobile-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  direction: ltr;
}

.mobile-header-title {
  margin-left: auto;
  color: hsl(var(--nav-fg));
  direction: rtl;
  text-align: right;
  font-size: 17.25px;
  font-weight: 700;
}

.mobile-close,
.mobile-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.75px solid hsl(var(--nav-fg) / 0.1);
  background: hsl(var(--nav-fg) / 0.08);
  color: hsl(var(--nav-fg) / 0.72);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.mobile-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.mobile-close:hover,
.mobile-close:focus-visible,
.mobile-theme-btn:hover,
.mobile-theme-btn:focus-visible {
  color: hsl(var(--nav-fg));
}

.mobile-theme-btn {
  justify-content: space-between;
  padding: 10.5px 12px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
}

.mobile-theme-btn--icon {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
}

#mobile-theme-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

@media (max-width: 1179px) {
  .mobile-theme-btn.mobile-theme-btn--icon {
    align-items: center;
    justify-content: center;
    line-height: 0;
  }

  .mobile-theme-btn--icon #mobile-theme-icon {
    flex: 0 0 auto;
    margin: 0;
  }
}

/* Mobile search */
.mobile-search {
  display: flex;
  align-items: center;
  gap: 7.5px;
  margin-bottom: 15px;
  padding: 7.5px 10.5px;
  border: 0.75px solid hsl(var(--nav-fg) / 0.1);
  border-radius: 9px;
  background: hsl(var(--nav-fg) / 0.08);
}

.mobile-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: hsl(var(--nav-fg));
  font-family: inherit;
  font-size: 11.25px;
}

.mobile-search input::placeholder {
  color: hsl(var(--nav-muted));
}

#mobile-search-results[hidden] {
  display: none;
}

.mobile-search-empty {
  padding: 12px;
  text-align: center;
  color: hsl(var(--nav-muted));
  font-size: 13.5px;
}

/* Mobile nav items */
.mobile-nav {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-pane {
  display: none;
  flex-direction: column;
  gap: 3px;
}

.mobile-pane.is-active {
  display: flex;
}

.mobile-nav-link,
.mobile-nav-btn,
.mobile-sub-link {
  color: hsl(var(--nav-fg) / 0.7);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.mobile-nav-link {
  display: block;
  padding: 10.5px 12px;
  border-radius: 9px;
  font-size: 15.75px;
  font-weight: 600;
}

.mobile-nav-link:hover,
.mobile-nav-link:focus-visible,
.mobile-nav-link.active,
.mobile-nav-btn:hover,
.mobile-nav-btn:focus-visible,
.mobile-nav-btn.active,
.mobile-sub-link:hover,
.mobile-sub-link:focus-visible {
  background: hsl(var(--nav-fg) / 0.08);
  color: hsl(var(--nav-fg));
}

.mobile-nav-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10.5px 12px;
  border: none;
  border-radius: 9px;
  background: transparent;
  font-family: inherit;
  font-size: 15.75px;
  font-weight: 600;
  cursor: pointer;
}

.mobile-menu-label,
.mobile-link-with-icon {
  display: flex;
  align-items: center;
  gap: 9px;
}

.mobile-menu-label {
  min-width: 0;
  text-align: right;
}

.mobile-menu-label .g2p-menu-icon,
.mobile-link-with-icon .g2p-menu-icon {
  width: 27px;
  height: 27px;
  flex-basis: 27px;
}

.mobile-menu-label .g2p-menu-icon svg,
.mobile-link-with-icon .g2p-menu-icon svg {
  width: 16px;
  height: 16px;
}

.mobile-nav-icon {
  display: inline-flex;
}

.mobile-sub-link {
  display: flex;
  align-items: center;
  padding: 7.5px 12px;
  border-radius: 6px;
  font-size: 13.5px;
}

.mobile-link-with-logo {
  display: flex;
  align-items: center;
  gap: 7.5px;
}

.mobile-link-with-flag {
  gap: 9px;
}

.mobile-link-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
}

.mobile-link-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mobile-link-text {
  min-width: 0;
}

.mobile-back {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-bottom: 12px;
  padding: 9px 0;
  border: none;
  border-bottom: 0.75px solid hsl(var(--nav-fg) / 0.1);
  background: transparent;
  color: hsl(var(--nav-accent));
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.mobile-drill-title {
  margin-bottom: 12px;
  color: hsl(var(--nav-fg));
  font-size: 17.25px;
  font-weight: 700;
}

.mobile-bottom {
  display: flex;
  flex-direction: column;
  gap: 7.5px;
  margin-top: auto;
  padding-top: 15px;
}

.mobile-download {
  display: block;
  padding: 12px;
  border-radius: 10.5px;
  background: linear-gradient(to bottom right, hsl(var(--nav-accent)), hsl(220 80% 40%));
  color: hsl(var(--nav-accent-fg));
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mobile-download:hover,
.mobile-download:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(37, 99, 235, 0.4);
}

/* Scrollbar */
.mega-content::-webkit-scrollbar,
.search-results::-webkit-scrollbar,
.mobile-panel::-webkit-scrollbar {
  width: 3px;
}

.mega-content::-webkit-scrollbar-track,
.search-results::-webkit-scrollbar-track,
.mobile-panel::-webkit-scrollbar-track {
  background: transparent;
}

.mega-content::-webkit-scrollbar-thumb,
.search-results::-webkit-scrollbar-thumb,
.mobile-panel::-webkit-scrollbar-thumb {
  background: hsl(var(--nav-fg) / 0.15);
  border-radius: 3px;
}

#search-bar > svg,
.mobile-search > svg {
  flex-shrink: 0;
  color: hsl(var(--nav-muted));
}

#theme-icon-sun {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .brand,
  .pill-link,
  .pill-link svg,
  .search-bar,
  .search-close,
  .search-results,
  .search-result-item,
  .action-btn,
  .download-btn,
  .dropdown-panel,
  .dropdown-item,
  .mega-panel,
  .mega-cat-btn,
  .main-service,
  .gift-subcat-btn,
  .gift-item,
  .esim-item,
  .virtual-item,
  .bill-item,
  .mobile-overlay,
  .mobile-panel,
  .mobile-close,
  .mobile-theme-btn,
  .mobile-nav-link,
  .mobile-nav-btn,
  .mobile-sub-link,
  .mobile-download {
    transition: none !important;
  }
}
/* Approved Navbar sizing and responsive overrides. */
/* Navbar position: 15px closer to the top edge of the viewport */
.navbar {
  margin-top: -15px !important;
}

/* Brand logo: force size regardless of parent CSS */
.brand-logo {
  height: 64px !important;
  width: auto !important;
  max-height: none !important;
  max-width: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: top !important;
}

/* Brand anchor: flush to top-left */
.brand {
  align-self: flex-start;
  padding: 0 !important;
  line-height: 0;
}

/* The single canonical freelancer logo pair is enabled per breakpoint below. */
.brand-logo--desktop { display: none !important; }

/* Download button — back to base size */
.download-btn    { font-size: 1em; }
.mobile-download { font-size: 1em; }

/*
 * Responsive sizing lock
 * The project switches to desktop navigation at 1180px, so these rules use
 * the same breakpoint. Every component grows proportionally; icon glyphs
 * are never enlarged inside an unchanged button/container.
 */
@media (max-width: 1179px) {
  /* Keep mobile controls clear of the viewport edge and device safe area. */
  .navbar {
    margin-top: 0 !important;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 12px 9px !important;
  }

  /* Mobile uses the same approved logo pair and hero transition as desktop. */
  .brand {
    position: relative;
    align-self: center;
    width: 122px;
    height: 44px;
    overflow: visible;
  }

  .brand-logo--desktop {
    display: block !important;
    position: absolute;
    top: 50%;
    left: 0;
    object-fit: contain;
    transform-origin: left center;
    transition:
      opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    /* Mobile Safari can intermittently drop an asynchronously decoded image
       when filter and transform are animated on the same composited layer. */
    filter: none !important;
    will-change: auto;
  }

  .brand-logo--desktop-primary,
  .brand-logo--desktop-internal-light {
    width: 112px !important;
    height: 42px !important;
    transform: translateY(-50%) scale(1);
  }

  .brand-logo--desktop-primary { opacity: 1; }

  .brand-logo--desktop-internal-light {
    opacity: 0;
    pointer-events: none;
  }

  html:not(.dark)[data-theme="light"] .navbar.is-internal-page:not(.is-past-hero) .brand-logo--desktop-primary {
    opacity: 0;
  }

  html:not(.dark)[data-theme="light"] .navbar.is-internal-page:not(.is-past-hero) .brand-logo--desktop-internal-light {
    opacity: 1;
  }

  .brand-logo--desktop-past-hero {
    width: 40px !important;
    height: 40px !important;
    opacity: 0;
    transform: translateY(-50%) scale(0.78) rotate(-5deg);
    pointer-events: none;
  }

  .navbar.is-past-hero .brand-logo--desktop-primary,
  .navbar.is-past-hero .brand-logo--desktop-internal-light {
    opacity: 0;
    transform: translateY(-50%) scale(0.86);
  }

  .navbar.is-past-hero .brand-logo--desktop-past-hero {
    opacity: 1;
    transform: translateY(-50%) scale(1) rotate(0);
  }

  /* Mobile: hamburger button and glyph +20% */
  #nav-mobile-btn {
    width: 39.6px !important;
    height: 39.6px !important;
  }

  #nav-mobile-btn > svg {
    width: 28.8px !important;
    height: 28.8px !important;
  }
}

@media (min-width: 1180px) {
  /* Desktop: swap sides while the navigation pill stays centered. */
  .navbar {
    flex-direction: row-reverse;
    margin-top: 0 !important;
    align-items: center;
    padding: 24px 24px 9px !important;
  }

  /* Keep the desktop brand compact and aligned with the 44px navigation controls. */
  .brand {
    position: relative;
    align-self: center;
    width: 148px;
    height: 50px;
    overflow: visible;
  }

  .brand-logo--desktop {
    display: block !important;
    position: absolute;
    top: 50%;
    left: 0;
    object-fit: contain;
    transform-origin: left center;
    transition:
      opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
      filter 520ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, filter, transform;
  }

  .brand-logo--desktop-primary,
  .brand-logo--desktop-internal-light {
    width: 132px !important;
    height: 49px !important;
    filter: blur(0) drop-shadow(0 1px 1px rgba(15, 23, 42, 0.38)) drop-shadow(0 3px 8px rgba(15, 23, 42, 0.18));
    transform: translateY(-50%) scale(1);
  }

  .brand-logo--desktop-primary { opacity: 1; }

  .brand-logo--desktop-internal-light {
    opacity: 0;
    pointer-events: none;
  }

  html:not(.dark)[data-theme="light"] .navbar.is-internal-page:not(.is-past-hero) .brand-logo--desktop-primary {
    opacity: 0;
  }

  html:not(.dark)[data-theme="light"] .navbar.is-internal-page:not(.is-past-hero) .brand-logo--desktop-internal-light {
    opacity: 1;
  }

  .brand-logo--desktop-past-hero {
    width: 46px !important;
    height: 46px !important;
    opacity: 0;
    filter: blur(7px) drop-shadow(0 5px 12px rgba(20, 92, 220, 0.2));
    transform: translateY(-50%) scale(0.78) rotate(-5deg);
    pointer-events: none;
  }

  /* The same brand morph is used in light and dark mode. */
  .navbar.is-past-hero .brand-logo--desktop-primary,
  .navbar.is-past-hero .brand-logo--desktop-internal-light {
    opacity: 0;
    filter: blur(7px) drop-shadow(0 1px 1px rgba(15, 23, 42, 0));
    transform: translateY(-50%) scale(0.86);
  }

  .navbar.is-past-hero .brand-logo--desktop-past-hero {
    opacity: 1;
    filter: blur(0) drop-shadow(0 5px 12px rgba(20, 92, 220, 0.24));
    transform: translateY(-50%) scale(1) rotate(0);
  }

  /* Shared action order is defined in store-header.css. */
  .actions {
    direction: rtl;
    align-self: center;
  }


  /* Desktop search control */
  #nav-search-btn {
    width: 44.55px !important;
    height: 44.55px !important;
  }

  #nav-search-btn > svg {
    width: 29.7px !important;
    height: 29.7px !important;
  }

  /* Desktop: download button +10%, including spacing and icon */
  .download-btn {
    gap: 6.6px !important;
    padding: 9.9px 16.5px !important;
    font-size: 1.1em !important;
  }

  /* Light mode: white on the blue hero, then softly reveal the approved blue gradient. */
  html:not(.dark)[data-theme="light"] .download-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #fff;
    color: hsl(var(--nav-accent));
    box-shadow:
      0 7px 20px rgba(15, 23, 42, 0.14),
      inset 0 0 0 1px rgba(255, 255, 255, 0.78);
    transition:
      color 520ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 520ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 150ms ease;
  }

  html:not(.dark)[data-theme="light"] .download-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(to bottom right, hsl(var(--nav-accent)), hsl(220 80% 40%));
    opacity: 0;
    transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  html:not(.dark)[data-theme="light"] .navbar.is-past-hero .download-btn {
    color: hsl(var(--nav-accent-fg));
    box-shadow: none;
  }

  html:not(.dark)[data-theme="light"] .navbar.is-past-hero .download-btn::before {
    opacity: 1;
  }

  .download-btn > svg {
    width: 19.8px !important;
    height: 19.8px !important;
  }

  /* Desktop: centered pill at base menu scale.
     2026-08-18 design review: the previous +25% upscale made the header menu
     font visibly too large (18.75px vs the 15px base); restored base sizes. */
  #pill {
    align-self: center;
    max-width: 600px !important;
    height: 44px !important;
    padding-inline: 12px !important;
  }

  #nav-links {
    gap: 3px !important;
  }

  #nav-links .pill-link {
    gap: 4.5px !important;
    padding: 7.5px 13.5px !important;
    font-size: 15px !important;
  }

  #nav-links .pill-link > svg {
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px;
  }

  #nav-links .pill-link::before {
    right: 13.5px !important;
    left: 13.5px !important;
    bottom: 4.5px !important;
    height: 1.5px !important;
  }

  /* Desktop popups stay at their authored size for a compact, predictable UI. */
  .dropdown-panel,
  .search-results {
    scale: 1;
    transform-origin: top center;
  }

  /* Match the desktop pill's glass language in light mode. */
  html:not(.dark)[data-theme="light"] .dropdown-panel,
  html:not(.dark)[data-theme="light"] .mega-panel {
    background:
      radial-gradient(
        circle at 18% 0%,
        rgba(255, 255, 255, 0.54) 0%,
        rgba(255, 255, 255, 0.2) 45%,
        transparent 72%
      ),
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.56) 0%,
        rgba(248, 251, 255, 0.36) 100%
      );
    border-color: rgba(255, 255, 255, 0.68);
    box-shadow:
      0 22px 58px rgba(15, 23, 42, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      inset 0 -1px 0 rgba(255, 255, 255, 0.28),
      inset 0 0 34px rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(80px) saturate(165%) brightness(1.04);
    -webkit-backdrop-filter: blur(80px) saturate(165%) brightness(1.04);
  }

  /* The pill is itself a backdrop root. Release it while a light-mode submenu is
     open so the nested panel can blur the actual page instead of the pill layer. */
  html:not(.dark)[data-theme="light"] .pill:has(
      .mega:is(:hover, :focus-within, .is-open),
      .dropdown:is(:hover, :focus-within, .is-open)
    ) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  html:not(.dark)[data-theme="light"] .dropdown-panel .dsc {
    color: rgba(15, 23, 42, 0.72);
  }

  /* Dark mode keeps the navy palette while staying translucent enough for the
     backdrop to remain visibly frosted and the menu copy to stay legible. */
  html.dark .dropdown-panel,
  html.dark .mega-panel,
  html[data-theme="dark"] .dropdown-panel,
  html[data-theme="dark"] .mega-panel {
    background: linear-gradient(
      135deg,
      rgba(8, 14, 26, 0.76) 0%,
      rgba(12, 20, 36, 0.66) 100%
    );
    border-color: rgba(164, 199, 255, 0.16);
    box-shadow:
      0 24px 64px rgba(0, 0, 0, 0.46),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -1px 0 rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(72px) saturate(155%) brightness(0.76);
    -webkit-backdrop-filter: blur(72px) saturate(155%) brightness(0.76);
  }

  /* The pill is a backdrop root. Release it while a dark submenu is open so
     the submenu blurs the real page behind the header, just like light mode. */
  html.dark .pill:has(
      .mega:is(:hover, :focus-within, .is-open),
      .dropdown:is(:hover, :focus-within, .is-open)
    ),
  html[data-theme="dark"] .pill:has(
      .mega:is(:hover, :focus-within, .is-open),
      .dropdown:is(:hover, :focus-within, .is-open)
    ) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Services panel: stay attached to the centered desktop pill. */
  .mega-panel {
    position: fixed !important;
    top: calc(100% + 9px) !important;
    left: 50% !important;
    right: auto !important;
    margin: 0 !important;
    width: 780px !important;
    max-width: calc(100vw - 40px) !important;
    translate: none !important;
    scale: none !important;
    transform: translateX(-50%) translateY(-8px) !important;
    transform-origin: top center !important;
  }

  .mega:is(:hover, :focus-within, .is-open) .mega-panel {
    transform: translateX(-50%) translateY(0) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-logo--desktop {
    transition-duration: 1ms !important;
  }

  html:not(.dark)[data-theme="light"] .download-btn::before {
    transition-duration: 1ms !important;
  }
}

/* Approved Footer animation overrides. */
  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
  }
  .animate-float {
    animation: float 3s ease-in-out infinite;
  }
  .delay-1000 {
    animation-delay: 1s;
  }

/* Compact footer: brand + trust on the right, engagement stack on the left. */
.footer-layout {
  display: grid;
  gap: 2rem;
}

.footer-brand-panel,
.footer-connect-panel {
  min-width: 0;
  direction: rtl;
}

.footer-brand-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
}

.footer-brand-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer-brand-copy {
  width: 100%;
  max-width: 22rem;
}

.footer-licenses {
  margin-top: 0;
}

.footer-contact-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin: 0.35rem 0 0;
}

.footer-contact-line {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.9;
}

.footer-contact-line span { color: #64748b; }

.footer-contact-line a {
  color: #1265e8;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.footer-contact-line a:hover,
.footer-contact-line a:focus-visible { text-decoration: underline; outline: none; }

html.dark .footer-contact-line span { color: #cbd5e1; }
html.dark .footer-contact-line a { color: #7cc0ff; }

.permit-logo { position: relative; display: block; width: 100%; aspect-ratio: 1; }
.permit-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.permit-logo .permit-logo-dark-text { display: none; position: absolute; inset: 0; }
html.dark .permit-logo .permit-logo-dark-text {
  display: block;
  clip-path: inset(69% 0 0);
  filter: brightness(0) invert(1);
}

.footer-license-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}

.footer-license-card {
  display: flex;
  width: 4.2rem;
  height: 4.2rem;
  align-items: center;
  justify-content: center;
  padding: 0.55rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.footer-license-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Same footprint as the other marks; only the inner padding is tuned,
   because this artwork carries less built-in whitespace. */
.footer-license-card--permit { padding: 0.3rem; }

.footer-license-card:hover,
.footer-license-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(42, 168, 242, 0.48);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 11px 25px rgba(18, 101, 232, 0.12);
  outline: none;
}

.footer-connect-panel {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}

.footer-newsletter {
  width: 100%;
}

#newsletter-email {
  direction: ltr;
  text-align: left;
}

#newsletter-email::placeholder {
  direction: rtl;
  text-align: right;
}

.footer-newsletter-form {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
}

.footer-newsletter-submit {
  width: 100%;
}

.footer-newsletter-submit:disabled {
  cursor: wait;
  opacity: 0.72;
}

.footer-newsletter-status {
  display: flex;
  min-height: 2.4rem;
  margin-top: 0.65rem;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.8rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.7;
  text-align: right;
}

.footer-newsletter-status[hidden] {
  display: none;
}

.footer-newsletter-status::before {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
}

.footer-newsletter-status[data-state="pending"] {
  border-color: rgba(59, 130, 246, 0.2);
  background: rgba(59, 130, 246, 0.08);
  color: #1d4ed8;
}

.footer-newsletter-status[data-state="pending"]::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(59, 130, 246, 0.25);
  border-top-color: #2563eb;
  animation: footer-newsletter-spin 0.7s linear infinite;
}

.footer-newsletter-status[data-state="success"] {
  border-color: rgba(16, 185, 129, 0.24);
  background: rgba(16, 185, 129, 0.09);
  color: #047857;
}

.footer-newsletter-status[data-state="success"]::before {
  content: "✓";
  background: #10b981;
  color: #fff;
}

.footer-newsletter-status[data-state="error"] {
  border-color: rgba(239, 68, 68, 0.22);
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
}

.footer-newsletter-status[data-state="error"]::before {
  content: "!";
  background: #ef4444;
  color: #fff;
}

html.dark .footer-newsletter-status[data-state="pending"] {
  border-color: rgba(96, 165, 250, 0.24);
  background: rgba(37, 99, 235, 0.13);
  color: #93c5fd;
}

html.dark .footer-newsletter-status[data-state="success"] {
  border-color: rgba(52, 211, 153, 0.25);
  background: rgba(5, 150, 105, 0.13);
  color: #6ee7b7;
}

html.dark .footer-newsletter-status[data-state="error"] {
  border-color: rgba(248, 113, 113, 0.25);
  background: rgba(220, 38, 38, 0.13);
  color: #fca5a5;
}

@keyframes footer-newsletter-spin {
  to {
    transform: rotate(360deg);
  }
}

.footer-newsletter-note {
  margin-top: 0.55rem;
  text-align: left;
}

.footer-app-downloads {
  display: flex;
  flex-direction: column;
  align-items: center;
  direction: rtl;
}

.footer-app-downloads__links {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

html.dark .footer-license-card {
  border-color: rgba(96, 165, 250, 0.16);
  background: rgba(15, 23, 42, 0.72);
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html.dark .footer-license-card:hover,
html.dark .footer-license-card:focus-visible {
  border-color: rgba(96, 197, 255, 0.45);
  background: rgba(15, 23, 42, 0.94);
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.3), 0 0 20px rgba(18, 101, 232, 0.08);
}

.footer-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.footer-copyright {
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 768px) {
  .footer-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(19rem, 0.92fr);
    grid-template-areas: "connect brand";
    align-items: start;
    gap: clamp(3rem, 8vw, 7rem);
    direction: ltr;
  }

  .footer-brand-panel {
    grid-area: brand;
    width: 100%;
    max-width: 25rem;
    justify-self: end;
    align-items: flex-start;
    text-align: right;
  }

  .footer-license-list {
    justify-content: flex-start;
  }

  .footer-connect-panel {
    grid-area: connect;
    max-width: 34rem;
    justify-self: start;
    align-items: flex-end;
  }

  .footer-newsletter {
    width: min(100%, 26rem);
    direction: rtl;
    text-align: right;
  }

  .footer-newsletter-note {
    text-align: right;
  }

  .footer-newsletter-form {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .footer-newsletter-submit {
    width: auto;
  }

  .footer-app-downloads__links {
    display: flex;
    width: auto;
    justify-content: flex-start;
  }

  .footer-app-downloads,
  .footer-socials {
    align-self: flex-end;
  }

}

@media (max-width: 420px) {

  .footer-license-card {
    width: 3.9rem;
    height: 3.9rem;
  }
}

/* Helpify chatbot — Go2pal visual integration. */
@media (max-width: 1179px) {
  html[data-mobile-nav-open] .mobile-overlay {
    top: var(--g2p-mobile-menu-top, 0px);
    bottom: auto;
    height: var(--g2p-mobile-menu-height, 100dvh);
  }

  html[data-mobile-nav-open] .mobile-panel {
    padding-bottom: max(19.5px, env(safe-area-inset-bottom, 0px));
    overflow: hidden;
  }

  html[data-mobile-nav-open] :is(.mobile-header, .mobile-account, .mobile-search, .mobile-bottom) {
    flex-shrink: 0;
  }

  html[data-mobile-nav-open] :is(.mobile-nav, #mobile-search-results) {
    min-height: 0;
    overflow-y: auto;
  }

  html[data-mobile-nav-open] .mobile-bottom {
    padding-top: 84px;
  }

  html[data-mobile-nav-open] #helpify-chat-launcher:not(.chat-is-open),
  html[data-mobile-nav-open] #helpify-widget-launcher {
    bottom: var(--g2p-mobile-chat-bottom, 90px) !important;
  }
}

html #helpify-chat-launcher {
  bottom: 24px !important;
  right: 24px !important;
}

/* The provider launcher spans the full bottom row even while closed. Keep that
   transparent wrapper click-through; only the visible controls own pointer
   input. The open chat deliberately restores the full interaction layer. */
html #helpify-chat-launcher:not(.chat-is-open),
html #helpify-widget-launcher {
  pointer-events: none !important;
}

html #helpify-chat-launcher:not(.chat-is-open) #helpify-chat-icon,
html #helpify-widget-icon,
html #helpify-chat-launcher:not(.chat-is-open) #helpify-chat-teaser button,
html #helpify-chat-launcher.chat-is-open {
  pointer-events: auto !important;
}

html #helpify-chat-icon {
  isolation: isolate;
  width: 58px !important;
  height: 58px !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, #2aa8f2 0%, #1265e8 100%) !important;
  box-shadow:
    0 18px 40px rgba(18, 101, 232, 0.28),
    0 4px 12px rgba(15, 23, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease !important;
}

html #helpify-chat-icon::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -5px;
  border: 1px solid rgba(74, 181, 246, 0.38);
  border-radius: 23px;
  background: rgba(42, 168, 242, 0.08);
  box-shadow: 0 0 0 4px rgba(18, 101, 232, 0.05);
  pointer-events: none;
  transition: transform 220ms ease, opacity 220ms ease, border-color 220ms ease;
}

html #helpify-chat-icon::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 2px;
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.38), transparent 52%);
  pointer-events: none;
}

html #helpify-chat-icon .icon-chat {
  position: relative;
  z-index: 2;
  width: 44px !important;
  height: 44px !important;
}

html #helpify-chat-icon .icon-chat img {
  display: none !important;
}

html #helpify-chat-icon .icon-chat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/images/chat/go2pal-chat.svg") center / contain no-repeat;
}

html #helpify-chat-icon .icon-close,
html #helpify-chat-icon #helpify-chat-badge {
  position: relative;
  z-index: 2;
}

html #helpify-chat-icon:hover {
  transform: translateY(-2px);
  box-shadow:
    0 22px 46px rgba(18, 101, 232, 0.34),
    0 6px 16px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.44) !important;
}

html #helpify-chat-icon:hover::before {
  transform: scale(1.04);
  border-color: rgba(96, 197, 255, 0.58);
}

html #helpify-chat-icon.is-open {
  background: #0f172a !important;
}

html #helpify-chat-icon.is-open::before {
  opacity: 0.55;
  border-color: rgba(148, 163, 184, 0.3);
}

html #helpify-chat-container {
  right: 94px !important;
  bottom: 24px !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 22px !important;
  box-shadow:
    0 30px 70px rgba(15, 23, 42, 0.22),
    0 8px 24px rgba(15, 23, 42, 0.12) !important;
}

html.dark #helpify-chat-teaser {
  background: rgba(15, 23, 42, 0.96) !important;
  color: #e2e8f0 !important;
  border-color: rgba(96, 165, 250, 0.2) !important;
  box-shadow: 0 18px 42px rgba(2, 6, 23, 0.42) !important;
}

html.dark #helpify-chat-teaser::after {
  background: #0f172a !important;
  border-color: rgba(96, 165, 250, 0.2) !important;
}

html.dark #helpify-chat-teaser .teaser-title {
  color: #f8fafc !important;
}

html.dark #helpify-chat-teaser .teaser-hint {
  color: #94a3b8 !important;
}

@media (max-width: 768px) {
  html #helpify-chat-launcher {
    right: 16px !important;
    bottom: 16px !important;
  }

  /* Helpify mounts its open iframe as a body-level sibling of the launcher.
     Own both open-state boxes so provider offsets cannot shift the full-screen
     chat outside Safari's dynamic viewport. */
  html #helpify-chat-launcher.chat-is-open {
    position: fixed !important;
    inset: 0 !important;
    width: 100dvw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html #helpify-chat-icon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 17px !important;
  }

  html #helpify-chat-icon .icon-chat {
    width: 41px !important;
    height: 41px !important;
  }

  html #helpify-chat-launcher.chat-is-open #helpify-chat-container,
  html #helpify-chat-container.chat-visible {
    position: fixed !important;
    inset:
      env(safe-area-inset-top, 0px)
      env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px)
      env(safe-area-inset-left, 0px) !important;
    width: calc(
      100dvw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)
    ) !important;
    max-width: 100vw !important;
    height: calc(
      100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
    ) !important;
    max-height: 100dvh !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
  }
}
/* One header contract for static pages and the React store, including mobile. */
.navbar, .mobile-overlay {
  font-family: 'IRANSansX', sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
#navbar-container { position: relative; z-index: 1000; width: 100%; }
.navbar .brand, .navbar .pill-link, .navbar .actions a { text-decoration: none; }
.navbar.is-internal-page {
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid #e5eaf2;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html.dark .navbar.is-internal-page { background: rgba(15, 23, 42, .96); border-color: #334155; }
.navbar .nav-account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.navbar .nav-account-btn:hover { background: #1d4ed8; }
.navbar .nav-account-wrap { position:relative;direction:rtl;flex-shrink:0; }
.navbar .nav-account-avatar { display:grid;place-items:center;width:44px;height:44px;border:1px solid #d9e5fa;border-radius:50%;background:#edf4ff;color:#2e6bdb;cursor:pointer; }
.navbar .nav-account-avatar[hidden],.navbar .nav-account-menu[hidden],.navbar .nav-account-btn[hidden] { display:none !important; }
.navbar .nav-account-avatar[aria-expanded=true] { box-shadow:0 0 0 4px #3b82f618;background:#e5eeff; }
.navbar .nav-account-menu { position:absolute;top:calc(100% + 12px);right:0;z-index:1100;width:214px;max-width:calc(100vw - 32px);padding:7px;background:rgba(255,255,255,.96);border:1px solid #e0e8f4;border-radius:16px;box-shadow:0 16px 45px #1d345322;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px); }
.navbar .nav-account-menu a,.navbar .nav-account-menu button { display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:11px 12px;border:0;border-radius:10px;background:transparent;color:#637b9c;font:inherit;font-size:12px;text-align:right;cursor:pointer; }
.navbar .nav-account-menu a:hover,.navbar .nav-account-menu button:hover { background:#eef4ff;color:#3069d5; }
.navbar .nav-account-menu [data-store-logout] { border-top:1px solid #edf1f7;border-radius:0 0 10px 10px;color:#b16c7b; }
.navbar .nav-account-menu p { color:#ad6374;font-size:11px;padding:5px 12px;margin:0; }
html.dark .navbar .nav-account-avatar { background:#1e304b;border-color:#355077;color:#9abdf5; }
html.dark .navbar .nav-account-menu { background:rgba(20,31,49,.97);border-color:#304560; }
html.dark .navbar .nav-account-menu a,html.dark .navbar .nav-account-menu button { color:#b8c9e3; }
html.dark .navbar .nav-account-menu a:hover,html.dark .navbar .nav-account-menu button:hover { background:#243d5f; }
.navbar .nav-cart-btn { position: relative; width: 44px; height: 44px; flex-shrink: 0;  }
.navbar .nav-cart-count {
  position: absolute;
  top: -3px;
  inset-inline-start: -3px;
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding-inline: 4px;
  border: 2px solid #fff;
  border-radius: 99px;
  background: #2563eb;
  color: #fff;
  font-size: 10px;
  line-height: 1;
}
.navbar a:focus-visible, .navbar button:focus-visible { outline: 3px solid #60a5fa; outline-offset: 3px; }
@media (min-width: 1180px) {
  .navbar { display: grid; grid-template-columns: 148px minmax(0, 1fr) auto; gap: 18px; direction: ltr; }
  .navbar .brand { grid-column: 1; grid-row: 1; }
  .navbar #pill {
    position: relative;
    left: auto;
    /* Keep a containing block for the fixed services panel without creating a
       backdrop root that would prevent the panel from blurring the page. */
    transform: translateX(0);
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: max-content;
    max-width: none !important;
    padding-inline: 22px !important;
  }
  .navbar #nav-links { flex-shrink: 0; }
  .navbar #nav-links > * { flex-shrink: 0; }
  .navbar .actions { grid-column: 3; grid-row: 1; }

  /* Release both ancestor backdrop roots while a popup is open. The text stays
     crisp while the actual page behind the popup receives the blur. */
  .navbar:has(.mega:is(:hover, :focus-within, .is-open), .dropdown:is(:hover, :focus-within, .is-open), .pill.search-active) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .navbar .pill.search-active { -webkit-backdrop-filter: none; backdrop-filter: none; }
  html:not(.dark)[data-theme="light"] .navbar :is(.dropdown-panel, .mega-panel, .search-results) {
    background: rgba(255, 255, 255, .9);
    color: #17233a;
    border-color: rgba(203, 213, 225, .8);
    -webkit-backdrop-filter: blur(32px) saturate(145%);
    backdrop-filter: blur(32px) saturate(145%);
    box-shadow: 0 20px 55px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .95);
  }
  html.dark .navbar :is(.dropdown-panel, .mega-panel, .search-results) {
    background: rgba(15, 23, 42, .92);
    color: #f1f5f9;
    border-color: rgba(148, 163, 184, .28);
    -webkit-backdrop-filter: blur(32px) saturate(135%);
    backdrop-filter: blur(32px) saturate(135%);
    box-shadow: 0 20px 55px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08);
  }
}

@media (min-width: 1180px) and (max-width: 1439px) {
  .navbar #nav-links .pill-link { padding-inline: 10px !important; font-size: 14px !important; }
  .navbar { gap: 12px; }
}
@media (max-width: 1179px) {
  .navbar .nav-account-menu { position:fixed;right:16px;top:82px; }
  .navbar .actions { gap: 8px; flex-direction: row; direction: rtl; }
  .navbar .nav-account-btn { padding-inline: 12px; font-size: 12px; }
  .navbar .action-btn.mobile { width: 44px; height: 44px; }
}


/* Actions follow DOM/keyboard order, from the right edge at every breakpoint. */
.navbar .actions { direction:rtl;flex-direction:row;gap:8px; }
/* The outer grid is LTR only to place the brand on the left. Its content is RTL. */
.navbar #pill,.navbar #nav-links,.navbar .dropdown-panel,.navbar .mega-panel,.navbar .search-bar,.navbar .search-results {
  direction:rtl;text-align:right;
}
.navbar #search-input,.mobile-overlay #mobile-search-input { direction:rtl;text-align:right; }
.navbar #search-input::placeholder,.mobile-overlay #mobile-search-input::placeholder { text-align:right; }
.navbar .dropdown-item,.navbar .dropdown-item .lbl,.navbar .mega-cat-btn,.navbar .main-service,.navbar .gift-subcat-btn,.navbar .gift-item,.navbar .esim-item,.navbar .bill-item {
  direction:rtl;text-align:right;
}
.mobile-account { margin-bottom:16px;direction:rtl;text-align:right; }
.mobile-account-login,.mobile-account-links a,.mobile-account-links button {
  display:flex;align-items:center;gap:10px;min-height:44px;width:100%;padding:10px 12px;border:0;border-radius:12px;font:inherit;font-size:13px;text-align:right;text-decoration:none;cursor:pointer;
}
.mobile-account-login { background:#2563eb;color:#fff;justify-content:center; }
.mobile-account-links { display:grid;gap:4px;padding:6px;border:1px solid #e0e8f4;border-radius:16px;background:#f5f8fe; }
.mobile-account-links a,.mobile-account-links button { background:transparent;color:#335b95; }
.mobile-account-links a:hover,.mobile-account-links button:hover { background:#e8f0ff; }
.mobile-account-links [data-store-logout] { color:#ad6374; }
.mobile-account [hidden] { display:none !important; }
.mobile-account [data-store-account-error] { color:#ad6374;font-size:12px; }
.navbar .download-btn { display:inline-flex;order:0;white-space:nowrap; }
.navbar .nav-account-wrap { order:1; }
.navbar .nav-cart-btn { order:2; }
.navbar #nav-search-btn { display:inline-flex;order:3; }
.navbar #nav-mobile-btn { order:4; }
@media (min-width:1180px) and (max-width:1439px) {
  .navbar { grid-template-columns:132px minmax(0,1fr) auto;gap:10px; }
  .navbar .brand { width:132px; }
  .navbar #pill { padding-inline:12px !important; }
  .navbar #nav-links .pill-link { padding-inline:8px !important;font-size:13px !important; }
  .navbar .download-btn { font-size:13px !important;padding-inline:12px !important; }
  .navbar .nav-account-btn { padding-inline:12px; }
}
@media (max-width:1179px) {
  .navbar .brand { flex-shrink: 0; }
  .mobile-overlay #mobile-search-input, .navbar #search-input { font-size:16px; }
  .navbar .actions { gap:6px; }
  .navbar .nav-account-wrap { display:none; }
  .navbar #nav-mobile-btn { order:0; }
  .navbar .nav-cart-btn { order:1; }
  .navbar .download-btn { order:2; }
  .navbar #nav-search-btn { order:3; }
  .navbar .download-btn,.navbar .nav-account-btn,.navbar .nav-account-avatar,.navbar .nav-cart-btn,.navbar #nav-search-btn,.navbar #nav-mobile-btn {
    width:44px !important;height:44px !important;min-height:44px;padding:0 !important;flex-shrink:0;justify-content:center;
  }
  .navbar .download-btn span,.navbar .nav-account-btn [data-store-account-label] { display:none; }
  .navbar .download-btn svg,.navbar .nav-account-btn svg,.navbar #nav-search-btn svg,.navbar #nav-mobile-btn svg { width:21px !important;height:21px !important; }
}
@media (max-width:480px) {
  .navbar .brand { width:78px; }
  .navbar .brand-logo--desktop-primary,.navbar .brand-logo--desktop-internal-light { width:78px !important; }
  .navbar .actions { gap:4px; }
  .navbar .download-btn,.navbar .nav-account-btn,.navbar .nav-account-avatar,.navbar .nav-cart-btn,.navbar #nav-search-btn,.navbar #nav-mobile-btn {
    width:44px !important;height:44px !important;min-height:44px;
  }
}
/* Match the canonical homepage footer regardless of the React page's font. */
#footer-container {
  position: relative;
  z-index: 40;
  isolation: isolate;
  direction: rtl;
  font-family: 'IRANSansX', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
.shared-footer-consent { padding: 0 24px 20px; text-align: center; }
/* Store controls use the shared white surfaces, soft blue selection and IRANSansX. */
.gc-select { min-width: 0; width: 100%; font-family: 'IRANSansX', sans-serif; }
.gc-page .gc-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #dfe7f2;
  border-radius: 12px;
  background: #f8faff;
  color: #334560;
  font: 500 12px/1.8 'IRANSansX', sans-serif;
  text-align: start;
}
.gc-select-trigger > svg { flex-shrink: 0; color: #8191a9; transition: transform 160ms; }
.gc-select-value { display: flex; align-items: center; gap: 4px; min-width: 0; }
.gc-select-value bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-select-prefix { color: #8290a5; font-size: 11px; white-space: nowrap; }
.gc-page .gc-select-trigger:hover:enabled { border-color: #b9cdef; background: #f3f7ff; }
.gc-page .gc-select-trigger[aria-expanded="true"] { border-color: #82a9f6; background: #edf4ff; color: #245fd5; box-shadow: 0 0 0 3px #2f6bf00b; }
.gc-select-trigger[aria-expanded="true"] > svg { transform: rotate(180deg); color: #2f6bf0; }
.gc-page .gc-select-trigger:disabled { opacity: .55; }
.gc-page .gc-select-trigger:focus-visible { outline: 2px solid #80a8f8; outline-offset: 3px; }
.gc-page .gc-sort { width: 220px; }
.gc-page .gc-sort .gc-select-trigger { background: #fff; }
.gc-page .gc-denomination-select { flex: 1 0 100%; }
.gc-page .gc-denomination-select .gc-select-trigger { min-height: 44px; }

.gc-select-menu {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 6px;
  box-sizing: border-box;
  border: 1px solid rgba(211, 222, 238, .85);
  border-radius: 15px;
  background: rgba(255, 255, 255, .96);
  color: #334560;
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 14px 40px #233f6a1c, 0 3px 8px #233f6a08;
  font: 500 12px/1.8 'IRANSansX', sans-serif;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #ccdaee transparent;
}
.gc-select-menu:not(:popover-open) { display: none; }
.gc-select-option { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.gc-select-option bdi { overflow-wrap: anywhere; }
.gc-select-option[data-active="true"] { background: #f2f6fd; color: #245fd5; }
.gc-select-option[aria-selected="true"] { background: #eaf2ff; color: #245fd5; font-weight: 650; }
.gc-select-check { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; }
.gc-select-option[aria-selected="true"] .gc-select-check { background: #2f6bf0; color: #fff; border-radius: 6px; }

.gc-page :is(.gc-filters, .gc-filter-dialog) { font-family: 'IRANSansX', sans-serif; }
.gc-page .gc-filters { border-color: #e0e7f1; border-radius: 20px; box-shadow: 0 4px 18px #1f2b4608; }
.gc-page :is(.gc-filters, .gc-filter-dialog) fieldset { padding: 8px 16px 16px; border-color: #edf1f7; }
.gc-page :is(.gc-filters, .gc-filter-dialog) legend { padding-top: 16px; color: #435570; font-size: 12px; font-weight: 650; }
.gc-page :is(.gc-filters, .gc-filter-dialog) legend svg { color: #8a9ab1; }
.gc-page :is(.gc-filters, .gc-filter-dialog) fieldset label { color: #6c7c95; font-size: 11px; }
.gc-page :is(.gc-filters, .gc-filter-dialog) input:not([type]) { min-height: 46px; border-color: #dfe7f2; border-radius: 12px; background: #f8faff; color: #334560; font-size: 12px; }
.gc-page :is(.gc-filters, .gc-filter-dialog) input:not([type]):hover { border-color: #b9cdef; }
.gc-page :is(.gc-filters, .gc-filter-dialog) input:not([type]):focus { background: #fff; border-color: #82a9f6; }
.gc-page :is(.gc-filters, .gc-filter-dialog) input::placeholder { color: #9aa7bb; }
.gc-page .gc-filter-heading { padding: 15px 16px; border-color: #edf1f7; }
.gc-page .gc-filter-heading h2 { font-size: 13px; color: #2c3f5e; }
.gc-page .gc-filter-heading button { font-family: inherit; font-size: 10px; min-height: 32px; }
.gc-page .gc-filter-heading button:disabled { color: #9aa7bb; }

.gc-page .gc-category-filter > summary { display: flex; align-items: center; gap: 7px; min-height: 56px; padding: 14px 16px; color: #435570; font-size: 12px; list-style: none; }
.gc-category-filter > summary::-webkit-details-marker { display: none; }
.gc-category-filter > summary > svg:first-child { flex-shrink: 0; color: #8a9ab1; }
.gc-category-filter > summary strong { font-weight: 650; }
.gc-page .gc-category-filter > summary span { float: none; margin-inline-start: auto; padding: 2px 7px; max-width: 85px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-radius: 6px; background: #f0f5fd; color: #6781a8; font-size: 10px; }
.gc-category-chevron { color: #91a0b6; transition: transform 160ms; flex-shrink: 0; }
.gc-category-filter[open] .gc-category-chevron { transform: rotate(180deg); }
.gc-category-filter[open] > summary { color: #245fd5; }
.gc-page .gc-category-filter fieldset { display: grid; gap: 4px; padding: 0 10px 12px; border: 0; }
.gc-page .gc-category-filter fieldset label { min-height: 42px; margin: 0; padding: 8px; border-radius: 10px; color: #5a6c87; cursor: pointer; }
.gc-page .gc-category-filter fieldset label:hover { background: #f5f8fd; }
.gc-page .gc-category-filter fieldset label.is-selected { background: #edf4ff; color: #245fd5; }
.gc-category-filter label small { margin-inline-start: auto; color: #95a3b8; font-size: 10px; }
.gc-page :is(.gc-filters, .gc-filter-dialog) input[type="radio"] { appearance: none; flex-shrink: 0; width: 16px; height: 16px; border: 1.5px solid #c9d6e9; border-radius: 50%; background: #fff; }
.gc-page :is(.gc-filters, .gc-filter-dialog) input[type="radio"]:checked { border: 5px solid #2f6bf0; }
.gc-page .gc-stock { justify-content: space-between; min-height: 44px; padding: 9px 10px; border-radius: 11px; background: #f5f8fd; color: #5a6c87 !important; }
.gc-stock input { order: 1; }
.gc-page :is(.gc-filters, .gc-filter-dialog) input[type="checkbox"] { appearance: none; width: 17px; height: 17px; border: 1.5px solid #c9d6e9; border-radius: 5px; background: #fff; }
.gc-page :is(.gc-filters, .gc-filter-dialog) input[type="checkbox"]:checked { border-color: #2f6bf0; background: #2f6bf0; box-shadow: inset 0 0 0 3px #fff; }
.gc-page .gc-mobile-filter { border-color: #dfe7f2; border-radius: 12px; color: #435570; font-family: 'IRANSansX', sans-serif; }
.gc-page .gc-filter-dialog { border-radius: 22px 22px 14px 14px; border-color: #dfe7f2; }
.gc-page .gc-filter-dialog::backdrop { background: #172d4d4d; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.gc-page .gc-sheet-actions { gap: 10px; background: #fffffff5; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.gc-page .gc-sheet-actions button { border-radius: 12px; font-family: inherit; }
@media (max-width: 640px) {
  .gc-page .gc-sort { width: 100%; }
  .gc-page .gc-sort .gc-select-trigger { gap: 6px; padding-inline: 10px; font-size: 11px; }
  .gc-page .gc-sort .gc-select-prefix { display: none; }
  .gc-page .gc-filter-dialog fieldset label { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .gc-select-trigger > svg, .gc-category-chevron { transition: none; } }
/* White cards on a cool surface;
blue marks actions and selection. */
main[data-page="gift-store"]:has(.gc-page) {
  background: #f7f9fc;
}

.gc-page {
  --gc-blue:#075bea;
  --gc-ink:#142039;
  --gc-muted:#5d6b82;
  --gc-line:#e4eaf3;
  max-width:1480px;
  margin:auto;
  padding:104px 28px 28px;
  color:var(--gc-ink);
  font-family:'Vazirmatn',sans-serif;
}

.gc-page button,.gc-page input,.gc-page select {
  font:inherit;
}

.gc-page button,.gc-page select {
  cursor:pointer;
}

.gc-page button:disabled {
  cursor:not-allowed;
}

.gc-page button,.gc-page a,.gc-page input,.gc-page select {
  transition:background-color 160ms,border-color 160ms,box-shadow 160ms,color 160ms;
}

.gc-page :focus-visible {
  outline:3px solid var(--gc-blue);
  outline-offset:3px;
}

.gc-page .sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}

.gc-skip {
  position:absolute;
  top:0;
  transform:translateY(-130%);
  background:white;
  padding:12px;
  z-index:60;
}

.gc-skip:focus {
  transform:none;
}

/* Navigation: preserve the existing Go2Pal mark. */
.gc-header {
  height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:#fff;
  box-shadow:0 0 0 100vmax #fff;
  clip-path:inset(0 -100vmax);
}

.gc-logo {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--gc-blue);
}

.gc-logo>span:last-child {
  font:700 31px/1 Arial,sans-serif;
  letter-spacing:-1.5px;
}

.gc-header nav {
  display:flex;
  align-items:center;
  gap:28px;
  margin-inline:auto;
}

.gc-header nav a {
  text-decoration:none;
  color:var(--gc-ink);
  padding:26px 0 20px;
  font-size:14px;
  font-weight:600;
  border-bottom:2px solid transparent;
}

.gc-header nav .active {
  color:var(--gc-blue);
  border-bottom-color:var(--gc-blue);
}

.gc-order-link {
  border:0;
  background:none;
  color:inherit;
  font-size:14px!important;
  min-height:44px;
}

.gc-order-link:disabled {
  color:var(--gc-muted);
}

.gc-account {
  display:flex;
  align-items:center;
  gap:18px;
  flex-direction:row-reverse;
}

.gc-account>button:first-child {
  position:relative;
  border:0;
  background:transparent;
  color:var(--gc-ink);
  padding:9px;
  min-height:44px;
}

.gc-account>button:first-child span {
  position:absolute;
  top:0;
  right:0;
  border-radius:20px;
  padding:1px 5px;
  background:var(--gc-blue);
  color:#fff;
  font-size:10px;
}

.gc-account .gc-login {
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--gc-blue);
  border:1px solid transparent;
  color:#fff;
  border-radius:10px;
  min-height:44px;
  padding:10px 18px;
  font-size:14px;
  font-weight:600;
}

.gc-login:disabled {
  background:#f4f7fc;
  border-color:var(--gc-line);
  color:var(--gc-muted);
}

/* Compact hero, with one dominant card. Original brand images stay intact. */
.gc-hero {
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  min-height:228px;
  align-items:center;
  padding:26px 36px;
  margin-top:16px;
  background:radial-gradient(ellipse at 30% 0,#2b7df4 0,transparent 65%),#064fce;
  border-radius:18px;
  color:#fff;
}

.gc-hero-copy {
  position:relative;
  z-index:2;
}

.gc-hero h1 {
  font-size:clamp(32px,3.2vw,46px);
  font-weight:800;
  line-height:1.45;
  margin:0 0 5px;
}

.gc-hero p {
  font-size:15px;
  line-height:1.9;
  margin:0 0 20px;
  color:#f2f7ff;
}

.gc-search {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:54px;
  border-radius:30px;
  background:white;
  padding:0 20px;
  color:#546987;
  box-shadow:0 7px 24px #003a9b26;
}

.gc-search input {
  width:100%;
  min-width:0;
  border:0;
  background:transparent;
  outline:none;
  color:var(--gc-ink);
  font-size:15px;
  padding:13px 0;
}

.gc-search:focus-within {
  outline:3px solid #b5d0ff;
  outline-offset:3px;
}

.gc-search input::placeholder {
  color:var(--gc-muted);
}

.gc-hero-art {
  height:210px;
  position:relative;
  direction:ltr;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:16px;
}

.gc-art {
  flex-shrink:0;
  width:104px;
  min-height:212px;
  border-radius:12px;
  background:linear-gradient(145deg,#f4f6fa,#e8eef8);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--gc-blue);
  overflow:hidden;
}

.gc-art-image {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  width:100%;
  gap:10px;
}

.gc-art-image img {
  object-fit:contain;
  width:100%;
  height:118px;
  padding:10px;
}

.gc-art-image>span {
  font-size:14px;
  max-width:90%;
  text-align:center;
  overflow-wrap:anywhere;
}

.gc-art[data-brand="apple"] {
  background:linear-gradient(145deg,#fff,#e8edf4);
}

.gc-art[data-brand="steam"] {
  background:linear-gradient(145deg,#edf3f7,#dce8ee);
}

.gc-art[data-brand="playstation"] {
  background:linear-gradient(145deg,#edf3ff,#dce7fd);
}

.gc-art[data-brand="spotify"] {
  background:linear-gradient(145deg,#eff8f3,#deeee6);
}

.gc-art[data-brand="netflix"] {
  background:linear-gradient(145deg,#f9f1f2,#f1e4e8);
}

.gc-art[data-brand="airbnb"] {
  background:linear-gradient(145deg,#fff3f3,#f7e4e7);
}

.gc-art[data-brand="spotify"] img {
  padding:4px;
}

.gc-art-hero {
  width:145px;
  height:186px;
  min-height:0;
  border:1px solid #ffffff90;
  border-radius:14px;
  box-shadow:0 16px 28px #00276555,inset 0 1px 0 #fff;
  position:relative;
}

.gc-art-hero .gc-art-image img {
  height:130px;
  padding:14px;
}

.gc-art-hero .gc-art-caption {
  font-size:14px;
  font-weight:700;
  color:var(--gc-ink);
  margin:2px 0 10px;
}

.gc-art-hero:nth-child(1) {
  transform:rotate(-16deg) translate(18px,13px);
  z-index:1;
}

.gc-art-hero:nth-child(2) {
  transform:rotate(-3deg) translateY(-9px);
  width:158px;
  height:208px;
  z-index:3;
}

.gc-art-hero:nth-child(3) {
  transform:rotate(15deg) translate(-18px,14px);
  z-index:2;
}

/* Categories and filters */
.gc-categories {
  display:flex;
  gap:10px;
  justify-content:center;
  margin:18px 0 26px;
  scrollbar-width:none;
}

.gc-categories::-webkit-scrollbar {
  display:none;
}

.gc-categories button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex:1;
  min-height:46px;
  white-space:nowrap;
  border:1px solid var(--gc-line);
  border-radius:10px;
  background:#fff;
  color:var(--gc-ink);
  font-size:13px;
  font-weight:600;
}

.gc-categories button svg {
  color:#4a648c;
}

.gc-categories button.active {
  color:#fff;
  background:var(--gc-blue);
  border-color:var(--gc-blue);
}

.gc-categories button.active svg {
  color:white;
}

.gc-categories button:hover:not(.active) {
  border-color:#a9c4f5;
  background:#f0f5ff;
}

.gc-layout {
  display:grid;
  grid-template-columns:236px minmax(0,1fr);
  gap:24px;
  align-items:start;
}

.gc-products {
  min-width:0;
}

.gc-filters {
  border:1px solid var(--gc-line);
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}

.gc-filter-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 16px;
  border-bottom:1px solid var(--gc-line);
  gap:10px;
}

.gc-filter-heading h2 {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:700;
  margin:0;
}

.gc-filter-heading button {
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--gc-blue);
  background:none;
  border:0;
  font-size:12px;
  font-weight:600;
}

.gc-filter-heading button:disabled,.gc-sheet-actions button:disabled {
  color:#768297;
}

.gc-filters fieldset,.gc-filter-dialog fieldset {
  border:0;
  border-bottom:1px solid var(--gc-line);
  padding:8px 16px 20px;
  margin:0;
}

.gc-filters legend,.gc-filter-dialog legend {
  padding-top:18px;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:14px;
  font-weight:600;
}

.gc-filters fieldset label,.gc-filter-dialog fieldset label {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  line-height:2;
  margin-top:8px;
}

.gc-filters input[type=radio],.gc-filters input[type=checkbox],.gc-filter-dialog input[type=radio],.gc-filter-dialog input[type=checkbox] {
  accent-color:var(--gc-blue);
  width:18px;
  height:18px;
  margin:0;
}

.gc-filters select,.gc-filters input:not([type]),.gc-filter-dialog select,.gc-filter-dialog input:not([type]) {
  width:100%;
  border:1px solid #d6deeb;
  border-radius:10px;
  padding:10px 12px;
  min-height:44px;
  background:#fff;
  color:var(--gc-ink);
  font-size:13px;
}

.gc-stock {
  margin-top:16px!important;
  min-height:36px;
}

.gc-category-filter>summary {
  padding:18px 16px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}

.gc-category-filter>summary span {
  float:left;
  font-size:12px;
  font-weight:400;
  color:var(--gc-muted);
}

.gc-category-filter fieldset {
  border:0;
  padding-top:0;
}

.gc-category-filter fieldset label {
  min-height:36px;
}

.gc-results-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
  min-height:50px;
}

.gc-results-heading h2 {
  font-size:22px;
  font-weight:800;
  line-height:1.6;
  margin:0;
}

.gc-results-heading p {
  font-size:13px;
  color:var(--gc-muted);
  margin:2px 0 0;
}

.gc-results-actions {
  display:flex;
  align-items:center;
  gap:10px;
}

.gc-sort select {
  background:white;
  border:1px solid #d6deeb;
  border-radius:10px;
  padding:10px 12px;
  font-size:13px;
  min-height:44px;
  color:var(--gc-ink);
  max-width:100%;
}

.gc-mobile-filter {
  display:none;
}

.gc-active-filters {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 14px;
}

.gc-active-filters button {
  display:flex;
  align-items:center;
  gap:6px;
  border:1px solid #ccdcf7;
  border-radius:8px;
  background:#eef4ff;
  color:#164eae;
  font-size:12px;
  padding:8px 10px;
  max-width:100%;
  overflow-wrap:anywhere;
}

.gc-catalog-status {
  display:flex;
  align-items:center;
  gap:8px;
  background:#eef3fb;
  border-radius:10px;
  padding:11px 14px;
  font-size:13px;
  line-height:1.8;
  color:#465a79;
  margin:0 0 18px;
}

.gc-catalog-status svg {
  flex-shrink:0;
}

/* Title, compatibility, value and price form one readable column. */
.gc-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.gc-product {
  min-width:0;
  border:1px solid var(--gc-line);
  border-radius:16px;
  padding:18px;
  background:white;
  transition:border-color 160ms,box-shadow 160ms;
}

@media(hover:hover) {
  .gc-product:hover {
    border-color:#c2d4f2;
    box-shadow:0 8px 22px #1737630c;
  }
}

.gc-product-main {
  display:flex;
  gap:14px;
  direction:ltr;
  align-items:stretch;
}

.gc-product-content {
  min-width:0;
  flex:1;
  direction:rtl;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.gc-product h3 {
  font-size:16px;
  line-height:1.7;
  font-weight:700;
  margin:0 0 6px;
  min-height:27px;
  overflow-wrap:anywhere;
}

.gc-region {
  display:inline-flex;
  align-items:flex-start;
  gap:4px;
  color:var(--gc-muted);
  font-size:12px;
  line-height:1.8;
}

.gc-region svg {
  flex-shrink:0;
  margin-top:3px;
}

.gc-values {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:15px 0 16px;
  direction:ltr;
  width:100%;
}

.gc-values button {
  min-height:44px;
  min-width:44px;
  border:1px solid #dce3ee;
  border-radius:8px;
  background:#fff;
  color:#344058;
  font-size:13px;
  font-weight:600;
  padding:7px;
}

.gc-values button[aria-pressed=true] {
  color:var(--gc-blue);
  border-color:var(--gc-blue);
  box-shadow:inset 0 0 0 1px var(--gc-blue);
  background:#edf4ff;
}

.gc-values select {
  width:100%;
  min-width:0;
  border:1px solid #dce3ee;
  border-radius:8px;
  font-size:13px;
  padding:8px;
  min-height:44px;
}

.gc-price-block {
  margin-top:auto;
  margin-bottom:15px;
  width:100%;
}

.gc-price {
  display:flex;
  align-items:baseline;
  gap:5px;
  flex-wrap:wrap;
  font-size:20px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  line-height:1.5;
}

.gc-price>span {
  font-size:12px;
  font-weight:400;
}

.gc-price-caption {
  display:block;
  margin-top:2px;
  font-size:12px;
  color:var(--gc-muted);
  line-height:1.8;
}

.gc-buy,.gc-view-details {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  min-height:46px;
  padding:9px 8px;
  border-radius:10px;
  font-size:13px!important;
  font-weight:600!important;
  line-height:1.7;
}

.gc-buy {
  background:var(--gc-blue);
  border:1px solid var(--gc-blue);
  color:#fff;
}

.gc-buy:hover:enabled,.gc-login:hover:enabled {
  background:#0649bd;
}

.gc-buy:disabled {
  background:#eef1f6;
  color:#5d6b82;
  border-color:#e4e8ef;
}

.gc-view-details {
  border:1px solid #c9daf5;
  color:#0751cc;
  background:#f4f8ff;
}

.gc-view-details>svg:last-child {
  margin-inline-start:auto;
}

.gc-view-details:hover {
  background:#e9f2ff;
  border-color:#7fa9ef;
}

.gc-details {
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:12px;
  min-height:32px;
  padding:0;
  border:0;
  background:none;
  font-size:13px!important;
  color:#2352a4;
}

.gc-detail-content {
  border-top:1px solid var(--gc-line);
  margin-top:16px;
  padding-top:12px;
  font-size:13px;
  color:var(--gc-muted);
  line-height:1.95;
  white-space:pre-line;
  overflow-wrap:anywhere;
}

.gc-detail-content p+p {
  margin-top:10px;
}

.gc-detail-content summary {
  cursor:pointer;
  color:#2352a4;
  min-height:44px;
  padding-top:10px;
}

.gc-loading>div {
  min-height:280px;
  border-radius:16px;
  background:linear-gradient(105deg,#edf1f7 35%,#fafcff 50%,#edf1f7 65%);
  background-size:250% 100%;
  animation:gc-loading 1.5s infinite;
}

.gc-message {
  padding:45px 24px;
  text-align:center;
  background:#fff;
  border:1px solid var(--gc-line);
  border-radius:16px;
  min-height:250px;
}

.gc-message h3 {
  font-size:20px;
  font-weight:700;
}

.gc-message p {
  color:var(--gc-muted);
  font-size:14px;
  margin:12px 0;
}

.gc-message button,.gc-more {
  border:1px solid #c8dafb;
  border-radius:10px;
  padding:10px 18px;
  min-height:44px;
  background:#edf4ff;
  color:#0751c6;
  font-size:14px;
}

.gc-more {
  display:block;
  margin:24px auto 0;
}

/* Native dialog handles mobile focus, Escape, and backdrop. */
.gc-filter-dialog {
  width:min(100% - 16px,480px);
  max-width:none;
  max-height:88dvh;
  padding:0;
  margin:auto auto 8px;
  border:1px solid var(--gc-line);
  border-radius:20px 20px 12px 12px;
  background:#fff;
  color:var(--gc-ink);
  overflow-y:auto;
  box-shadow:0 16px 64px #14203930;
}

.gc-filter-dialog::backdrop {
  background:#14203966;
}

html:has(.gc-filter-dialog[open]) {
  overflow:hidden;
}

.gc-filter-dialog .gc-filter-heading {
  position:sticky;
  top:0;
  z-index:1;
  background:white;
}

.gc-filter-dialog .gc-sheet-close {
  min-width:44px;
  min-height:44px;
  justify-content:center;
  border-radius:10px;
  background:#f3f6fb;
  color:var(--gc-ink);
}

.gc-sheet-actions {
  display:flex;
  gap:14px;
  align-items:center;
  position:sticky;
  bottom:0;
  padding:14px 16px;
  background:#fff;
  border-top:1px solid var(--gc-line);
}

.gc-sheet-actions button {
  min-height:46px;
  border:0;
  background:none;
  color:var(--gc-blue);
  font-size:13px;
}

.gc-sheet-actions .gc-sheet-apply {
  flex:1;
  background:var(--gc-blue);
  color:#fff;
  border-radius:10px;
  font-weight:600;
}

/* Legacy cart layout styles. */






.gc-cart-panel {
  position:relative;
  margin-bottom:20px;
  padding:24px;
  background:white;
  border:1px solid #d8e5fa;
  border-radius:16px;
}

.gc-cart-close {
  display:flex;
  gap:6px;
  border:0;
  background:none;
  color:#184b9d;
  margin-bottom:12px;
  min-height:44px;
}

.gc-cart-panel .store-cart {
  position:static;
  max-width:600px;
  margin:0 auto;
}

.gc-cart-panel p {
  font-size:14px;
  line-height:1.9;
}



@keyframes gc-loading {
  to {
    background-position:-150% 0;
  }
}

@media(max-width:1320px) {

  .gc-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .gc-page {
    padding-inline:24px;
  }

  .gc-product .gc-art {
    width:112px;
  }
}

@media(max-width:1000px) {

  .gc-header nav {
    gap:16px;
  }

  .gc-header nav a,.gc-order-link {
    font-size:12px!important;
  }

  .gc-account {
    gap:10px;
  }

  .gc-account .gc-login {
    padding-inline:10px;
    font-size:12px;
  }

  .gc-categories {
    justify-content:flex-start;
    overflow-x:auto;
    padding-bottom:5px;
  }

  .gc-categories button {
    flex:0 0 auto;
    padding:8px 18px;
  }

  .gc-layout {
    grid-template-columns:215px minmax(0,1fr);
    gap:20px;
  }

  .gc-grid {
    grid-template-columns:1fr;
  }

  .gc-hero {
    padding:24px;
    grid-template-columns:1.5fr 1fr;
  }

  .gc-art-hero {
    width:95px;
    height:154px;
  }

  .gc-art-hero:nth-child(2) {
    width:108px;
    height:174px;
  }

  .gc-art-hero .gc-art-image img {
    height:112px;
    padding:10px;
  }

  .gc-art-hero .gc-art-caption {
    font-size:12px;
  }


}

@media(max-width:760px) and (min-width:641px) {

  .gc-header nav .gc-order-link,.gc-header nav a:nth-child(3) {
    display:none;
  }

  .gc-results-heading {
    align-items:flex-start;
    flex-direction:column;
  }

  .gc-product-main {
    gap:12px;
  }

  .gc-product .gc-art {
    width:90px;
  }
}

@media(max-width:640px) {

  .gc-page {
    padding:88px 16px 20px;
  }

  .gc-header {
    height:62px;
    gap:10px;
  }

  .gc-logo {
    gap:6px;
  }

  .gc-logo>span:last-child {
    font-size:26px;
  }

  .gc-logo>span:first-child {
    width:36px!important;
    height:36px!important;
  }

  .gc-header nav {
    display:none;
  }

  .gc-account {
    gap:8px;
  }

  .gc-account .gc-login {
    font-size:12px;
    padding:8px 10px;
  }

  .gc-hero {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:stretch;
    height:242px;
    min-height:0;
    padding:16px 18px;
    margin-top:10px;
  }

  .gc-hero h1 {
    font-size:28px;
    line-height:1.5;
    margin-bottom:0;
  }

  .gc-hero p {
    font-size:12px;
    margin:2px 0 12px;
  }

  .gc-search {
    min-height:46px;
    padding-inline:14px;
  }

  .gc-search input {
    font-size:16px;
    padding-block:9px;
  }

  .gc-search input::placeholder {
    font-size:12px;
  }

  .gc-hero-art {
    height:86px;
    padding-top:0;
    margin-top:4px;
    margin-bottom:-24px;
  }

  .gc-art-hero {
    width:72px;
    height:94px;
  }

  .gc-art-hero:nth-child(2) {
    width:82px;
    height:112px;
    transform:rotate(-3deg) translateY(0);
  }

  .gc-art-hero .gc-art-image img {
    height:68px;
    padding:8px;
  }

  .gc-art-hero .gc-art-caption {
    display:none;
  }

  .gc-art-hero svg {
    width:30px;
    height:30px;
  }

  .gc-categories {
    margin:12px -16px 14px;
    padding-inline:16px;
    gap:8px;
  }

  .gc-categories button {
    min-height:44px;
    font-size:12px;
    padding:8px 14px;
  }

  .gc-categories button svg {
    width:19px;
  }

  .gc-layout {
    display:block;
  }

  .gc-filters {
    display:none;
  }

  .gc-results-heading {
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    margin-bottom:12px;
  }

  .gc-results-heading>div:first-child {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:8px;
  }

  .gc-results-heading h2 {
    font-size:17px;
  }

  .gc-results-heading p {
    font-size:11px;
    white-space:nowrap;
  }

  .gc-results-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .gc-mobile-filter {
    display:flex;
    justify-content:center;
    gap:7px;
    align-items:center;
    background:white;
    border:1px solid #d6deeb;
    border-radius:10px;
    min-height:44px;
    padding:8px;
    font-size:13px;
  }

  .gc-mobile-filter span {
    background:#edf4ff;
    color:var(--gc-blue);
    padding:0 6px;
    border-radius:6px;
  }

  .gc-sort select {
    width:100%;
    font-size:12px;
    padding:10px;
  }

  .gc-catalog-status {
    font-size:12px;
    line-height:1.7;
    padding:9px 10px;
    margin-bottom:14px;
  }

  .gc-active-filters {
    gap:6px;
    margin-bottom:10px;
  }

  .gc-active-filters button {
    min-height:44px;
  }

  .gc-grid {
    gap:14px;
  }

  .gc-product {
    padding:16px;
  }

  .gc-product .gc-art {
    width:100px;
    min-height:222px;
  }

  .gc-product-main {
    gap:14px;
  }

  .gc-product h3 {
    font-size:16px;
  }

  .gc-values {
    gap:5px;
    margin:13px 0 14px;
  }

  .gc-values button {
    min-width:44px;
  }

  .gc-price {
    font-size:20px;
  }

  .gc-price-caption {
    font-size:12px;
  }

  .gc-filter-dialog select,.gc-filter-dialog input:not([type]) {
    font-size:16px;
  }

  .gc-filter-dialog label {
    min-height:32px;
  }

  .gc-filter-dialog .gc-category-filter label {
    min-height:44px;
  }




  .gc-cart-panel {
    padding:16px;
  }
}

@media(max-width:370px) {

  .gc-page {
    padding-inline:12px;
  }

  .gc-account .gc-login {
    font-size:11px;
    padding-inline:8px;
  }

  .gc-product {
    padding:14px;
  }

  .gc-product .gc-art {
    width:86px;
  }

  .gc-product-main {
    gap:10px;
  }

  .gc-price {
    font-size:19px;
  }

  .gc-results-heading h2 {
    font-size:16px;
  }

  .gc-results-heading p {
    font-size:10px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .gc-page * {
    animation:none!important;
    transition:none!important;
  }
}
.gc-category-count { font-size:11px; color:var(--gc-muted); font-weight:400; }
.gc-categories { overflow-x:auto; justify-content:flex-start; }
.gc-categories button { flex:1 0 auto; padding-inline:16px; }
.gc-categories button.active .gc-category-count { color:#e1ecff; }
.gc-product-type { font-size:11px; line-height:1.7; color:var(--gc-muted); margin:3px 0 0; overflow-wrap:anywhere; }
.gc-range-note { font-size:11px; line-height:1.7; color:var(--gc-muted); margin-top:4px; }
.gc-disclaimer { border-inline-start:2px solid #aecaff; padding-inline-start:10px; }
.gc-product:not(:has(.gc-art)) h3 { min-height:0; }
.gc-product:not(:has(.gc-art)) .gc-values { justify-content:flex-end; }

.store-account-header { max-width:1240px; margin:auto; padding:28px 24px; display:flex; align-items:center; flex-wrap:wrap; gap:24px; border-bottom:1px solid #e2e5e9; }
.store-account-header>a { display:flex; align-items:center; gap:8px; color:#075bea; text-decoration:none; font-weight:700; }
.store-account-header h1 { font-size:24px; margin:0; }
.store-account-header p { color:#606873; font-size:13px; margin:5px 0 0; }
.store-account-header>button { margin-inline-start:auto; padding:10px 16px; background:white; border:1px solid #cdd3dc; border-radius:5px; min-height:44px; }
.store-payment-confirm { border:1px solid #cbd5e1; padding:16px; margin-top:16px; border-radius:6px; }
.store-payment-confirm h3 { font-size:16px; margin:0 0 12px; }
.store-payment-confirm p, .store-payment-confirm small { display:block; font-size:13px; line-height:1.9; }
.store-payment-confirm strong { display:block; margin:12px 0; }
.store-payment-confirm button { margin-top:12px; }
.store-deliveries code { white-space:pre-wrap; overflow-wrap:anywhere; }
/* Coupon entry follows the cart's existing controls and stays compact on mobile. */
.store-coupon { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding-block: 1rem; }
.store-coupon label, .store-coupon small { flex-basis: 100%; }
.store-coupon input { min-width: 0; flex: 1; border: 1px solid #dbe3ef; border-radius: .65rem; padding: .65rem; font: inherit; }
.store-coupon button { border: 1px solid #dbe3ef; border-radius: .65rem; padding: .65rem .9rem; background: #f4f7fc; color: #164dba; font: inherit; cursor: pointer; }
.store-coupon button:disabled { opacity: .55; cursor: wait; }
/* Product cards share the site's white surfaces, soft blue controls and type. */
.gc-grid { align-items: start; }
.gc-product.gc-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid #e0e7f1;
  border-radius: 22px;
  background: #fff;
  color: #1f2b46;
  font-family: 'IRANSansX', 'Vazirmatn', sans-serif;
  box-shadow: 0 4px 18px rgba(31, 43, 70, .035);
}
@media (hover: hover) {
  .gc-product.gc-card:hover { border-color: #bacfee; box-shadow: 0 10px 28px rgba(31, 65, 118, .09); }
}
.gc-brand-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 92px;
  margin: 10px 10px 0;
  padding: 16px;
  border: 1px solid rgba(218, 228, 242, .55);
  border-radius: 15px;
  background: linear-gradient(135deg, #f5f8fd, #edf3fb);
  color: #7d99be;
}
.gc-brand-visual[data-brand="apple"] { background: linear-gradient(135deg, #f7f8fa, #eceff4); }
.gc-brand-visual[data-brand="steam"] { background: linear-gradient(135deg, #23435e, #14283e); color: #bbd7f1; }
.gc-brand-visual[data-brand="playstation"] { background: linear-gradient(135deg, #f0f5ff, #e6eeff); }
.gc-brand-visual[data-brand="spotify"], .gc-brand-visual[data-brand="xbox"] { background: linear-gradient(135deg, #f0f9f4, #e8f4ee); }
.gc-brand-visual[data-brand="amazon"] { background: linear-gradient(135deg, #fdf8f0, #faf0df); }
.gc-brand-visual[data-brand="netflix"], .gc-brand-visual[data-brand="airbnb"] { background: linear-gradient(135deg, #fdf3f4, #fae9ed); }
.gc-brand-visual img {
  display: block;
  width: 160px;
  max-width: 100%;
  height: 54px;
  object-fit: scale-down;
  padding: 0;
}
.gc-availability {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  padding: 3px 9px;
  border: 1px solid rgba(203, 213, 225, .7);
  border-radius: 99px;
  background: rgba(255, 255, 255, .92);
  color: #69758a;
  font-size: 11px;
  line-height: 1.7;
}
.gc-card-body { display: grid; gap: 12px; padding: 16px; }
.gc-card-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.gc-card h3 { margin: 0; font-size: 16px; line-height: 1.75; font-weight: 750; }
.gc-card .gc-region { gap: 4px; align-items: center; color: #788397; font-size: 11px; white-space: nowrap; }
.gc-card .gc-region svg { margin: 0; }
.gc-denominations { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.gc-values-label { color: #627087; font-size: 11px; font-weight: 500; }
.gc-card .gc-values { gap: 6px; margin: 0; flex: 1; min-width: 0; }
.gc-denomination-select { width: 100%; min-width: 0; }
.gc-card .gc-values :is(button, .gc-select-value) { overflow-wrap: anywhere; white-space: normal; }
.gc-card .gc-values button {
  min-width: 58px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #e0e6f0;
  border-radius: 11px;
  background: #f9fbfe;
  color: #4b5c77;
  font: 600 14px/1.4 'IRANSansX', sans-serif;
}
.gc-card .gc-values button[aria-pressed="true"] { border-color: #2f6bf0; color: #205ce0; background: #edf3ff; box-shadow: inset 0 0 0 1px #2f6bf0; }
.gc-card .gc-values select { border-radius: 11px; background: #f9fbfe; border-color: #e0e6f0; color: #4b5c77; }
.gc-card .gc-range-note { display: block; margin-top: 6px; font-size: 11px; color: #788397; }
.gc-card-purchase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding-top: 12px; border-top: 1px solid #edf0f6; }
.gc-card .gc-price-block { margin: 0; }
.gc-card .gc-price { gap: 4px; flex-wrap: wrap; margin-top: 2px; color: #1f2b46; font-size: 21px; font-weight: 800; }
.gc-card .gc-price > span { color: #6a7790; font-size: 12px; font-weight: 500; }
.gc-card .gc-price-caption { margin: 0; color: #8290a5; font-size: 11px; }
.gc-card .gc-buy, .gc-card .gc-view-details {
  min-height: 46px;
  padding: 9px 10px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.7;
  min-width: 0;
}
.gc-card .gc-buy svg { flex-shrink: 0; }
.gc-card .gc-buy { border-color: #2f6bf0; background: #2f6bf0; box-shadow: 0 5px 12px rgba(47, 107, 240, .12); }
.gc-card .gc-buy:hover:enabled { background: #205ce0; border-color: #205ce0; }
.gc-card .gc-buy:disabled { background: #eef1f6; color: #6e7d94; border-color: #e4e8ef; box-shadow: none; }
.gc-card-quantity {
  display: grid;
  grid-template-columns: 44px minmax(20px, 1fr) 44px;
  align-items: center;
  min-width: 0;
  height: 46px;
  border: 1px solid #bdd0f5;
  border-radius: 12px;
  background: #f0f5ff;
  color: #205ce0;
}
.gc-card-quantity button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 23px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}
.gc-card-quantity button:hover:enabled { background: #dfeaff; }
.gc-card-quantity button:disabled { color: #a5b1c6; cursor: default; }
.gc-card-quantity output { text-align: center; font-size: 16px; font-weight: 700; }
.gc-card-quantity[aria-busy="true"] { opacity: .65; }
.gc-card .gc-view-details { color: #566a87; background: #f5f8fc; border-color: #e0e7f1; }
.gc-card .gc-details {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  margin: 0;
  min-height: 42px;
  padding: 10px 16px;
  border: 0;
  border-top: 1px solid #edf0f6;
  background: #fbfcff;
  color: #526783;
  font-size: 12px !important;
  font-weight: 500;
  text-align: start;
}
.gc-card .gc-details:hover { color: #205ce0; background: #f1f6ff; }
.gc-card .gc-details > svg:last-child { margin-inline-start: auto; }
.gc-card :is(.gc-details, .gc-view-details) > svg:last-child { transition: transform 160ms; }
.gc-card :is(.gc-details, .gc-view-details)[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.gc-card .gc-detail-content {
  margin: 0;
  padding: 18px 20px 20px;
  border-top: 1px solid #e5edf9;
  background: #f7faff;
  color: #586a84;
  font-size: 12px;
  line-height: 2;
  white-space: normal;
}
.gc-card-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; }
.gc-card-facts > div { min-width: 0; }
.gc-card-facts dt { color: #8995a8; font-size: 10px; line-height: 1.9; }
.gc-card-facts dd { margin: 3px 0 0; color: #2b405f; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.gc-detail-section + .gc-detail-section { margin-top: 16px; }
.gc-detail-section h4 { display: flex; align-items: center; margin: 0 0 6px; color: #2b405f; font-size: 12px; font-weight: 700; }
.gc-detail-section p, .gc-card-terms p { margin: 0; white-space: pre-line; }
.gc-card .gc-card-notice { display: flex; gap: 7px; align-items: flex-start; margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: #edf3fd; color: #516b93; }
.gc-range-input { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 10px; color: #71839f; font-size: 11px; }
.gc-range-input input { min-width: 0; height: 42px; padding: 7px 11px; border: 1px solid #dce7fa; border-radius: 10px; background: #f8faff; color: #2b405f; font: 600 13px/1.5 ui-monospace, monospace; }
.gc-range-input input[aria-invalid="true"] { border-color: #d68a98; background: #fff7f8; }
.gc-range-note, .gc-range-error { display: block; margin-top: 7px; color: #7d8da5; font-size: 10px; line-height: 1.8; }
.gc-range-error { color: #b75a6c; }
.gc-card-notice svg { flex-shrink: 0; margin-top: 4px; }
.gc-card .gc-detail-category, .gc-card .gc-detail-updated { margin: 14px 0 0; color: #8995a8; font-size: 10px; }
.gc-card-terms { margin-top: 16px; border-top: 1px solid #e1eaf7; }
.gc-card .gc-card-terms summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 10px 0; color: #45628b; font-size: 12px; list-style: none; }
.gc-card-terms summary::-webkit-details-marker { display: none; }
.gc-card-terms[open] summary svg { transform: rotate(180deg); }
@media (max-width: 640px) {
  .gc-range-input input { min-height: 44px; font-size: 16px; }
  .gc-product.gc-card { border-radius: 20px; }
  .gc-brand-visual { min-height: 84px; padding: 14px; border-radius: 13px; }
  .gc-brand-visual img { height: 50px; width: 150px; }
  .gc-card .gc-detail-content { padding: 16px; }
}
@media (max-width: 380px) {
  .gc-card .gc-price { font-size: 19px; }
  .gc-card .gc-price > span { font-size: 10px; }
  .gc-card .gc-price-caption { font-size: 10px; }
  .gc-card .gc-buy { gap: 5px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .gc-card *, .gc-product.gc-card { transition: none !important; } }
main.gcart-page { padding: 114px 28px 64px; min-height: 70vh; background: #f7f9fc; color: #22324d; font: 400 14px/1.8 'IRANSansX', sans-serif; }
.gcart-page * { box-sizing: border-box; }
.gcart-page :is(button, input) { font: inherit; }
.gcart-page button { cursor: pointer; }
.gcart-page button:disabled { cursor: default; opacity: .5; }
.gcart-page :is(button, a, input):focus-visible { outline: 2px solid #75a1f2; outline-offset: 3px; }
.gcart-page a { text-decoration: none; }
.gcart-container { max-width: 1160px; margin-inline: auto; }
.gcart-back { display: inline-flex; align-items: center; gap: 7px; color: #6c7f9b; font-size: 12px; }
.gcart-back > svg { transform: rotate(180deg); }
.gcart-back:hover { color: #2f6bf0; }
.gcart-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 22px 0 28px; }
.gcart-heading h1 { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.6; }
.gcart-heading p { margin: 4px 0 0; color: #8491a6; font-size: 12px; }
.gcart-heading > svg { color: #b2c2db; }
.gcart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.gcart-main { min-width: 0; }
.gcart-items, .gcart-summary, .gcart-delivery { background: #fff; border: 1px solid #e1e8f2; border-radius: 20px; box-shadow: 0 4px 20px #1d3b6505; }
.gcart-items > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid #edf1f7; }
.gcart-items > header h2, .gcart-summary > h2 { margin: 0; font-size: 14px; font-weight: 700; }
.gcart-items > header button { padding: 5px 0; border: 0; background: transparent; color: #94a0b3; font-size: 11px; }
.gcart-items > header button:hover:enabled { color: #bd5061; }
.gcart-line { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 12px 16px; padding: 22px; align-items: center; }
.gcart-line + .gcart-line { border-top: 1px solid #edf1f7; }
.gcart-brand { display: grid; place-items: center; width: 80px; height: 70px; border-radius: 13px; background: #f2f5fa; color: #8298b8; }
.gcart-brand[data-brand="steam"] { background: #1e354b; }
.gcart-brand[data-brand="spotify"] { background: #eef8f3; }
.gcart-brand[data-brand="amazon"] { background: #fdf7ed; }
.gcart-brand img { display: block; max-width: 62px; height: 40px; object-fit: scale-down; }
.gcart-product { min-width: 0; }
.gcart-product h2 { margin: 0 0 5px; color: #293d5d; font-size: 15px; font-weight: 700; line-height: 1.8; overflow-wrap: anywhere; }
.gcart-product p { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; color: #8594aa; font-size: 11px; }
.gcart-product bdi { color: #5d7394; font-weight: 600; }
.gcart-line-price { display: grid; text-align: left; gap: 4px; white-space: nowrap; }
.gcart-line-price strong { font-size: 14px; color: #293d5d; font-weight: 700; }
.gcart-line-price small { font-size: 10px; color: #94a0b3; }
.gcart-line-actions { grid-column: 2 / -1; display: flex; align-items: center; gap: 12px; }
.gcart-quantity { display: grid; grid-template-columns: 44px 32px 44px; align-items: center; height: 46px; border: 1px solid #dce7fa; border-radius: 11px; color: #2f6bf0; background: #f3f7ff; }
.gcart-quantity button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; font-size: 21px; }
.gcart-quantity button:hover:enabled { background: #e5eeff; }
.gcart-quantity output { text-align: center; color: #2e538c; font-weight: 700; }
.gcart-remove { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #a0acbd; }
.gcart-remove:hover:enabled { background: #fff3f4; color: #bd5061; }
.gcart-region-note, .gcart-verified { display: flex; align-items: flex-start; gap: 7px; margin: 16px 4px; color: #8b99ae; font-size: 11px; }
.gcart-region-note svg, .gcart-verified svg { flex-shrink: 0; margin-top: 2px; }
.gcart-verified { color: #4a8875; }
.gcart-summary { position: sticky; top: 104px; padding: 24px; }
.gcart-summary > h2 { margin-bottom: 22px; }
.gcart-summary-count, .gcart-discount { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 12px 0; color: #8795aa; font-size: 12px; }
.gcart-summary-count b { color: #61738f; font-size: 12px; font-weight: 500; }
.gcart-discount { color: #27866c; }
.gcart-total { display: grid; gap: 5px; padding: 18px 0; border-top: 1px solid #edf1f7; }
.gcart-total summary { display: grid; gap: 5px; cursor: pointer; list-style: none; border-radius: 6px; }
.gcart-total summary::-webkit-details-marker { display: none; }
.gcart-total summary > span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #71839f; }
.gcart-total summary > strong { font-size: 24px; font-weight: 800; color: #223a60; }
.gcart-total[open] summary svg { transform: rotate(180deg); }
.gcart-total summary:focus-visible { outline: 2px solid #75a1f2; outline-offset: 3px; }
.gcart-price-breakdown { margin: 14px 0 0; padding: 12px; border: 1px solid #e8eef7; border-radius: 11px; background: #f8faff; }
.gcart-price-breakdown > div { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0; font-size: 11px; color: #8393ab; }
.gcart-price-breakdown dd { margin: 0; color: #506786; white-space: nowrap; }
.gcart-primary { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 48px; padding: 11px 16px; border: 1px solid #2f6bf0; border-radius: 12px; color: #fff; background: #2f6bf0; font-weight: 650; font-size: 13px; line-height: 1.8; text-align: center; }
.gcart-primary:hover:enabled, a.gcart-primary:hover { background: #205ce0; border-color: #205ce0; }
.gcart-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: 10px; color: #9aa7ba; }
.gcart-secure svg { flex-shrink: 0; }
.gcart-coupon { margin: 0 0 18px; border-top: 1px solid #edf1f7; }
.gcart-coupon summary { display: flex; align-items: center; justify-content: space-between; min-height: 46px; color: #7d8da5; font-size: 11px; cursor: pointer; list-style: none; }
.gcart-coupon summary::-webkit-details-marker { display: none; }
.gcart-coupon[open] summary svg { transform: rotate(180deg); }
.gcart-coupon form { display: flex; gap: 8px; margin-bottom: 10px; }
.gcart-coupon input { width: 0; min-width: 0; flex: 1; height: 44px; padding: 8px 11px; border: 1px solid #dfe7f2; border-radius: 10px; background: #f8faff; font-size: 12px; }
.gcart-coupon form button { min-height: 44px; border: 1px solid #dce6f8; border-radius: 10px; padding: 6px 12px; background: #edf4ff; color: #2c63d0; font-size: 12px; }
.gcart-coupon p { margin: 8px 0; font-size: 11px; color: #27866c; }
.gcart-text-button { width: 100%; min-height: 40px; padding: 7px; border: 0; background: transparent; color: #7d8da5; font-size: 11px; }
.gcart-confirm { padding-top: 16px; border-top: 1px solid #e1eafb; }
.gcart-confirm h3 { margin: 0; font-size: 13px; }
.gcart-confirm > strong { display: block; margin: 8px 0; font-size: 20px; color: #245fd5; }
.gcart-confirm p, .gcart-caption { margin: 8px 0 14px; color: #8796ac; font-size: 11px; line-height: 1.9; }
.gcart-confirm .gcart-quote-change { padding: 10px 12px; border-radius: 10px; background: #fff8e9; color: #8b6c31; }
.gcart-stock-error { display: block; color: #bd5061 !important; font-size: 10px; white-space: normal; }
.gcart-error { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; margin-bottom: 20px; background: #fff5f5; border: 1px solid #f1d7dc; border-radius: 13px; color: #ad4a5e; font-size: 12px; }
.gcart-error button { flex-shrink: 0; min-height: 36px; border: 0; background: transparent; color: inherit; font-size: 11px; }
.gcart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 340px; padding: 45px 24px; border: 1px solid #e1e8f2; border-radius: 22px; background: #fff; text-align: center; color: #8b9bb3; }
.gcart-empty-icon { display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 12px; border-radius: 26px; background: #f1f6ff; color: #6e99eb; }
.gcart-empty h2 { margin: 10px 0 6px; color: #2d4569; font-size: 20px; font-weight: 700; }
.gcart-empty p { margin: 0 0 24px; font-size: 12px; }
.gcart-empty .gcart-primary { width: auto; min-width: 210px; }
.gcart-loading { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
.gcart-loading span { height: 270px; border: 1px solid #e1e8f2; border-radius: 20px; background: linear-gradient(120deg, #fff, #f0f4fa, #fff); }
.gcart-delivery { margin-top: 24px; overflow: hidden; }
.gcart-delivery .store-login { margin: 0; padding: 24px; border: 0; background: #fff; gap: 16px; }
.gcart-delivery .store-login > div small { font: 500 11px/1.8 'IRANSansX', sans-serif; color: #8a9ab1; }
.gcart-delivery .store-login h3 { margin: 4px 0; font: 700 17px/1.8 'IRANSansX', sans-serif; color: #2d4569; }
.gcart-delivery .store-login p { margin-top: 3px; color: #93a1b6; font: 400 11px/1.8 'IRANSansX', sans-serif; }
.gcart-delivery .store-login label span { font: 500 12px/1.8 'IRANSansX', sans-serif; color: #6b7d99; }
.gcart-delivery .store-login input { height: 46px; padding-inline: 13px; border-radius: 11px; background: #f8faff; color: #334560; font: 500 13px/1.8 'IRANSansX', sans-serif; }
.gcart-delivery .store-login > button { min-height: 48px; border-radius: 12px; background: #2f6bf0; font: 650 13px/1.8 'IRANSansX', sans-serif; }
.gcart-delivery .store-login > .store-login-back { min-height: 40px; color: #8090a8; background: transparent; font-weight: 500; font-size: 12px; }
.gcart-delivery .store-login .gcart-login-link { margin-top: 14px; padding-top: 12px; border-top: 1px solid #edf1f7; color: #6c7f9b; font-size: 12px; }
.gcart-login-link a { color: #2f6bf0; font-weight: 650; margin-inline-start: 4px; }
.gcart-delivery label b { color: #8da4c4; font-weight: 500; }
.gcart-profile-form { display: grid; gap: 18px; padding: 24px; }
.gcart-profile-form h2 { margin: 0 0 5px; font-size: 17px; font-weight: 700; color: #2d4569; }
.gcart-profile-form p { margin: 0; color: #8b9bb1; font-size: 11px; line-height: 1.9; }
.gcart-profile-form label { display: grid; gap: 7px; min-width: 0; }
.gcart-profile-form label > span { display: flex; align-items: center; gap: 5px; color: #6b7d99; font-size: 12px; }
.gcart-profile-form label > span svg { margin-inline-start: auto; color: #9babc2; }
.gcart-profile-form input { width: 100%; min-width: 0; height: 46px; padding: 8px 13px; border: 1px solid #dfe7f2; border-radius: 11px; background: #f8faff; color: #334560; font-size: 13px; }
.gcart-profile-form input[readonly] { color: #91a1b8; background: #f2f5fa; }
.gcart-profile-form small { color: #9aa8bb; font-size: 10px; }
.glogin-card { max-width: 420px; margin: 34px auto 20px; padding: 32px; border: 1px solid #e1e8f2; border-radius: 22px; background: #fff; }
.glogin-card .gcart-empty-icon { width: 64px; height: 64px; border-radius: 20px; }
.glogin-card h1 { margin: 20px 0 8px; font-size: 24px; font-weight: 800; }
.glogin-card > p { font-size: 12px; color: #91a0b6; }
.glogin-card form { display: grid; gap: 20px; margin-top: 28px; }
.glogin-card label { display: grid; gap: 8px; font-size: 12px; color: #7185a1; }
.glogin-card input { width: 100%; min-width: 0; height: 48px; padding: 10px 13px; border: 1px solid #dfe7f2; border-radius: 11px; background: #f8faff; font-size: 14px; }
.glogin-card .gcart-error { margin-top: 20px; }
.glogin-card .glogin-register { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid #edf1f7; color: #8c9cb4; font-size: 11px; line-height: 2; }
.glogin-register a { color: #2f6bf0; }
.gcart-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (min-width: 901px) { .gcart-brand { grid-row: span 2; } }
@media (max-width: 900px) {
  .gcart-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; }
  .gcart-line { grid-template-columns: 64px minmax(0, 1fr); padding: 18px; gap: 12px; }
  .gcart-brand { width: 64px; height: 64px; }
  .gcart-brand img { max-width: 50px; }
  .gcart-line-price { grid-column: 2; text-align: start; }
  .gcart-line-actions { grid-column: 2; }
  .gcart-summary { padding: 20px; }
}
@media (max-width: 700px) {
  .glogin-card input, .gcart-profile-form input, .gcart-coupon input,
  .gcart-delivery .store-login input { font-size: 16px; }
  main.gcart-page { padding: 100px 16px 40px; }
  .gcart-heading { margin: 18px 0 22px; }
  .gcart-heading h1 { font-size: 25px; }
  .gcart-layout, .gcart-loading { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .gcart-summary { position: static; }
  .gcart-total summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .gcart-total summary > strong { font-size: 21px; }
  .gcart-items > header { padding: 16px 18px; }
  .gcart-product h2 { font-size: 14px; }
  .gcart-line-price strong { font-size: 14px; }
  .gcart-line-actions { justify-content: space-between; }
  .gcart-region-note { margin-bottom: 0; }
  .gcart-empty { min-height: 330px; padding: 30px 20px; }
  .gcart-delivery .store-login { padding: 20px; }
  .gcart-profile-form { padding: 20px; }
  .glogin-card { margin: 24px 0; padding: 24px; }
}
@media (max-width: 380px) {
  main.gcart-page { padding-inline: 12px; }
  .gcart-line { gap: 10px; padding: 16px; grid-template-columns: 56px minmax(0, 1fr); }
  .gcart-brand { width: 56px; height: 60px; }
  .gcart-summary { padding: 18px; }
  .gcart-total summary > strong { font-size: 19px; }
}
.gaccount-page { min-height: 78vh !important; }
.gaccount-heading { display:flex;align-items:center;justify-content:space-between;gap:20px;margin:23px 0 28px; }
.gaccount-heading > div > span { color:#93a1b6;font-size:11px; }
.gaccount-heading h1 { margin:4px 0;font-size:28px;font-weight:800;line-height:1.7; }
.gaccount-heading p { margin:0;color:#8293ad;font-size:12px; }
.gaccount-layout { display:grid;grid-template-columns:228px minmax(0,1fr);gap:24px;align-items:start; }
.gaccount-panel { background:#fff;border:1px solid #e2e9f3;border-radius:20px;box-shadow:0 4px 20px #1d3b6504; }
.gaccount-content { min-width:0;display:grid;gap:20px; }
.gaccount-sidebar { padding:20px 14px;position:sticky;top:108px; }
.gaccount-welcome { display:flex;gap:11px;align-items:center;padding:0 6px 20px;border-bottom:1px solid #edf1f7;margin-bottom:12px; }
.gaccount-welcome > span,.gaccount-modal-icon { display:grid;place-items:center;width:48px;height:48px;flex-shrink:0;background:#edf4ff;border-radius:16px;color:#3973df; }
.gaccount-welcome strong { display:block;font-size:13px;color:#3b5275; }
.gaccount-welcome small { display:block;max-width:138px;overflow-wrap:anywhere;font-size:11px;color:#8b9ab0; }
.gaccount-sidebar nav { display:grid;gap:5px; }
.gaccount-sidebar button { display:flex;align-items:center;gap:10px;width:100%;padding:13px 12px;border:0;border-radius:11px;background:transparent;color:#7f90a9;text-align:right;font:inherit;font-size:12px; }
.gaccount-sidebar button.active { color:#2f6bf0;background:#eef4ff;font-weight:650; }
.gaccount-sidebar nav button > span { margin-inline-start:auto;font-size:11px; }
.gaccount-sidebar .gaccount-logout { margin-top:24px;color:#ac6b77;border-top:1px solid #edf1f7;border-radius:0;padding-top:18px; }
.gaccount-profile > header { padding:23px 26px;border-bottom:1px solid #edf1f7; }
.gaccount-profile h2 { margin:0;font-size:15px;font-weight:700; }
.gaccount-profile header p { margin:5px 0 0;color:#8b9bb2;font-size:11px; }
.gaccount-form { display:grid;gap:20px; }
.gaccount-profile .gaccount-form { padding:26px;grid-template-columns:repeat(2,minmax(0,1fr)); }
.gaccount-form label { display:grid;align-content:start;gap:8px;min-width:0; }
.gaccount-form label > span { display:flex;align-items:center;gap:7px;color:#7285a1;font-size:12px; }
.gaccount-form input { width:100%;height:48px;min-width:0;padding:10px 13px;border:1px solid #dfe7f2;border-radius:11px;background:#f8faff;color:#334b70;font:inherit;font-size:13px; }
.gaccount-form input[readonly] { background:#f2f5fa;color:#8c9eb7; }
.gaccount-form small { font-size:10px;color:#99a8bd; }
.gaccount-form-wide,.gaccount-form-footer { grid-column:1/-1; }
.gaccount-form-footer { display:flex;align-items:center;gap:18px;margin-top:3px; }
.gaccount-form-footer .gcart-primary { width:auto;min-width:160px; }
.gaccount-saved { display:flex;align-items:center;gap:6px;font-size:12px;color:#29856b; }
.gaccount-orders-shortcut { display:flex;align-items:center;gap:14px;padding:22px 26px;color:#496285; }
.gaccount-shortcut-icon { display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#f2f6fc;color:#6890d0; }
.gaccount-orders-shortcut strong { display:block;font-size:13px; }
.gaccount-orders-shortcut small { display:block;color:#91a0b5;font-size:11px;margin-top:4px; }
.gaccount-orders-shortcut > svg { margin-inline-start:auto;flex-shrink:0; }
.gaccount-refresh { display:flex;align-items:center;gap:7px;border:1px solid #dfe7f2;border-radius:10px;min-height:42px;padding:8px 12px;background:#fff;color:#8093ae;font-size:11px; }
.gaccount-filters { display:flex;gap:7px;flex-wrap:wrap; }
.gaccount-filters button { padding:8px 16px;min-height:42px;border:1px solid #e0e8f4;border-radius:11px;background:#fff;color:#8496af;font-size:12px; }
.gaccount-filters button[aria-pressed=true] { color:#2f6bf0;border-color:#c9dafb;background:#edf4ff; }
.gaccount-orders { display:grid;gap:16px; }
.gaccount-order-card { overflow:hidden; }
.gaccount-detail { scroll-margin-top:105px; }
.gaccount-order-card > header,.gaccount-detail > header { display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 22px;border-bottom:1px solid #edf1f7; }
.gaccount-order-card > header > span:first-child { font-size:11px;color:#8596ad; }
.gaccount-order-card bdi { font-family:inherit; }
.gaccount-status { display:inline-flex;align-items:center;gap:6px;flex-shrink:0;padding:4px 9px;border-radius:8px;font-size:10px;font-weight:500;line-height:1.8;white-space:nowrap; }
.gaccount-status i { width:5px;height:5px;border-radius:50%;background:currentColor; }
.gaccount-status[data-tone=waiting] { background:#fff8e9;color:#a7894c; }
.gaccount-status[data-tone=success] { background:#edf8f3;color:#40977b; }
.gaccount-status[data-tone=failed] { background:#fff1f3;color:#b86b7b; }
.gaccount-order-card-products { display:grid;gap:18px;padding:22px; }
.gaccount-order-card-products > div { display:flex;align-items:center;gap:14px; }
.gaccount-brand { display:grid;place-items:center;width:60px;height:58px;flex-shrink:0;border-radius:13px;background:#f2f5fa;color:#86a0c3; }
.gaccount-brand[data-brand=steam] { background:#21374c; }
.gaccount-brand img { width:46px;height:32px;object-fit:scale-down; }
.gaccount-order-card h2,.gaccount-order-item h3 { font-size:14px;font-weight:650;margin:0 0 5px;line-height:1.9; }
.gaccount-order-card-products p,.gaccount-product-row p { display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:#92a0b5;font-size:11px;margin:0; }
.gaccount-order-card footer { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 22px;border-top:1px solid #edf1f7; }
.gaccount-order-card footer > span { display:grid;gap:5px; }
.gaccount-order-card footer small { color:#9aa8bb;font-size:10px; }
.gaccount-order-card footer strong { color:#3e5578;font-size:13px; }
.gaccount-detail-btn { display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;border:1px solid #dbe6fb;border-radius:11px;padding:8px 14px;background:#f1f6ff;color:#3a70d2;font-size:12px; }
.gaccount-empty { display:flex;align-items:center;flex-direction:column;justify-content:center;min-height:300px;padding:35px 24px;text-align:center; }
.gaccount-empty > span { display:grid;place-items:center;width:74px;height:74px;background:#f1f6ff;border-radius:23px;color:#7ba0e2; }
.gaccount-empty h2 { font-size:17px;margin:19px 0 7px; }
.gaccount-empty p { margin:0 0 24px;color:#8d9cb2;font-size:12px; }
.gaccount-empty .gcart-primary { width:auto;min-width:180px; }
.gaccount-loading { padding:60px 24px;color:#8d9cb2;font-size:13px;text-align:center; }
.gaccount-back-btn { display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:5px 0;border:0;background:transparent;color:#7a8da8;font-size:12px; }
.gaccount-back-btn > svg { transform:rotate(180deg); }
.gaccount-order-title { display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px 26px 16px; }
.gaccount-order-title h2 { margin:0;font-size:17px;font-weight:700; }
.gaccount-order-title p { margin:5px 0 0;font-size:11px;color:#90a0b7; }
.gaccount-order-title > strong { font-size:15px;color:#496285; }
.gaccount-progress { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:12px 26px 20px;padding:0;list-style:none; }
.gaccount-progress li { position:relative;display:grid;justify-items:center;gap:9px;color:#9aa9be;font-size:10px;text-align:center; }
.gaccount-progress li::before { position:absolute;content:'';height:2px;width:100%;top:15px;inset-inline-end:50%;background:#eaf0f8; }
.gaccount-progress li:first-child::before { display:none; }
.gaccount-progress li > span { position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;background:#f0f4fa;border:4px solid white;border-radius:50%;color:#9badc5; }
.gaccount-progress li[data-done=true] { color:#459b7b; }
.gaccount-progress li[data-done=true] > span { background:#e6f6ee;color:#3e9f78; }
.gaccount-progress li[data-current=true] > span { background:#eaf2ff;color:#3f79df; }
.gaccount-order-note { margin:0 26px 20px;padding:12px 15px;background:#f6f9fe;border-radius:11px;color:#7a8eac;font-size:11px;line-height:2; }
.gaccount-order-note[data-tone=success] { background:#f0faf5;color:#53967d; }
.gaccount-order-note[data-tone=failed] { background:#fff4f5;color:#b77884; }
.gaccount-order-items { padding:0 26px; }
.gaccount-order-item { padding:20px 0;border-top:1px solid #edf1f7; }
.gaccount-product-row { display:flex;align-items:center;gap:12px; }
.gaccount-product-row > div { flex:1;min-width:0; }
.gaccount-product-row > strong { font-size:12px;color:#7489a6;white-space:nowrap; }
.gaccount-code { margin-top:16px;padding:14px 16px;border:1px solid #e1eafb;border-radius:12px;background:#f8faff; }
.gaccount-code-heading { display:flex;align-items:center;justify-content:space-between;gap:10px;color:#8b9cb5;font-size:11px; }
.gaccount-code-heading small { font-size:10px; }
.gaccount-code-value { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px;direction:ltr; }
.gaccount-code-value code { min-width:0;overflow-wrap:anywhere;user-select:all;font:500 15px/1.9 ui-monospace,monospace;color:#3d6298; }
.gaccount-code-value > div { display:flex;flex-shrink:0; }
.gaccount-code-value button { display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:9px;background:transparent;color:#7392bd; }
.gaccount-code-value button:hover { background:#eaf1fc; }
.gaccount-copy-status { display:block;min-height:0;color:#579b7e;font-size:10px; }
.gaccount-copy-status:empty { display:none; }
.gaccount-code > p { color:#91a1b9;font-size:11px; }
.gaccount-redemption-field { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 0!important;padding-top:8px;border-top:1px solid #e5edf8; }
.gaccount-redemption-field code { color:#3d6298;font:500 13px/1.8 ui-monospace,monospace;overflow-wrap:anywhere; }
.gaccount-redemption-link a { color:#2f6bf0;font-weight:650; }
.gaccount-redemption-instructions { white-space:pre-line; }
.gaccount-code[data-status=failed], .gaccount-code[data-status=manual_review] { border-color:#eadde1;background:#fff9fa; }
.gaccount-missing-delivery { margin:12px 0 0;padding:10px 12px;border-radius:9px;background:#fff8e9;color:#8b6c31;font-size:11px; }
.gaccount-detail-footer { display:flex;align-items:center;justify-content:center;gap:6px;padding:18px 20px;margin:0;border-top:1px solid #edf1f7;color:#9baabd;font-size:10px; }
.gaccount-error { padding:12px 14px;border:1px solid #f0dbe1;background:#fff5f6;border-radius:11px;color:#b16b7c;font-size:12px; }
.gaccount-modal { box-sizing:border-box;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:30px;margin:auto;overflow:auto;border:1px solid #e0e8f4;border-radius:23px;background:#fff;color:#304b71;box-shadow:0 24px 100px #172d5230;font:400 14px/1.8 IRANSansX,sans-serif;direction:rtl; }
.gaccount-modal::backdrop { background:#1d304d66;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); }
.gaccount-modal h2 { font-size:21px;margin:20px 0 7px;font-weight:750; }
.gaccount-modal > p { color:#899ab2;font-size:12px;margin:0 0 24px; }
.gaccount-modal .gaccount-form { gap:18px; }
.gaccount-lock-note { display:flex;align-items:flex-start;gap:6px;margin:0;color:#94a4bb;font-size:10px; }
.gaccount-lock-note svg { flex-shrink:0;margin-top:3px; }
.gaccount-text-btn { border:0;background:transparent;min-height:40px;color:#879bb9;font:inherit;font-size:12px;cursor:pointer; }
.gaccount-modal :is(input,button):focus-visible { outline:2px solid #75a1f2;outline-offset:3px; }
.gaccount-modal button:disabled { opacity:.55;cursor:default; }
.glogin-phone { display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;color:#667f9f; }
.glogin-phone button { border:0;background:transparent;min-height:40px;color:#4c7dd2;font:inherit;font-size:11px; }
.glogin-resend { display:block;width:100%;margin-top:12px; }
@media(max-width:800px) {
  .gaccount-layout { grid-template-columns:minmax(0,1fr);gap:18px; }
  .gaccount-sidebar { position:static;padding:8px; }
  .gaccount-welcome { display:none; }
  .gaccount-sidebar nav { grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
  .gaccount-sidebar nav button { justify-content:center;padding:12px 8px; }
  .gaccount-sidebar nav button > span { margin-inline-start:0; }
  .gaccount-sidebar .gaccount-logout { display:none; }
  .gaccount-heading h1 { font-size:25px; }
}
@media(max-width:540px) {
  .gaccount-heading { margin:20px 0;gap:12px; }
  .gaccount-heading p { font-size:11px; }
  .gaccount-refresh { width:42px;height:42px;flex-shrink:0;padding:0;justify-content:center; }
  .gaccount-refresh > span { display:none; }
  .gaccount-profile > header { padding:20px; }
  .gaccount-profile .gaccount-form { grid-template-columns:minmax(0,1fr);padding:20px; }
  .gaccount-form-footer { align-items:stretch;flex-direction:column;gap:12px; }
  .gaccount-form-footer .gcart-primary { width:100%; }
  .gaccount-orders-shortcut { padding:18px;gap:11px; }
  .gaccount-orders-shortcut small { font-size:10px; }
  .gaccount-filters { gap:5px; }
  .gaccount-filters button { flex:1;padding:8px 6px;font-size:11px;white-space:nowrap; }
  .gaccount-order-card > header,.gaccount-detail > header { padding:12px 16px; }
  .gaccount-order-card-products { padding:18px 16px; }
  .gaccount-order-card footer { padding:14px 16px;gap:10px; }
  .gaccount-detail-btn { padding:8px 10px;font-size:11px;gap:5px; }
  .gaccount-order-title { flex-wrap:wrap;padding:20px 18px 12px;gap:9px; }
  .gaccount-order-title > strong { width:100%;font-size:14px; }
  .gaccount-progress { margin-inline:18px; }
  .gaccount-order-note { margin-inline:18px; }
  .gaccount-order-items { padding-inline:18px; }
  .gaccount-product-row { flex-wrap:wrap;gap:10px; }
  .gaccount-product-row > strong { width:100%;padding-inline-start:70px; }
  .gaccount-code { padding:12px; }
  .gaccount-code-value { flex-wrap:wrap;gap:3px; }
  .gaccount-code-value code { flex:1;min-width:100%;font-size:14px; }
  .gaccount-code-value > div { margin-inline-start:auto; }
  .gaccount-modal { padding:24px; }
}
.purchase-thanks {
  position:fixed;inset:0;margin:auto;width:min(520px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;padding:28px 34px 23px;
  border:1px solid #fff;border-radius:28px;background:radial-gradient(ellipse at 50% 0,#e9f3ff 0,transparent 53%),#fff;
  color:#243c61;box-shadow:0 32px 100px #14294d38,0 0 0 7px #ffffff24;font-family:'IRANSansX',sans-serif;text-align:center;
  animation:purchase-thanks-enter .55s cubic-bezier(.2,.75,.25,1) both;
}
.purchase-thanks::backdrop { background:#1c2c4a70;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);animation:purchase-thanks-backdrop .25s ease both; }
.purchase-thanks-close { position:absolute;top:14px;right:14px;z-index:3;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #dce7f3;border-radius:50%;background:#ffffffc9;color:#7b90ac;cursor:pointer;transition:background .2s,color .2s; }
.purchase-thanks-close:hover { background:#eef4ff;color:#2f6df6; }
.purchase-thanks-content { position:relative;z-index:1; }
.purchase-thanks-art { position:relative;display:grid;place-items:center;width:176px;height:139px;margin:0 auto 9px; }
.purchase-thanks-orbit { position:absolute;width:126px;height:126px;border:1px solid #cbddfb;border-radius:50%;box-shadow:0 0 0 15px #e7f0ff70,0 0 0 30px #edf4ff50;animation:purchase-thanks-halo 1.1s ease-out both; }
.purchase-thanks-gift { position:relative;display:grid;place-items:center;width:86px;height:86px;border:1px solid #4e86ff;border-radius:26px;background:linear-gradient(145deg,#5c96ff,#2e68ed 75%);color:#fff;box-shadow:0 15px 28px #3675e82e,inset 0 1px 1px #ffffff85;transform:rotate(-9deg);animation:purchase-thanks-gift 1.15s cubic-bezier(.2,.7,.25,1) both; }
.purchase-thanks-check { position:absolute;bottom:-7px;left:-8px;display:grid;place-items:center;width:31px;height:31px;border:3px solid #f2f7ff;border-radius:50%;background:#45b99b;color:#fff;animation:purchase-thanks-check .5s .5s cubic-bezier(.2,1.5,.3,1) both; }
.purchase-thanks-spark { position:absolute;color:#e7b75d;animation:purchase-thanks-spark 1.4s ease both; }
.purchase-thanks-spark-one { top:15px;right:6px;transform:rotate(8deg); }
.purchase-thanks-spark-two { bottom:21px;left:5px;color:#8fa9e8;animation-delay:.2s; }
.purchase-thanks-eyebrow { display:block;font-size:10px;letter-spacing:.1px;color:#64758e; }
.purchase-thanks h2 { margin:8px 0 6px;font-size:30px;line-height:1.6;font-weight:800;letter-spacing:-1px;color:#254574; }
.purchase-thanks-lead { margin:0;color:#557098;font-size:13px;font-weight:550;line-height:1.9; }
.purchase-thanks-description { margin:13px 0 22px;color:#64758e;font-size:12px;line-height:2.1; }
.purchase-thanks-downloads { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:0 0 19px; }
.purchase-thanks-downloads a { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:79px;padding:11px 6px;border:1px solid #e3ebf6;border-radius:15px;background:#ffffffbd;text-decoration:none;color:#627997;box-shadow:0 3px 8px #3a659006;transition:transform .2s,background .2s,border-color .2s,box-shadow .2s; }
.purchase-thanks-downloads a:hover { transform:translateY(-3px);background:#f7faff;border-color:#bdd3f9;box-shadow:0 6px 15px #3766aa0d; }
.purchase-thanks-downloads a > span { display:grid;place-items:center;height:25px; }
.purchase-thanks-downloads img { width:24px;height:24px;object-fit:contain; }
.purchase-thanks-downloads bdi { font-size:11px;font-weight:500;line-height:1.6; }
.purchase-thanks-done { display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;width:100%;padding:11px 16px;border:1px solid #2864e8;border-radius:13px;background:#326ff1;color:#fff;font:inherit;font-size:12px;font-weight:650;cursor:pointer;box-shadow:0 7px 16px #326ff122;transition:background .2s; }
.purchase-thanks-done:hover { background:#235dd7; }
.purchase-thanks-footnote { margin:12px 0 0;color:#64758e;font-size:10px;line-height:1.8; }
.purchase-thanks :is(button,a):focus-visible { outline:3px solid #8db5ff;outline-offset:3px; }
.purchase-thanks-confetti { position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit; }
.purchase-thanks-confetti i { position:absolute;top:-18px;left:var(--x);width:6px;height:10px;border-radius:2px;background:var(--color);opacity:0;animation:purchase-thanks-confetti 2.8s var(--delay) cubic-bezier(.15,.5,.3,1) both; }
.purchase-thanks-confetti i:nth-child(3n) { width:6px;height:6px;border-radius:50%; }
@keyframes purchase-thanks-enter { from { opacity:0;transform:translateY(22px) scale(.95); } to { opacity:1;transform:translateY(0) scale(1); } }
@keyframes purchase-thanks-backdrop { from { opacity:0; } to { opacity:1; } }
@keyframes purchase-thanks-gift { 0% { opacity:0;transform:translateY(15px) rotate(-20deg) scale(.7); } 60% { opacity:1;transform:translateY(-4px) rotate(-5deg) scale(1.04); } 100% { opacity:1;transform:translateY(0) rotate(-9deg) scale(1); } }
@keyframes purchase-thanks-check { from { opacity:0;transform:scale(.3); } to { opacity:1;transform:scale(1); } }
@keyframes purchase-thanks-halo { from { opacity:0;transform:scale(.8); } to { opacity:1;transform:scale(1); } }
@keyframes purchase-thanks-spark { 0% { opacity:0;scale:.3; } 50% { opacity:1;scale:1.2; } 100% { opacity:1;scale:1; } }
@keyframes purchase-thanks-confetti { 0% { opacity:0;transform:translate3d(0,-15px,0) rotate(0); } 12% { opacity:.85; } 75% { opacity:.65; } 100% { opacity:0;transform:translate3d(var(--drift),510px,0) rotate(var(--turn)); } }
@media(max-width:420px) {
  .purchase-thanks { width:calc(100% - 28px);padding:22px 20px 19px;border-radius:23px; }
  .purchase-thanks-art { width:158px;height:121px;margin-bottom:6px; }
  .purchase-thanks-orbit { width:112px;height:112px; }
  .purchase-thanks-gift { width:76px;height:76px;border-radius:23px; }
  .purchase-thanks-gift > svg { width:44px;height:44px; }
  .purchase-thanks h2 { font-size:27px; }
  .purchase-thanks-description { font-size:11px;margin:10px 0 18px; }
  .purchase-thanks-desktop-break { display:none; }
  .purchase-thanks-downloads { grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:16px; }
  .purchase-thanks-downloads a { min-height:65px;flex-direction:row;gap:9px;padding:10px 8px; }
  .purchase-thanks-downloads bdi { font-size:10px; }
  .purchase-thanks-downloads img { width:22px;height:22px; }
}
@media(prefers-reduced-motion:reduce) {
  .purchase-thanks,.purchase-thanks::backdrop,.purchase-thanks * { animation:none !important;transition:none !important; }
  .purchase-thanks-confetti { display:none; }
}



@layer components;

/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */

@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-orange-400: oklch(75% .183 55.934);
    --color-blue-400: oklch(70.7% .165 254.624);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-blue-600: oklch(54.6% .245 262.881);
    --color-blue-700: oklch(48.8% .243 264.376);
    --color-indigo-400: oklch(67.3% .182 276.935);
    --color-indigo-500: oklch(58.5% .233 277.117);
    --color-purple-500: oklch(62.7% .265 303.9);
    --color-pink-400: oklch(71.8% .202 349.761);
    --color-pink-500: oklch(65.6% .241 354.308);
    --color-slate-50: oklch(98.4% .003 247.858);
    --color-slate-100: oklch(96.8% .007 247.896);
    --color-slate-200: oklch(92.9% .013 255.508);
    --color-slate-300: oklch(86.9% .022 252.894);
    --color-slate-400: oklch(70.4% .04 256.788);
    --color-slate-500: oklch(55.4% .046 257.417);
    --color-slate-600: oklch(44.6% .043 257.281);
    --color-slate-700: oklch(37.2% .044 257.287);
    --color-slate-800: oklch(27.9% .041 260.031);
    --color-slate-900: oklch(20.8% .042 265.755);
    --color-slate-950: oklch(12.9% .042 264.695);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-4xl: 56rem;
    --container-7xl: 80rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --tracking-wide: .025em;
    --leading-relaxed: 1.625;
    --radius-xl: .75rem;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-md: 12px;
    --blur-3xl: 64px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

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

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }

  .collapse {
    visibility: collapse;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }

  .inset-x-\[-4\%\] {
    inset-inline: -4%;
  }

  .start {
    inset-inline-start: var(--spacing);
  }

  .end {
    inset-inline-end: var(--spacing);
  }

  .-top-10 {
    top: calc(var(--spacing) * -10);
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .top-3 {
    top: calc(var(--spacing) * 3);
  }

  .top-\[14px\] {
    top: 14px;
  }

  .top-\[31px\] {
    top: 31px;
  }

  .top-full {
    top: 100%;
  }

  .right-0 {
    right: calc(var(--spacing) * 0);
  }

  .right-1\/2 {
    right: 50%;
  }

  .right-1\/4 {
    right: 25%;
  }

  .-bottom-10 {
    bottom: calc(var(--spacing) * -10);
  }

  .-bottom-16 {
    bottom: calc(var(--spacing) * -16);
  }

  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }

  .bottom-5 {
    bottom: calc(var(--spacing) * 5);
  }

  .-left-8 {
    left: calc(var(--spacing) * -8);
  }

  .-left-10 {
    left: calc(var(--spacing) * -10);
  }

  .-left-16 {
    left: calc(var(--spacing) * -16);
  }

  .left-0 {
    left: calc(var(--spacing) * 0);
  }

  .left-1\/4 {
    left: 25%;
  }

  .left-3 {
    left: calc(var(--spacing) * 3);
  }

  .left-5 {
    left: calc(var(--spacing) * 5);
  }

  .z-10 {
    z-index: 10;
  }

  .z-50 {
    z-index: 50;
  }

  .z-\[120\] {
    z-index: 120;
  }

  .order-1 {
    order: 1;
  }

  .order-2 {
    order: 2;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }

  .mx-auto {
    margin-inline: auto;
  }

  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }

  .me-1 {
    margin-inline-end: calc(var(--spacing) * 1);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-9 {
    margin-top: calc(var(--spacing) * 9);
  }

  .mt-11 {
    margin-top: calc(var(--spacing) * 11);
  }

  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }

  .mt-auto {
    margin-top: auto;
  }

  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }

  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-flex {
    display: inline-flex;
  }

  .table {
    display: table;
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-11 {
    height: calc(var(--spacing) * 11);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-28 {
    height: calc(var(--spacing) * 28);
  }

  .h-64 {
    height: calc(var(--spacing) * 64);
  }

  .h-96 {
    height: calc(var(--spacing) * 96);
  }

  .h-\[22px\] {
    height: 22px;
  }

  .h-\[31px\] {
    height: 31px;
  }

  .h-\[35px\] {
    height: 35px;
  }

  .h-\[80px\] {
    height: 80px;
  }

  .h-\[130px\] {
    height: 130px;
  }

  .h-\[170px\] {
    height: 170px;
  }

  .h-\[242px\] {
    height: 242px;
  }

  .h-full {
    height: 100%;
  }

  .max-h-\[82vh\] {
    max-height: 82vh;
  }

  .max-h-\[620px\] {
    max-height: 620px;
  }

  .min-h-\[56px\] {
    min-height: 56px;
  }

  .min-h-\[70vh\] {
    min-height: 70vh;
  }

  .min-h-\[178px\] {
    min-height: 178px;
  }

  .min-h-\[400px\] {
    min-height: 400px;
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-11 {
    width: calc(var(--spacing) * 11);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-28 {
    width: calc(var(--spacing) * 28);
  }

  .w-48 {
    width: calc(var(--spacing) * 48);
  }

  .w-64 {
    width: calc(var(--spacing) * 64);
  }

  .w-96 {
    width: calc(var(--spacing) * 96);
  }

  .w-\[22px\] {
    width: 22px;
  }

  .w-\[228px\] {
    width: 228px;
  }

  .w-\[270px\] {
    width: 270px;
  }

  .w-\[300px\] {
    width: 300px;
  }

  .w-full {
    width: 100%;
  }

  .max-w-4xl {
    max-width: var(--container-4xl);
  }

  .max-w-7xl {
    max-width: var(--container-7xl);
  }

  .max-w-\[250px\] {
    max-width: 250px;
  }

  .max-w-\[310px\] {
    max-width: 310px;
  }

  .max-w-\[340px\] {
    max-width: 340px;
  }

  .max-w-\[440px\] {
    max-width: 440px;
  }

  .max-w-\[560px\] {
    max-width: 560px;
  }

  .max-w-\[960px\] {
    max-width: 960px;
  }

  .flex-1 {
    flex: 1;
  }

  .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .grow {
    flex-grow: 1;
  }

  .translate-x-1\/2 {
    --tw-translate-x: calc(1 / 2 * 100%);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-rotate-\[2\.4deg\] {
    rotate: -2.4deg;
  }

  .rotate-\[2\.4deg\] {
    rotate: 2.4deg;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .resize {
    resize: both;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .items-center {
    align-items: center;
  }

  .items-start {
    align-items: flex-start;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-visible {
    overflow: visible;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-x-hidden {
    overflow-x: hidden;
  }

  .\!rounded-\[10px\] {
    border-radius: 10px !important;
  }

  .\!rounded-\[var\(--g2p-r-pill\)\] {
    border-radius: var(--g2p-r-pill) !important;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-\[9px\] {
    border-radius: 9px;
  }

  .rounded-\[10px\] {
    border-radius: 10px;
  }

  .rounded-\[12px\] {
    border-radius: 12px;
  }

  .rounded-\[14px\] {
    border-radius: 14px;
  }

  .rounded-\[15px\] {
    border-radius: 15px;
  }

  .rounded-\[20px\] {
    border-radius: 20px;
  }

  .rounded-\[22px\] {
    border-radius: 22px;
  }

  .rounded-\[var\(--g2p-r\)\] {
    border-radius: var(--g2p-r);
  }

  .rounded-\[var\(--g2p-r-pill\)\] {
    border-radius: var(--g2p-r-pill);
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .border-\[\#dbe8ff\] {
    border-color: #dbe8ff;
  }

  .border-\[\#e3e9f3\] {
    border-color: #e3e9f3;
  }

  .border-\[\#e5eaf2\] {
    border-color: #e5eaf2;
  }

  .border-\[var\(--g2p-line\)\] {
    border-color: var(--g2p-line);
  }

  .border-slate-200 {
    border-color: var(--color-slate-200);
  }

  .border-white\/30 {
    border-color: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/30 {
      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .border-white\/45 {
    border-color: #ffffff73;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/45 {
      border-color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
  }

  .bg-\[\#1c2333\] {
    background-color: #1c2333;
  }

  .bg-\[\#172139\] {
    background-color: #172139;
  }

  .bg-\[\#adb5c2\]\/55 {
    background-color: oklab(77.0852% -.00351471 -.0202774 / .55);
  }

  .bg-\[var\(--g2p-blue-050\)\] {
    background-color: var(--g2p-blue-050);
  }

  .bg-\[var\(--g2p-ribbon\)\] {
    background-color: var(--g2p-ribbon);
  }

  .bg-\[var\(--g2p-surface-1\)\] {
    background-color: var(--g2p-surface-1);
  }

  .bg-\[var\(--g2p-surface-2\)\] {
    background-color: var(--g2p-surface-2);
  }

  .bg-black {
    background-color: var(--color-black);
  }

  .bg-black\/60 {
    background-color: #0009;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/60 {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }

  .bg-black\/75 {
    background-color: #000000bf;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/75 {
      background-color: color-mix(in oklab, var(--color-black) 75%, transparent);
    }
  }

  .bg-blue-500\/10 {
    background-color: #3080ff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-500\/10 {
      background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
    }
  }

  .bg-blue-600 {
    background-color: var(--color-blue-600);
  }

  .bg-indigo-500\/10 {
    background-color: #625fff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-indigo-500\/10 {
      background-color: color-mix(in oklab, var(--color-indigo-500) 10%, transparent);
    }
  }

  .bg-slate-50 {
    background-color: var(--color-slate-50);
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-white\/15 {
    background-color: #ffffff26;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/15 {
      background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }

  .bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-l {
    --tw-gradient-position: to left in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-\[linear-gradient\(160deg\,\#2cb4f8_0\%\,\#1365e9_100\%\)\] {
    background-image: linear-gradient(160deg, #2cb4f8 0%, #1365e9 100%);
  }

  .from-black\/65 {
    --tw-gradient-from: #000000a6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-black\/65 {
      --tw-gradient-from: color-mix(in oklab, var(--color-black) 65%, transparent);
    }
  }

  .from-black\/65 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-black\/75 {
    --tw-gradient-from: #000000bf;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-black\/75 {
      --tw-gradient-from: color-mix(in oklab, var(--color-black) 75%, transparent);
    }
  }

  .from-black\/75 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-slate-800 {
    --tw-gradient-from: var(--color-slate-800);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-transparent {
    --tw-gradient-from: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .via-black\/25 {
    --tw-gradient-via: #00000040;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-black\/25 {
      --tw-gradient-via: color-mix(in oklab, var(--color-black) 25%, transparent);
    }
  }

  .via-black\/25 {
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .via-slate-100\/50 {
    --tw-gradient-via: #f1f5f980;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-slate-100\/50 {
      --tw-gradient-via: color-mix(in oklab, var(--color-slate-100) 50%, transparent);
    }
  }

  .via-slate-100\/50 {
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .to-black\/10 {
    --tw-gradient-to: #0000001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-black\/10 {
      --tw-gradient-to: color-mix(in oklab, var(--color-black) 10%, transparent);
    }
  }

  .to-black\/10 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-slate-200\/30 {
    --tw-gradient-to: #e2e8f04d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-slate-200\/30 {
      --tw-gradient-to: color-mix(in oklab, var(--color-slate-200) 30%, transparent);
    }
  }

  .to-slate-200\/30 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-slate-600 {
    --tw-gradient-to: var(--color-slate-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .object-fill {
    object-fit: fill;
  }

  .p-0 {
    padding: calc(var(--spacing) * 0);
  }

  .p-0\.5 {
    padding: calc(var(--spacing) * .5);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-7 {
    padding: calc(var(--spacing) * 7);
  }

  .\!px-3 {
    padding-inline: calc(var(--spacing) * 3) !important;
  }

  .\!px-6 {
    padding-inline: calc(var(--spacing) * 6) !important;
  }

  .\!px-7 {
    padding-inline: calc(var(--spacing) * 7) !important;
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-7 {
    padding-inline: calc(var(--spacing) * 7);
  }

  .\!py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5) !important;
  }

  .\!py-3 {
    padding-block: calc(var(--spacing) * 3) !important;
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .py-14 {
    padding-block: calc(var(--spacing) * 14);
  }

  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-12 {
    padding-top: calc(var(--spacing) * 12);
  }

  .pt-20 {
    padding-top: calc(var(--spacing) * 20);
  }

  .pt-32 {
    padding-top: calc(var(--spacing) * 32);
  }

  .pt-36 {
    padding-top: calc(var(--spacing) * 36);
  }

  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }

  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }

  .pb-20 {
    padding-bottom: calc(var(--spacing) * 20);
  }

  .text-center {
    text-align: center;
  }

  .text-right {
    text-align: right;
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .\!text-\[12px\] {
    font-size: 12px !important;
  }

  .\!text-\[15px\] {
    font-size: 15px !important;
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .text-\[12px\] {
    font-size: 12px;
  }

  .text-\[13px\] {
    font-size: 13px;
  }

  .text-\[14px\] {
    font-size: 14px;
  }

  .text-\[15px\] {
    font-size: 15px;
  }

  .text-\[16px\] {
    font-size: 16px;
  }

  .text-\[18px\] {
    font-size: 18px;
  }

  .text-\[19px\] {
    font-size: 19px;
  }

  .text-\[21px\] {
    font-size: 21px;
  }

  .text-\[26px\] {
    font-size: 26px;
  }

  .text-\[33px\] {
    font-size: 33px;
  }

  .text-\[72px\] {
    font-size: 72px;
  }

  .text-\[160px\] {
    font-size: 160px;
  }

  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }

  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }

  .leading-8 {
    --tw-leading: calc(var(--spacing) * 8);
    line-height: calc(var(--spacing) * 8);
  }

  .leading-9 {
    --tw-leading: calc(var(--spacing) * 9);
    line-height: calc(var(--spacing) * 9);
  }

  .leading-10 {
    --tw-leading: calc(var(--spacing) * 10);
    line-height: calc(var(--spacing) * 10);
  }

  .leading-\[1\.16\] {
    --tw-leading: 1.16;
    line-height: 1.16;
  }

  .leading-\[1\.45\] {
    --tw-leading: 1.45;
    line-height: 1.45;
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .font-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .text-\[\#b4bfce\] {
    color: #b4bfce;
  }

  .text-\[var\(--g2p-blue\)\] {
    color: var(--g2p-blue);
  }

  .text-\[var\(--g2p-muted\)\] {
    color: var(--g2p-muted);
  }

  .text-\[var\(--g2p-navy\)\] {
    color: var(--g2p-navy);
  }

  .text-\[var\(--g2p-navy-soft\)\] {
    color: var(--g2p-navy-soft);
  }

  .text-slate-500 {
    color: var(--color-slate-500);
  }

  .text-slate-600 {
    color: var(--color-slate-600);
  }

  .text-slate-700 {
    color: var(--color-slate-700);
  }

  .text-transparent {
    color: #0000;
  }

  .text-white {
    color: var(--color-white);
  }

  .text-white\/80 {
    color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/80 {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .text-white\/85 {
    color: #ffffffd9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/85 {
      color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
  }

  .underline {
    text-decoration-line: underline;
  }

  .decoration-dotted {
    text-decoration-style: dotted;
  }

  .underline-offset-4 {
    text-underline-offset: 4px;
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-10 {
    opacity: .1;
  }

  .opacity-70 {
    opacity: .7;
  }

  .opacity-\[\.12\] {
    opacity: .12;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_5px_12px_rgba\(47\,107\,240\,\.12\)\] {
    --tw-shadow: 0 5px 12px var(--tw-shadow-color, #2f6bf01f);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_7px_15px_rgba\(12\,16\,23\,\.2\)\] {
    --tw-shadow: 0 7px 15px var(--tw-shadow-color, #0c101733);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_8px_20px_rgba\(30\,40\,57\,\.2\)\] {
    --tw-shadow: 0 8px 20px var(--tw-shadow-color, #1e283933);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_12px_28px_rgba\(31\,43\,70\,\.08\)\] {
    --tw-shadow: 0 12px 28px var(--tw-shadow-color, #1f2b4614);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[var\(--g2p-shadow-card\)\] {
    --tw-shadow: var(--g2p-shadow-card);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[var\(--g2p-shadow-nav\)\] {
    --tw-shadow: var(--g2p-shadow-nav);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .blur-3xl {
    --tw-blur: blur(var(--blur-3xl));
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000f));
    --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow-\[0_1px_0_rgba\(255\,255\,255\,\.65\)\] {
    --tw-drop-shadow-size: drop-shadow(0 1px 0 var(--tw-drop-shadow-color, #ffffffa6));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .delay-1000 {
    transition-delay: 1s;
  }

  .duration-150 {
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .duration-500 {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .group-focus-within\:pointer-events-auto:is(:where(.group):focus-within *) {
    pointer-events: auto;
  }

  .group-focus-within\:opacity-100:is(:where(.group):focus-within *) {
    opacity: 1;
  }

  @media (hover: hover) {
    .group-hover\:pointer-events-auto:is(:where(.group):hover *) {
      pointer-events: auto;
    }

    .group-hover\:scale-105:is(:where(.group):hover *) {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .group-hover\:scale-\[4\.2\]:is(:where(.group):hover *) {
      scale: 4.2;
    }

    .group-hover\:border-white\/35:is(:where(.group):hover *) {
      border-color: #ffffff59;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:border-white\/35:is(:where(.group):hover *) {
        border-color: color-mix(in oklab, var(--color-white) 35%, transparent);
      }
    }

    .group-hover\:bg-white\/10:is(:where(.group):hover *) {
      background-color: #ffffff1a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:bg-white\/10:is(:where(.group):hover *) {
        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }

    .group-hover\:bg-white\/15:is(:where(.group):hover *) {
      background-color: #ffffff26;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:bg-white\/15:is(:where(.group):hover *) {
        background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
      }
    }

    .group-hover\:text-white:is(:where(.group):hover *) {
      color: var(--color-white);
    }

    .group-hover\:text-white\/65:is(:where(.group):hover *) {
      color: #ffffffa6;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:text-white\/65:is(:where(.group):hover *) {
        color: color-mix(in oklab, var(--color-white) 65%, transparent);
      }
    }

    .group-hover\:text-white\/85:is(:where(.group):hover *) {
      color: #ffffffd9;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:text-white\/85:is(:where(.group):hover *) {
        color: color-mix(in oklab, var(--color-white) 85%, transparent);
      }
    }

    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 1;
    }
  }

  .placeholder\:text-slate-400::placeholder {
    color: var(--color-slate-400);
  }

  .last\:mb-0:last-child {
    margin-bottom: calc(var(--spacing) * 0);
  }

  @media (hover: hover) {
    .hover\:-translate-y-1:hover {
      --tw-translate-y: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:-translate-y-2:hover {
      --tw-translate-y: calc(var(--spacing) * -2);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:border-\[\#0A66C2\]:hover {
      border-color: #0a66c2;
    }

    .hover\:border-\[\#229ED9\]:hover {
      border-color: #229ed9;
    }

    .hover\:border-\[\#FF0000\]:hover {
      border-color: red;
    }

    .hover\:border-\[var\(--g2p-blue\)\]:hover {
      border-color: var(--g2p-blue);
    }

    .hover\:border-blue-400:hover {
      border-color: var(--color-blue-400);
    }

    .hover\:border-pink-400:hover {
      border-color: var(--color-pink-400);
    }

    .hover\:border-transparent:hover {
      border-color: #0000;
    }

    .hover\:bg-\[\#0A66C2\]:hover {
      background-color: #0a66c2;
    }

    .hover\:bg-\[\#229ED9\]:hover {
      background-color: #229ed9;
    }

    .hover\:bg-\[\#283350\]:hover {
      background-color: #283350;
    }

    .hover\:bg-\[\#FF0000\]:hover {
      background-color: red;
    }

    .hover\:bg-\[var\(--g2p-blue-050\)\]:hover {
      background-color: var(--g2p-blue-050);
    }

    .hover\:bg-blue-700:hover {
      background-color: var(--color-blue-700);
    }

    .hover\:bg-gradient-to-br:hover {
      --tw-gradient-position: to bottom right in oklab;
      background-image: linear-gradient(var(--tw-gradient-stops));
    }

    .hover\:bg-\[linear-gradient\(160deg\,\#2cb4f8_0\%\,\#1365e9_100\%\)\]:hover {
      background-image: linear-gradient(160deg, #2cb4f8 0%, #1365e9 100%);
    }

    .hover\:from-purple-500:hover {
      --tw-gradient-from: var(--color-purple-500);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .hover\:via-pink-500:hover {
      --tw-gradient-via: var(--color-pink-500);
      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
      --tw-gradient-stops: var(--tw-gradient-via-stops);
    }

    .hover\:to-orange-400:hover {
      --tw-gradient-to: var(--color-orange-400);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .hover\:text-\[var\(--g2p-blue\)\]:hover {
      color: var(--g2p-blue);
    }

    .hover\:text-blue-600:hover {
      color: var(--color-blue-600);
    }

    .hover\:text-white:hover {
      color: var(--color-white);
    }

    .hover\:shadow-\[0_16px_36px_rgba\(31\,43\,70\,0\.14\)\]:hover {
      --tw-shadow: 0 16px 36px var(--tw-shadow-color, #1f2b4624);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_22px_40px_rgba\(19\,101\,233\,\.22\)\]:hover {
      --tw-shadow: 0 22px 40px var(--tw-shadow-color, #1365e938);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  .focus\:border-blue-500:focus {
    border-color: var(--color-blue-500);
  }

  .focus\:ring-2:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-blue-500\/40:focus {
    --tw-ring-color: #3080ff66;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-blue-500\/40:focus {
      --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 40%, transparent);
    }
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus-visible\:ring-2:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-\[var\(--g2p-blue\)\]:focus-visible {
    --tw-ring-color: var(--g2p-blue);
  }

  .focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  @media (min-width: 48rem) {
    .md\:order-1 {
      order: 1;
    }

    .md\:order-2 {
      order: 2;
    }

    .md\:mx-0 {
      margin-inline: calc(var(--spacing) * 0);
    }

    .md\:mt-14 {
      margin-top: calc(var(--spacing) * 14);
    }

    .md\:block {
      display: block;
    }

    .md\:flex {
      display: flex;
    }

    .md\:hidden {
      display: none;
    }

    .md\:min-h-\[500px\] {
      min-height: 500px;
    }

    .md\:w-\[360px\] {
      width: 360px;
    }

    .md\:max-w-\[780px\] {
      max-width: 780px;
    }

    .md\:max-w-none {
      max-width: none;
    }

    .md\:scale-125 {
      --tw-scale-x: 125%;
      --tw-scale-y: 125%;
      --tw-scale-z: 125%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:justify-start {
      justify-content: flex-start;
    }

    .md\:gap-8 {
      gap: calc(var(--spacing) * 8);
    }

    .md\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .md\:p-10 {
      padding: calc(var(--spacing) * 10);
    }

    .md\:py-11 {
      padding-block: calc(var(--spacing) * 11);
    }

    .md\:py-18 {
      padding-block: calc(var(--spacing) * 18);
    }

    .md\:pt-24 {
      padding-top: calc(var(--spacing) * 24);
    }

    .md\:pb-7 {
      padding-bottom: calc(var(--spacing) * 7);
    }

    .md\:text-start {
      text-align: start;
    }

    .md\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }

    .md\:text-5xl {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }

    .md\:text-\[25px\] {
      font-size: 25px;
    }

    .md\:text-\[30px\] {
      font-size: 30px;
    }

    .md\:text-\[45px\] {
      font-size: 45px;
    }
  }

  @media (min-width: 64rem) {
    .lg\:grid {
      display: grid;
    }

    .lg\:w-auto {
      width: auto;
    }

    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:border-slate-800 {
      border-color: var(--color-slate-800);
    }

    .dark\:bg-blue-400\/5 {
      background-color: #54a2ff0d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:bg-blue-400\/5 {
        background-color: color-mix(in oklab, var(--color-blue-400) 5%, transparent);
      }
    }

    .dark\:bg-indigo-400\/5 {
      background-color: #7d87ff0d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:bg-indigo-400\/5 {
        background-color: color-mix(in oklab, var(--color-indigo-400) 5%, transparent);
      }
    }

    .dark\:bg-slate-900 {
      background-color: var(--color-slate-900);
    }

    .dark\:bg-slate-950 {
      background-color: var(--color-slate-950);
    }

    .dark\:from-white {
      --tw-gradient-from: var(--color-white);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .dark\:via-slate-900\/50 {
      --tw-gradient-via: #0f172b80;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:via-slate-900\/50 {
        --tw-gradient-via: color-mix(in oklab, var(--color-slate-900) 50%, transparent);
      }
    }

    .dark\:via-slate-900\/50 {
      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
      --tw-gradient-stops: var(--tw-gradient-via-stops);
    }

    .dark\:to-slate-300 {
      --tw-gradient-to: var(--color-slate-300);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .dark\:to-slate-800\/20 {
      --tw-gradient-to: #1d293d33;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:to-slate-800\/20 {
        --tw-gradient-to: color-mix(in oklab, var(--color-slate-800) 20%, transparent);
      }
    }

    .dark\:to-slate-800\/20 {
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .dark\:text-slate-300 {
      color: var(--color-slate-300);
    }

    .dark\:text-slate-400 {
      color: var(--color-slate-400);
    }

    .dark\:text-slate-500 {
      color: var(--color-slate-500);
    }

    .dark\:invert {
      --tw-invert: invert(100%);
      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
    }

    .dark\:placeholder\:text-slate-600::placeholder {
      color: var(--color-slate-600);
    }

    @media (hover: hover) {
      .dark\:hover\:text-blue-400:hover {
        color: var(--color-blue-400);
      }
    }
  }
}

.analytics-consent {
  z-index: 100;
  border: 1px solid var(--g2p-line);
  box-shadow: var(--g2p-shadow-nav);
  color: var(--g2p-navy);
  inset-inline: max(16px, 50vw - 360px);
  background: #fff;
  border-radius: 16px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 16px 18px;
  display: flex;
  position: fixed;
  bottom: 16px;
}

.analytics-consent strong {
  font-size: 15px;
  display: block;
}

.analytics-consent p {
  color: var(--g2p-navy-soft);
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.8;
}

.analytics-consent-actions {
  flex-shrink: 0;
  gap: 8px;
  display: flex;
}

.analytics-consent-actions button, .analytics-consent-settings {
  cursor: pointer;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}

.analytics-consent-actions button {
  padding: 9px 13px;
}

.analytics-consent-reject {
  border: 1px solid var(--g2p-line);
  color: var(--g2p-navy);
  background: #fff;
}

.analytics-consent-accept {
  border: 1px solid var(--g2p-blue);
  background: var(--g2p-blue);
  color: #fff;
}

.analytics-consent-settings {
  color: var(--g2p-blue);
  background: none;
  border: 0;
  margin-top: 8px;
}

.analytics-consent button:focus-visible, .analytics-consent-settings:focus-visible {
  outline: 2px solid var(--g2p-blue);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .analytics-consent {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .analytics-consent-actions button {
    flex: 1;
  }
}

html, body {
  overflow-x: hidden;
}

:root {
  --g2p-bg: #eef1f6;
  --g2p-bg-pattern: #7896c817;
  --g2p-surface: #fff;
  --g2p-surface-2: #f6f8fc;
  --g2p-navy: #1f2b46;
  --g2p-navy-soft: #4a566d;
  --g2p-muted: #8b94a7;
  --g2p-blue: #2f6bf0;
  --g2p-blue-600: #205ce0;
  --g2p-blue-700: #1a4dc4;
  --g2p-blue-050: #eaf1ff;
  --g2p-ribbon: #14171d;
  --g2p-line: #e6eaf1;
  --g2p-btn: linear-gradient(180deg, #2cb4f8 0%, #1365e9 100%);
  --g2p-btn-hover: linear-gradient(180deg, #2cb4f8 0%, #1365e9 100%);
  --g2p-install: linear-gradient(160deg, #2cb4f8 0%, #1365e9 100%);
  --g2p-r-sm: 10px;
  --g2p-r: 16px;
  --g2p-r-lg: 22px;
  --g2p-r-pill: 999px;
  --g2p-shadow-nav: 0 12px 34px #1f2b4624;
  --g2p-shadow-card: 0 10px 30px #1f2b4614;
  --g2p-shadow-soft: 0 6px 18px #1f2b460f;
  --g2p-container: 1180px;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--g2p-bg);
  color: var(--g2p-navy);
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(circle at center, var(--g2p-bg-pattern) 1.1px, transparent 1.4px);
  background-size: 26px 26px;
  font-family: Vazirmatn, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

.g2p-container {
  width: 100%;
  max-width: var(--g2p-container);
  margin-inline: auto;
  padding-inline: 24px;
}

.g2p-underline {
  object-fit: fill;
  width: 118px;
  height: 16px;
  margin-block-start: 3px;
  display: block;
}

.g2p-btn-gradient {
  background: var(--g2p-btn);
  transition: background .18s, transform .12s, box-shadow .18s;
}

.g2p-btn-gradient:hover {
  background: var(--g2p-btn-hover);
  box-shadow: 0 8px 20px #2059dd59;
}

.g2p-btn-gradient:active {
  transform: translateY(1px);
}

.g2p-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.g2p-scroll::-webkit-scrollbar {
  display: none;
}

@keyframes g2p-fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.services-page {
  min-height: 100vh;
  padding-top: 132px;
}

.services-container {
  max-width: 1240px;
}

.services-hero {
  -webkit-backdrop-filter: blur(18px);
  direction: ltr;
  background: #b4bcd22e;
  border: 1px solid #ffffff61;
  border-radius: 34px;
  grid-template-columns: 43% 57%;
  min-height: 385px;
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 55px #1f2b4621, inset 0 1px #ffffff8c;
}

.services-hero-copy {
  text-align: right;
  direction: rtl;
  align-self: center;
  padding: 42px 52px 40px 24px;
}

.services-new {
  color: var(--g2p-blue);
  background: #f0f6ff;
  border: 1px solid #d7e5ff;
  border-radius: 99px;
  padding: 6px 15px;
  font-size: 12px;
  font-weight: 700;
  display: inline-block;
}

.services-hero h1 {
  letter-spacing: -1.5px;
  color: #15213a;
  margin: 24px 0 15px;
  font-size: clamp(33px, 4vw, 51px);
  font-weight: 900;
  line-height: 1.23;
}

.services-hero h1 em {
  color: #2b64da;
  font-style: normal;
}

.services-hero p {
  color: #52627b;
  margin-bottom: 26px;
  font-size: 16px;
  line-height: 2;
}

.services-hero-art {
  align-self: end;
  height: 100%;
  min-height: 370px;
  position: relative;
}

.services-hero-img {
  z-index: 2;
  object-fit: contain;
  object-position: bottom;
  width: auto;
  max-width: none;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.services-status {
  z-index: 4;
  -webkit-backdrop-filter: blur(10px);
  color: var(--g2p-muted);
  text-align: right;
  direction: rtl;
  background: #ffffffd1;
  border: 1px solid #fff9;
  border-radius: 28px;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  font-size: 11px;
  line-height: 1.4;
  animation: 2.4s ease-in-out infinite status-bounce;
  display: flex;
  position: absolute;
  bottom: 53px;
  left: 19px;
  box-shadow: 0 8px 24px #1f2b461f;
}

.services-status b {
  color: var(--g2p-navy);
  display: block;
}

.services-status-icon {
  flex-shrink: 0;
  font-size: 20px;
}

@keyframes status-bounce {
  0%, 100% {
    transform: translateY(0);
  }

  45% {
    transform: translateY(-11px);
  }

  65% {
    transform: translateY(-7px);
  }
}

.services-area {
  padding-bottom: 120px;
  position: relative;
}

.services-top-bar {
  direction: rtl;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  margin-bottom: 4px;
  display: flex;
}

.services-heading {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
}

.services-search {
  border: 1px solid var(--g2p-line);
  width: 230px;
  box-shadow: var(--g2p-shadow-soft);
  background: #fff;
  border-radius: 99px;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  display: flex;
  position: relative;
}

.services-search svg {
  color: #9aa4b8;
  flex-shrink: 0;
}

.services-search input {
  width: 100%;
  font: inherit;
  color: var(--g2p-navy);
  background: none;
  border: 0;
  outline: 0;
  font-size: 12px;
}

.services-search input::placeholder {
  color: #9aa4b8;
}

.search-results {
  z-index: 10;
  box-shadow: var(--g2p-shadow-nav);
  background: #fff;
  border-radius: 14px;
  padding: 6px;
  display: grid;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
}

.search-results button, .search-results span {
  text-align: right;
  font: inherit;
  color: var(--g2p-navy);
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 8px;
  font-size: 12px;
}

.search-results button:hover {
  background: var(--g2p-blue-050);
}

.services-layout {
  direction: rtl;
  grid-template-columns: 235px minmax(0, 1fr);
  gap: 44px;
  margin-top: 20px;
  display: grid;
}

.services-nav {
  height: max-content;
  box-shadow: var(--g2p-shadow-soft);
  background: #fff;
  border-radius: 28px;
  gap: 5px;
  padding: 12px;
  display: grid;
}

.services-nav button {
  font: inherit;
  color: #677187;
  cursor: pointer;
  text-align: right;
  direction: rtl;
  background: none;
  border: 0;
  border-radius: 99px;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
}

.services-nav button.active {
  color: #fff;
  background: #2d66e7;
  box-shadow: 0 7px 11px #275fdc42;
}

.services-nav-icon {
  flex-shrink: 0;
  align-items: center;
  display: flex;
}

.services-content {
  min-width: 0;
}

.service-detail-card {
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: center;
  gap: 35px;
  min-height: 294px;
  padding: 39px 50px;
  display: grid;
  overflow: hidden;
}

.detail-copy {
  text-align: right;
  direction: rtl;
  position: relative;
}

.detail-copy h2 {
  color: #15213a;
  margin: 0 0 13px;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.4;
}

.detail-copy p {
  color: #607087;
  max-width: 540px;
  margin-right: auto;
  font-size: 15px;
  line-height: 2;
}

.service-tags {
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 15px;
  display: flex;
}

.service-tags span {
  border: 1px solid;
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 11px;
  line-height: 1;
}

.service-tags.blue span {
  color: #2466e8;
  background: #f4f8ff;
  border-color: #bfd4ff;
}

.service-tags.green span {
  color: #05a951;
  background: #edfff5;
  border-color: #bbf1d0;
}

.service-tags.red span {
  color: #fb313e;
  background: #fff7f7;
  border-color: #ff666c;
}

.service-tags.orange span {
  color: #e78b00;
  background: #fffdf5;
  border-color: #ffc762;
}

.service-illustration {
  justify-content: center;
  align-items: end;
  height: 220px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.service-illustration > div:first-child {
  border-radius: 48% 52% 47% 53%;
  justify-content: center;
  align-items: center;
  width: 190px;
  height: 170px;
  font-size: 63px;
  display: flex;
  position: absolute;
  bottom: 5px;
}

.service-illustration.gifts > div:first-child {
  background: #f4c7d1;
}

.service-illustration.bill > div:first-child {
  color: #fff;
  background: #bdc9e5;
}

.service-illustration.esim > div:first-child {
  background: #ff986e;
}

.illustration-person {
  z-index: 2;
  filter: saturate(.8);
  font-size: 120px;
  position: relative;
  transform: translateY(7px);
}

.service-illus-img {
  object-fit: contain;
  object-position: bottom;
  width: 100%;
  height: 100%;
}

.supported-devices {
  font: inherit;
  color: #6b778c;
  border: 1px solid var(--g2p-line);
  cursor: pointer;
  background: #fff;
  border-radius: 99px;
  margin-top: 15px;
  padding: 9px 20px;
  font-size: 13px;
}

.gift-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 8px 0;
  display: grid;
}

.hb-tabs-wrap {
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  margin-bottom: 24px;
  display: flex;
}

.hb-tabs {
  scrollbar-width: none;
  flex: 1;
  gap: 8px;
  padding-bottom: 2px;
  display: flex;
  overflow-x: auto;
}

.hb-tabs::-webkit-scrollbar {
  display: none;
}

.hb-tab {
  font: inherit;
  cursor: pointer;
  color: var(--g2p-navy-soft);
  border: 0;
  border: 1.5px solid var(--g2p-line);
  background: #fff;
  border-radius: 99px;
  flex-shrink: 0;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  transition: all .18s;
}

.hb-tab:hover {
  color: var(--g2p-blue);
  border-color: #b5caff;
}

.hb-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #2cb4f8, #1365e9);
  border-color: #0000;
  box-shadow: 0 6px 16px #1365e947;
}

.hb-count {
  color: var(--g2p-muted);
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 13px;
}

.hb-grid {
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  display: grid;
}

.hb-card {
  color: inherit;
  cursor: pointer;
  background: #fff;
  border: 1.5px solid #eceef3;
  border-radius: 20px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px 16px;
  text-decoration: none;
  transition: all .2s;
  display: flex;
  box-shadow: 0 2px 10px #1423460e;
}

.hb-card:hover {
  border-color: #b8ccff;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px #1365e921;
}

.hb-logo-wrap {
  background: #f7f8fb;
  border: 1px solid #eef0f5;
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  padding: 10px;
  display: flex;
  overflow: hidden;
}

.hb-logo-img {
  object-fit: contain;
  width: 44px;
  height: 44px;
  display: block;
}

.hb-logo-fallback {
  color: #fff;
  background: linear-gradient(135deg, #2cb4f8, #1365e9);
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  font-size: 15px;
  font-weight: 900;
}

.hb-name-fa {
  color: #1a2a42;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.hb-name-en {
  color: #9aa4b6;
  text-align: center;
  direction: ltr;
  font-size: 11px;
}

.gift-category {
  font: inherit;
  color: #344158;
  cursor: pointer;
  text-align: right;
  background: none;
  border: 0;
  font-size: 13px;
  font-weight: 800;
  transition: all .18s;
}

.gift-category:hover .gift-cat-logos {
  background: #f0f5ff;
  border-color: #c5d7ff;
}

.gift-cat-logos {
  background: #f7f8fb;
  border: 1.5px solid #eaecf0;
  border-radius: 24px;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  padding: 12px;
  transition: all .18s;
  display: grid;
}

.gift-cat-logo-cell {
  background: #fff;
  border: 1px solid #eff1f5;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  min-height: 58px;
  padding: 8px;
  display: flex;
  overflow: hidden;
}

.brand-logo-img-wrap {
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
}

.gift-brand-logo {
  object-fit: contain;
  border-radius: 4px;
  width: 40px;
  height: 40px;
  display: block;
}

.brand-logo-fallback {
  color: #fff;
  background: linear-gradient(135deg, #2cb4f8, #1365e9);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 13px;
  font-weight: 900;
}

.gift-category b {
  margin-top: 10px;
  padding: 0 2px;
  display: block;
}

.back-categories {
  color: #2d66e7;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-size: 14px;
  font-weight: 800;
  display: flex;
}

.brands-card {
  padding: 28px;
}

.brands-card-title {
  color: #15213a;
  text-align: right;
  margin: 0 0 22px;
  font-size: 18px;
  font-weight: 900;
}

.brands-card-title span {
  color: #7a89a4;
  margin-right: 8px;
  font-size: 13px;
  font-weight: 600;
}

.brands-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  display: grid;
}

.brand-item {
  text-align: right;
  color: inherit;
  background: #fff;
  border: 1.5px solid #edf0f4;
  border-radius: 18px;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  text-decoration: none;
  transition: all .18s;
  display: flex;
}

.brand-item:hover {
  border-color: #c4d5ff;
  box-shadow: 0 4px 16px #2650d214;
}

.brand-logo-wrap {
  background: #f8f9fc;
  border: 1px solid #eef0f5;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  padding: 6px;
  display: flex;
}

.brand-logo-wrap .gift-brand-logo {
  width: 40px;
  height: 40px;
}

.brand-info b {
  color: #1a2a42;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 800;
  display: block;
}

.brand-info span {
  color: #667289;
  font-size: 11px;
  line-height: 1.8;
  display: block;
}

@media (max-width: 800px) {
  .services-page {
    padding-top: 94px;
  }

  .services-hero {
    border-radius: 25px;
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .services-hero-copy {
    text-align: right;
    order: 1;
    padding: 28px;
  }

  .services-hero h1 {
    font-size: 33px;
  }

  .services-hero p {
    font-size: 13px;
    line-height: 1.9;
  }

  .services-hero-art {
    order: 2;
    height: 280px;
    min-height: 0;
  }

  .services-hero-img {
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
  }

  .services-status {
    bottom: 16px;
    left: 12px;
  }

  .services-top-bar {
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    margin-top: 22px;
  }

  .services-search {
    width: 100%;
  }

  .services-layout {
    flex-direction: column;
    gap: 16px;
    margin-top: 0;
    display: flex;
  }

  .services-nav {
    border-radius: 20px;
    padding: 10px;
    display: flex;
    overflow-x: auto;
  }

  .services-nav button {
    white-space: nowrap;
    flex: 1;
    min-width: max-content;
  }

  .service-detail-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 25px;
  }

  .detail-copy {
    order: 1;
  }

  .service-illustration {
    order: 2;
    height: 175px;
  }

  .detail-copy h2 {
    font-size: 23px;
  }

  .detail-copy p {
    font-size: 13px;
  }

  .gift-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .brands-grid {
    grid-template-columns: 1fr;
  }

  .services-area {
    padding-bottom: 55px;
  }

  .hb-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hb-count {
    display: none;
  }
}

.blog-page {
  padding-top: 110px;
}

.blog-container {
  max-width: 1140px;
}

.blog-hero {
  text-align: center;
  padding: 35px 46px 50px;
  position: relative;
}

.blog-hero h1 {
  font-size: 30px;
  font-weight: 900;
}

.blog-hero h2 {
  margin-top: 18px;
  font-size: 19px;
  font-weight: 800;
}

.blog-hero p {
  max-width: 850px;
  color: var(--g2p-navy-soft);
  margin: 20px auto 0;
  font-size: 14px;
  line-height: 2.25;
}

.blog-megaphone {
  color: #9ca4b1;
  font-family: serif;
  font-size: 58px;
  position: absolute;
  transform: rotate(-34deg);
}

.blog-megaphone.first {
  top: 50px;
  right: 5%;
}

.blog-megaphone.second {
  top: 85px;
  left: 4%;
  transform: rotate(28deg);
}

.blog-featured {
  direction: rtl;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 31px;
  display: grid;
}

.newsletter-card {
  color: #fff;
  text-align: right;
  background: #11161f radial-gradient(#ffffff14 1px, #0000 1.5px) 0 0 / 13px 13px;
  border-radius: 16px;
  min-height: 258px;
  padding: 27px 20px;
}

.newsletter-card h2 {
  font-size: 17px;
  font-weight: 900;
}

.newsletter-card p {
  color: #e4e7ed;
  margin-top: 28px;
  font-size: 13px;
  line-height: 2;
}

.newsletter-card input {
  color: #fff;
  width: 100%;
  font: inherit;
  background: #2c2d30;
  border: 1px solid #fff;
  border-radius: 8px;
  outline: 0;
  margin: 20px 0 12px;
  padding: 10px;
  font-size: 12px;
}

.newsletter-message {
  color: #ffa2a2;
  margin-top: 10px;
  font-size: 11px;
  display: block;
}

.featured-slider {
  color: #fff;
  background: linear-gradient(145deg, #2cb4f8, #1365e9);
  border-radius: 16px;
  grid-template-columns: 1fr 230px;
  align-items: center;
  gap: 20px;
  min-height: 258px;
  padding: 28px 35px;
  display: grid;
  overflow: hidden;
}

.featured-copy {
  flex-direction: column;
  align-self: stretch;
  display: flex;
}

.featured-copy > span {
  color: #27436f;
  background: #fff;
  border-radius: 9px;
  align-self: flex-start;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 800;
}

.featured-copy h2 {
  margin: 17px 0 12px;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.45;
}

.featured-copy p {
  color: #e4edff;
  font-size: 12px;
  line-height: 2;
}

.featured-meta {
  color: #dce8ff;
  margin-top: auto;
  font-size: 11px;
}

.featured-controls {
  direction: ltr;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  display: flex;
}

.featured-controls button {
  color: #fff;
  cursor: pointer;
  background: none;
  border: 0;
  font-size: 23px;
  line-height: 1;
}

.featured-controls i {
  background: #8dadf4;
  border-radius: 99px;
  width: 16px;
  height: 4px;
}

.featured-controls i.active {
  background: #fff;
  width: 27px;
}

.featured-image {
  object-fit: cover;
  border-radius: 3px;
  width: 100%;
  height: 160px;
}

.blog-categories {
  justify-content: center;
  gap: 24px;
  padding: 41px 5px 27px;
  display: flex;
  overflow-x: auto;
}

.blog-categories button {
  color: #768094;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
}

.blog-categories button.active {
  color: #fff;
  background: #274b9d;
  box-shadow: 0 6px 12px #2148a033;
}

.blog-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  display: grid;
}

.blog-card {
  color: inherit;
  box-shadow: var(--g2p-shadow-soft);
  background: #fff;
  border: 2px solid #e6e9ee;
  border-radius: 17px;
  padding: 12px 12px 13px;
  text-decoration: none;
  transition: all .2s;
  display: block;
}

.blog-card:hover {
  border-color: #b9caf2;
  transform: translateY(-4px);
}

.blog-card-top {
  justify-content: space-between;
  gap: 4px;
  margin: 1px 10px 11px;
  display: flex;
}

.blog-card-top span {
  background: #354156;
  flex: 1;
  height: 1px;
}

.blog-card-category {
  color: #234fa7;
  margin: 0;
  font-size: 12px;
  font-weight: 800;
}

.blog-card h3 {
  min-height: 76px;
  margin: 10px 0;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.9;
}

.blog-card-image {
  object-fit: cover;
  width: 100%;
  height: 170px;
}

.blog-read {
  color: #fff;
  background: #090b0e;
  border-radius: 7px;
  width: max-content;
  margin: -7px auto 8px;
  padding: 5px 11px;
  font-size: 10px;
  font-weight: 700;
  display: block;
  position: relative;
}

.blog-card-meta {
  color: #949daa;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 10px;
  display: flex;
}

.article-page {
  padding: 108px 24px 70px;
}

.article-layout {
  direction: ltr;
  grid-template-columns: 240px minmax(0, 620px);
  align-items: start;
  gap: 35px;
  max-width: 1020px;
  margin: auto;
  display: grid;
}

.article-content {
  text-align: right;
  direction: rtl;
}

.article-breadcrumb {
  color: #8d96a6;
  margin-bottom: 20px;
  font-size: 11px;
}

.article-category {
  color: var(--g2p-blue);
  font-size: 13px;
  font-weight: 800;
}

.article-content h1 {
  margin: 12px 0;
  font-size: 27px;
  font-weight: 900;
  line-height: 1.6;
}

.article-info {
  color: #8e98a8;
  margin-bottom: 20px;
  font-size: 11px;
}

.article-cover {
  object-fit: cover;
  border-radius: 11px;
  width: 100%;
  height: 360px;
}

.article-lead, .article-content section > p {
  color: #45536a;
  margin: 23px 0;
  font-size: 14px;
  line-height: 2.35;
}

.article-content section {
  margin-top: 31px;
}

.article-content h2 {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.6;
}

.article-aside {
  direction: rtl;
  background: none;
  padding-top: 70px;
}

.article-aside h3 {
  margin-bottom: 13px;
  font-size: 16px;
  font-weight: 900;
}

.article-aside > a {
  box-shadow: var(--g2p-shadow-soft);
  color: var(--g2p-navy);
  background: #fff;
  border-radius: 10px;
  gap: 8px;
  margin-bottom: 9px;
  padding: 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.7;
  text-decoration: none;
  display: flex;
}

.article-aside img {
  object-fit: cover;
  border-radius: 6px;
  width: 55px;
  height: 50px;
}

.article-aside small {
  color: #9aa2af;
  font-weight: 400;
  display: block;
}

.article-table {
  border: 1px solid #e3e7ed;
  border-radius: 10px;
  grid-template-columns: 1fr 1fr;
  font-size: 12px;
  display: grid;
  overflow: hidden;
}

.article-table > * {
  border-bottom: 1px solid #e3e7ed;
  padding: 12px;
}

.article-table b {
  background: #f7f9fc;
  font-size: 13px;
}

.article-callout {
  box-shadow: var(--g2p-shadow-soft);
  text-align: center;
  color: #2250a8;
  background: #fff;
  border-radius: 12px;
  margin: 25px 0;
  padding: 22px;
  font-size: 19px;
  line-height: 1.5;
}

.article-callout > div {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 18px;
  display: grid;
}

.article-callout span {
  color: #2366d8;
  border: 1px solid #dce6fb;
  border-radius: 8px;
  padding: 11px;
  font-size: 25px;
}

.article-callout small {
  color: #4d5a70;
  margin-top: 6px;
  font: 600 10px Vazirmatn, sans-serif;
  display: block;
}

.article-content details {
  border-bottom: 1px solid #e1e5eb;
  padding: 13px 0;
}

.article-content summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
}

.article-content details p {
  color: #56647a;
  font-size: 13px;
  line-height: 2;
}

.related-title {
  margin-top: 55px;
}

.article-related {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  display: grid;
}

.article-related .blog-card {
  padding: 8px;
}

.article-related .blog-card h3 {
  min-height: 67px;
  font-size: 11px;
}

.article-related .blog-card-image {
  height: 100px;
}

.article-related .blog-card-top, .article-related .blog-card-category, .article-related .blog-card-meta {
  display: none;
}

@media (max-width: 800px) {
  .blog-page {
    padding-top: 88px;
  }

  .blog-hero {
    padding: 25px 5px 35px;
  }

  .blog-hero h1 {
    font-size: 25px;
  }

  .blog-hero h2 {
    font-size: 15px;
  }

  .blog-hero p {
    font-size: 12px;
  }

  .blog-megaphone {
    display: none;
  }

  .blog-featured {
    grid-template-columns: 1fr;
  }

  .newsletter-card {
    min-height: 0;
  }

  .featured-slider {
    grid-template-columns: 1fr;
    min-height: 400px;
    padding: 23px;
  }

  .featured-image {
    order: -1;
    height: 150px;
  }

  .blog-categories {
    justify-content: flex-start;
    gap: 5px;
    padding: 28px 0 20px;
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .blog-card {
    padding: 9px;
  }

  .blog-card h3 {
    min-height: 69px;
    font-size: 12px;
  }

  .blog-card-image {
    height: 115px;
  }

  .article-page {
    padding: 86px 16px 45px;
  }

  .article-layout {
    flex-direction: column;
    gap: 25px;
    display: flex;
  }

  .article-content {
    order: 1;
  }

  .article-aside {
    order: 2;
    width: 100%;
    padding: 0;
  }

  .article-content h1 {
    font-size: 22px;
  }

  .article-cover {
    height: 220px;
  }

  .article-related {
    grid-template-columns: repeat(2, 1fr);
  }

  .article-callout {
    font-size: 15px;
  }

  .article-callout > div {
    grid-template-columns: repeat(2, 1fr);
  }
}

.about-page {
  padding-top: 112px;
  padding-bottom: 20px;
}

.about-container {
  max-width: 1060px;
}

.about-hero {
  text-align: center;
  max-width: 840px;
  margin: 0 auto;
  padding: 12px 20px 32px;
}

.about-hero h1 {
  font-size: 29px;
  font-weight: 900;
  line-height: 1.55;
}

.about-hero h2 {
  margin-top: 9px;
  font-size: 16px;
  font-weight: 800;
}

.about-hero p {
  color: #56647a;
  margin: 15px auto;
  font-size: 13px;
  line-height: 2.2;
}

.about-actions {
  justify-content: center;
  gap: 13px;
  margin-top: 20px;
  display: flex;
}

.about-actions a {
  min-width: 125px;
  box-shadow: var(--g2p-shadow-soft);
  color: var(--g2p-navy);
  background: #fff;
  border: 1px solid #d6dce5;
  border-radius: 9px;
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all .2s;
}

.about-actions a:hover {
  color: var(--g2p-blue);
  border-color: var(--g2p-blue);
}

.about-actions .primary {
  background: var(--g2p-btn);
  color: #fff;
  border-color: #0000;
}

.about-collage {
  direction: ltr;
  grid-template-columns: 1.05fr 1.13fr 1.08fr;
  gap: 14px;
  max-width: 820px;
  margin: 0 auto;
  display: grid;
}

.about-collage > div {
  border-radius: 13px;
  min-height: 236px;
  overflow: hidden;
}

.collage-finance {
  background: linear-gradient(150deg, #2cb4f8, #1365e9);
  padding: 20px;
  position: relative;
}

.collage-finance:after {
  content: "";
  background: linear-gradient(135deg, #1e242d, #6a737f);
  border-radius: 9px;
  width: 130px;
  height: 68px;
  position: absolute;
  bottom: 47px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 15px 25px #0000002e;
}

.collage-finance > span {
  color: #fff6a3;
  font-size: 66px;
  position: absolute;
  bottom: 15px;
  left: 20px;
}

.collage-finance > div {
  z-index: 1;
  color: #fff;
  display: grid;
  position: absolute;
  bottom: 20px;
  right: 18px;
}

.collage-finance b {
  font: 800 17px Arial;
}

.collage-finance small {
  font-size: 9px;
}

.collage-middle {
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  display: grid;
}

.collage-middle > div {
  border-radius: 13px;
  padding: 18px;
}

.collage-users {
  color: #fff;
  background: linear-gradient(145deg, #2cb4f8, #1365e9);
}

.collage-users b, .collage-users span, .collage-users small {
  display: block;
}

.collage-users b {
  font-size: 13px;
}

.collage-users span {
  margin-top: 18px;
  font: 800 22px Arial;
}

.collage-users small {
  margin-top: 7px;
  font-size: 9px;
}

.collage-black {
  color: #fff;
  background: #161719 radial-gradient(#ffffff1f 1px, #0000 1px) 0 0 / 10px 10px;
  flex-direction: column;
  justify-content: flex-end;
  display: flex;
}

.collage-black b {
  font: 800 23px Arial;
}

.collage-black span {
  margin-top: 5px;
  font-size: 10px;
}

.collage-app {
  text-align: center;
  color: #183e7c;
  background: #99d5fa;
  padding: 30px 18px;
  position: relative;
}

.app-phones {
  letter-spacing: -33px;
  margin: 15px 0 20px;
  font-size: 66px;
  transform: rotate(-9deg);
}

.collage-app p {
  font-size: 10px;
}

.collage-app b {
  font-size: 17px;
}

.about-story {
  padding: 62px 0 13px;
}

.about-title {
  text-align: center;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.about-title h2 {
  font-size: 21px;
  font-weight: 900;
}

.about-title .g2p-underline {
  margin-top: 4px;
}

.about-values {
  gap: 14px;
  max-width: 900px;
  margin: 25px auto 0;
  display: grid;
}

.about-value {
  text-align: right;
  border: 1px solid #e7eaf0;
  padding: 22px 36px 20px;
  position: relative;
}

.about-value > span {
  width: 22px;
  height: 22px;
  color: var(--g2p-blue);
  background: #edf4ff;
  border-radius: 50%;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  position: absolute;
  top: 19px;
  right: 18px;
}

.about-value h3 {
  padding-right: 25px;
  font-size: 15px;
  font-weight: 900;
}

.about-value p {
  color: #5c697d;
  margin-top: 12px;
  font-size: 12px;
  line-height: 2.1;
}

.about-stats {
  color: #fff;
  background: linear-gradient(100deg, #2cb4f8, #1365e9);
  border-radius: 12px;
  grid-template-columns: repeat(4, 1fr);
  max-width: 940px;
  margin: 42px auto 68px;
  display: grid;
  overflow: hidden;
}

.about-stats div {
  text-align: center;
  padding: 18px 8px;
}

.about-stats b {
  font: 900 22px Arial;
  display: block;
}

.about-stats span {
  color: #d8e5ff;
  font-size: 11px;
}

.about-stats-new {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 960px;
  margin: 42px auto 62px;
  display: grid;
}

.about-stat-card {
  text-align: center;
  background: #fff;
  border: 1px solid #e8edf5;
  border-radius: 18px;
  padding: 28px 20px 24px;
  transition: box-shadow .2s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 28px #1f2b4617;
}

.about-stat-card:before {
  content: "";
  pointer-events: none;
  background: linear-gradient(160deg, #2cb4f80f 0%, #1365e91c 100%);
  position: absolute;
  inset: 0;
}

.about-stat-card b {
  -webkit-text-fill-color: transparent;
  letter-spacing: -.01em;
  background: linear-gradient(160deg, #2cb4f8, #1365e9);
  -webkit-background-clip: text;
  background-clip: text;
  font-family: Vazirmatn, sans-serif;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.2;
  display: block;
}

.about-stat-card span {
  color: #6b7a96;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  display: block;
}

.about-services {
  grid-template-columns: 1fr 1.35fr;
  align-items: center;
  gap: 38px;
  max-width: 890px;
  margin: 72px auto 0;
  display: grid;
}

.about-services > .about-title {
  align-items: flex-start;
}

.about-services .g2p-underline {
  width: 95px;
}

.about-services > div > p {
  color: #5d6a7f;
  margin-top: 17px;
  font-size: 13px;
  line-height: 2.15;
}

.about-service-grid {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid;
}

.about-service {
  padding: 17px;
}

.about-service i {
  color: var(--g2p-blue);
  font-size: 23px;
  font-style: normal;
}

.about-service h3 {
  margin: 8px 0;
  font-size: 13px;
  font-weight: 900;
}

.about-service p {
  color: #67748a;
  font-size: 10px;
  line-height: 1.7;
}

.about-contact {
  direction: ltr;
  grid-template-columns: 1fr 1.5fr;
  align-items: center;
  gap: 70px;
  max-width: 900px;
  margin: 82px auto 0;
  display: grid;
}

.contact-form {
  box-shadow: var(--g2p-shadow-soft);
  direction: rtl;
  background: #fff;
  border: 1px solid #e5e8ee;
  border-radius: 12px;
  padding: 17px;
}

.contact-form h3 {
  margin-bottom: 13px;
  font-size: 14px;
  font-weight: 900;
}

.contact-form input, .contact-form textarea {
  width: 100%;
  font: inherit;
  resize: vertical;
  background: #fdfdfd;
  border: 1px solid #e1e5ea;
  border-radius: 7px;
  outline: 0;
  margin-top: 8px;
  padding: 10px;
  font-size: 11px;
  display: block;
}

.contact-form input:focus, .contact-form textarea:focus {
  border-color: var(--g2p-blue);
  box-shadow: 0 0 0 3px var(--g2p-blue-050);
}

.contact-form button {
  margin-top: 9px;
  padding-block: 9px;
}

.form-success {
  color: #07a858;
  margin-top: 9px;
  font-size: 11px;
}

.contact-copy {
  text-align: right;
  direction: rtl;
}

.contact-copy .about-title {
  align-items: flex-start;
}

.contact-copy p {
  color: #58667b;
  margin: 18px 0;
  font-size: 13px;
  line-height: 2.2;
}

.contact-copy ul {
  gap: 14px;
  display: grid;
}

.contact-copy li {
  padding-right: 21px;
  font-size: 12px;
  list-style: none;
  position: relative;
}

.contact-copy li:before {
  content: "●";
  color: var(--g2p-blue);
  position: absolute;
  right: 0;
}

.contact-copy li b, .contact-copy li span {
  display: block;
}

.contact-copy li span {
  color: #627087;
  margin-top: 4px;
}

.about-partners {
  text-align: center;
  padding: 80px 0 50px;
}

.about-partners > div {
  grid-template-columns: repeat(5, 1fr);
  gap: 13px;
  max-width: 820px;
  margin: 26px auto 0;
  display: grid;
}

.about-partner-card {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 115px;
  padding: 16px;
  display: flex;
}

.partner-logo {
  object-fit: contain;
  width: 72px;
  height: 72px;
}

.about-partners b {
  color: var(--g2p-navy-soft);
  font-size: 12px;
}

.about-licenses {
  text-align: center;
  padding-bottom: 45px;
}

.about-licenses > p {
  color: #68758a;
  margin: 14px auto 20px;
  font-size: 11px;
}

.about-licenses > div {
  justify-content: center;
  gap: 13px;
  display: flex;
}

.about-licenses .bg-white {
  color: #2865ca;
  place-items: center;
  min-width: 125px;
  min-height: 84px;
  display: grid;
}

.about-licenses .bg-white span {
  font-size: 10px;
}

@media (max-width: 800px) {
  .about-page {
    padding-top: 88px;
  }

  .about-hero h1 {
    font-size: 23px;
  }

  .about-hero p {
    font-size: 12px;
  }

  .about-actions {
    flex-wrap: wrap;
  }

  .about-actions a {
    min-width: 105px;
  }

  .about-collage {
    grid-template-columns: 1fr 1fr;
  }

  .collage-app {
    grid-column: span 2;
    min-height: 180px !important;
  }

  .about-story {
    padding-top: 46px;
  }

  .about-title h2 {
    font-size: 19px;
  }

  .about-value {
    padding: 20px 32px 18px;
  }

  .about-stats {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 48px;
  }

  .about-stats-new {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 38px;
  }

  .about-services {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .about-service-grid {
    order: -1;
  }

  .about-contact {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 55px;
  }

  .contact-form {
    order: 2;
  }

  .about-partners {
    padding-top: 58px;
  }

  .about-partners > div {
    grid-template-columns: repeat(3, 1fr);
  }

  .about-partners .bg-white {
    min-height: 92px;
  }
}

.contact-page {
  padding-top: 110px;
  padding-bottom: 60px;
}

.contact-container {
  max-width: 980px;
}

.contact-hero {
  text-align: center;
  padding: 18px 45px 66px;
  position: relative;
}

.contact-hero h1 {
  font-size: 31px;
  font-weight: 900;
  line-height: 1.55;
}

.contact-hero h2 {
  margin-top: 9px;
  font-size: 17px;
  font-weight: 800;
}

.contact-hero p {
  color: #4f5e74;
  max-width: 740px;
  margin: 20px auto 0;
  font-size: 13px;
  line-height: 2.2;
}

.contact-decor {
  color: #9ca4ae;
  font-family: serif;
  font-size: 27px;
  position: absolute;
}

.contact-decor.d1 {
  top: 25px;
  left: 8%;
}

.contact-decor.d2 {
  font-size: 55px;
  top: 29px;
  left: 25%;
  transform: rotate(20deg);
}

.contact-decor.d3 {
  top: 30px;
  right: 8%;
}

.contact-decor.d4 {
  font-size: 25px;
  top: 80px;
  right: 18%;
}

.contact-visuals {
  direction: ltr;
  grid-template-columns: 1.65fr 1fr;
  align-items: stretch;
  gap: 18px;
  max-width: 840px;
  margin: auto;
  display: grid;
}

.contact-social {
  direction: rtl;
  background: #0d1827;
  border: 1px solid #dce1e9;
  min-height: 370px;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.contact-visual-img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
}

.social-band {
  z-index: 3;
  color: #fff;
  background: linear-gradient(to top, #0a1432e0 0%, #0a14328c 60%, #0000 100%);
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding: 42px 24px 20px;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.social-band b {
  white-space: nowrap;
  text-shadow: 0 1px 4px #0006;
  font-size: 14px;
  font-weight: 800;
}

.social-icons {
  align-items: center;
  gap: 10px;
  display: flex;
}

.social-icons a {
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #ffffff26;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  transition: background .18s, transform .18s;
  display: inline-flex;
}

.social-icons a:hover {
  background: #ffffff4d;
  transform: translateY(-2px);
}

.contact-blue {
  color: #fff;
  direction: rtl;
  background: linear-gradient(160deg, #2cb4f8, #1365e9);
  min-height: 370px;
  padding: 30px 26px;
}

.contact-blue h2 {
  font-size: 19px;
  font-weight: 900;
}

.contact-blue > p {
  color: #d4e3ff;
  margin: 10px 0 18px;
  font-size: 13px;
  font-weight: 700;
}

.contact-blue > div {
  border-top: 1px solid #ffffff38;
  gap: 14px;
  padding: 17px 0;
  display: flex;
}

.contact-blue i {
  font-size: 27px;
  font-style: normal;
}

.contact-blue b, .contact-blue a, .contact-blue small {
  display: block;
}

.contact-blue b {
  font-size: 14px;
}

.contact-blue a, .contact-blue small {
  color: #e1ecff;
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.8;
  text-decoration: none;
}

.contact-form-section {
  text-align: right;
  max-width: 750px;
  margin: 75px auto 0;
}

.contact-heading {
  flex-direction: column;
  align-items: flex-start;
  width: max-content;
  margin-right: auto;
  display: flex;
}

.contact-heading h2 {
  font-size: 24px;
  font-weight: 900;
}

.contact-form-section > p {
  color: #59677b;
  margin: 18px 0 26px;
  font-size: 13px;
  line-height: 2.25;
}

.contact-wide-form {
  background: #fff;
  border: 2px solid #e1e4e9;
  border-radius: 15px;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px;
  display: grid;
}

.contact-wide-form label {
  font-size: 12px;
  font-weight: 800;
}

.contact-wide-form input, .contact-wide-form textarea {
  width: 100%;
  font: inherit;
  background: #f3f3f4;
  border: 0;
  border-radius: 8px;
  outline: 0;
  margin-top: 7px;
  padding: 11px;
  font-size: 12px;
  display: block;
}

.contact-wide-form input:focus, .contact-wide-form textarea:focus {
  box-shadow: 0 0 0 3px var(--g2p-blue-050);
}

.contact-wide-form .message {
  grid-column: span 2;
}

.contact-wide-form button {
  justify-self: end;
  min-width: 165px;
  padding-block: 9px;
}

.contact-success {
  color: #08a65a;
  align-self: center;
  font-size: 12px;
}

@media (max-width: 800px) {
  .contact-page {
    padding-top: 88px;
  }

  .contact-hero {
    padding: 18px 5px 42px;
  }

  .contact-hero h1 {
    font-size: 25px;
  }

  .contact-hero h2 {
    font-size: 14px;
  }

  .contact-hero p {
    font-size: 12px;
  }

  .contact-decor {
    display: none;
  }

  .contact-visuals {
    grid-template-columns: 1fr;
  }

  .contact-social {
    min-height: 300px;
  }

  .contact-blue {
    min-height: auto;
  }

  .social-band {
    padding: 12px 16px;
  }

  .social-band b {
    font-size: 12px;
  }

  .contact-form-section {
    margin-top: 55px;
  }

  .contact-wide-form {
    grid-template-columns: 1fr;
  }

  .contact-wide-form .message {
    grid-column: auto;
  }

  .contact-wide-form button {
    justify-self: stretch;
  }

  .contact-success {
    justify-self: center;
  }
}

.about-licenses a {
  text-decoration: none;
}

.about-licenses img {
  object-fit: contain;
  max-width: 100%;
  max-height: 76px;
}

.about-licenses .bg-white {
  overflow: hidden;
}

.trust-badges {
  flex-wrap: wrap;
  gap: 12px;
  display: flex;
}

.trust-badges > a {
  border: 1px solid var(--g2p-line);
  background: #fff;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  transition: border-color .18s, box-shadow .18s;
  display: flex;
  overflow: hidden;
}

.trust-badges > a:hover {
  border-color: var(--g2p-blue);
  box-shadow: 0 5px 16px #2148a01f;
}

.trust-badges img {
  object-fit: contain;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  display: block;
}

.trust-badges--footer {
  margin-top: 16px;
}

.trust-badges--footer > a {
  width: 64px;
  height: 64px;
  padding: 5px;
}

.trust-badges--about {
  justify-content: center !important;
}

.trust-badges--about > a {
  width: 132px;
  height: 96px;
  padding: 10px;
}

.detail-page {
  padding-bottom: 30px;
}

.detail-hero {
  -webkit-backdrop-filter: blur(18px);
  background: #b4bcd226;
  border-bottom: 1px solid #ffffff73;
  border-radius: 0 0 35px 35px;
  min-height: 410px;
  margin-top: 0;
  padding-top: 105px;
  overflow: hidden;
  box-shadow: 0 8px 32px #1f2b461a, inset 0 1px #fff9;
}

.detail-hero-inner {
  direction: rtl;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  max-width: 1100px;
  height: 310px;
  display: grid;
}

.detail-hero-copy {
  padding-right: 55px;
}

.detail-hero h1 {
  max-width: 410px;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.22;
}

.detail-hero h1 em {
  color: #2c63d8;
  margin-top: 5px;
  font-style: normal;
  display: block;
}

.detail-hero p {
  color: #4e5e76;
  max-width: 435px;
  margin: 20px 0;
  font-size: 14px;
  line-height: 2.1;
}

.detail-hero-art {
  justify-content: center;
  align-items: flex-end;
  height: 310px;
  display: flex;
  position: relative;
}

.detail-hero-statue {
  object-fit: contain;
  object-position: bottom;
  width: auto;
  max-width: 100%;
  height: 100%;
  display: block;
}

.detail-container {
  max-width: 980px;
}

.detail-title {
  text-align: center;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 28px;
  display: flex;
}

.detail-title h2 {
  color: #15213a;
  font-size: 22px;
  font-weight: 900;
}

.detail-title .g2p-underline {
  margin-top: 6px;
}

.detail-options {
  padding: 50px 0;
}

.detail-options > div {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 780px;
  margin: 0 auto;
  display: grid;
}

.detail-options .bg-white {
  border: 1px solid #e4e8ee;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  display: flex;
}

.detail-card-icon {
  color: #285fca;
  flex-shrink: 0;
  align-items: center;
  padding-top: 1px;
  display: flex;
}

.detail-options h3 {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 900;
}

.detail-options p {
  color: #637187;
  font-size: 10px;
}

.detail-benefits {
  background: radial-gradient(#1f5dc814 1px, #0000 1.5px) 0 0 / 13px 13px;
  padding: 50px 0;
}

.detail-benefits > div {
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
}

.detail-benefits article {
  text-align: center;
  border-left: 1px solid #cbd0d8;
  flex-direction: column;
  flex: 0 0 160px;
  align-items: center;
  padding: 12px 14px;
  display: flex;
}

.detail-benefits article:last-child {
  border-left: 0;
}

.detail-benefit-icon {
  color: #2357b5;
  background: #edf3ff;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
  display: flex;
}

.detail-benefits h3 {
  margin: 0 0 5px;
  font-size: 13px;
  font-weight: 900;
}

.detail-benefits p {
  color: #5c687b;
  font-size: 10px;
  line-height: 1.8;
}

.detail-process {
  padding: 60px 0;
}

.process-steps {
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: 0;
  max-width: 860px;
  margin: 34px auto 0;
  display: grid;
  position: relative;
}

.process-steps:before {
  content: "";
  z-index: 0;
  background: linear-gradient(to left, #e2e8f4, #2c63d8, #e2e8f4);
  height: 2px;
  position: absolute;
  top: 28px;
  left: 12.5%;
  right: 12.5%;
}

.process-steps article {
  text-align: center;
  z-index: 1;
  padding: 0 12px;
  position: relative;
}

.process-num {
  color: #fff;
  background: linear-gradient(145deg, #2cb4f8, #1365e9);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  font-size: 22px;
  font-weight: 900;
  display: flex;
  box-shadow: 0 6px 16px #2c64e84d;
}

.process-steps p {
  color: #3a4a62;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.9;
}

.detail-faq {
  padding: 50px 0 70px;
}

.faq-list {
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
  display: grid;
}

.faq-item {
  background: #fff;
  border: 1px solid #eaecf2;
  border-radius: 18px;
  transition: box-shadow .2s;
  overflow: hidden;
  box-shadow: 0 2px 12px #1f2b460f;
}

.faq-item:hover {
  box-shadow: 0 4px 20px #1f2b461a;
}

.faq-item button {
  width: 100%;
  font: inherit;
  text-align: right;
  cursor: pointer;
  color: #1a2540;
  background: none;
  border: 0;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
}

.faq-item button span:first-child {
  flex: 1;
}

.faq-chevron {
  color: #2c63d8;
  background: #f0f4ff;
  border-radius: 50%;
  flex-shrink: 0;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 16px;
  font-weight: 400;
  display: grid;
}

.faq-item p {
  color: #5a687c;
  border-top: 1px solid #f0f2f7;
  margin-top: 0;
  padding: 14px 22px 18px;
  font-size: 13px;
  line-height: 2.1;
}

@media (max-width: 800px) {
  .detail-hero {
    padding-top: 85px;
  }

  .detail-hero-inner {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 420px;
  }

  .detail-hero-copy {
    text-align: center;
    order: 1;
    padding: 20px;
  }

  .detail-hero h1 {
    margin: auto;
    font-size: 27px;
  }

  .detail-hero p {
    font-size: 12px;
  }

  .detail-hero-art {
    order: 2;
    height: 220px;
  }

  .detail-options > div, .detail-benefits > div {
    grid-template-columns: 1fr 1fr;
  }

  .detail-benefits article {
    border-left: 0;
  }

  .process-steps {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .process-steps:before {
    display: none;
  }

  .detail-title h2 {
    font-size: 19px;
  }
}

.terms-page {
  padding: 125px 0 65px;
}

.terms-container {
  max-width: 1000px;
}

.terms-hero {
  text-align: center;
  max-width: 680px;
  margin: auto;
  padding: 18px 0 32px;
}

.terms-hero > span {
  color: #2863ce;
  background: #eef5ff;
  border: 1px solid #bcd2ff;
  border-radius: 99px;
  padding: 6px 13px;
  font-size: 12px;
  display: inline-block;
}

.terms-hero h1 {
  margin: 18px 0 12px;
  font-size: 30px;
  font-weight: 900;
}

.terms-hero h1 em {
  color: var(--g2p-blue);
  font-style: normal;
}

.terms-hero p {
  color: #59687e;
  font-size: 13px;
  line-height: 2.1;
}

.terms-search {
  border: 1px solid var(--g2p-line);
  max-width: 560px;
  box-shadow: var(--g2p-shadow-soft);
  color: #8d99aa;
  background: #fff;
  border-radius: 99px;
  align-items: center;
  gap: 9px;
  margin: 0 auto 35px;
  padding: 12px 17px;
  display: flex;
}

.terms-search input {
  width: 100%;
  font: inherit;
  background: none;
  border: 0;
  outline: 0;
  font-size: 13px;
}

.terms-layout {
  direction: rtl;
  grid-template-columns: 235px minmax(0, 1fr);
  align-items: start;
  gap: 22px;
  display: grid;
}

.terms-layout aside {
  box-shadow: var(--g2p-shadow-soft);
  background: #fff;
  border-radius: 18px;
  padding: 20px;
  position: sticky;
  top: 95px;
}

.terms-layout aside h2 {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 900;
}

.terms-layout aside a {
  color: #647187;
  border-bottom: 1px solid #edf0f4;
  padding: 9px 0;
  font-size: 12px;
  text-decoration: none;
  display: block;
}

.terms-layout aside a:hover {
  color: var(--g2p-blue);
}

.terms-layout > section {
  gap: 16px;
  display: grid;
}

.terms-card {
  border: 1px solid #e4e8ed;
  padding: 24px 28px;
}

.terms-card > div:first-child {
  align-items: center;
  gap: 10px;
  display: flex;
}

.terms-card b {
  background: var(--g2p-blue-050);
  width: 28px;
  height: 28px;
  color: var(--g2p-blue);
  border-radius: 50%;
  place-items: center;
  font-size: 12px;
  display: grid;
}

.terms-card h2 {
  font-size: 18px;
  font-weight: 900;
}

.terms-card p {
  color: #5c6a7e;
  margin-top: 15px;
  font-size: 13px;
  line-height: 2.15;
}

.terms-body {
  margin-top: 15px;
  display: block;
}

.terms-body p {
  color: #5c6a7e;
  width: 100%;
  margin-top: 10px;
  font-size: 13px;
  line-height: 2.15;
  display: block;
}

.terms-body p:first-child {
  margin-top: 0;
}

@media (max-width: 800px) {
  .terms-page {
    padding-top: 90px;
  }

  .terms-hero h1 {
    font-size: 24px;
  }

  .terms-layout {
    grid-template-columns: 1fr;
  }

  .terms-layout aside {
    display: none;
  }

  .terms-card {
    padding: 20px;
  }

  .terms-card h2 {
    font-size: 16px;
  }
}

.blog-featured {
  grid-template-columns: minmax(0, 1fr);
  max-width: 820px;
  margin-inline: auto;
}

.about-contact-copy-only {
  max-width: 620px;
  margin-inline: auto;
  display: block;
}

.about-contact-copy-only .contact-copy {
  text-align: right;
  direction: rtl;
}

.about-contact-copy-only .about-title {
  align-items: flex-start;
}

.faq-page {
  padding: 125px 0 72px;
}

.faq-container {
  max-width: 1000px;
}

.faq-hero {
  text-align: center;
  flex-direction: column;
  align-items: center;
  padding: 0 0 36px;
  display: flex;
}

.faq-hero h1 {
  color: var(--g2p-navy);
  margin: 0 0 6px;
  font-size: 32px;
  font-weight: 900;
}

.faq-hero p {
  color: #607087;
  max-width: 520px;
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.9;
}

.faq-search {
  border: 1.5px solid var(--g2p-line);
  color: #8e9aad;
  background: #fff;
  border-radius: 99px;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto 42px;
  padding: 11px 18px;
  transition: border-color .2s, box-shadow .2s;
  display: flex;
  box-shadow: 0 4px 20px #1f2b4612;
}

.faq-search:focus-within {
  border-color: var(--g2p-blue);
  box-shadow: 0 4px 24px #1365e924;
}

.faq-search input {
  width: 100%;
  font: inherit;
  color: var(--g2p-navy);
  background: none;
  border: 0;
  outline: 0;
  font-size: 13px;
}

.faq-search input::placeholder {
  color: #a5b0bf;
}

.faq-clear {
  cursor: pointer;
  color: #a5b0bf;
  background: none;
  border: 0;
  border-radius: 50%;
  align-items: center;
  padding: 2px;
  transition: color .15s;
  display: flex;
}

.faq-clear:hover {
  color: var(--g2p-navy);
}

.faq-empty {
  color: #b0bac8;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 56px 0;
  display: flex;
}

.faq-empty p {
  color: #8898aa;
  font-size: 14px;
}

.faq-grid {
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 18px;
  display: grid;
}

.faq-category {
  border: 1px solid #e4e8ed;
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
}

.faq-category-title {
  border-bottom: 1px solid #edf0f4;
  align-items: center;
  gap: 11px;
  padding: 18px 20px 16px;
  display: flex;
}

.faq-cat-icon {
  width: 38px;
  height: 38px;
  color: var(--g2p-blue);
  background: linear-gradient(135deg, #eef4ff, #ddeaff);
  border-radius: 12px;
  flex-shrink: 0;
  place-items: center;
  display: grid;
}

.faq-cat-icon svg {
  stroke: var(--g2p-blue);
}

.faq-category h2 {
  color: var(--g2p-navy);
  margin: 0;
  font-size: 15px;
  font-weight: 900;
}

.faq-items {
  padding: 4px 0;
}

.faq-accordion-item {
  border-bottom: 1px solid #f0f2f7;
}

.faq-accordion-item:last-child {
  border-bottom: 0;
}

.faq-accordion-item button {
  text-align: right;
  width: 100%;
  font: inherit;
  color: #3d4f69;
  cursor: pointer;
  background: none;
  border: 0;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.6;
  transition: color .15s;
  display: flex;
}

.faq-accordion-item button:hover, .faq-accordion-item.faq-open button {
  color: var(--g2p-blue);
}

.faq-accordion-item button span:first-child {
  flex: 1;
}

.faq-chevron-icon {
  color: #a0aec0;
  background: #f3f6fb;
  border-radius: 50%;
  flex-shrink: 0;
  place-items: center;
  width: 26px;
  height: 26px;
  transition: background .2s, color .2s, transform .3s;
  display: grid;
}

.faq-open .faq-chevron-icon {
  background: var(--g2p-blue-050);
  color: var(--g2p-blue);
  transform: rotate(180deg);
}

.faq-answer-wrap {
  transition: height .32s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}

.faq-answer-inner {
  color: #5c6e87;
  padding: 0 20px 14px;
  font-size: 12px;
  line-height: 2.05;
}

@media (max-width: 800px) {
  .faq-page {
    padding-top: 90px;
  }

  .faq-hero h1 {
    font-size: 26px;
  }

  .faq-grid {
    grid-template-columns: 1fr;
  }

  .faq-category {
    border-radius: 14px;
  }
}

.services-route-grid {
  z-index: 1;
  grid-template-columns: repeat(4, 228px);
  justify-content: center;
  align-items: start;
  column-gap: 32px;
  display: grid;
  position: relative;
}

.services-route-item {
  margin-top: var(--o);
}

.services-route-line {
  z-index: 0;
  color: #8fb3ee;
  width: min(100%, 1008px);
  height: 160px;
  display: block;
  position: absolute;
  top: 7px;
  left: 50%;
  overflow: visible;
  transform: translateX(-50%);
}

.services-route-line path {
  filter: drop-shadow(0 2px 1px #ffffffd9);
}

@media (max-width: 1020px) {
  .services-route-grid {
    grid-template-columns: repeat(2, 228px);
    gap: 20px;
  }

  .services-route-item {
    margin-top: 0;
  }

  .services-route-line {
    display: none;
  }
}

@media (max-width: 540px) {
  .services-route-grid {
    grid-template-columns: 1fr;
  }

  .services-route-item, .services-route-item > a {
    width: 100%;
  }
}

.catalog-detail-page {
  padding-top: 88px;
  overflow: hidden;
}

.catalog-hero {
  isolation: isolate;
  background: linear-gradient(150deg, #eef5ff 0%, #f8fbff 45%, #e9f2ff 100%);
  border-bottom: 1px solid #2f6bf01a;
  align-items: center;
  min-height: 570px;
  display: flex;
  position: relative;
}

.catalog-hero:before {
  content: "";
  z-index: -1;
  background: radial-gradient(circle at 16% 24%, #2cb4f833, #0000 24%), radial-gradient(circle at 82% 65%, #1365e926, #0000 27%), radial-gradient(#2f6bf01c 1px, #0000 1.4px) 0 0 / 18px 18px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(#000 45%, #0000 100%);
  mask-image: linear-gradient(#000 45%, #0000 100%);
}

.catalog-hero-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
  align-items: center;
  gap: 70px;
  min-height: 520px;
  display: grid;
}

.catalog-hero-copy {
  text-align: right;
  padding-block: 55px;
}

.catalog-breadcrumb {
  color: #77849a;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 31px;
  font-size: 11px;
  display: flex;
}

.catalog-breadcrumb a {
  color: #58677e;
  text-decoration: none;
}

.catalog-breadcrumb a:hover {
  color: var(--g2p-blue);
}

.catalog-kicker {
  color: #235dcd;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
}

.catalog-kicker span {
  background: #2e6be9;
  border-radius: 99px;
  width: 26px;
  height: 2px;
}

.catalog-hero h1 {
  letter-spacing: -1.7px;
  color: #14213a;
  max-width: 650px;
  margin: 16px 0 19px;
  font-size: clamp(34px, 4.7vw, 58px);
  font-weight: 950;
  line-height: 1.2;
}

.catalog-hero-copy > p {
  color: #51617a;
  max-width: 650px;
  font-size: 15px;
  line-height: 2.15;
}

.catalog-hero-actions {
  align-items: center;
  gap: 12px;
  margin-top: 29px;
  display: flex;
}

.catalog-primary-action, .catalog-secondary-action {
  border-radius: 13px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  display: inline-flex;
}

.catalog-primary-action {
  color: #fff;
  background: var(--g2p-btn);
  box-shadow: 0 12px 25px #1c65e340;
}

.catalog-primary-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px #1c65e34d;
}

.catalog-secondary-action {
  color: #233957;
  background: #ffffffb3;
  border: 1px solid #d8e3f4;
}

.catalog-secondary-action:hover {
  border-color: #95b5ed;
}

.catalog-trust-line {
  color: #6b7890;
  gap: 22px;
  margin-top: 22px;
  font-size: 11px;
  display: flex;
}

.catalog-trust-line span {
  align-items: center;
  gap: 7px;
  display: flex;
}

.catalog-trust-line span:before {
  content: "✓";
  color: #0b9f58;
  background: #e5f8ee;
  border-radius: 50%;
  place-items: center;
  width: 18px;
  height: 18px;
  font-weight: 900;
  display: grid;
}

.catalog-product-stage {
  direction: ltr;
  place-items: center;
  height: 420px;
  display: grid;
  position: relative;
}

.catalog-stage-orbit {
  aspect-ratio: 1;
  border: 1px solid #2f6bf040;
  border-radius: 50%;
  width: 390px;
  position: absolute;
  transform: rotate(-14deg);
}

.catalog-stage-orbit:before, .catalog-stage-orbit:after {
  content: "";
  background: #2f6bf0;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0 0 0 8px #2f6bf01a;
}

.catalog-stage-orbit:before {
  width: 8px;
  height: 8px;
  top: 70px;
  right: 38px;
}

.catalog-stage-orbit:after {
  width: 6px;
  height: 6px;
  bottom: 125px;
  left: 20px;
}

.catalog-stage-card {
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  background: #ffffffbf;
  border: 1px solid #fffc;
  border-radius: 30px;
  place-items: center;
  width: 340px;
  height: 265px;
  padding: 34px;
  display: grid;
  position: relative;
  transform: rotate(-4deg);
  box-shadow: 0 30px 60px #1f4b9a2e, inset 0 1px #fff;
}

.catalog-stage-card:before {
  content: "";
  pointer-events: none;
  border: 1px solid #e4ebf6;
  border-radius: 20px;
  position: absolute;
  inset: 16px;
}

.catalog-stage-card img {
  z-index: 1;
  object-fit: contain;
  filter: drop-shadow(0 16px 17px #1c2f522e);
  max-width: 100%;
  max-height: 100%;
  position: relative;
}

.catalog-stage-label {
  letter-spacing: 3.5px;
  color: #4f72ad;
  font: 800 10px / 1 Arial, sans-serif;
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
}

.catalog-content-shell {
  direction: rtl;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: start;
  gap: 40px;
  padding-top: 76px;
  padding-bottom: 48px;
  display: grid;
}

.catalog-story {
  text-align: right;
  background: #fff;
  border: 1px solid #e5eaf3;
  border-radius: 24px;
  min-width: 0;
  padding: 45px 48px;
  box-shadow: 0 12px 34px #1f2b4612;
}

.catalog-story > header {
  border-bottom: 1px solid #e9edf4;
  padding-bottom: 26px;
}

.catalog-story > header > span {
  color: #2c66dd;
  font-size: 11px;
  font-weight: 800;
}

.catalog-story > header h2 {
  color: #182641;
  margin: 7px 0;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.6;
}

.catalog-story > header small {
  color: #8a96a8;
  font-size: 10px;
}

.catalog-copy-section {
  padding-top: 32px;
}

.catalog-copy-section h2 {
  color: #17243d;
  padding-right: 18px;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.7;
  position: relative;
}

.catalog-copy-section h2:before {
  content: "";
  background: linear-gradient(#2cb4f8, #1365e9);
  border-radius: 5px;
  width: 6px;
  height: 18px;
  position: absolute;
  top: .58em;
  right: 0;
}

.catalog-copy-section p {
  color: #46566e;
  white-space: pre-line;
  margin-top: 16px;
  font-size: 14px;
  line-height: 2.35;
}

.catalog-aside {
  gap: 14px;
  display: grid;
  position: sticky;
  top: 105px;
}

.catalog-aside-card {
  color: #fff;
  background: #172339;
  border-radius: 22px;
  padding: 26px;
  box-shadow: 0 15px 33px #12244533;
}

.catalog-aside-brand {
  background: #fff;
  border-radius: 18px;
  place-items: center;
  width: 74px;
  height: 74px;
  margin-bottom: 20px;
  padding: 10px;
  display: grid;
}

.catalog-aside-brand img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.catalog-aside-card h3 {
  font-size: 18px;
  font-weight: 900;
}

.catalog-aside-card p {
  color: #bdc7d8;
  margin: 10px 0 19px;
  font-size: 12px;
  line-height: 2;
}

.catalog-aside-card > a {
  color: #15233e;
  background: #fff;
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  display: flex;
}

.catalog-category-link {
  color: #1e2c45;
  box-shadow: var(--g2p-shadow-soft);
  background: #fff;
  border: 1px solid #e2e8f1;
  border-radius: 18px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  text-decoration: none;
  display: flex;
}

.catalog-category-link img {
  object-fit: contain;
  background: #f3f7fd;
  border-radius: 12px;
  width: 46px;
  height: 46px;
  padding: 6px;
}

.catalog-category-link span {
  flex: 1;
  gap: 3px;
  display: grid;
}

.catalog-category-link small {
  color: #8a96a8;
  font-size: 9px;
}

.catalog-category-link b {
  font-size: 12px;
}

.catalog-related {
  padding-top: 50px;
  padding-bottom: 90px;
}

.catalog-related > div:nth-child(2) {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 30px;
  display: grid;
}

.catalog-related-card {
  color: #1f2b46;
  background: #fff;
  border: 1px solid #e3e9f2;
  border-radius: 16px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  text-decoration: none;
  transition: transform .2s, border-color .2s;
  display: flex;
  box-shadow: 0 7px 20px #1f2b460e;
}

.catalog-related-card:hover {
  border-color: #afc5ef;
  transform: translateY(-3px);
}

.catalog-related-image {
  background: #f2f6fc;
  border-radius: 12px;
  flex: none;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 8px;
  display: grid;
}

.catalog-related-image img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.catalog-related-card > span:nth-child(2) {
  flex: 1;
  gap: 5px;
  min-width: 0;
  display: grid;
}

.catalog-related-card b {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  overflow: hidden;
}

.catalog-related-card small {
  color: #8490a4;
  font-size: 9px;
}

.catalog-related-card > svg {
  color: #6c8bc2;
  flex: none;
}

.catalog-all-link {
  color: #245fcf;
  align-items: center;
  gap: 7px;
  width: max-content;
  margin: 26px auto 0;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  display: flex;
}

.catalog-primary-action:focus-visible, .catalog-secondary-action:focus-visible, .catalog-aside-card > a:focus-visible, .catalog-related-card:focus-visible, .catalog-all-link:focus-visible {
  outline-offset: 3px;
  outline: 3px solid #2f6bf057;
}

@media (max-width: 900px) {
  .catalog-hero-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 28px;
  }

  .catalog-hero-copy {
    order: 2;
    padding: 40px 18px 15px;
  }

  .catalog-product-stage {
    order: 1;
    height: 330px;
  }

  .catalog-stage-orbit {
    width: 310px;
  }

  .catalog-stage-card {
    width: 280px;
    height: 215px;
  }

  .catalog-content-shell {
    grid-template-columns: 1fr;
    padding-top: 38px;
  }

  .catalog-aside {
    grid-template-columns: 1fr 1fr;
    position: static;
  }

  .catalog-related > div:nth-child(2) {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .catalog-detail-page {
    padding-top: 74px;
  }

  .catalog-hero {
    min-height: 0;
  }

  .catalog-hero-grid {
    padding-inline: 14px;
  }

  .catalog-product-stage {
    height: 285px;
  }

  .catalog-stage-orbit {
    width: 265px;
  }

  .catalog-stage-card {
    border-radius: 24px;
    width: 235px;
    height: 185px;
    padding: 28px;
  }

  .catalog-stage-label {
    bottom: 12px;
  }

  .catalog-hero-copy {
    padding: 23px 5px 45px;
  }

  .catalog-breadcrumb {
    margin-bottom: 20px;
  }

  .catalog-hero h1 {
    letter-spacing: -.6px;
    font-size: 32px;
  }

  .catalog-hero-copy > p {
    font-size: 13px;
  }

  .catalog-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .catalog-primary-action, .catalog-secondary-action {
    width: 100%;
  }

  .catalog-trust-line {
    gap: 10px;
    display: grid;
  }

  .catalog-content-shell {
    gap: 18px;
    padding-inline: 16px;
  }

  .catalog-story {
    border-radius: 20px;
    padding: 28px 21px;
  }

  .catalog-story > header h2 {
    font-size: 21px;
  }

  .catalog-copy-section h2 {
    font-size: 17px;
  }

  .catalog-copy-section p {
    font-size: 13px;
  }

  .catalog-aside {
    grid-template-columns: 1fr;
  }

  .catalog-related {
    padding-inline: 16px;
    padding-top: 35px;
    padding-bottom: 58px;
  }

  .catalog-related > div:nth-child(2) {
    grid-template-columns: 1fr;
  }

  .catalog-related-card:nth-child(n+4) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-primary-action, .catalog-related-card {
    transition: none;
  }

  .catalog-primary-action:hover, .catalog-related-card:hover {
    transform: none;
  }
}

.benefits-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(78px, auto);
  gap: 18px;
  display: grid;
}

.benefit-main {
  grid-area: span 3 / span 5;
}

.benefit-gift {
  grid-area: span 2 / span 4;
}

.benefit-bill {
  grid-area: span 4 / span 3;
}

.benefit-credit {
  grid-area: span 2 / span 4;
}

@media (max-width: 800px) {
  .benefits-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }

  .benefit-main, .benefit-gift, .benefit-bill, .benefit-credit {
    grid-area: span 1 / span 1;
  }

  .benefits-grid article {
    min-height: 210px;
  }
}

@media (max-width: 520px) {
  .benefits-grid {
    grid-template-columns: 1fr;
  }

  .benefit-main, .benefit-gift, .benefit-bill, .benefit-credit {
    grid-column: span 1;
  }
}

.gift-store-page {
  min-height: 100vh;
  padding-top: 88px;
}

.gift-store-hero {
  background: #e9f1ff;
  border-bottom: 1px solid #2f6bf01f;
  position: relative;
  overflow: hidden;
}

.gift-store-hero:after {
  content: "";
  pointer-events: none;
  border: 90px solid #ffffff61;
  border-radius: 50%;
  width: 420px;
  height: 420px;
  position: absolute;
  top: -235px;
  left: -90px;
}

.gift-store-hero-inner {
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
  min-height: 330px;
  display: flex;
  position: relative;
}

.gift-store-hero-inner > div {
  max-width: 690px;
  padding-block: 52px;
}

.store-live {
  color: #225bc3;
  background: #ffffff94;
  border: 1px solid #1365e933;
  border-radius: 99px;
  align-items: center;
  gap: 7px;
  width: max-content;
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
}

.store-live i {
  background: #18b86b;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 5px #18b86b1f;
}

.gift-store-hero h1 {
  color: #14213a;
  letter-spacing: -1.8px;
  margin: 18px 0 13px;
  font-size: clamp(36px, 5vw, 62px);
  font-weight: 950;
  line-height: 1.19;
}

.gift-store-hero p {
  color: #52627b;
  max-width: 610px;
  font-size: 15px;
  line-height: 2;
}

.gift-store-hero ol {
  flex: none;
  gap: 0;
  width: 210px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.gift-store-hero li {
  color: #748197;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  position: relative;
}

.gift-store-hero li:not(:last-child):after {
  content: "";
  border-right: 1px dashed #9cb6e5;
  height: 36px;
  position: absolute;
  top: 54px;
  right: 17px;
}

.gift-store-hero li b {
  color: #5f789f;
  background: #ffffffa3;
  border: 1px solid #b8caea;
  border-radius: 50%;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
}

.gift-store-hero li.active {
  color: #173e83;
}

.gift-store-hero li.active b {
  color: #fff;
  background: #2f6bf0;
  border-color: #2f6bf0;
  box-shadow: 0 8px 20px #2f6bf03d;
}

.store-shell {
  padding-top: 30px;
  padding-bottom: 40px;
}

.store-tabs {
  width: max-content;
  box-shadow: var(--g2p-shadow-soft);
  background: #fff;
  border: 1px solid #dfe5ef;
  border-radius: 99px;
  gap: 4px;
  padding: 4px;
  display: flex;
}

.store-tabs button {
  color: #617087;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 99px;
  min-height: 38px;
  padding: 0 20px;
  font: 700 12px / 1 Vazirmatn, sans-serif;
}

.store-tabs button.active {
  color: #fff;
  background: #1e2e4a;
}

.store-tabs button span {
  color: #2f6bf0;
  background: #eaf1ff;
  border-radius: 99px;
  margin-right: 7px;
  padding: 1px 6px;
  font-size: 9px;
}

.store-tabs button.active span {
  color: #fff;
  background: #ffffff24;
}

.store-error {
  color: #a83442;
  background: #fff4f5;
  border: 1px solid #f3c9ce;
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
  padding: 12px 15px;
  font-size: 12px;
  display: flex;
}

.store-error button {
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  font: 800 11px / 1 Vazirmatn, sans-serif;
}

.store-layout {
  direction: ltr;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: 24px;
  margin-top: 20px;
  display: grid;
}

.store-catalog, .store-cart {
  direction: rtl;
}

.store-catalog > header {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 62px;
  margin-bottom: 15px;
  display: flex;
}

.store-catalog > header h2 {
  color: #17243e;
  margin: 0;
  font-size: 20px;
  font-weight: 900;
}

.store-catalog > header p {
  color: #7b879a;
  margin-top: 4px;
  font-size: 11px;
}

.store-search {
  color: #8a96aa;
  background: #fff;
  border: 1px solid #dfe5ef;
  border-radius: 99px;
  align-items: center;
  gap: 8px;
  width: min(270px, 42vw);
  height: 43px;
  padding: 0 14px;
  display: flex;
}

.store-search:focus-within {
  border-color: #7ea4ed;
  box-shadow: 0 0 0 3px #2f6bf01a;
}

.store-search input {
  color: #24344e;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  font: 500 12px / 1 Vazirmatn, sans-serif;
}

.store-search input::placeholder {
  color: #9aa5b6;
}

.store-product-grid, .store-loading-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.store-loading-grid span {
  background: linear-gradient(100deg, #fff 20%, #edf2f8 38%, #fff 56%) 0 0 / 220% 100%;
  border-radius: 20px;
  height: 235px;
  animation: 1.4s linear infinite store-shimmer;
}

.store-product {
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 20px;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  min-height: 235px;
  padding: 19px;
  transition: border-color .18s, transform .18s;
  display: flex;
  box-shadow: 0 8px 24px #1f2b460e;
}

.store-product:hover {
  border-color: #a9c1ef;
  transform: translateY(-2px);
}

.store-product.unavailable {
  filter: saturate(.4);
  opacity: .72;
}

.store-product-top {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.store-product-top > span:last-child {
  color: #087d49;
  background: #ecfbf4;
  border-radius: 99px;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 800;
}

.store-product.unavailable .store-product-top > span:last-child {
  color: #737d8d;
  background: #f2f3f5;
}

.store-product-mark {
  color: #fff;
  border-radius: 17px;
  place-items: center;
  width: 56px;
  height: 56px;
  font-size: 17px;
  font-weight: 950;
  display: grid;
  box-shadow: inset 0 0 0 1px #fff3;
}

.store-product-mark.tone-0 {
  background: #2169e8;
}

.store-product-mark.tone-1 {
  background: #f1644c;
}

.store-product-mark.tone-2 {
  background: #7652c8;
}

.store-product-mark.tone-3 {
  background: #138a72;
}

.store-product-mark.tone-4 {
  background: #d38d18;
}

.store-product h3 {
  color: #1e2b44;
  margin: 16px 0 3px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.65;
}

.store-product > div:nth-child(2) > p {
  text-align: right;
  color: #8c96a7;
  direction: ltr;
  font: 700 10px / 1.5 Arial, sans-serif;
}

.store-product footer {
  border-top: 1px solid #edf0f5;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  display: flex;
}

.store-product footer > div {
  gap: 3px;
  display: grid;
}

.store-product footer small {
  color: #8b96a7;
  font-size: 9px;
}

.store-product footer strong {
  color: #182844;
  font-size: 12px;
  font-weight: 900;
}

.store-product footer button, .store-empty button {
  color: #fff;
  cursor: pointer;
  background: #2f6bf0;
  border: 0;
  border-radius: 10px;
  min-height: 34px;
  padding: 0 14px;
  font: 800 11px / 1 Vazirmatn, sans-serif;
}

.store-product footer button:disabled {
  cursor: not-allowed;
  color: #9099a8;
  background: #e8ebf0;
}

.store-empty {
  text-align: center;
  background: #ffffff8c;
  border: 1px dashed #cbd4e3;
  border-radius: 20px;
  place-items: center;
  min-height: 290px;
  padding: 40px;
  display: grid;
}

.store-empty strong {
  font-size: 15px;
}

.store-empty p {
  color: #79869b;
  margin: 8px 0 17px;
  font-size: 12px;
  line-height: 1.8;
}

.store-cart {
  background: #fff;
  border: 1px solid #dce3ed;
  border-radius: 22px;
  position: sticky;
  top: 102px;
  overflow: hidden;
  box-shadow: 0 18px 45px #1f2b461a;
}

.store-cart > header {
  border-bottom: 1px solid #edf0f5;
  justify-content: space-between;
  align-items: center;
  padding: 17px 18px;
  display: flex;
}

.store-cart > header > div {
  color: #2762d7;
  align-items: center;
  gap: 10px;
  display: flex;
}

.store-cart > header span {
  gap: 2px;
  display: grid;
}

.store-cart > header b {
  color: #172640;
  font-size: 14px;
}

.store-cart > header small {
  color: #8692a4;
  font-size: 9px;
}

.store-cart > header > button {
  color: #bd4f5b;
  cursor: pointer;
  background: none;
  border: 0;
  font: 700 10px / 1 Vazirmatn, sans-serif;
}

.store-cart-lines {
  max-height: 270px;
  padding: 5px 17px;
  overflow: auto;
}

.store-cart-line {
  border-bottom: 1px solid #eef1f5;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 13px 0;
  display: flex;
}

.store-cart-line > div:first-child {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.store-cart-line strong {
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #25344d;
  font-size: 11px;
  overflow: hidden;
}

.store-cart-line small {
  color: #7d899c;
  font-size: 9px;
}

.store-quantity {
  border: 1px solid #dfe5ee;
  border-radius: 9px;
  align-items: center;
  height: 31px;
  display: flex;
}

.store-quantity button {
  color: #2f6bf0;
  cursor: pointer;
  background: none;
  border: 0;
  width: 29px;
  height: 29px;
  font: 700 17px / 1 Arial, sans-serif;
}

.store-quantity button:disabled {
  color: #b8c0cc;
}

.store-quantity span {
  text-align: center;
  min-width: 24px;
  font-size: 10px;
  font-weight: 800;
}

.store-cart-empty {
  text-align: center;
  color: #9aa6b7;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 190px;
  padding: 28px;
  display: flex;
}

.store-cart-empty svg {
  width: 32px;
  height: 32px;
  margin-bottom: 11px;
}

.store-cart-empty strong {
  color: #34445d;
  font-size: 13px;
}

.store-cart-empty p {
  color: #8793a6;
  max-width: 230px;
  margin-top: 7px;
  font-size: 10px;
  line-height: 1.9;
}

.store-cart-total {
  background: #f8faff;
  border-top: 1px solid #edf0f5;
  gap: 8px;
  padding: 15px 18px;
  display: grid;
}

.store-cart-total > span {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.store-cart-total small {
  color: #78869a;
  font-size: 9px;
}

.store-cart-total b {
  color: #34435b;
  font-size: 10px;
}

.store-cart-total .total {
  border-top: 1px solid #e4e9f1;
  margin-top: 3px;
  padding-top: 10px;
}

.store-cart-total .total small {
  color: #22324c;
  font-size: 11px;
  font-weight: 800;
}

.store-cart-total .total b {
  color: #195ad3;
  font-size: 14px;
  font-weight: 950;
}

.store-checkout {
  background: var(--g2p-btn);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 12px;
  width: calc(100% - 36px);
  min-height: 45px;
  margin: 15px 18px 4px;
  font: 900 12px / 1 Vazirmatn, sans-serif;
  box-shadow: 0 10px 24px #1765e538;
}

.store-checkout:disabled {
  cursor: wait;
  opacity: .65;
}

.store-secure-note {
  color: #67809e;
  gap: 9px;
  padding: 13px 18px;
  display: flex;
}

.store-secure-note svg {
  flex: none;
}

.store-secure-note span {
  gap: 4px;
  display: grid;
}

.store-secure-note b {
  color: #53667e;
  font-size: 9px;
}

.store-secure-note small {
  font-size: 8px;
  line-height: 1.7;
}

.store-login {
  background: #f9fbff;
  border-top: 1px solid #e8edf4;
  gap: 10px;
  padding: 17px 18px 5px;
  display: grid;
}

.store-login > div {
  margin-bottom: 2px;
}

.store-login > div small {
  color: #2863d7;
  font-size: 9px;
  font-weight: 800;
}

.store-login h3 {
  color: #1e2d47;
  margin: 3px 0;
  font-size: 13px;
  font-weight: 900;
}

.store-login p {
  color: #7d899c;
  font-size: 9px;
  line-height: 1.8;
}

.store-login label, .store-profile-panel form label {
  gap: 5px;
  display: grid;
}

.store-login label span, .store-profile-panel form label span {
  color: #65748a;
  font-size: 9px;
  font-weight: 700;
}

.store-login input, .store-profile-panel input {
  color: #1f2d46;
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 9px;
  outline: 0;
  width: 100%;
  height: 38px;
  padding: 0 11px;
  font: 500 11px / 1 Vazirmatn, sans-serif;
}

.store-login input:focus, .store-profile-panel input:focus {
  border-color: #7aa1eb;
  box-shadow: 0 0 0 3px #2f6bf014;
}

.store-login > button, .store-profile-panel form > button {
  color: #fff;
  cursor: pointer;
  background: #1e2e4a;
  border: 0;
  border-radius: 10px;
  min-height: 40px;
  font: 800 11px / 1 Vazirmatn, sans-serif;
}

.store-login > button:disabled {
  opacity: .55;
}

.store-app-note {
  color: #fff;
  background: #1c2a44;
  border-radius: 20px;
  justify-content: space-between;
  align-items: center;
  gap: 26px;
  margin-top: 24px;
  padding: 20px 22px;
  display: flex;
  box-shadow: 0 16px 36px #14234029;
}

.store-app-note > div:first-child {
  gap: 5px;
  display: grid;
}

.store-app-note > div:first-child span {
  color: #70cfff;
  font-size: 10px;
  font-weight: 800;
}

.store-app-note > div:first-child strong {
  font-size: 13px;
  line-height: 1.8;
}

.store-app-note .footer-store-links {
  min-width: 360px;
  margin: 0;
}

.store-dashboard {
  margin-top: 20px;
}

.store-orders-login {
  text-align: center;
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 22px;
  align-content: center;
  place-items: center;
  min-height: 340px;
  padding: 40px;
  display: grid;
}

.store-orders-login h2 {
  font-size: 20px;
  font-weight: 900;
}

.store-orders-login p {
  color: #738096;
  margin: 10px 0 20px;
  font-size: 12px;
}

.store-orders-login button, .store-profile-summary button, .store-profile-panel form > button, .store-deliveries button {
  color: #fff;
  cursor: pointer;
  background: #2f6bf0;
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  font: 800 11px / 1 Vazirmatn, sans-serif;
}

.store-profile-panel {
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 18px;
  margin-bottom: 16px;
}

.store-profile-summary {
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 12px 16px;
  display: flex;
}

.store-profile-summary > span {
  color: #2f6bf0;
  background: #eaf1ff;
  border-radius: 14px;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 17px;
  font-weight: 950;
  display: grid;
}

.store-profile-summary > div {
  flex: 1;
  gap: 3px;
  display: grid;
}

.store-profile-summary strong {
  font-size: 13px;
}

.store-profile-summary small {
  color: #7b8799;
  width: max-content;
  font: 600 10px / 1 Arial, sans-serif;
}

.store-profile-summary button {
  color: #3d506d;
  background: #fff;
  border: 1px solid #dfe5ee;
}

.store-profile-panel form {
  background: #fafcff;
  border-top: 1px solid #edf0f5;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 10px;
  padding: 15px 16px;
  display: grid;
}

.store-profile-panel form > button {
  height: 38px;
}

.store-profile-panel form > p {
  color: #b23d4a;
  grid-column: 1 / -1;
  font-size: 10px;
}

.store-orders-layout {
  direction: ltr;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 16px;
  display: grid;
}

.store-order-list, .store-order-detail {
  box-shadow: var(--g2p-shadow-soft);
  direction: rtl;
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 20px;
}

.store-order-list {
  overflow: hidden;
}

.store-order-list > header {
  border-bottom: 1px solid #edf0f5;
  padding: 19px;
}

.store-order-list h2 {
  font-size: 17px;
  font-weight: 900;
}

.store-order-list > header p {
  color: #7e8a9d;
  margin-top: 4px;
  font-size: 9px;
}

.store-order-list > button {
  text-align: right;
  cursor: pointer;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #eef1f5;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 18px;
  font-family: Vazirmatn, sans-serif;
  display: flex;
}

.store-order-list > button:hover, .store-order-list > button.active {
  background: #f2f6ff;
}

.store-order-list > button > span {
  gap: 5px;
  min-width: 0;
  display: grid;
}

.store-order-list > button > span:first-child {
  flex: 1;
}

.store-order-list > button b {
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #273750;
  font-size: 10px;
  overflow: hidden;
}

.store-order-list > button small {
  color: #8a95a7;
  font-size: 8px;
}

.store-order-list > button > span:last-child {
  justify-items: end;
}

.store-order-list > button strong {
  font-size: 9px;
}

.store-order-list em, .store-order-detail em {
  color: #607089;
  background: #edf2fa;
  border-radius: 99px;
  width: max-content;
  padding: 4px 8px;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.store-order-list .status-completed, .store-order-detail .status-completed {
  color: #087647;
  background: #e8f8f0;
}

.store-order-list .status-payment_review, .store-order-list .status-fulfillment_retry, .store-order-detail .status-payment_review, .store-order-detail .status-fulfillment_retry {
  color: #9b6308;
  background: #fff3df;
}

.store-order-list .status-payment_failed, .store-order-detail .status-payment_failed {
  color: #aa3442;
  background: #ffedf0;
}

.store-order-detail {
  min-height: 360px;
  padding: 22px;
}

.store-order-detail > header {
  border-bottom: 1px solid #edf0f5;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 17px;
  display: flex;
}

.store-order-detail > header > span {
  gap: 3px;
  display: grid;
}

.store-order-detail > header small {
  color: #8b96a7;
  font-size: 8px;
}

.store-order-detail > header b {
  font: 800 11px / 1 Arial, sans-serif;
}

.store-order-products {
  padding-block: 10px;
}

.store-order-products > div {
  border-bottom: 1px solid #f0f2f6;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 11px 0;
  display: flex;
}

.store-order-products span {
  gap: 4px;
  display: grid;
}

.store-order-products strong {
  font-size: 11px;
}

.store-order-products small {
  color: #8994a6;
  font-size: 8px;
}

.store-order-products > div > b {
  font-size: 10px;
}

.store-deliveries {
  background: #f2f7ff;
  border: 1px solid #cfe1ff;
  border-radius: 15px;
  margin-top: 10px;
  padding: 16px;
}

.store-deliveries h3 {
  color: #244e98;
  margin-bottom: 9px;
  font-size: 12px;
  font-weight: 900;
}

.store-deliveries > div {
  border-top: 1px solid #dce8fa;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  display: flex;
}

.store-deliveries span {
  gap: 3px;
  display: grid;
}

.store-deliveries small {
  color: #7186a7;
  font-size: 8px;
}

.store-deliveries code {
  color: #172c51;
  font: 800 12px / 1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.store-deliveries button {
  padding: 8px 11px;
}

.store-delivery-wait, .store-detail-placeholder {
  text-align: right;
  color: #68809e;
  justify-content: center;
  align-items: center;
  gap: 11px;
  min-height: 180px;
  display: flex;
}

.store-delivery-wait span {
  gap: 4px;
  display: grid;
}

.store-delivery-wait strong, .store-detail-placeholder strong {
  color: #415671;
  font-size: 11px;
}

.store-delivery-wait small, .store-detail-placeholder p {
  color: #8491a5;
  font-size: 9px;
}

.store-detail-placeholder {
  text-align: center;
  flex-direction: column;
}

.store-detail-placeholder svg {
  width: 28px;
  height: 28px;
}

@keyframes store-shimmer {
  to {
    background-position: -220% 0;
  }
}

@media (max-width: 960px) {
  .gift-store-hero-inner {
    gap: 20px;
  }

  .store-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .store-product-grid {
    grid-template-columns: 1fr;
  }

  .store-orders-layout {
    grid-template-columns: 320px minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .gift-store-page {
    padding-top: 74px;
  }

  .gift-store-hero-inner {
    min-height: 0;
    padding: 34px 18px;
    display: block;
  }

  .gift-store-hero-inner > div {
    padding: 0;
  }

  .gift-store-hero h1 {
    letter-spacing: -.8px;
    font-size: 35px;
  }

  .gift-store-hero p {
    font-size: 12px;
  }

  .gift-store-hero ol {
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    margin-top: 28px;
  }

  .gift-store-hero li {
    justify-items: center;
    gap: 6px;
    min-height: 50px;
    font-size: 9px;
    display: grid;
  }

  .gift-store-hero li:not(:last-child):after {
    border-top: 1px dashed #9cb6e5;
    border-right: 0;
    width: calc(100% - 36px);
    height: 0;
    top: 17px;
    right: calc(50% + 18px);
  }

  .gift-store-hero li b {
    width: 34px;
    height: 34px;
  }

  .store-shell {
    padding-inline: 14px;
  }

  .store-tabs {
    width: 100%;
  }

  .store-tabs button {
    flex: 1;
  }

  .store-layout {
    flex-direction: column;
    margin-top: 14px;
    display: flex;
  }

  .store-cart {
    order: -1;
    width: 100%;
    position: static;
  }

  .store-catalog {
    width: 100%;
  }

  .store-catalog > header {
    flex-direction: column;
    align-items: stretch;
  }

  .store-search {
    width: 100%;
  }

  .store-product-grid {
    grid-template-columns: 1fr;
  }

  .store-product {
    min-height: 215px;
  }

  .store-app-note {
    flex-direction: column;
    align-items: stretch;
  }

  .store-app-note .footer-store-links {
    min-width: 0;
  }

  .store-profile-panel form, .store-orders-layout {
    grid-template-columns: 1fr;
  }

  .store-order-detail {
    min-height: 300px;
  }

  .store-order-list > button {
    padding-inline: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .store-loading-grid span {
    animation: none;
  }

  .store-product {
    transition: none;
  }

  .store-product:hover {
    transform: none;
  }
}

.install-cta {
  isolation: isolate;
  color: #fff;
  background: linear-gradient(145deg, #2cb4f8 0%, #1365e9 72%);
  border-radius: 28px;
  min-height: 360px;
  padding: 55px 58px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 22px 44px #1365e940;
}

.install-cta:before {
  content: "";
  z-index: -1;
  background: radial-gradient(circle at 78% 28%, #ffffff38, #0000 26%), linear-gradient(120deg, #0000 65%, #02227c38);
  position: absolute;
  inset: 0;
}

.install-cta h2 {
  margin-top: 15px;
  font-size: clamp(31px, 4vw, 48px);
  font-weight: 900;
  line-height: 1.23;
}

.install-cta p {
  color: #ffffffe6;
  max-width: 510px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 2.05;
}

.install-glow {
  z-index: -1;
  border: 1px solid #fff3;
  border-radius: 50%;
  position: absolute;
}

.install-glow.one {
  width: 450px;
  height: 450px;
  top: -230px;
  left: -180px;
}

.install-glow.two {
  width: 280px;
  height: 280px;
  bottom: -210px;
  left: 100px;
}

.install-float-img {
  z-index: 1;
  filter: drop-shadow(0 20px 40px #0a1a4159);
  width: 280px;
  height: auto;
  animation: 4.8s ease-in-out infinite install-float;
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
}

.install-store {
  color: #fff;
  background: #071536bf;
  border: 1px solid #ffffff38;
  border-radius: 12px;
  align-items: center;
  gap: 9px;
  min-width: 154px;
  padding: 9px 13px;
  text-decoration: none;
  transition: all .2s;
  display: flex;
}

.install-store:hover {
  background: #09142e;
  border-color: #fff9;
  transform: translateY(-3px);
}

.install-store > span:first-child {
  place-items: center;
  display: grid;
}

.install-store small, .install-store b {
  line-height: 1.35;
  display: block;
}

.install-store small {
  color: #cfe4ff;
  font-size: 9px;
}

.install-store b {
  font-size: 13px;
}

@keyframes install-float {
  0%, 100% {
    translate: 0;
  }

  50% {
    translate: 0 -18px;
  }
}

@media (max-width: 760px) {
  .install-cta {
    min-height: unset;
    text-align: center;
    flex-direction: column;
    align-items: center;
    padding: 36px 22px 40px;
    display: flex;
  }

  .install-float-img {
    order: 0;
    width: 180px;
    margin: 0 auto 24px;
    animation: none;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }

  .install-cta > div.relative {
    order: 1;
    width: 100%;
    max-width: none;
  }

  .install-cta > div.absolute {
    display: none;
  }

  .install-cta h2 {
    margin-top: 0;
    font-size: 26px;
  }

  .install-cta p {
    max-width: 100%;
    font-size: 13px;
  }

  .install-cta .mt-8 {
    justify-content: center;
  }

  .install-store {
    min-width: 140px;
  }

  .install-glow.one {
    top: -160px;
    left: -120px;
  }

  .install-glow.two {
    display: none;
  }
}

.install-store {
  align-items: center;
  min-width: 168px;
  min-height: 58px;
}

.install-store-icon {
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  display: grid;
}

.install-store-icon img {
  object-fit: contain;
  width: 25px;
  height: 25px;
}

.install-store small {
  font-size: 10px;
  line-height: 1.2;
}

.install-store b {
  font-size: 14px;
  line-height: 1.35;
}

.footer-store-links {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
  display: flex;
}

.footer-store-links .install-store {
  border-radius: 8px;
  flex: auto;
  gap: 5px;
  min-width: 0;
  min-height: 36px;
  padding: 5px 7px;
}

.footer-store-links .install-store-icon {
  width: 18px;
  height: 18px;
}

.footer-store-links .install-store-icon svg, .footer-store-links .install-store-icon img {
  width: 16px;
  height: 16px;
}

.footer-store-links .install-store small {
  font-size: 7.5px;
}

.footer-store-links .install-store b {
  font-size: 9.5px;
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}