/* ============================================================
   Customer portal — sidebar shell + section cards
   ============================================================ */

.portal {
  display: grid;
  grid-template-columns: 272px 1fr;
  min-height: 100vh;
  background: var(--bg);
}

/* --- sidebar ----------------------------------------------- */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 0 16px 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
/* logo and wordmark sit on one row; the logo is a wide lockup, so it is
   sized by height and allowed to shrink rather than overflow the rail */
.sidebar__brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 11px;
  padding: 20px 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
  min-width: 0;
}
.sidebar__mark { display: flex; flex: 0 1 auto; min-width: 0; }
.sidebar__logo {
  height: 30px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.sidebar__brand > span { min-width: 0; }
.sidebar__title {
  font-size: 15px; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.2; display: block; white-space: nowrap;
}
.sidebar__sub { font-size: 12px; color: var(--ink-muted); margin-top: 1px; display: block; white-space: nowrap; }

.nav { display: grid; gap: 2px; }
.nav__item {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  text-align: left;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__item svg { flex: none; color: var(--ink-muted); }
.nav__item:hover { background: var(--surface-sunk); color: var(--ink); }
.nav__item.is-active {
  background: var(--brand-primary);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--sh-primary);
}
.nav__item.is-active svg { color: #fff; }
.nav__badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.nav__item.is-active .nav__badge { background: rgba(255,255,255,.25); }

.sidebar__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }

/* --- main --------------------------------------------------- */
.portal-main { padding: 34px 40px 60px; min-width: 0; }
.portal-main__inner { max-width: 980px; }

.field-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
  display: block;
}

