/*
 * 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.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  background-color: #0f172a;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
}

:root {
  --ios-browser-toolbar-buffer: 5.5rem;
  --ios-safe-bottom: env(safe-area-inset-bottom, 0px);
}

.marketing-hero {
  --marketing-parallax-y: 0px;
  background:
    radial-gradient(circle at 18% 18%, rgba(16, 185, 129, 0.18), transparent 34rem),
    radial-gradient(circle at 82% 20%, rgba(34, 211, 238, 0.12), transparent 30rem),
    linear-gradient(135deg, #1e1b4b 0%, #0f172a 52%, #064e3b 100%);
  isolation: isolate;
}

.marketing-hero-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  inset: -12%;
  transform: translate3d(0, var(--marketing-parallax-y), 0) scale(1.08);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce), (max-width: 767px) {
  .marketing-hero-grid {
    inset: 0;
    transform: none;
    will-change: auto;
  }
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
select,
textarea {
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 0.625rem;
  color: #0f172a;
  line-height: 1.35;
  min-height: 2.75rem;
  padding: 0.625rem 0.875rem;
  width: 100%;
}

select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #475569 50%),
    linear-gradient(135deg, #475569 50%, transparent 50%);
  background-position:
    calc(100% - 1.1rem) 50%,
    calc(100% - 0.75rem) 50%;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

select[multiple],
select[size] {
  background-image: none;
  padding-right: 0.875rem;
}

textarea {
  min-height: 6rem;
}

input::placeholder,
textarea::placeholder {
  color: #64748b;
}

input[type="search"] {
  -webkit-appearance: none;
  appearance: textfield;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
  outline: none;
}

.money-field {
  position: relative;
}

.money-field > span {
  color: #64748b;
  left: 0.875rem;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.money-field > input {
  padding-left: 2.35rem !important;
}

.form-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 0.75rem;
}

.sticky-form-actions {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0), #0f172a 35%);
  bottom: 0;
  margin-left: -0.25rem;
  margin-right: -0.25rem;
  padding: 1.25rem 0.25rem 1rem;
  position: sticky;
  z-index: 10;
}

.app-safe-bottom {
  padding-bottom: 2rem;
}

@media (max-width: 767px) {
  body {
    padding-bottom: calc(var(--ios-browser-toolbar-buffer) + var(--ios-safe-bottom));
  }

  .app-safe-bottom {
    padding-bottom: calc(var(--ios-browser-toolbar-buffer) + var(--ios-safe-bottom) + 2rem) !important;
  }

  .sticky-form-actions {
    padding-bottom: calc(var(--ios-browser-toolbar-buffer) + var(--ios-safe-bottom) + 1.5rem);
  }
}

.legal-copy h2 {
  font-weight: 800;
  margin-top: 2.75rem;
}

.legal-copy h2 + p {
  margin-top: 1rem;
}

.legal-copy p + p {
  margin-top: 1rem;
}