@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

:root {
  --navy:#071650;
  --cobalt:#2048f0;
  --coral:#e85040;
  --ink:#26334d;
  --muted:#687792;
  --line:#dce4f1;
  --soft:#f6f8fc;
  --white:#fff;
  --success:#13795b;
}

* { box-sizing:border-box; }

body {
  margin:0;
  color:var(--ink);
  background:var(--soft);
  font-family:"Plus Jakarta Sans",Inter,Arial,sans-serif;
  font-size:15px;
  line-height:1.55;
}

button,input,select,textarea { font:inherit; }

.siteHeader {
  min-height:76px;
  padding:14px max(24px,calc((100vw - 1080px)/2));
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--white);
  border-bottom:1px solid var(--line);
}

.brand img {
  display:block;
  width:176px;
  max-height:45px;
  object-fit:contain;
  object-position:left center;
}

.portalLink,footer a {
  color:var(--navy);
  text-decoration:none;
  font-size:14px;
  font-weight:700;
}

main {
  width:min(100% - 40px,900px);
  min-height:calc(100vh - 150px);
  margin:auto;
  padding:52px 0 70px;
}

.pageHeader {
  margin-bottom:24px;
}

.pageHeader p {
  margin:0 0 7px;
  color:var(--cobalt);
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.pageHeader h1 {
  margin:0;
  color:var(--navy);
  font-size:clamp(30px,4vw,42px);
  line-height:1.15;
  letter-spacing:-.035em;
}

.surface {
  background:var(--white);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 16px 45px rgba(7,22,80,.07);
}

form,.screenBody {
  padding:34px;
}

.grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.wide {
  grid-column:1/-1;
}

label > span {
  display:block;
  margin-bottom:7px;
  color:var(--ink);
  font-size:13px;
  font-weight:700;
}

label b {
  color:var(--coral);
}

input,select,textarea {
  width:100%;
  color:var(--ink);
  background:var(--white);
  border:1px solid #ccd8e9;
  border-radius:10px;
  outline:0;
}

input,select {
  height:48px;
  padding:0 13px;
}

select {
  appearance:auto;
}

textarea {
  min-height:110px;
  padding:12px 13px;
  resize:vertical;
}

input:focus,select:focus,textarea:focus {
  border-color:var(--cobalt);
  box-shadow:0 0 0 3px rgba(32,72,240,.1);
}

#servicePrice {
  display:block;
  min-height:20px;
  margin-top:7px;
  color:var(--navy);
  font-size:13px;
  font-weight:700;
}

.confirmation {
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:18px;
}

.confirmation input {
  flex:0 0 auto;
  width:17px;
  height:17px;
  margin-top:2px;
  accent-color:var(--cobalt);
}

.confirmation span {
  margin:0;
  color:var(--muted);
  font-size:12px;
  font-weight:500;
}

.primary,.secondary {
  min-height:48px;
  margin-top:24px;
  padding:11px 17px;
  border-radius:9px;
  cursor:pointer;
  font-weight:700;
}

