/* ==========================================================================
   Portal CTA buttons — content-width, lucide arrow-up-right in a nested box.

   Geometry is measured off the reference button, not approximated: 50px tall,
   30x30 icon box with an even 10px inset, 20px label padding, 12px gap, 18px
   arrow, label at 500. White is the reference pattern; blue and black invert
   it, so the box is white and the arrow picks up the body colour.

   Header chrome is excluded on purpose — .header and .portal-topbar CTAs and
   the bell dropdown's .notifications__btn stay on the base sheet.
   ========================================================================== */

.btn_cta {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  gap: 12px;
  width: auto;
  min-width: 0;
  /* Keeps the button at text width if a grid or stretch parent gets hold of it */
  max-width: max-content;
  height: 50px;
  padding: 10px 10px 10px 20px;
  border: none;
  border-radius: 16px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn_cta__label {
  flex: 0 1 auto;
}

.btn_cta__icon {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  overflow: hidden;
}

.btn_cta__arrow {
  display: block;
  width: 18px;
  height: 18px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* On hover the arrow exits through the top-right corner while a second copy
   flies in from the bottom-left. The incoming one is a masked pseudo-element
   rather than a duplicated <svg>, so the markup stays a label plus one icon.
   140% clears the box: half the box plus half the arrow is 24px of the 18px
   glyph on each axis. */
.btn_cta__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: translate(-140%, 140%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.btn_cta:hover .btn_cta__arrow {
  transform: translate(140%, -140%);
}

.btn_cta:hover .btn_cta__icon::after {
  transform: translate(0, 0);
}

/* Touch scroll can leave :hover stuck on CTAs; keep arrows still on phones. */
@media (max-width: 767px) {
  .btn_cta:hover .btn_cta__arrow {
    transform: none;
  }

  .btn_cta:hover .btn_cta__icon::after {
    transform: translate(-140%, 140%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn_cta__arrow,
  .btn_cta__icon::after {
    transition: none;
  }

  .btn_cta:hover .btn_cta__arrow {
    transform: none;
  }

  .btn_cta__icon::after {
    display: none;
  }
}

.btn_cta:focus-visible {
  outline: 2px solid var(--geosmart-brand-blue);
  outline-offset: 2px;
}

/* White — the reference: white body, brand-blue label and icon box */
.btn_cta_white {
  background: #ffffff;
  color: var(--geosmart-brand-blue);
}

.btn_cta_white .btn_cta__icon {
  background: var(--geosmart-brand-blue);
  color: #ffffff;
}

.btn_cta_white:hover {
  background: #f0f4ff;
  color: var(--geosmart-brand-blue);
}

/* Blue — matches the topbar menu fill; white box, blue arrow */
.btn_cta_blue {
  background: var(--geosmart-brand-blue);
  color: #ffffff;
}

.btn_cta_blue .btn_cta__icon {
  background: #ffffff;
  color: var(--geosmart-brand-blue);
}

.btn_cta_blue:hover {
  background: var(--geosmart-brand-blue-hover);
  color: #ffffff;
}

/* Black — inverted: white box, near-black arrow */
.btn_cta_black {
  background: #1b1d21;
  color: #ffffff;
}

.btn_cta_black .btn_cta__icon {
  background: #ffffff;
  color: #1b1d21;
}

.btn_cta_black:hover {
  background: #111317;
  color: #ffffff;
}