/*
 * AMAP Platform overseas design system — v2.0
 * Source: website/design-specs/specs/design-guideline.md in the internal
 * overseas_platform repository. This file is the delivery package's shared
 * visual layer; page-specific styles remain responsible for behavior and
 * story-specific imagery.
 */
:root {
  --design-blue: #1a66ff;
  --design-blue-dark: #0045cf;
  --design-blue-soft: #eef3ff;
  --design-blue-muted: #c8d8fe;
  --design-navy: #0b1a3b;
  --design-navy-2: #0d1f45;
  --design-navy-cta: #091430;
  --design-text-1: #0b1a3b;
  --design-text-2: #4a5b7a;
  --design-text-3: #8a9abb;
  --design-border: #dde5f7;
  --design-white: #ffffff;
  --design-bg-soft: #f4f7ff;
  --design-success: #22c55e;
  --design-orange: #f59e0b;
  --design-container: 1160px;
  --design-page-padding: 32px;
  --design-radius-sm: 6px;
  --design-radius: 12px;
  --design-radius-lg: 20px;
  --design-radius-btn: 8px;
  --design-radius-cta: 10px;
  --design-radius-card: 16px;
  --design-shadow-sm: 0 1px 4px rgba(26, 102, 255, .08), 0 2px 12px rgba(11, 26, 59, .06);
  --design-shadow-card: 0 8px 32px rgba(26, 102, 255, .1);
  --design-font: Inter, "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* Shared hierarchy and controls. The selectors are intentionally scoped to
   the delivery package so map SDK internals and embedded demos are untouched. */
body {
  font-family: var(--design-font);
}

button,
input,
select,
textarea {
  border-radius: var(--design-radius-btn);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(26, 102, 255, .22);
  outline-offset: 2px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--design-blue) !important;
  box-shadow: 0 0 0 3px rgba(26, 102, 255, .12);
}

.unified-site-header {
  height: 72px;
  min-height: 72px;
  background: rgba(255, 255, 255, .92);
  border-bottom-color: var(--design-border);
  box-shadow: var(--design-shadow-sm);
}

/* The homepage keeps its original `.site-header` hook; bring it onto the
   same 72px navigation rhythm as the shared secondary-page header. */
.site-header {
  height: 72px;
  min-height: 72px;
  border-bottom-color: var(--design-border);
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--design-shadow-sm);
}

.first-screen .site-header {
  height: 72px;
  min-height: 72px;
}

.with-unified-header,
.pricing-page {
  padding-top: 72px;
}

.with-unified-header > .unified-site-header,
.pricing-page .unified-site-header {
  height: 72px;
  min-height: 72px;
}

.unified-site-header .header-console,
.unified-site-header .header-login,
.unified-site-header .contact-link,
.unified-site-header .contact-current {
  border-radius: var(--design-radius-btn);
}

.unified-site-header .header-login,
.unified-site-header .contact-link,
.unified-site-header .contact-current {
  background: var(--design-blue);
  border-color: var(--design-blue);
}

.unified-site-header .header-actions .avatar-circle {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  overflow: hidden;
  border: 1px solid var(--design-border);
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--design-shadow-sm);
}

.unified-site-header .header-actions .avatar-circle img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.unified-site-header .contact-link:hover,
.unified-site-header .contact-current:hover,
.unified-site-header .header-login:hover {
  background: var(--design-blue-dark);
  border-color: var(--design-blue-dark);
}

.pricing-intro,
.docs-intro,
.contact-page,
.pricing-section--white {
  background-color: var(--design-bg-soft);
}

.pricing-intro h1,
.docs-intro h1,
.contact-copy h1,
.solution-hero h1 {
  color: var(--design-navy);
}

.pricing-intro h1 {
  max-width: 1000px;
  font-size: clamp(42px, 4.6vw, 56px);
  line-height: 1.1;
  letter-spacing: -.045em;
}

.docs-intro h1 {
  font-size: clamp(38px, 4.8vw, 56px);
  line-height: 1.1;
}

.contact-copy h1 {
  font-size: clamp(44px, 5vw, 56px);
  line-height: 1.1;
}

.solution-hero h1 {
  font-size: clamp(46px, 5.6vw, 72px);
  line-height: 1.02;
}

.pricing-intro .eyebrow,
.docs-intro .eyebrow,
.contact-copy .eyebrow {
  color: var(--design-blue);
}

.pricing-intro .catalog-filter-tabs,
.filter-tabs,
.catalog-filter-tabs {
  border-color: var(--design-blue-muted);
  border-radius: var(--design-radius);
  box-shadow: var(--design-shadow-sm);
}

.pricing-intro .catalog-filter-tab,
.filter-tab,
.catalog-filter-tab {
  border-radius: 10px;
}

.pricing-intro .catalog-filter-tab.is-active,
.filter-tab.is-active,
.catalog-filter-tab.is-active {
  background: var(--design-blue);
  border-color: var(--design-blue);
}

.sku-card,
.form-panel,
.auth-dialog,
.doc-row,
.solution-card {
  border-radius: var(--design-radius-card);
  border-color: var(--design-border);
  box-shadow: var(--design-shadow-card);
}

.sku-card {
  background: var(--design-white);
}

.sku-card .sku-doc-link,
.doc-row a,
.solution-card a {
  color: var(--design-blue);
}

.sku-card .sku-doc-link:hover,
.doc-row a:hover,
.solution-card a:hover {
  color: var(--design-blue-dark);
}

.platform-footer {
  color: var(--design-text-2);
  border-top-color: rgba(11, 26, 59, .1);
  background: var(--design-blue-muted);
}

.platform-footer__links a,
.platform-footer__identity p {
  color: var(--design-text-2);
}

.platform-footer__links a:hover,
.platform-footer__links a:focus-visible {
  color: var(--design-blue-dark);
}

/* The specification uses a light blue footer. Keep the brand artwork in its
   native dark treatment so it remains legible on that surface. */
.platform-footer__brand-mono,
.platform-footer__brand-symbol {
  filter: none;
}

.platform-footer__brand-mono {
  opacity: 1;
}

@media (max-width: 660px) {
  .unified-site-header,
  .with-unified-header > .unified-site-header,
  .pricing-page .unified-site-header {
    height: 72px;
    min-height: 72px;
  }

  .with-unified-header,
  .pricing-page {
    padding-top: 72px;
  }

  .site-header,
  .first-screen .site-header {
    height: 72px;
    min-height: 72px;
  }
}