.primary {
  width:100%;
  color:var(--white);
  background:var(--cobalt);
  border:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.primary:hover { background:#173dd8; }
.primary:disabled { opacity:.6; cursor:wait; }

.secondary {
  color:var(--navy);
  background:var(--white);
  border:1px solid var(--line);
}

.error {
  margin-top:18px;
  padding:12px 14px;
  color:#a62d24;
  background:#fff3f1;
  border-left:3px solid var(--coral);
  border-radius:8px;
  font-size:13px;
}

.statusLine {
  padding-bottom:22px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--success);
  font-size:13px;
  font-weight:700;
  border-bottom:1px solid var(--line);
}

.statusLine strong {
  color:var(--navy);
}

.summary {
  display:grid;
  grid-template-columns:1fr 1fr;
  margin:0;
}

.summary div {
  padding:18px 0;
  border-bottom:1px solid var(--line);
}

.summary div:nth-child(odd) {
  padding-right:20px;
}

.summary div:nth-child(even) {
  padding-left:20px;
  border-left:1px solid var(--line);
}

.summary dt {
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.summary dd {
  margin:4px 0 0;
  color:var(--navy);
  font-weight:700;
}

.badge {
  display:inline-flex;
  padding:6px 9px;
  color:var(--cobalt);
  background:#eef2ff;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.badge.success {
  color:var(--success);
  background:#edf9f5;
}

.screenBody h2 {
  margin:16px 0 8px;
  color:var(--navy);
  font-size:25px;
}

.screenBody p {
  margin:0;
  color:var(--muted);
}

.actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}

.actions a {
  padding:12px 17px;
  color:var(--white);
  background:var(--cobalt);
  border-radius:9px;
  text-decoration:none;
  font-weight:700;
}

.actions a.secondaryLink {
  color:var(--navy);
  background:var(--white);
  border:1px solid var(--line);
}

.newOrder {
  margin-top:22px;
  padding:0;
  color:var(--navy);
  background:transparent;
  border:0;
  cursor:pointer;
  font-weight:700;
}

footer {
  min-height:74px;
  padding:20px max(24px,calc((100vw - 1080px)/2));
  color:var(--muted);
  background:var(--white);
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
}

.hide { display:none !important; }

@media (max-width:700px) {
  main {
    width:min(100% - 24px,900px);
    padding:36px 0 52px;
  }

  .siteHeader {
    min-height:66px;
  }

  .brand img {
    width:150px;
  }

  .grid,.summary {
    grid-template-columns:1fr;
  }

  .wide {
    grid-column:auto;
  }

  .summary div,
  .summary div:nth-child(odd),
  .summary div:nth-child(even) {
    padding:15px 0;
    border-left:0;
  }

  form,.screenBody {
    padding:24px 20px;
  }
}


/* V65.4 unified public-site navigation */

.siteHeader {
  padding:0;
}

.headerInner {
  width:min(100% - 48px,1240px);
  min-height:76px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.desktopNav {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:24px;
}

.desktopNav a {
  color:var(--navy);
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}

.desktopNav a:hover,
.footerInner nav a:hover {
  color:var(--cobalt);
}

.desktopNav .uploadLink {
  padding:10px 14px;
  color:var(--white);
  background:var(--cobalt);
  border-radius:8px;
}

.desktopNav .uploadLink:hover {
  color:var(--white);
  background:#173dd8;
}

.mobileMenu {
  display:none;
  position:relative;
}

.mobileMenu summary {
  color:var(--navy);
  cursor:pointer;
  font-weight:700;
  list-style:none;
}

.mobileMenu summary::-webkit-details-marker {
  display:none;
}

.mobileMenu nav {
  position:absolute;
  z-index:50;
  top:42px;
  right:0;
  width:230px;
  padding:10px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 18px 45px rgba(7,22,80,.14);
}

.mobileMenu nav a {
  display:block;
  padding:10px 12px;
  color:var(--navy);
  text-decoration:none;
  border-radius:7px;
  font-size:13px;
  font-weight:700;
}

.mobileMenu nav a:hover {
  background:var(--soft);
}

footer {
  padding:0;
}

.footerInner {
  width:min(100% - 48px,1240px);
  min-height:100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.footerInner > div {
  display:flex;
  flex-direction:column;
  gap:5px;
}

.footerBrand {
  color:var(--navy);
  font-size:16px;
  font-weight:700;
}

.footerInner nav {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:20px;
}

.footerInner nav a {
  color:var(--muted);
  text-decoration:none;
  font-size:12px;
  font-weight:700;
}

@media (max-width:1050px) {
  .desktopNav {
    display:none;
  }

  .mobileMenu {
    display:block;
  }
}

@media (max-width:700px) {
  .headerInner,
  .footerInner {
    width:min(100% - 28px,1240px);
  }

  .footerInner {
    padding:24px 0;
    align-items:flex-start;
    flex-direction:column;
  }

  .footerInner nav {
    justify-content:flex-start;
    gap:14px 18px;
  }
}


.mobileMenu[open]::before {
  content:"";
  position:fixed;
  z-index:40;
  inset:0;
  background:rgba(7,22,80,.08);
}

.mobileMenu summary,
.mobileMenu nav {
  position:relative;
  z-index:50;
}