/* Bottom safe-area inset for bottom-anchored modal surfaces.
   Adds the device's bottom safe-area inset on top of an element's base
   bottom padding so action footers/panels clear the native iOS tab bar
   in the Hotwire Native shell. Set the base via the --grove-safe-bottom-base
   custom property (e.g. Tailwind's [--grove-safe-bottom-base:0.75rem]); it
   defaults to 0, so on web/desktop — where env(safe-area-inset-bottom)
   resolves to 0 — the element keeps its original bottom padding. The inset
   is additive and env()-driven only: no native detection or tab-bar
   constant is hardcoded here. */
.grove-safe-bottom {
  padding-bottom: calc(var(--grove-safe-bottom-base, 0px) + env(safe-area-inset-bottom, 0px));
}

/* Grove UI Card border */
.grove-card-border {
  border-width: 1px;
  border-style: solid;
}

@supports (border-width: 0.5px) {
  .grove-card-border {
    border-width: 0.5px;
  }
}

/* Mobile-only card border — removed at md breakpoint */
.grove-card-border-mobile {
  border-width: 1px;
  border-style: solid;
}

@supports (border-width: 0.5px) {
  .grove-card-border-mobile {
    border-width: 0.5px;
  }
}

@media (min-width: 768px) {
  .grove-card-border-mobile {
    border-width: 0;
    border-style: none;
  }
}

/* Grove UI Swiper/Carousel Styles */

:root {
  --swiper-pagination-color: #ffcf83;
  --swiper-pagination-bullet-inactive-color: #D9D9D9;
  --swiper-pagination-bullet-inactive-opacity: 0.6;
  --swiper-navigation-sides-offset: 0;
  --swiper-navigation-size: 30px;
  --swiper-navigation-color: rgb(16, 16, 16);
}

.grove-carousel-wrapper .swiper-button-prev,
.grove-carousel-wrapper .swiper-button-next {
  top: 100px;
  top: calc(50% - 30px);
  bottom: auto;
  z-index: 10;
  margin: 0;
  transform: none;
  width: 36px;
  height: 36px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.grove-carousel-wrapper .swiper .swiper-slide {
  opacity: 0;
}

.grove-carousel-wrapper .swiper.swiper-initialized .swiper-slide {
  opacity: 1;
}

.grove-carousel-wrapper .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 4px;
}

.grove-carousel-wrapper .swiper-button-prev svg,
.grove-carousel-wrapper .swiper-button-next svg {
  width: auto;
  height: auto;
}

.grove-carousel-wrapper .swiper-button-disabled.swiper-button-prev,
.grove-carousel-wrapper .swiper-button-disabled.swiper-button-next {
  opacity: 0 !important;
}

.grove-carousel-wrapper .swiper-slide > div,
.grove-carousel-wrapper .swiper-slide > a,
.grove-carousel-wrapper .swiper-slide > button {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Make cards stretch to equal height within carousel slides */
.grove-carousel-wrapper .swiper-slide > div > .h-full,
.grove-carousel-wrapper .swiper-slide > a > .h-full,
.grove-carousel-wrapper .swiper-slide > button > .h-full {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Push footer/button to the bottom by growing the text content area */
.grove-carousel-wrapper .swiper-slide > div > .h-full > .flex.flex-col:first-child,
.grove-carousel-wrapper .swiper-slide > a > .h-full > .flex.flex-col:first-child,
.grove-carousel-wrapper .swiper-slide > button > .h-full > .flex.flex-col:first-child {
  flex: 1;
}

.grove-carousel-wrapper .swiper-wrapper {
  align-items: stretch;
}

.grove-carousel-wrapper .swiper-autoheight .swiper-wrapper {
  height: auto !important;
}

.grove-carousel-wrapper .swiper-slide {
  height: auto;
}

.grove-carousel-wrapper .swiper-button-prev {
  left: 12px;
}

.grove-carousel-wrapper .swiper-button-next {
  right: 12px;
  margin-top: 0;
}

.grove-carousel-wrapper .swiper-button-next {
  transform: rotate(0deg) !important;
}

.grove-carousel-wrapper .swiper-button-prev:after,
.grove-carousel-wrapper .swiper-button-next:after {
  content: ''
}

/* Hide scrollbar while preserving scroll functionality */
.grove-scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.grove-scrollbar-hide::-webkit-scrollbar {
  display: none;
}

@media all and (min-width: 768px) {
  .grove-carousel-wrapper:hover .swiper-button-prev,
  .grove-carousel-wrapper:hover .swiper-button-next {
    opacity: 1;
  }
}

.wealth-coach-shadow-sm {
  box-shadow: 0 1px 1px rgba(0,0,0,0.25);
}

.wealth-coach-shadow-lg {
  box-shadow: 0 3px 3px rgba(0,0,0,0.25);
}
/* Small arrows variant — inline with pagination, always visible */
.grove-carousel-small-arrow.swiper-button-prev,
.grove-carousel-small-arrow.swiper-button-next {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  margin: 0;
  opacity: 1;
  width: 24px;
  height: 24px;
}

.grove-carousel-small-arrow.swiper-button-prev:after,
.grove-carousel-small-arrow.swiper-button-next:after {
  content: '';
  display: none;
}

.grove-carousel-small-arrow.swiper-button-disabled.swiper-button-prev,
.grove-carousel-small-arrow.swiper-button-disabled.swiper-button-next {
  opacity: 0.35 !important;
  cursor: default;
}

/* Toolkit icon tile shadow */
.grove-toolkit-icon-shadow {
  box-shadow:
    0 2.403px 3.604px 0 rgba(72, 29, 4, 0.05),
    0 4px 14.416px 0 rgba(72, 29, 4, 0.12),
    0 7.208px 7.208px 0.601px rgba(255, 255, 255, 0.30) inset,
    0 -7.208px 7.208px 1.802px rgba(188, 126, 68, 0.10) inset;
}


.grove-toolkit-icon-shadow-alt {
  filter: drop-shadow(0px 4px 5px rgba(10, 10, 10, 0.2));
}

/* Cloud Graphic Screen — on load the clouds drop down from above, overshoot
   past their resting spot, then wiggle/bounce a couple of times into place.
   Pure CSS, no JS. */
@keyframes groveCloudsDrop {
  0% {
    transform: translateY(-12vw);
  }
  58% {
    transform: translateY(4vw);
  }
  76% {
    transform: translateY(-2.2vw);
  }
  90% {
    transform: translateY(1vw);
  }
  100% {
    transform: translateY(0);
  }
}

.grove-clouds-drop {
  transform: translateY(-12vw);
  animation: groveCloudsDrop 0.85s cubic-bezier(0.33, 0, 0.3, 1) 0.1s both;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .grove-clouds-drop {
    animation: none;
    transform: translateY(0);
  }
}

/* Cloud Graphic Screen — the graphic stays hidden until the clouds have finished
   animating in (~0.95s), then pops/zooms in quickly with a slight overshoot. */
@keyframes groveGraphicPop {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  70% {
    transform: scale(1.01);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.grove-graphic-pop {
  opacity: 0;
  transform-origin: center;
  animation: groveGraphicPop 0.4s ease-in-out 0.95s both;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .grove-graphic-pop {
    animation: none;
    opacity: 1;
    transform: scale(1);
  }
}