@layer theme,base;@layer components{.token-grid-wrapper{container-type:inline-size}.token-grid{grid-template-columns:repeat(2,1fr);gap:.75rem;display:grid}@container (min-width:34rem){.token-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}.token-pack-card{background:linear-gradient(to bottom right, oklch(from var(--color-gray-700) l c h / .3), oklch(from var(--color-gray-800) l c h / .3));height:100%;-webkit-backdrop-filter:blur(var(--blur-xs));backdrop-filter:blur(var(--blur-xs));border:2px solid oklch(from var(--color-gray-600) l c h / .5);transition:background var(--duration-slow) ease, border-color var(--duration-slow) ease, box-shadow var(--duration-slow) ease, transform var(--duration-slow) ease;padding:1rem}.token-pack-card:hover{background:linear-gradient(to bottom right, oklch(from var(--color-gray-600) l c h / .3), oklch(from var(--color-gray-700) l c h / .3));border-color:oklch(from var(--color-gray-500) l c h / .6);box-shadow:var(--shadow-md);transform:scale(1.05)}.token-pack-card.is-selected{background:linear-gradient(to bottom right, oklch(from var(--color-brand-primary) l c h / .2), oklch(from var(--color-brand-secondary) l c h / .2));border-color:oklch(from var(--color-brand-primary-400) l c h / .5);box-shadow:0 20px 25px -5px oklch(from var(--color-brand-secondary) l c h / .2);transform:scale(1.05)}.token-pack-card.is-selected:hover{transform:scale(1.05)}@container (min-width:34rem){.token-pack-card{padding:1.5rem}}@container (min-width:52rem){.token-pack-card{padding:2rem}}.token-pack-content{flex-grow:1;justify-content:center;gap:.5rem}@container (min-width:34rem){.token-pack-content{gap:1rem}}.token-pack-card .token-price-text{font-size:1.5rem}@container (min-width:34rem){.token-pack-card .token-price-text{font-size:1.875rem}}.token-pack-card-tint{background:linear-gradient(to bottom right, oklch(from var(--color-brand-primary) l c h / .05), oklch(from var(--color-brand-secondary) l c h / .05));opacity:0;transition:opacity var(--duration-slow) ease}.token-pack-card:hover .token-pack-card-tint{opacity:1}.token-deal-badge{background:linear-gradient(to right, var(--color-warning-400), var(--color-danger-400));box-shadow:var(--shadow-sm);transform:rotate(-12deg)}.token-deal-badge.is-popular{background:linear-gradient(to right, var(--color-brand-primary-500), var(--color-brand-primary-400))}.token-deal-badge.is-savings{background:linear-gradient(to right, var(--color-success-500), var(--color-success-400))}.token-pack-icon{justify-content:center;align-items:center;display:flex}.token-pack-icon.icon-sm svg{width:1.5rem;height:1.5rem}.token-pack-icon.icon-md svg{width:2rem;height:2rem}.token-pack-icon.icon-lg svg{width:2.75rem;height:2.75rem}.token-pack-icon.icon-xl svg{width:3.5rem;height:3.5rem}.token-pack-card .token-price-hover{color:var(--color-white);transition:color var(--duration-slow) ease;font-size:1.25rem}@container (min-width:32rem){.token-pack-card .token-price-hover{font-size:1.5rem}}.token-pack-card:hover .token-price-hover{color:var(--color-brand-primary-300)}.token-pack-select{color:var(--color-white);background-color:oklch(from var(--color-gray-500) l c h / .5);transition:background-color var(--duration-slow) ease, border-color var(--duration-slow) ease, box-shadow var(--duration-slow) ease;border:1px solid #ffffff40;border:1px solid lab(100% 0 0/.25)}.token-pack-card:hover .token-pack-select:not(.is-active){background-color:oklch(from var(--color-gray-400) l c h / .55);border-color:#fff6;border-color:lab(100% 0 0/.4)}.token-pack-select.is-active{background:var(--gradient-brand-lr);box-shadow:0 4px 14px -4px oklch(from var(--color-brand-secondary) l c h / .5);border-color:#0000}.token-warning-panel{background:linear-gradient(to bottom right, oklch(from var(--color-warning-800) l c h / .3), oklch(from var(--color-warning-700) l c h / .2), oklch(from var(--color-warning-900) l c h / .3));-webkit-backdrop-filter:blur(var(--blur-xs));backdrop-filter:blur(var(--blur-xs));border:1px solid oklch(from var(--color-warning-500) l c h / .3);box-shadow:0 20px 25px -5px oklch(from var(--color-warning-500) l c h / .1)}.token-warning-cta{background:linear-gradient(to right, var(--color-warning-500), var(--color-danger-500));transition:background var(--duration-slow) ease, transform var(--duration-slow) ease}.token-warning-cta:hover{background:linear-gradient(to right, var(--color-warning-400), var(--color-danger-400));transform:scale(1.05)}.token-warning-cta:active{transform:scale(.95)}}@layer utilities;
