/* Shared button styles */

:is(.btn-back, .btn-download, .btn-subgroup, .btn-primary-custom, .btn-outline-primary, .page-ship-shortage .btn-back-overview, .page-crises .btn-back-overview, .page-opportunity-detail .btn-back-overview) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap, 0);
  min-width: var(--btn-min-width, auto);
  width: var(--btn-width, auto);
  max-width: var(--btn-max-width, none);
  padding: var(--btn-padding, 12px 28px);
  border-radius: var(--btn-radius, 8px);
  border: var(--btn-border, none);
  background: var(--btn-bg, var(--dark-teal));
  color: var(--btn-color, #fff);
  text-decoration: none;
  text-align: center;
  font-size: var(--btn-font-size, 1rem);
  font-weight: var(--btn-font-weight, 600);
  line-height: 1.2;
  box-shadow: var(--btn-shadow, 0 4px 12px rgba(0, 0, 0, 0.18));
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

:is(.btn-back, .btn-download, .btn-subgroup, .btn-primary-custom, .btn-outline-primary, .page-ship-shortage .btn-back-overview, .page-crises .btn-back-overview, .page-opportunity-detail .btn-back-overview):hover {
  background: var(--btn-bg-hover, var(--btn-bg, var(--dark-teal)));
  color: var(--btn-color-hover, var(--btn-color, #fff));
  transform: var(--btn-transform-hover, translateY(-2px));
  box-shadow: var(--btn-shadow-hover, 0 8px 18px rgba(0, 0, 0, 0.22));
}

.btn-back {
  --btn-bg: var(--dark-teal);
  --btn-bg-hover: var(--hover-teal);
  --btn-padding: 12px 35px;
  --btn-transform-hover: translateY(-3px) scale(1.05);
  --btn-shadow: 0 4px 15px rgba(0, 128, 128, 0.3);
  --btn-shadow-hover: 0 6px 20px rgba(0, 128, 128, 0.4);
}

.btn-download {
  --btn-bg: var(--dark-teal);
  --btn-bg-hover: var(--hover-teal);
  --btn-padding: 10px 25px;
  --btn-gap: 8px;
  --btn-transform-hover: scale(1.05);
}

.btn-download svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.btn-subgroup {
  --btn-bg: #008080;
  --btn-bg-hover: #006666;
  --btn-padding: 20px 40px;
  --btn-font-size: 1.1rem;
  --btn-min-width: 200px;
  --btn-transform-hover: translateY(-3px);
  --btn-shadow-hover: 0 5px 15px rgba(0, 128, 128, 0.3);
}

.btn-primary-custom {
  --btn-bg: linear-gradient(to right, #5e239d, #b70468);
  --btn-bg-hover: linear-gradient(to right, #5e239d, #b70468);
  --btn-padding: 12px 30px;
  --btn-radius: 25px;
  --btn-font-weight: 700;
  --btn-shadow: none;
  --btn-shadow-hover: 0 4px 12px rgba(94, 35, 157, 0.4);
}

.btn-outline-primary {
  --btn-bg: transparent;
  --btn-bg-hover: linear-gradient(to right, #5e239d, #b70468);
  --btn-color: #5e239d;
  --btn-color-hover: #fff;
  --btn-padding: 10px 20px;
  --btn-radius: 5px;
  --btn-font-weight: 700;
  --btn-border: 2px solid #5e239d;
  --btn-shadow: none;
  --btn-shadow-hover: 0 4px 10px rgba(94, 35, 157, 0.3);
  margin: 5px;
}

.page-ship-shortage .btn-back-overview {
  --btn-bg: linear-gradient(to right, rgba(94, 35, 157, 0.9), rgba(183, 4, 104, 0.9));
  --btn-bg-hover: linear-gradient(to right, rgba(94, 35, 157, 0.98), rgba(183, 4, 104, 0.98));
  --btn-padding: 14px 26px;
  --btn-width: 100%;
  --btn-max-width: 900px;
  --btn-radius: 12px;
  --btn-font-size: 1.05rem;
  --btn-border: 1px solid rgba(255, 255, 255, 0.3);
  --btn-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  --btn-shadow-hover: 0 8px 18px rgba(0, 0, 0, 0.3);
}

.page-crises .btn-back-overview {
  --btn-bg: linear-gradient(to right, rgba(94, 35, 157, 0.9), rgba(183, 4, 104, 0.9));
  --btn-bg-hover: linear-gradient(to right, rgba(94, 35, 157, 0.98), rgba(183, 4, 104, 0.98));
  --btn-padding: 14px 26px;
  --btn-width: 100%;
  --btn-max-width: 900px;
  --btn-radius: 12px;
  --btn-font-size: 1.05rem;
  --btn-border: 1px solid rgba(255, 255, 255, 0.3);
  --btn-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  --btn-shadow-hover: 0 8px 18px rgba(0, 0, 0, 0.3);
}

.page-opportunity-detail .btn-back-overview {
  --btn-bg: linear-gradient(to right, rgba(94, 35, 157, 0.9), rgba(183, 4, 104, 0.9));
  --btn-bg-hover: linear-gradient(to right, rgba(94, 35, 157, 0.98), rgba(183, 4, 104, 0.98));
  --btn-padding: 14px 26px;
  --btn-width: 100%;
  --btn-max-width: 900px;
  --btn-radius: 12px;
  --btn-font-size: 1.05rem;
  --btn-border: 1px solid rgba(255, 255, 255, 0.3);
  --btn-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  --btn-shadow-hover: 0 8px 18px rgba(0, 0, 0, 0.3);
}