/* traveler switcher — one entry per application on the account */
.travelers { display: flex; gap: 6px; flex-wrap: wrap; align-items: stretch; }
.traveler {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 8px 10px 9px;
  border-radius: 13px;
  /* No min-width, so the chip hugs its contents and the active ring sits
     tight against the avatar instead of floating in empty space. flex:none
     stops the row from shrinking a chip below its label — the label sets
     its own automatic minimum to 0 (it clips), so without this a longer
     name spills out over the neighbouring chip. */
  flex: none;
  box-shadow: inset 0 0 0 1.5px transparent;    /* reserved so nothing shifts */
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.traveler:hover { background: var(--surface-sunk); }
.traveler__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-sunk);
  color: var(--ink-muted);
  font-size: 15px;
  font-weight: 700;
  flex: none;
}
.traveler__name {
  font-size: 13px; font-weight: 500; color: var(--ink-soft);
  max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* stage marker on the avatar, plus the word underneath — the switcher
   doubles as the account's list of open applications */
.traveler__avatar { position: relative; }
.traveler__dot {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2.5px solid var(--surface);
}
.traveler__dot--ok   { background: var(--brand-success); }
.traveler__dot--wait { background: var(--ink-faint); }
.traveler__dot--warn { background: #e0a01a; }
.traveler__dot--info { background: var(--brand-primary); }
.traveler.is-active .traveler__dot { border-color: var(--brand-primary-soft); }

.traveler__stage {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -.005em;
  max-width: 92px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-faint);
}
.traveler__stage.tone-ok   { color: var(--ok); }
.traveler__stage.tone-warn { color: var(--warn-ink); }
.traveler__stage.tone-info { color: var(--brand-primary); }

/* --- the one thing to do next ------------------------------- */
.nextaction {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.nextaction__icon {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--surface-sunk);
  color: var(--ink-muted);
}
.nextaction__body { flex: 1 1 240px; min-width: 0; }
.nextaction__title { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.nextaction__sub   { display: block; font-size: 14.5px; color: var(--ink-muted); margin-top: 4px; line-height: 1.45; }
.nextaction__cta   { flex: none; padding: 13px 22px; font-size: 15px; border-radius: 12px; }

.nextaction--warn { background: var(--warn-bg); border-color: var(--warn-line); }
.nextaction--warn .nextaction__icon { background: #fdf1cf; color: var(--warn-ink); }
.nextaction--info { background: var(--brand-primary-soft); border-color: #d6dfe9; }
.nextaction--info .nextaction__icon { background: #fff; color: var(--brand-primary); }
.nextaction--ok   { background: var(--ok-bg); border-color: var(--ok-line); }
.nextaction--ok .nextaction__icon { background: #fff; color: var(--ok); }
.traveler.is-active { background: var(--brand-primary-soft); box-shadow: inset 0 0 0 1.5px var(--brand-primary); }
.traveler.is-active .traveler__avatar { background: var(--brand-primary); color: #fff; }
.traveler.is-active .traveler__name { color: var(--brand-primary); font-weight: 600; }
.traveler--add .traveler__avatar {
  background: transparent;
  border: 1.5px dashed var(--line-strong);
  color: var(--ink-faint);
}

.hint-line {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--ink-muted);
  display: flex;
  gap: 7px;
  align-items: flex-start;
}

.order-id-label { font-size: 14px; color: var(--ink-muted); margin-top: 30px; }
.order-id {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-top: 2px;
}

/* --- portal cards ------------------------------------------- */
.pcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 30px 28px;
  margin-top: 22px;
}
.pcard__title { font-size: 18px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 20px; }

.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 40px; }
.kv__k { font-size: 14px; color: var(--ink-muted); }
.kv__v { font-size: 16px; font-weight: 500; margin-top: 4px; line-height: 1.35; }
.kv__v--mono { font-family: var(--font-mono); }

.inset {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--surface-sunk);
}
.inset__icon { color: var(--brand-primary); flex: none; margin-top: 2px; }
.inset__title { font-size: 16px; font-weight: 700; }
.inset__body { font-size: 14.5px; color: var(--ink-muted); margin-top: 4px; line-height: 1.5; }
.inset--ok    { background: var(--ok-bg); }
.inset--ok .inset__icon { color: var(--ok); }
.inset--warn  { background: var(--warn-bg); }
.inset--warn .inset__icon { color: var(--warn-ink); }

.empty {
  padding: 44px 20px;
  text-align: center;
  color: var(--ink-muted);
  display: grid;
  gap: 10px;
  justify-items: center;
}
.empty svg { color: var(--ink-faint); }

/* --- section-specific --------------------------------------- */
.status-steps { display: grid; gap: 0; }
.status-step {
  display: flex; gap: 15px; align-items: flex-start;
  padding-bottom: 22px; position: relative;
}
.status-step:not(:last-child)::before {
  content: ""; position: absolute; left: 13px; top: 30px; bottom: 0;
  width: 2px; background: var(--line);
}
.status-step.is-done:not(:last-child)::before { background: var(--brand-success); }
.status-step__dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-sunk); color: var(--ink-faint);
  display: grid; place-items: center; flex: none; z-index: 1;
}
.status-step.is-done .status-step__dot { background: var(--brand-success); color: #fff; }
.status-step.is-current .status-step__dot {
  background: var(--brand-primary); color: #fff;
  box-shadow: 0 0 0 4px rgba(9,43,73,.14);
}
.status-step__title { font-size: 15.5px; font-weight: 600; }
.status-step__sub { font-size: 13.5px; color: var(--ink-muted); margin-top: 2px; }

.preview-frame {
  width: 240px;
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface-sunk);
  display: grid;
  place-items: center;
}
.preview-frame img { width: 100%; height: 100%; object-fit: cover; }

.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 0;
}
.toggle-row + .toggle-row { border-top: 1px solid var(--line-soft); }
.switch {
  position: relative; width: 46px; height: 27px; border-radius: var(--r-pill);
  background: var(--line-strong); flex: none;
  transition: background var(--dur) var(--ease);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform var(--dur) var(--ease);
}
.switch.is-on { background: var(--brand-success); }
.switch.is-on::after { transform: translateX(19px); }

.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th, .table td { text-align: left; padding: 13px 12px; border-bottom: 1px solid var(--line-soft); }
.table th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); font-weight: 600; }
.table td:last-child, .table th:last-child { text-align: right; }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 600;
}
.tag--ok   { background: var(--ok-bg);    color: var(--ok); }
.tag--wait { background: var(--warn-bg);  color: var(--warn-ink); }
.tag--info { background: var(--brand-primary-soft); color: var(--brand-primary-ink); }

/* passport-preview verdict badges: approved reads as a result, under-review
   as a state, so one is filled and the other outlined */
.tag--solid-ok {
  background: var(--brand-success);
  color: #fff;
  padding: 6px 13px;
  font-size: 13px;
}
.tag--outline-wait {
  background: transparent;
  color: var(--warn-ink);
  box-shadow: inset 0 0 0 1.5px var(--warn-line);
  padding: 6px 13px;
  font-size: 13px;
}

/* small inline spinner for the "processing" photo slot */
.mini-spinner {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2.5px solid rgba(0, 21, 55, .13);
  border-top-color: var(--brand-primary);
  animation: portal-spin .85s linear infinite;
}
@keyframes portal-spin { to { transform: rotate(360deg); } }

.preview-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.preview-actions .btn--ghost svg { color: var(--brand-primary); }

/* --- modal extras (AI edit assistant, address editor) --------
   The shared .modal__head is a solid brand bar, which the photo
   tool's consent gate relies on. Portal modals read as documents
   rather than alerts, so they get a light head instead. */
