/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[3].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[3].use[2]!./node_modules/next/font/local/target.css?{"path":"src/app/layout.tsx","import":"","arguments":[{"src":"./fonts/GeistVF.woff","variable":"--font-geist-sans","weight":"100 900"}],"variableName":"geistSans"} ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
font-family: '__geistSans_1e4310';
src: url(/_next/static/media/4473ecc91f70f139-s.p.woff) format('woff');
font-display: swap;
font-weight: 100 900;
}@font-face {font-family: '__geistSans_Fallback_1e4310';src: local("Arial");ascent-override: 85.83%;descent-override: 20.52%;line-gap-override: 9.33%;size-adjust: 107.19%
}.__className_1e4310 {font-family: '__geistSans_1e4310', '__geistSans_Fallback_1e4310'
}.__variable_1e4310 {--font-geist-sans: '__geistSans_1e4310', '__geistSans_Fallback_1e4310'
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[3].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[3].use[2]!./node_modules/next/font/local/target.css?{"path":"src/app/layout.tsx","import":"","arguments":[{"src":"./fonts/GeistMonoVF.woff","variable":"--font-geist-mono","weight":"100 900"}],"variableName":"geistMono"} ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
font-family: '__geistMono_c3aa02';
src: url(/_next/static/media/463dafcda517f24f-s.p.woff) format('woff');
font-display: swap;
font-weight: 100 900;
}@font-face {font-family: '__geistMono_Fallback_c3aa02';src: local("Arial");ascent-override: 69.97%;descent-override: 16.73%;line-gap-override: 7.61%;size-adjust: 131.49%
}.__className_c3aa02 {font-family: '__geistMono_c3aa02', '__geistMono_Fallback_c3aa02'
}.__variable_c3aa02 {--font-geist-mono: '__geistMono_c3aa02', '__geistMono_Fallback_c3aa02'
}

/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
:root {
  --bg-color: #0b0c10;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;

  --glast-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-hover-bg: rgba(255, 255, 255, 0.06);
  --glass-hover-border: rgba(255, 255, 255, 0.15);

  --plex-color: #e5a00d;
  --wunsch-color: #c084fc;
  --paypal-color: #38bdf8;

  --radius: 16px;
  --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

body {
  color: var(--text-main);
  background-color: var(--bg-color);
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Ambient Animated Background */
.bg-vfx {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.1;
  animation: float 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

.orb-1 {
  width: 600px;
  height: 600px;
  background: var(--plex-color);
  top: -20%;
  left: -10%;
}

.orb-2 {
  width: 500px;
  height: 500px;
  background: var(--wunsch-color);
  bottom: -10%;
  right: -5%;
  animation-duration: 25s;
}

.orb-3 {
  width: 400px;
  height: 400px;
  background: var(--paypal-color);
  top: 40%;
  left: 40%;
  animation-duration: 30s;
  animation-direction: alternate-reverse;
}

@keyframes float {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(100px, 100px) scale(1.1); }
}

main {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 0;
  position: relative;
  z-index: 1;
}

.brand-logo img {
    height: 45px;
    width: auto;
    display: block;
}

.card {
  background: var(--glast-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 32px;
  margin-bottom: 32px;
  transition: var(--transition);
}

.card:hover {
  background: var(--glass-hover-bg);
  border-color: var(--glass-hover-border);
}

.form-group {
  margin-bottom: 24px;
}

label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text-muted);
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="time"],
select {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--glass-border);
  color: #fff;
  font-size: 1rem;
  transition: var(--transition);
}

input:focus, select:focus {
  outline: none;
  border-color: var(--plex-color);
  background: rgba(0, 0, 0, 0.4);
}

button {
  background: var(--plex-color);
  color: #000;
  border: none;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(229, 160, 13, 0.2);
}

button:active {
  transform: translateY(0);
}

.success-msg {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.05);
  border: 1px solid rgba(74, 222, 128, 0.2);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 24px;
  text-align: center;
}

.error-msg {
  color: #f87171;
  background: rgba(248, 113, 113, 0.05);
  border: 1px solid rgba(248, 113, 113, 0.2);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 24px;
  text-align: center;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 60px;
}