/* Base wrapper */
.scroll-wrapper { background:#0f0f0f; color:#FFD700; padding:30px; border-radius:12px; max-width:860px; width:95%; margin:40px auto; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; box-sizing:border-box; border:1px solid #2a2a2a; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.scroll-wrapper *, .scroll-wrapper *::before, .scroll-wrapper *::after { box-sizing:inherit; }

/* Inputs */
.scroll-input, .scroll-wrapper textarea, .scroll-wrapper select, .scroll-wrapper button { width:100%; margin-top:12px; padding:14px; border-radius:10px; border:1px solid #ffd700; background:#1c1c1c; color:#ffd700; font-size:16px; box-sizing:border-box; }
.scroll-wrapper textarea { resize:vertical; min-height:120px; }

/* CTA */
.scroll-cta { background:linear-gradient(135deg, #d4af37, #ffd700); color:#000; font-weight:700; border:none; padding:14px; margin-top:20px; cursor:pointer; border-radius:10px; font-size:18px; transition:transform .2s ease, box-shadow .2s ease; box-shadow:0 6px 20px rgba(212,175,55,.25); }
.scroll-cta:hover { transform:scale(1.02); box-shadow:0 10px 28px rgba(212,175,55,.35); }

#scroll-thankyou { background:#072b07; padding:20px; border:1px solid #2eb82e; color:#b6fbb6; text-align:center; font-size:16px; border-radius:10px; margin-top:20px; }

.cf-turnstile { margin:20px 0; }
.scroll-wrapper label { display:block; margin-top:12px; font-size:14px; color:#f4e7a1; }
#scroll-location { margin-top:16px; font-size:14px; color:#FFD700; text-align:center; }
#scroll-geohash a { color:#9ad9ff; }

/* Animatio skin */
.scroll-animatio { color:#e9d7ff; border:1px solid #3b2e4f; }
.scroll-animatio .scroll-input, .scroll-animatio textarea, .scroll-animatio select { border-color:#b277ff; background:#14121a; color:#e9d7ff; }
.scroll-animatio .scroll-cta { background:linear-gradient(135deg, #e879f9, #6366f1); color:#fff; box-shadow:0 10px 28px rgba(232,121,249,.25); }
.scroll-animatio .scroll-cta:hover { box-shadow:0 14px 36px rgba(99,102,241,.35); }
.scroll-animatio label { color:#cbb8ff; }

/* Higher contrast */
.scroll-animatio .scroll-hdr{font-size:24px;font-weight:900;color:#ffffff;letter-spacing:.2px}
.scroll-animatio .scroll-sub{margin-top:6px;color:#e8deff;font-size:14px}

/* Placeholder & focus */
.scroll-animatio .scroll-input::placeholder,
.scroll-animatio textarea::placeholder{color:#c9baff;opacity:.95}
.scroll-animatio .scroll-input:focus,
.scroll-animatio select:focus,
.scroll-animatio textarea:focus{outline:0;border-color:#e0c9ff;box-shadow:0 0 0 3px rgba(199,166,255,.25)}

/* Selects */
.scroll-animatio select{background:#15121b;color:#f7f4ff;border-color:#c7a6ff}
.scroll-animatio option{background:#14101d;color:#f7f4ff}

/* Price row */
.price-row{display:flex;gap:10px;align-items:center;margin-top:12px}
.price-row .cur-select{flex:0 0 150px}
.price-row .price-input-wrap{position:relative;flex:1}
.price-row .price-prefix{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#cbb8ff;pointer-events:none}
.price-row .price-input{padding-left:32px}

/* Cross-browser anti-clipping fix (no @supports needed) */
.scroll-input,
.price-input,
.scroll-wrapper select,
.scroll-wrapper button {
  line-height: 1.4;         /* adds breathing room for glyph ascenders/descenders */
  height: auto;             /* avoid hard-locked heights that crop text */
  padding-top: 0.6em;       /* mild vertical boost; pairs well with 16px base font */
  padding-bottom: 0.6em;
  overflow: visible;        /* prevent accidental clipping */
  -webkit-font-smoothing: antialiased; /* improve Chrome/Edge rendering */
  -moz-osx-font-smoothing: grayscale;  /* keep Firefox looking consistent */
}

/* Optional: inputs sometimes need explicit vertical centering for selects */
.scroll-wrapper select { vertical-align: middle; }

/* If you see oversized buttons, you can limit them separately without hurting inputs */
.scroll-wrapper button { padding-top: 0.5em; padding-bottom: 0.5em; }