.modal--portal { max-width: 480px; }
.modal--portal .modal__head {
  background: var(--surface);
  color: var(--ink);
  padding: 24px 24px 4px;
}
.modal--portal .modal__title { font-size: 18px; letter-spacing: -.02em; }
.modal--portal .modal__sub {
  color: var(--ink-muted);
  font-size: 14px;
  margin-top: 6px;
  line-height: 1.45;
}
.modal--portal .modal__body { padding: 20px 24px 24px; display: block; }
.modal--portal .modal__foot { padding: 0 24px 24px; }
.modal__intro { font-size: 14.5px; color: var(--ink-soft); line-height: 1.45; }

.modal__head--row {
  display: flex;
  align-items: center;
  gap: 13px;
}
.modal__head--row .modal__title { flex: 1; min-width: 0; }
.modal__badge {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 12px;
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
  display: grid;
  place-items: center;
}
.modal__x {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 9px;
  color: var(--ink-muted);
  display: grid;
  place-items: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.modal__x:hover { background: var(--surface-sunk); color: var(--ink); }

.samples { display: grid; gap: 9px; margin-bottom: 16px; }
.sample {
  text-align: left;
  padding: 13px 16px;
  border-radius: 11px;
  background: var(--surface-sunk);
  color: var(--ink-soft);
  font-size: 14.5px;
  transition: background var(--dur) var(--ease);
}
.sample:hover { background: var(--surface-soft); }

.composer { position: relative; }
.composer__input { padding-right: 60px; min-height: 96px; }
.composer__send {
  position: absolute;
  right: 10px; bottom: 10px;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--brand-primary);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.composer__send:disabled { background: var(--brand-primary-soft); color: var(--brand-primary); opacity: .75; }

.formgrid { display: grid; gap: 16px; }
.formgrid__row { display: block; }

/* --- mobile ------------------------------------------------- */
.portal-topbar { display: none; }

@media (max-width: 960px) {
  .portal { grid-template-columns: 1fr; }
  .portal-topbar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 30;
  }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: 268px; z-index: 40;
    transform: translateX(-100%); transition: transform .25s var(--ease);
    box-shadow: var(--sh-modal);
  }
  .sidebar.is-open { transform: none; }
  .sidebar-scrim {
    position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 35;
  }
  .portal-main { padding: 20px 16px 48px; }
  .kv { grid-template-columns: 1fr; gap: 16px; }
  .order-id { font-size: 24px; }
  .pcard { padding: 20px; border-radius: 14px; }
}

@media (max-width: 720px) {
  /* The switcher scrolls sideways instead of wrapping. Wrapping stranded
     "Add New" alone on a second row and left a dead band above the hint. */
  .travelers {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* bleed to the screen edges so a cut-off chip reads as "scroll me" */
    margin-inline: -16px;
    padding: 0 16px 4px;
  }
  .travelers::-webkit-scrollbar { display: none; }
  .traveler { scroll-snap-align: start; }

  /* Stage card stacks: icon and text share a row, the action goes full
     width underneath rather than being squeezed beside the copy. */
  .nextaction {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: start;
    gap: 14px;
    padding: 18px;
    margin-top: 20px;
  }
  .nextaction__body { grid-column: 2; }
  .nextaction__cta {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 2px;
  }
  .nextaction__title { font-size: 16px; }

  .preview-actions { gap: 14px 18px; }
  .order-id-label { margin-top: 22px; }
}

/* --- form controls ------------------------------------------ */
.input {
  width: 100%;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 15px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  resize: vertical;
}
.input::placeholder { color: var(--ink-faint); }
.input:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--sh-ring); }
/* Set while a typed answer is present but still the wrong length — an SSN
   short of nine digits, a phone short of ten. Cleared once it is complete,
   so an empty field is never shown as an error. */
