/* Alpina Pay v10.13 — card carousel and compact card workspace. */
.ui-v109 .pay-card-screen .card-section-title,
.ui-v109 .pay-card-layout-v105 {
  width: min(600px, 100%) !important;
  margin-inline: auto !important;
}

.ui-v109 .pay-card-screen .card-section-title {
  align-items: flex-start !important;
  margin-bottom: 17px !important;
}

.ui-v109 .pay-card-screen .card-section-title p {
  text-align: left !important;
}

.ui-v109 .pay-card-layout-v105 {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.ui-v109 .card-deck,
.ui-v109 .card-deck-shell {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  margin-inline: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.ui-v109 .card-deck-shell {
  display: block !important;
  overflow: visible !important;
}

.ui-v109 .card-deck-track {
  width: 100% !important;
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 100% !important;
  align-items: center !important;
  gap: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 2px 0 10px !important;
  scroll-behavior: smooth !important;
  scroll-padding: 0 !important;
  scroll-snap-type: x mandatory !important;
  touch-action: pan-x pan-y pinch-zoom !important;
}

.ui-v109 .card-deck-slide {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  opacity: 1 !important;
  transform: none !important;
}

.ui-v109 .card-deck-slide .alpina-card-face,
.ui-v109 .card-deck-slide .alpina-card-face.product-universal {
  border: 0 !important;
}

.ui-v109 .card-deck.is-single .card-deck-track {
  overflow-x: hidden !important;
  scroll-snap-type: none !important;
  touch-action: pan-y pinch-zoom !important;
}

.ui-v109 .card-deck.is-single .card-deck-arrow,
.ui-v109 .card-deck.is-single .card-deck-pagination,
.ui-v109 .card-deck-order-button,
.ui-v109 .card-add-summary-v105,
.ui-v109 .add-card-slide {
  display: none !important;
}

.ui-v109 .card-deck-pagination {
  min-height: 18px !important;
  margin-top: 2px !important;
}

.ui-v109 .card-overview-v105 {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  align-content: start !important;
  gap: 14px !important;
  margin-top: 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 2px !important;
  box-shadow: none !important;
}

.ui-v109 .card-overview-v105 .pay-balance {
  position: relative !important;
  min-height: 0 !important;
  display: grid !important;
  align-content: start !important;
  grid-template-columns: auto auto !important;
  justify-content: start !important;
  align-items: baseline !important;
  gap: 3px 8px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--v109-text) !important;
  padding: 7px 0 1px !important;
  box-shadow: none !important;
}

.ui-v109 .card-overview-v105 .pay-balance::before {
  display: none !important;
}

.ui-v109 .card-overview-v105 .pay-balance small {
  grid-column: 1 / -1 !important;
  color: var(--v109-text-soft) !important;
  font-size: 13px !important;
}

.ui-v109 .card-overview-v105 .pay-balance strong {
  color: var(--v109-text) !important;
  font-size: clamp(39px, 7vw, 49px) !important;
  letter-spacing: -0.055em !important;
  line-height: 1 !important;
}

.ui-v109 .card-overview-v105 .pay-balance > span {
  align-self: end !important;
  color: var(--v109-text-soft) !important;
  padding-bottom: 4px !important;
}

.ui-v109 .card-overview-v105 .pay-main-buttons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

.ui-v109 .card-overview-v105 .pay-main-buttons > button,
.ui-v109 .card-overview-v105 .pay-main-buttons > button:first-child,
.ui-v109 .card-overview-v105 .pay-main-buttons > button:nth-child(2) {
  min-height: 52px !important;
  grid-column: auto !important;
  border-radius: 15px !important;
}

/* Alpina VPN follows the same compact tariff hierarchy as Claude. */
.ui-v109-modal
  .service-plan-picker-v105.is-vpn
  .service-plan-grid-v105.has-four {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.ui-v109-modal
  .service-plan-picker-v105.is-vpn
  .service-plan-grid-v105
  > button {
  min-height: 104px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto minmax(6px, 1fr) auto !important;
  align-items: start !important;
  gap: 5px 8px !important;
  overflow: hidden !important;
  border-color: color-mix(
    in srgb,
    var(--v1010-service) 24%,
    var(--v109-line)
  ) !important;
  border-radius: 15px !important;
  background: color-mix(
    in srgb,
    var(--v1010-service) 5%,
    var(--v109-surface)
  ) !important;
  padding: 13px !important;
  text-align: left !important;
}

.ui-v109-modal
  .service-plan-picker-v105.is-vpn
  .service-plan-grid-v105
  > button
  > span {
  min-width: 0 !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

.ui-v109-modal
  .service-plan-picker-v105.is-vpn
  .service-plan-grid-v105
  > button
  b {
  display: block !important;
  padding-right: 43px !important;
  font-size: 15px !important;
  font-weight: 720 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.ui-v109-modal
  .service-plan-picker-v105.is-vpn
  .service-plan-grid-v105
  > button
  small {
  display: none !important;
}

.ui-v109-modal
  .service-plan-picker-v105.is-vpn
  .service-plan-grid-v105
  > button
  > strong {
  grid-column: 1 !important;
  grid-row: 3 !important;
  align-self: end !important;
  justify-self: start !important;
  color: inherit !important;
  font-size: 19px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.ui-v109-modal
  .service-plan-picker-v105.is-vpn
  .service-plan-grid-v105
  > button
  .service-plan-discount-v107 {
  position: absolute !important;
  top: 9px !important;
  right: 9px !important;
  width: max-content !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 3px 7px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

.ui-v109-modal
  .service-plan-picker-v105.is-vpn
  .service-plan-grid-v105
  > button
  > i {
  grid-column: 2 !important;
  grid-row: 3 !important;
  align-self: end !important;
  justify-self: end !important;
}

.ui-v109-modal
  .service-plan-picker-v105.is-vpn
  .service-plan-grid-v105
  > button.active {
  border-color: var(--v1010-service) !important;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--v1010-service) 88%, #111827),
    var(--v1010-service)
  ) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px -22px
    color-mix(in srgb, var(--v1010-service) 75%, transparent) !important;
}

.ui-v109-modal
  .service-plan-picker-v105.is-vpn
  .service-plan-grid-v105
  > button.active
  b,
.ui-v109-modal
  .service-plan-picker-v105.is-vpn
  .service-plan-grid-v105
  > button.active
  strong {
  color: #fff !important;
}

.ui-v109-modal
  .service-plan-picker-v105.is-vpn
  .service-plan-grid-v105
  > button.active
  .service-plan-discount-v107 {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}

@media (max-width: 760px) {
  .ui-v109 .pay-card-screen {
    padding-inline: 14px !important;
  }

  .ui-v109 .card-deck-arrow {
    display: none !important;
  }
}

@media (max-width: 430px) {
  .ui-v109 .pay-card-layout-v105 {
    gap: 14px !important;
  }

  .ui-v109 .card-deck-track {
    padding-bottom: 8px !important;
  }

  .ui-v109 .card-overview-v105 {
    padding-inline: 0 !important;
  }

  .ui-v109 .card-overview-v105 .pay-balance {
    padding-top: 5px !important;
  }

  .ui-v109-modal
    .service-plan-picker-v105.is-vpn
    .service-plan-grid-v105
    > button {
    min-height: 98px !important;
    padding: 12px !important;
  }

  .ui-v109-modal
    .service-plan-picker-v105.is-vpn
    .service-plan-grid-v105
    > button
    b {
    font-size: 14px !important;
  }

  .ui-v109-modal
    .service-plan-picker-v105.is-vpn
    .service-plan-grid-v105
    > button
    > strong {
    font-size: 18px !important;
  }
}