/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://ga.jspm.io/npm:slim-select@2.10.0/dist/slimselect.css");
@import url("https://ga.jspm.io/npm:trix@2.1.19/dist/trix.css");

:root {
  --primary-color: #00CCB4;
}

 /* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
 /* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Hide arrow input number for Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Hide arrow input number for Firefox */
input[type=number] {
  appearance: textfield;
}

/* Custom dropdown select */
select {
  /* remove native chrome/ios/ff appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* custom arrow as SVG data URI (black chevron) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23222' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.4rem center;
  background-repeat: no-repeat;
  background-size: 1.2rem;
}

select:invalid {
  color: #a4aab2;
}

/* Custom Loading */
button .show-when-disabled,
button:disabled .show-when-enabled {
  display: none;
}
button .show-when-enabled,
button:disabled .show-when-disabled {
  display: initial;
}

/* Custom slim select */
.ss-list {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;
}
.ss-list::-webkit-scrollbar {
  display: none;
}
.ss-main {
  display: flex !important;
  padding: 7.5px 12px;
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
  background-color: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: #d1d5db;
  border-radius: 7px !important;
  box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
}
.ss-search {
  font-size: 14px !important;
}
.ss-content .ss-list .ss-option:hover {
  background-color: var(--primary-color) !important;
}
.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
  background-color: var(--primary-color) !important;
}
.ss-main .ss-arrow {
  width: 9px;
  margin-left: 15px;
  margin-right: 0px;
}
.ss-main .ss-values .ss-placeholder {
  padding: 0;
  color: #c6c6c6;
  font-size: 14px;
  line-height: 20px;
}
.ss-main .ss-values .ss-single {
  font-size: 14px;
  line-height: 20px;
  color: #4b5563;
  margin: 0;
}
.ss-content .ss-list .ss-option {
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}
.ss-values {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: auto;
}
.ss-content .ss-search .ss-addable {
  width: 35px;
}
.ss-content .ss-search .ss-addable svg {
  color: white;
}
.ss-main .ss-values .ss-value {
  background-color: var(--primary-color);
}
.ss-main:focus {
  border: 1px solid var(--primary-color);
  box-shadow: 0 0 0 var(--primary-color);
}
.ss-main {
  border-radius: 0.5rem;
}
.ss-search {
  color: #c6c6c6 !important;
  font-weight: 300;
  font-size: .875rem;
  line-height: 1.25rem;
}
.ss-search input {
  color: #4d4d4d;
  font-weight: 300;
  font-size: .875rem;
  line-height: 1.25rem;
}
.ss-search input:focus {
  border: 1px solid var(--primary-color);
  box-shadow: 0 0 0 var(--primary-color) !important;
}
.ss-search-highlight {
  background: none !important;
  font-weight: 500 !important;
}

/* Trix editor */
trix-editor.trix-content {
  border-color: #d1d5db;
  border-radius: 0.375rem;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #4b5563;
}
trix-editor.trix-content:focus {
  border-color: var(--primary-color);
  outline: none;
}
trix-toolbar .trix-button-group {
  border-color: #d1d5db;
}
trix-toolbar .trix-button {
  border-color: #d1d5db;
}
trix-toolbar .trix-button.trix-active {
  background-color: #e5e7eb;
}
trix-toolbar .trix-button-group--file-tools {
  display: none !important;
}

trix-editor.trix-content ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}
trix-editor.trix-content ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}
trix-editor.trix-content li {
  display: list-item;
}

/* ── Hero: cursor-reactive 3D card (homepage) ── */
.hero-perspective {
  perspective: 800px;
}

/* wider than the visible card so the cursor has more room to trigger the tilt */
.hero-tracker {
  position: relative;
  width: 100%;
  margin-right: -2rem; /* extend hit area into the right gutter */
}

.hero-card {
  position: relative;
  width: 100%;
  max-width: min(92vw, 640px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  margin: 0 auto;
  /* smooth follow on mousemove, smoother ease-back on mouseleave */
  transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
  /* rest pose: card faces slightly to the left (desktop only) */
  transform: rotateY(-10deg) rotateX(-3deg);
}

/* Mobile: flat 2D, no perspective, no facing-left tilt */
@media (max-width: 1023px) {
  .hero-perspective {
    perspective: none !important;
  }
  .hero-card {
    transform: none !important;
    transform-style: flat !important;
    left: -10px;
  }
  .hero-card img,
  .hero-svg {
    transform: none !important;
  }
  .hero-card img {
    box-shadow: 0 10px 20px -6px rgba(0, 0, 0, 0.3);
  }
  .hero-tracker {
    margin-right: 0;
  }
}

.hero-stage {
  position: relative;
  width: 100%;
  height: 100%;
  animation: hero-bob 6s ease-in-out infinite;
}

.hero-card img,
.hero-svg {
  position: absolute;
  inset: 10px;
  width: auto;
  height: auto;
  border-radius: 28px;
}

.hero-card img {
  transform: translateZ(40px);
  backface-visibility: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

.hero-svg {
  transform: translateZ(80px);
  overflow: hidden;
}

.hero-svg .tw {
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-tw 2.4s ease-in-out infinite;
}
.hero-svg .ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-ring 3s ease-out infinite;
}
.hero-svg .dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-dot 1.4s ease-in-out infinite;
}
.hero-svg .wave {
  animation: hero-wave 1.8s ease-out infinite;
  opacity: 0;
}
.hero-svg .glare {
  animation: hero-glare 5s ease-in-out infinite;
}
.hero-svg .rise {
  animation: hero-rise 7s linear infinite;
  opacity: 0;
}
.hero-svg .glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-glow 2.2s ease-in-out infinite;
}

@keyframes hero-bob { 50% { transform: translateY(-6px); } }
@keyframes hero-tw { 0%, 100% { transform: scale(.2) rotate(0); opacity: 0; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
@keyframes hero-ring { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes hero-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-10px); opacity: 1; } }
@keyframes hero-wave { 0% { opacity: 0; transform: translateX(-6px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateX(10px); } }
@keyframes hero-glare { 0%, 30% { transform: translateX(-300px); } 70%, 100% { transform: translateX(700px); } }
@keyframes hero-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .8; } 100% { transform: translateY(-220px); opacity: 0; } }
@keyframes hero-glow { 50% { transform: scale(1.8); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero-svg *,
  .hero-stage { animation: none !important; }
  .hero-svg .tw { opacity: .8; transform: scale(.8); }
}