.input--bad { border-color: #E5A0A8; background: #FFF8F8; }
.input--bad:focus { border-color: #D14D5C; box-shadow: 0 0 0 4px rgba(209, 77, 92, .12); }

/* --- passport preview card ---------------------------------- */
.passport-card {
  border-radius: 12px;
  overflow: hidden;
  /* A passport data page is left-aligned, so the component says so itself
     rather than inheriting whatever its container happens to use. The
     confirm page centres its card (.viewcard), which silently centred
     every label and value here and made the same component look like two
     different designs on two pages. .verdict-row had already opted out
     the same way; this fixes it at the source instead. */
  text-align: left;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.55) 0 2px, rgba(0,0,0,0) 2px 9px),
    linear-gradient(140deg, #e8ecf4, #dfe5ef 45%, #e9edf5);
  border: 1px solid #cfd7e5;
  padding: 20px 22px 0;
  position: relative;
  max-width: 560px;
  margin: 0 auto;
}
.passport-card::after {                       /* faint eagle/star watermark */
  content: "";
  position: absolute;
  right: 16%;
  top: 28%;
  width: 190px; height: 190px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.75), rgba(255,255,255,0) 62%);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: .5;
  pointer-events: none;
}
.passport-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.passport-card__top b { display: block; font-size: 12.5px; letter-spacing: .06em; color: #33415a; }
.passport-card__top small { display: block; font-size: 9.5px; letter-spacing: .05em; color: #7a8699; margin-top: 2px; }
.passport-card__country {
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: #6b5a3a;
}
.passport-card__body {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 22px;
  margin-top: 16px;
  position: relative;
  z-index: 1;
}
.passport-card__photo {
  aspect-ratio: 3 / 4;
  border-radius: 3px;
  background: rgba(255,255,255,.55);
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* printed passports carry a desaturated portrait — matching that here keeps
   the preview honest about what the finished document looks like */
.passport-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
}
.passport-card__pending {
  display: grid; justify-items: center; gap: 8px;
  color: #b98a2a; font-size: 8.5px; letter-spacing: .12em; font-weight: 700;
}
.passport-card__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; align-content: start; }
.passport-card__label { display: block; font-size: 8.5px; letter-spacing: .07em; color: #7a8699; font-weight: 600; }
.passport-card__value { display: block; font-size: 14px; font-weight: 700; color: #1f2c44; letter-spacing: .01em; margin-top: 1px; }
.passport-card__mrz {
  margin: 22px -22px 0;
  padding: 10px 22px 14px;
  display: grid; gap: 5px;
  background: rgba(255,255,255,.25);
}
.passport-card__mrz span { display: block; height: 8px; border-radius: 2px; background: #8d9dbb; opacity: .55; }
.passport-card__mrz span:last-child { width: 78%; }

/* --- promo (partner upsell) --------------------------------- */
.promo { border-color: #7c4ddb; box-shadow: 0 0 0 1px #7c4ddb inset; }
.promo__head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  background: linear-gradient(90deg, #6d3fd4, #7c4ddb);
  color: #fff;
}
.promo__icon {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  background: rgba(255,255,255,.2); display: grid; place-items: center;
}
.promo__title { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.promo__sub { display: block; font-size: 13px; color: rgba(255,255,255,.82); }
.promo__flag {
  padding: 6px 12px; border-radius: 6px; background: #fff; color: #6d3fd4;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; white-space: nowrap;
}
.promo__offer {
  margin-top: 20px; padding: 20px 22px;
  border: 1px solid #e4dbfa; border-radius: 12px; background: #fbf9ff;
}
.promo__offer-title { font-size: 24px; font-weight: 800; color: #6d3fd4; letter-spacing: -.02em; }
.promo__cta {
  margin-top: 20px; background: #6d3fd4; color: #fff;
  box-shadow: 0 10px 22px -10px rgba(109,63,212,.6);
}
.promo__cta:hover { background: #5f34c4; }

/* --- faq ----------------------------------------------------- */
.faq { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 17px; text-align: left; font-size: 14.5px; font-weight: 500;
  background: var(--surface); transition: background var(--dur) var(--ease);
}
.faq__q:hover { background: var(--surface-sunk); }
.faq__q svg { flex: none; color: var(--ink-faint); transition: transform var(--dur) var(--ease); }
.faq.is-open .faq__q svg { transform: rotate(180deg); }
.faq__a { display: none; padding: 0 17px 16px; }
.faq.is-open .faq__a { display: block; }
.faq__a p { font-size: 14px; color: var(--ink-muted); line-height: 1.55; }

@media (max-width: 720px) {
  .passport-card__body { grid-template-columns: 110px 1fr; gap: 14px; }
  .passport-card__fields { grid-template-columns: 1fr; }
  .passport-card__fields > div { grid-column: 1 !important; }
  .promo__head { flex-wrap: wrap; }
}

/* --- span-based label/description pairs ---------------------
   Only pairs that must sit on their own line belong here.
   .traveler__avatar is deliberately absent: it is a centring
   container, and blocking it here would beat its display:grid
   and drop the initials to the top of the circle. */
.inset__title, .inset__body,
.status-step__title, .status-step__sub,
.traveler__name,
.promo__title, .promo__sub,
.kv__k, .kv__v { display: block; }

.sidebar__foot .btn { font-size: 14.5px; padding: 13px 14px; white-space: nowrap; }