.ui-icon-block-btn[data-v-c93ffbc4] {
--pad-y-sm: 8px; --pad-x-sm: 10px;
--pad-y-md: 12px; --pad-x-md: 16px;
--pad-y-lg: 20px; --pad-x-lg: 60px;
--square-sm: 40px; /* icon-only */
--square-md: 48px;
--square-lg: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--color-accent);
color: var(--color-primary);
border: none;
border-radius: var(--radius-sm);
/* Base shadows */
box-shadow:
inset 0 0 7px rgba(0, 0, 0, 0.08),
0 4px 4px rgba(164, 213, 73, 0.3);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transform-origin: center;
transition:
transform 400ms cubic-bezier(0.2, 0.6, 0.2, 1),
box-shadow 400ms cubic-bezier(0.2, 0.6, 0.2, 1);
will-change: transform, box-shadow;
}
.ui-icon-block-btn.radius-sm[data-v-c93ffbc4] { border-radius: var(--radius-sm);
}
.ui-icon-block-btn.radius-md[data-v-c93ffbc4] { border-radius: var(--radius-md);
}
.ui-icon-block-btn.radius-lg[data-v-c93ffbc4] { border-radius: var(--radius-lg);
}
.ui-icon-block-btn.size-sm[data-v-c93ffbc4] { padding: var(--pad-y-sm) var(--pad-x-sm);
}
.ui-icon-block-btn.size-md[data-v-c93ffbc4] { padding: var(--pad-y-md) var(--pad-x-md);
}
.ui-icon-block-btn.size-lg[data-v-c93ffbc4] { padding: var(--pad-y-lg) var(--pad-x-lg);
}
.ui-icon-block-btn.is-square.size-sm[data-v-c93ffbc4] { width: var(--square-sm); height: var(--square-sm); padding: 0;
}
.ui-icon-block-btn.is-square.size-md[data-v-c93ffbc4] { width: var(--square-md); height: var(--square-md); padding: 0;
}
.ui-icon-block-btn.is-square.size-lg[data-v-c93ffbc4] { width: var(--square-lg); height: var(--square-lg); padding: 0;
}
.ui-icon-block-btn .label[data-v-c93ffbc4] {
color: #1e1e1e;
font-weight: 700;
font-size: var(--font-size-16);
}
.ui-icon-block-btn.size-sm .label[data-v-c93ffbc4] { font-size: var(--font-size-14);
}
.ui-icon-block-btn.size-lg .label[data-v-c93ffbc4] { font-size: var(--font-size-20);
}
.ui-icon-block-btn .icon-slot[data-v-c93ffbc4] { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; flex: 0 0 auto;
}
.ui-icon-block-btn[data-v-c93ffbc4]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px;
}
.ui-icon-block-btn[data-v-c93ffbc4]:hover:not(:disabled) {
transform: scale(1.01);
/* Brighter, larger outer glow on hover */
box-shadow:
inset 0 0 7px rgba(0, 0, 0, 0.08),
0 4px 14px rgba(164, 213, 73, 0.5);
}
.ui-icon-block-btn[data-v-c93ffbc4]:active:not(:disabled) {
transform: scale(0.985);
/* Stronger inner shadow on press, modest outer */
box-shadow:
inset 0 0 10px rgba(0, 0, 0, 0.18),
0 2px 6px rgba(164, 213, 73, 0.35);
}
/* Disabled state */
.ui-icon-block-btn[data-v-c93ffbc4]:disabled,
.ui-icon-block-btn[aria-disabled="true"][data-v-c93ffbc4] {
opacity: .5;
cursor: not-allowed;
pointer-events: none;
transform: none;
box-shadow:
inset 0 0 7px rgba(0, 0, 0, 0.04),
0 2px 4px rgba(164, 213, 73, 0.2);
}
@media (prefers-reduced-motion: reduce) {
.ui-icon-block-btn[data-v-c93ffbc4] { transition: none;
}
}
/* No extra styles */
/* no styles */
/* Payment Step Styles are handled on the dedicated checkout page */
/* Root wrapper for transition compatibility */
.start-view[data-v-fc38ac1e] {
width: 100%;
}
/* Page background */
.checkout[data-v-fc38ac1e] {
--topbar-h: 72px;
--hero-h: 40px;
--pad-top: 24px;
--pad-bottom: 48px;
--hero-gap: 16px;
background: transparent;
position: relative;
padding: 0;
padding-top: 48px;
padding-bottom: 40px;
box-sizing: border-box;
display: grid;
gap: 28px;
}
/* Local top bar */
.checkout__topbar[data-v-fc38ac1e] {
position: fixed;
left: 40px;
right: 40px;
top: var(--pad-top);
height: var(--topbar-h);
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 16px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border: 1px solid #fff;
}
.topbar-inner[data-v-fc38ac1e] {
position: relative;
display: flex;
align-items: center;
gap: 16px;
width: 100%;
}
.left[data-v-fc38ac1e] {
flex: 3 1 0;
display: flex;
align-items: center;
}
.right[data-v-fc38ac1e] {
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: flex-end;
}
.brand[data-v-fc38ac1e] {
display: inline-flex;
align-items: center;
}
.logo[data-v-fc38ac1e] {
height: 40px;
width: auto;
}
.topbar__left-deco[data-v-fc38ac1e] {
position: absolute;
left: 16px;
width: 243px;
height: 40px;
opacity: 0.9;
background: url('/src/media/topbar-vector.svg') no-repeat left center / contain;
}
.topbar__center[data-v-fc38ac1e] {
color: #4a48e9;
font-weight: 500;
font-size: 18px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* Hero (back button) */
.checkout__hero[data-v-fc38ac1e] {
display: flex;
align-items: center;
}
.hero__back[data-v-fc38ac1e] {
display: inline-flex;
align-items: center;
gap: 15px;
height: 100%;
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
.hero__back-icon[data-v-fc38ac1e] {
width: 40px;
height: 40px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
}
.hero__back-icon svg[data-v-fc38ac1e] {
display: block;
width: 50%;
height: 50%;
}
.hero__back-text[data-v-fc38ac1e] {
color: #fff;
font-size: 32px;
font-weight: 600;
}
/* Main container */
.checkout__container[data-v-fc38ac1e] {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 28px;
align-items: start;
height: auto;
min-height: 802px;
margin-top: 0;
overflow: visible;
}
/* Panels */
.panel[data-v-fc38ac1e] {
background: #fff;
border-radius: 28px;
padding: 28px;
box-sizing: border-box;
}
.panel--left[data-v-fc38ac1e] {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.panel--right[data-v-fc38ac1e] {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 42px;
}
.panel[data-v-fc38ac1e] {
overflow: hidden;
}
.panel--top[data-v-fc38ac1e] {
display: none;
}
.panel__header[data-v-fc38ac1e] {
display: flex;
align-items: center;
justify-content: space-between;
}
.panel__top-group[data-v-fc38ac1e] {
display: flex;
flex-direction: column;
gap: 28px;
}
.panel__title[data-v-fc38ac1e] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
margin: 0;
}
/* Buttons */
.btn[data-v-fc38ac1e] {
height: 36px;
padding: 0 24px;
border-radius: 8px;
cursor: pointer;
border: 1px solid rgba(30, 30, 30, 0.25);
background: transparent;
font-weight: 700;
}
.btn--primary[data-v-fc38ac1e] {
background: #c3fd56;
border-color: #c3fd56;
color: #1e1e1e;
}
.btn--ghost[data-v-fc38ac1e] {
background: transparent;
color: #1e1e1e;
}
.btn--chooser[data-v-fc38ac1e] {
width: 276px;
justify-content: center;
}
/* Tariff header (blue block) */
.tariff-header[data-v-fc38ac1e] {
background: #4a48e9;
border-radius: 28px;
min-height: 193px;
padding: 28px;
color: #fff;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
.header-art[data-v-fc38ac1e] {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 1;
}
.flare[data-v-fc38ac1e] {
position: absolute;
right: -190px;
top: 75px;
transform: translateY(-50%);
opacity: 1;
height: 500px;
max-width: none;
}
.tariff__badge[data-v-fc38ac1e] {
display: inline-block;
padding: 6px 16px;
border-radius: 999px;
backdrop-filter: blur(10px);
font-weight: 500;
margin-block-start: 0;
margin-block-end: 0;
}
.tariff__name[data-v-fc38ac1e] {
margin: 16px 0 0;
font-size: 64px;
line-height: 0.9;
font-weight: 600;
letter-spacing: -0.01em;
}
.tariff__features[data-v-fc38ac1e] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.feature-group[data-v-fc38ac1e] {
display: flex;
flex-direction: column;
gap: 14px;
}
.group__title[data-v-fc38ac1e] {
color: rgba(30, 30, 30, 0.9);
font-size: 16px;
font-weight: 500;
}
.services-pills[data-v-fc38ac1e] {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pill[data-v-fc38ac1e] {
background: rgba(235, 235, 235, 0.5);
display: flex;
align-items: center;
gap: 6px;
padding: 8px;
border-radius: 8px;
}
.svc[data-v-fc38ac1e] {
width: 24px;
height: 24px;
border-radius: 4px;
overflow: hidden;
display: grid;
place-items: center;
background: #f5f5f5;
}
.svc-img[data-v-fc38ac1e] {
width: 100%;
height: 100%;
display: block;
}
.stickers[data-v-fc38ac1e] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
}
.sticker[data-v-fc38ac1e] {
background: rgba(235, 235, 235, 0.5);
border-radius: 16px;
padding: 16px;
display: grid;
gap: 8px;
justify-items: start;
}
.sticker-row[data-v-fc38ac1e] {
display: flex;
align-items: center;
}
.sticker__value[data-v-fc38ac1e] {
width: 27px;
height: 27px;
border-radius: 23.047px;
background: #1e1e1e;
color: #fff;
display: grid;
place-items: center;
font-weight: 700;
font-size: 16px;
line-height: 1.1;
letter-spacing: -0.48px;
text-align: center;
border: 2px solid #ebebeb;
margin-right: -10.8px;
z-index: 2;
position: relative;
}
.sticker__ticket[data-v-fc38ac1e] {
width: 24px;
height: 24px;
border-radius: 6px;
display: block;
}
.sticker__label[data-v-fc38ac1e] {
color: rgba(30, 30, 30, 0.9);
font-size: 14px;
}
.tariff__limits[data-v-fc38ac1e] {
display: flex;
flex-direction: column;
gap: 12px;
}
.limits-grid[data-v-fc38ac1e] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.limit[data-v-fc38ac1e] {
background: rgba(235, 235, 235, 0.5);
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
border-radius: 16px;
padding: 16px;
display: grid;
row-gap: 8px;
position: relative;
}
.limit__value[data-v-fc38ac1e] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
}
.limit__label[data-v-fc38ac1e] {
font-size: 18px;
color: rgba(30, 30, 30, 0.9);
}
.limit__icon[data-v-fc38ac1e] {
position: absolute;
right: 16px;
top: 16px;
width: 22px;
height: 22px;
background-repeat: no-repeat;
background-position: center;
background-size: 22px 22px;
}
.icon-data[data-v-fc38ac1e] {
background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3e%3cmask%20id='mask0_27_380'%20style='mask-type:alpha'%20maskUnits='userSpaceOnUse'%20x='0'%20y='0'%20width='12'%20height='12'%3e%3crect%20width='12'%20height='12'%20fill='%23D9D9D9'/%3e%3c/mask%3e%3cg%20mask='url(%23mask0_27_380)'%3e%3cpath%20d='M0.75%2010.0002V6.00024H2.25V10.0002H0.75ZM3.75%2010.0002V4.75024H5.25V10.0002H3.75ZM6.75%2010.0002V3.50024H8.25V10.0002H6.75ZM9.75%2010.0002V2.00024H11.25V10.0002H9.75Z'%20fill='%231E1E1E'/%3e%3c/g%3e%3c/svg%3e");
}
.icon-minutes[data-v-fc38ac1e] {
background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3e%3cmask%20id='mask0_27_387'%20style='mask-type:alpha'%20maskUnits='userSpaceOnUse'%20x='0'%20y='0'%20width='12'%20height='12'%3e%3crect%20width='12'%20height='12'%20fill='%23D9D9D9'/%3e%3c/mask%3e%3cg%20mask='url(%23mask0_27_387)'%3e%3cpath%20d='M9.975%207.97466L9.2%207.19966C9.56667%206.85799%209.85417%206.45382%2010.0625%205.98716C10.2708%205.52049%2010.375%205.02466%2010.375%204.49966C10.375%203.97466%2010.2708%203.48299%2010.0625%203.02466C9.85417%202.56632%209.56667%202.16632%209.2%201.82466L9.975%201.02466C10.4417%201.46632%2010.8125%201.98716%2011.0875%202.58716C11.3625%203.18716%2011.5%203.82466%2011.5%204.49966C11.5%205.17466%2011.3625%205.81216%2011.0875%206.41216C10.8125%207.01216%2010.4417%207.53299%209.975%207.97466ZM8.375%206.37466L7.575%205.57466C7.725%205.43299%207.84583%205.27257%207.9375%205.09341C8.02917%204.91424%208.075%204.71633%208.075%204.49966C8.075%204.28299%208.02917%204.08508%207.9375%203.90591C7.84583%203.72674%207.725%203.56632%207.575%203.42466L8.375%202.62466C8.64167%202.86632%208.85%203.14758%209%203.46841C9.15%203.78924%209.225%204.13299%209.225%204.49966C9.225%204.86633%209.15%205.21007%209%205.53091C8.85%205.85174%208.64167%206.13299%208.375%206.37466ZM4.5%206.49966C3.95%206.49966%203.47917%206.30383%203.0875%205.91216C2.69583%205.52049%202.5%205.04966%202.5%204.49966C2.5%203.94966%202.69583%203.47882%203.0875%203.08716C3.47917%202.69549%203.95%202.49966%204.5%202.49966C5.05%202.49966%205.52083%202.69549%205.9125%203.08716C6.30417%203.47882%206.5%203.94966%206.5%204.49966C6.5%205.04966%206.30417%205.52049%205.9125%205.91216C5.52083%206.30383%205.05%206.49966%204.5%206.49966ZM0.5%2010.4997V9.09966C0.5%208.82466%200.570833%208.56633%200.7125%208.32466C0.854167%208.08299%201.05%207.89966%201.3%207.77466C1.725%207.55799%202.20417%207.37466%202.7375%207.22466C3.27083%207.07466%203.85833%206.99966%204.5%206.99966C5.14167%206.99966%205.72917%207.07466%206.2625%207.22466C6.79583%207.37466%207.275%207.55799%207.7%207.77466C7.95%207.89966%208.14583%208.08299%208.2875%208.32466C8.42917%208.56633%208.5%208.82466%208.5%209.09966V10.4997H0.5Z'%20fill='%231E1E1E'/%3e%3c/g%3e%3c/svg%3e");
}
.icon-sms[data-v-fc38ac1e] {
background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3e%3cmask%20id='mask0_27_394'%20style='mask-type:alpha'%20maskUnits='userSpaceOnUse'%20x='0'%20y='0'%20width='12'%20height='12'%3e%3crect%20width='12'%20height='12'%20fill='%23D9D9D9'/%3e%3c/mask%3e%3cg%20mask='url(%23mask0_27_394)'%3e%3cpath%20d='M1%2010.9998V1.99976C1%201.72476%201.09792%201.48934%201.29375%201.29351C1.48958%201.09767%201.725%200.999756%202%200.999756H10C10.275%200.999756%2010.5104%201.09767%2010.7063%201.29351C10.9021%201.48934%2011%201.72476%2011%201.99976V7.99976C11%208.27476%2010.9021%208.51017%2010.7063%208.70601C10.5104%208.90184%2010.275%208.99976%2010%208.99976H3L1%2010.9998ZM3%206.99976H7V5.99976H3V6.99976ZM3%205.49976H9V4.49976H3V5.49976ZM3%203.99976H9V2.99976H3V3.99976Z'%20fill='%231E1E1E'/%3e%3c/g%3e%3c/svg%3e");
}
.tariff__beautiful-number[data-v-fc38ac1e] {
display: flex;
gap: 8px;
align-items: center;
}
.tariff__beautiful-number .label[data-v-fc38ac1e] {
color: rgba(30, 30, 30, 0.9);
font-size: 16px;
font-weight: 500;
}
.chip[data-v-fc38ac1e] {
padding: 4px 8px;
border: 1px solid #fff;
border-radius: 6px;
color: #1e1e1e;
font-weight: 600;
}
.chip--bronze[data-v-fc38ac1e] {
background: linear-gradient(58.4162deg, #ffccb2 4.5866%, #d9ad98 34.559%, #ffccb2 64.532%, #d9ad98 95.413%);
}
.chip--silver[data-v-fc38ac1e] {
background: linear-gradient(50.9915deg, #d9d9d9 4.6215%, #ffffff 35.813%, #d9d9d9 66.088%, #ffffff 96.362%);
}
.chip--gold[data-v-fc38ac1e] {
background: linear-gradient(59deg, #ffd480 5%, #d9b56c 35%, #ffd480 65%, #d9b56c 96%);
}
/* Tariff header color variants to match PricingGrid */
.tariff-header.is-green[data-v-fc38ac1e] {
background: #c3fd56;
color: #1e1e1e;
}
.tariff-header.is-blue[data-v-fc38ac1e] {
background: var(--color-primary);
color: #fff;
}
.tariff-header.is-dark[data-v-fc38ac1e] {
background: rgba(235, 235, 235, 1);
color: #1e1e1e;
}
.tariff-header.is-black[data-v-fc38ac1e] {
background: #1e1e1e;
color: #fff;
}
.tariff-header.is-green .tariff__badge[data-v-fc38ac1e] {
background-color: rgba(255, 255, 255, 0.57);
color: #1e1e1e;
}
.tariff-header.is-blue .tariff__badge[data-v-fc38ac1e],
.tariff-header.is-dark .tariff__badge[data-v-fc38ac1e] {
background-color: rgba(30, 30, 30, 0.57);
color: #fff;
}
.tariff-header.is-black .tariff__badge[data-v-fc38ac1e] {
background-color: rgba(255, 255, 255, 0.25);
color: #fff;
}
.panel__price[data-v-fc38ac1e] {
background: #fff;
color: #1e1e1e;
border-radius: 16px;
padding: 16px 28px;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid rgba(30, 30, 30, 0.25);
}
.price__label[data-v-fc38ac1e] {
font-size: 24px;
font-weight: 600;
letter-spacing: -0.02em;
}
.price__value[data-v-fc38ac1e] {
font-size: 36px;
font-weight: 700;
letter-spacing: -0.02em;
}
/* Right: form */
.form[data-v-fc38ac1e] {
display: grid;
gap: 28px;
}
.field[data-v-fc38ac1e] {
display: block;
background: rgba(235, 235, 235, 0.5);
padding: 28px;
border-radius: 16px;
}
.input[data-v-fc38ac1e] {
width: 100%;
padding: 0;
box-sizing: border-box;
border: 0;
background: transparent;
outline: none;
font-size: 18px;
color: #1e1e1e;
}
.input[data-v-fc38ac1e]::placeholder {
color: rgba(30, 30, 30, 0.4);
}
/* Field error state */
.field--error[data-v-fc38ac1e] {
border: 1px solid #ff3b30;
}
.field__error[data-v-fc38ac1e] {
display: block;
color: #ff3b30;
font-size: 12px;
margin-top: 6px;
}
.agreements[data-v-fc38ac1e] {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 20px;
color: rgba(30, 30, 30, 0.6);
font-size: 14px;
}
.agreements a[data-v-fc38ac1e] {
color: inherit;
text-decoration: underline;
}
.agree-row[data-v-fc38ac1e] {
display: flex;
align-items: flex-start;
gap: 8px;
}
.agree-row--note .agree__dot[data-v-fc38ac1e] {
width: 16px;
height: 16px;
border-radius: 999px;
background: #4a48e9;
opacity: 0.7;
margin-top: 4px;
}
.agree__checkbox[data-v-fc38ac1e] {
min-width: 16px;
min-height: 16px;
border: 1px solid rgba(30, 30, 30, 0.25);
border-radius: 4px;
appearance: none;
background: #fff;
margin-top: 3px;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
transform 0.08s ease,
box-shadow 0.2s ease;
will-change: transform;
}
.agree__checkbox[data-v-fc38ac1e]:hover {
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06);
}
.agree__checkbox[data-v-fc38ac1e]:active {
transform: scale(0.92);
}
.agree__checkbox[data-v-fc38ac1e]:checked {
background-color: #000;
border-color: #000;
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
background-image: url('data:image/svg+xml;utf8,');
animation: checkbox-pop-fc38ac1e 0.18s ease;
}
.agree__checkbox[data-v-fc38ac1e]:focus-visible {
outline: none;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
}
.agree__checkbox.is-error[data-v-fc38ac1e] {
border-color: #ff3b30;
box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.15);
animation: error-pulse-fc38ac1e 0.5s ease;
}
.agreements-list[data-v-fc38ac1e] {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Single agreement row (label) */
.agree[data-v-fc38ac1e] {
display: flex;
align-items: flex-start;
gap: 8px;
color: rgba(30, 30, 30, 0.6);
font-size: 14px;
}
.agree a[data-v-fc38ac1e] {
color: inherit;
text-decoration: underline;
}
/* Make UiIconBlockButton full-width inside form */
.form[data-v-fc38ac1e] .ui-icon-block-btn,
.verify-form[data-v-fc38ac1e] .ui-icon-block-btn {
width: 100%;
}
.form-row[data-v-fc38ac1e] {
display: flex;
flex-direction: column;
gap: 12px;
}
.infinity-icon[data-v-fc38ac1e] {
width: 36px;
display: block;
}
/* Responsive (portrait/square only, by aspect ratio) */
@media (max-aspect-ratio: 1/1) {
.checkout__container[data-v-fc38ac1e] {
grid-template-columns: 1fr;
}
.panel--left[data-v-fc38ac1e] {
height: 750px;
}
}
.chooser-wrapper[data-v-fc38ac1e] {
position: relative;
display: inline-block;
}
.chooser-popover[data-v-fc38ac1e] {
position: absolute;
left: 0;
top: 100%;
margin-top: 4px;
z-index: 50;
width: 100%;
background: #fff;
border-radius: 0 0 8px 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
padding: 16px;
padding-top: 24px;
box-sizing: border-box;
}
.chooser-card[data-v-fc38ac1e] {
background: #fff;
border-radius: 0 0 8px 8px;
padding: 16px;
padding-top: 24px;
display: grid;
gap: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.btn--chooser[data-v-fc38ac1e] {
position: relative;
z-index: 100;
}
.chooser-title[data-v-fc38ac1e] {
margin: 0;
font-size: 14px;
color: rgba(30, 30, 30, 0.9);
opacity: 0.6;
}
.chooser-item[data-v-fc38ac1e] {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 40px;
padding: 0 16px;
border-radius: 8px;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
}
.chooser-item.is-active[data-v-fc38ac1e] {
background: #f5f5f5;
}
.chooser-item-title[data-v-fc38ac1e] {
font-size: 16px;
color: #1e1e1e;
font-weight: 500;
}
.chooser-item-arrow[data-v-fc38ac1e] {
width: 7px;
height: 10.5px;
background-repeat: no-repeat;
background-position: center;
background-size: 7px 10.5px;
filter: none;
background-image: url("data:image/svg+xml;utf8,");
}
/* Mobile specific layout (portrait/square only, up to tablet AR) */
@media (max-aspect-ratio: 3/4) {
/* Mobile chooser overlay */
.mobile-chooser[data-v-fc38ac1e] {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: grid;
place-items: center;
padding: 16px;
}
.mobile-chooser__dialog[data-v-fc38ac1e] {
background: #fff;
border-radius: 20px;
width: 100%;
max-width: 360px;
max-height: 85vh;
display: grid;
grid-template-rows: auto 1fr;
gap: 16px;
padding: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.mobile-chooser__topbar[data-v-fc38ac1e] {
display: flex;
align-items: center;
justify-content: space-between;
}
.mobile-chooser__title[data-v-fc38ac1e] {
font-size: 16px;
font-weight: 500;
color: #1e1e1e;
}
.mobile-chooser__close[data-v-fc38ac1e] {
width: 24px;
height: 24px;
border: 0;
padding: 0;
border-radius: 999px;
background: #1e1e1e;
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
}
.mobile-chooser__close-icon[data-v-fc38ac1e] {
width: 12px;
height: 12px;
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
background-image: url("data:image/svg+xml;utf8,");
}
.mobile-chooser__list[data-v-fc38ac1e] {
overflow: auto;
display: grid;
gap: 12px;
}
.mobile-chooser__item[data-v-fc38ac1e] {
background: transparent;
border: 0;
padding: 0;
text-align: inherit;
cursor: pointer;
}
.mobile-chooser .tariff-header[data-v-fc38ac1e] {
min-height: 107px;
padding: 12px;
border-radius: 16px;
}
.mobile-chooser .tariff__name[data-v-fc38ac1e] {
font-size: 18px;
line-height: 0.9;
}
.limit[data-v-fc38ac1e] {
padding: 12px;
border-radius: 8px;
}
.limits-grid[data-v-fc38ac1e] {
gap: 4px;
}
.limit__icon[data-v-fc38ac1e] {
width: 12px;
height: 12px;
background-size: 12px 12px;
}
.limit__value[data-v-fc38ac1e] {
font-size: 16px;
}
.svc[data-v-fc38ac1e] {
width: 20px;
height: 20px;
}
.group__title[data-v-fc38ac1e] {
font-size: 12px;
}
.services-pills[data-v-fc38ac1e] {
gap: 4px;
}
.services-pills .pill[data-v-fc38ac1e] {
background-color: white;
padding: 6px;
}
.agree[data-v-fc38ac1e] {
font-size: 10px;
}
.agree__checkbox[data-v-fc38ac1e] {
min-width: 14px;
min-height: 14px;
}
.field[data-v-fc38ac1e] {
padding: 12px 18px;
border-radius: 12px;
}
.input[data-v-fc38ac1e] {
font-size: 14px;
}
.flare[data-v-fc38ac1e] {
height: 250px;
right: -70px;
top: 50px;
transform: translateY(-50%);
}
.tariff__features[data-v-fc38ac1e] {
margin: 0;
}
.tariff__badge[data-v-fc38ac1e] {
font-size: 12px;
}
.hero__back[data-v-fc38ac1e] {
gap: 8px;
}
.panel__header[data-v-fc38ac1e] {
padding-bottom: 16px;
}
.btn--chooser[data-v-fc38ac1e] {
width: auto;
padding: 4px 12px;
}
.limit[data-v-fc38ac1e] {
background-color: white;
}
.sticker[data-v-fc38ac1e] {
background-color: white;
}
.panel__title[data-v-fc38ac1e] {
font-size: 16px;
}
.checkout[data-v-fc38ac1e] {
gap: 16px;
}
/* Use column flow to control order on mobile */
.checkout__container[data-v-fc38ac1e] {
display: flex;
flex-direction: column;
gap: 0;
}
.checkout__container[data-v-fc38ac1e] {
min-height: auto;
}
.panel--top[data-v-fc38ac1e] {
display: block;
}
.panel--stack[data-v-fc38ac1e] {
position: sticky;
top: 8px;
}
/* Stacking: later panels appear above earlier ones */
.panel--top[data-v-fc38ac1e] {
z-index: 1;
margin: 0;
}
.panel--right[data-v-fc38ac1e] {
z-index: 2;
margin: 0;
order: 1;
gap: 16px;
}
.panel--left[data-v-fc38ac1e] {
z-index: 3;
margin: 16px 0 0;
order: 2;
}
/* Panel sizing and spacing by content */
.panel[data-v-fc38ac1e] {
padding: 16px;
border-radius: 16px;
}
.panel--left[data-v-fc38ac1e],
.panel--right[data-v-fc38ac1e] {
height: auto;
}
.panel--left[data-v-fc38ac1e] {
display: block;
justify-content: initial;
width: 100%;
}
.panel__conditions-title[data-v-fc38ac1e] {
display: block;
font-size: 18px;
font-weight: 600;
color: #1e1e1e;
margin: 0 0 12px 0;
}
/* Left panel: ensure features container is transparent */
.panel--left .tariff__features[data-v-fc38ac1e] {
background: transparent;
padding: 0;
}
/* Left panel: grey subpanels (separate panels for features and stickers) */
.panel--left .feature-group[data-v-fc38ac1e],
.panel--left > .tariff__limits[data-v-fc38ac1e],
.panel--left > .tariff__beautiful-number[data-v-fc38ac1e] {
background: #f5f5f5;
border-radius: 16px;
padding: 12px;
gap: 8px;
border: 0;
margin-bottom: 0;
}
.panel--left .feature-group[data-v-fc38ac1e] {
margin-bottom: 12px;
}
.panel--left > .panel__price[data-v-fc38ac1e] {
border-radius: 16px;
padding: 8px 12px;
gap: 8px;
margin-bottom: 0;
}
.panel--left > .tariff__limits[data-v-fc38ac1e] {
margin-bottom: 12px;
}
.panel--left > .tariff__beautiful-number[data-v-fc38ac1e] {
margin-bottom: 12px;
}
.tariff__beautiful-number .label[data-v-fc38ac1e] {
font-size: 12px;
}
.tariff__beautiful-number .chip[data-v-fc38ac1e] {
font-size: 14px;
padding: 2px 6px;
margin-left: auto;
}
/* Mobile: VIP block as separate grey panel */
.panel--left > .vip-panel[data-v-fc38ac1e] {
background: #f5f5f5;
border-radius: 16px;
padding: 12px;
margin-bottom: 12px;
}
.vip-panel .label[data-v-fc38ac1e] {
font-size: 12px;
}
/* Ensure price text sizes fit mobile */
.panel--left .price__label[data-v-fc38ac1e] {
font-size: 18px;
}
.panel--left .price__value[data-v-fc38ac1e] {
font-size: 28px;
}
/* Reduce header name size within mobile top panel */
.panel--top .tariff__name[data-v-fc38ac1e] {
font-size: 28px;
}
.panel--top .tariff-header[data-v-fc38ac1e] {
min-height: 105px;
padding: 16px;
border-radius: 16px;
}
.tariff__features[data-v-fc38ac1e] {
grid-template-columns: 1fr;
gap: 0;
}
.hero__back-icon[data-v-fc38ac1e] {
width: 30px;
height: 30px;
}
.hero__back-text[data-v-fc38ac1e] {
font-size: 24px;
font-weight: 500;
}
/* Mobile CTA: full-width, 12px padding, 20px bold */
.form[data-v-fc38ac1e] .ui-icon-block-btn,
.verify-form[data-v-fc38ac1e] .ui-icon-block-btn {
width: 100%;
padding: 12px;
font-size: 20px;
font-weight: 700;
}
}
@media (max-aspect-ratio: 2/3) {
.flare[data-v-fc38ac1e] {
height: 350px;
right: -150px;
}
.hero__back-icon[data-v-fc38ac1e] {
width: 20px;
height: 20px;
}
.hero__back-text[data-v-fc38ac1e] {
font-size: 14px;
font-weight: 500;
}
}
/* ===== Animations & Transitions ===== */
/* Buttons */
.btn[data-v-fc38ac1e] {
transition:
background-color 0.2s ease,
color 0.2s ease,
border-color 0.2s ease,
transform 0.1s ease,
box-shadow 0.2s ease;
}
.btn[data-v-fc38ac1e]:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}
.btn[data-v-fc38ac1e]:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.btn--primary[data-v-fc38ac1e]:hover {
background: #b5f342;
border-color: #b5f342;
}
.btn--primary[data-v-fc38ac1e]:active {
background: #a8e83a;
border-color: #a8e83a;
}
.btn--ghost[data-v-fc38ac1e]:hover {
background: rgba(30, 30, 30, 0.05);
}
.btn--ghost[data-v-fc38ac1e]:active {
background: rgba(30, 30, 30, 0.08);
}
/* Back button */
.hero__back[data-v-fc38ac1e] {
transition:
transform 0.1s ease,
opacity 0.2s ease;
}
.hero__back:hover .hero__back-icon[data-v-fc38ac1e] {
background: rgba(255, 255, 255, 0.25);
}
.hero__back[data-v-fc38ac1e]:active {
transform: scale(0.98);
}
/* Chooser items */
.chooser-item[data-v-fc38ac1e] {
transition:
background-color 0.15s ease,
transform 0.1s ease;
}
.chooser-item[data-v-fc38ac1e]:hover {
background: #f5f5f5;
}
.chooser-item[data-v-fc38ac1e]:active {
transform: scale(0.99);
}
.mobile-chooser__item[data-v-fc38ac1e] {
transition:
transform 0.1s ease,
opacity 0.2s ease;
}
.mobile-chooser__item[data-v-fc38ac1e]:active {
transform: scale(0.99);
}
.mobile-chooser__close[data-v-fc38ac1e] {
transition:
transform 0.1s ease,
background-color 0.2s ease;
}
.mobile-chooser__close[data-v-fc38ac1e]:hover {
background-color: #2b2b2b;
}
.mobile-chooser__close[data-v-fc38ac1e]:active {
transform: scale(0.96);
}
/* CTA button (UiIconBlockButton) */
.form[data-v-fc38ac1e] .ui-icon-block-btn {
transition:
transform 0.12s ease,
box-shadow 0.2s ease,
filter 0.2s ease;
}
.form[data-v-fc38ac1e] .ui-icon-block-btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.form[data-v-fc38ac1e] .ui-icon-block-btn:active {
transform: translateY(0);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.form[data-v-fc38ac1e] .ui-icon-block-btn[disabled],
.form[data-v-fc38ac1e] .ui-icon-block-btn[aria-disabled='true'] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
transform: none;
box-shadow: none;
}
/* Overlay/dialog transitions */
.fade-enter-active[data-v-fc38ac1e],
.fade-leave-active[data-v-fc38ac1e] {
transition: opacity 0.2s ease;
}
.fade-enter-from[data-v-fc38ac1e],
.fade-leave-to[data-v-fc38ac1e] {
opacity: 0;
}
.slide-down-enter-active[data-v-fc38ac1e],
.slide-down-leave-active[data-v-fc38ac1e] {
transition:
opacity 0.2s ease,
transform 0.2s ease;
transform-origin: top;
}
.slide-down-enter-from[data-v-fc38ac1e],
.slide-down-leave-to[data-v-fc38ac1e] {
opacity: 0;
transform: translateY(-8px);
}
.pop-enter-active[data-v-fc38ac1e],
.pop-leave-active[data-v-fc38ac1e] {
transition:
opacity 0.25s ease,
transform 0.25s ease;
}
.pop-enter-from[data-v-fc38ac1e],
.pop-leave-to[data-v-fc38ac1e] {
opacity: 0;
transform: translateY(8px) scale(0.98);
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
[data-v-fc38ac1e] {
transition: none !important;
animation: none !important;
}
}
/* Keyframes */
@keyframes checkbox-pop-fc38ac1e {
0% {
transform: scale(0.9);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
@keyframes error-pulse-fc38ac1e {
0% {
box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
}
50% {
box-shadow: 0 0 0 6px rgba(255, 59, 48, 0.18);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
}
}
/* Success overlay */
.success-overlay[data-v-fc38ac1e] {
position: fixed;
inset: 0;
z-index: 300;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: grid;
place-items: center;
padding: 16px;
}
.success-dialog[data-v-fc38ac1e] {
background: #fff;
border-radius: 20px;
width: 100%;
max-width: 460px;
display: grid;
gap: 16px;
padding: 24px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.success-topbar[data-v-fc38ac1e] {
display: flex;
align-items: center;
justify-content: space-between;
}
.success-title[data-v-fc38ac1e] {
font-size: 20px;
font-weight: 700;
color: #1e1e1e;
}
.success-text[data-v-fc38ac1e] {
font-size: 14px;
color: rgba(30, 30, 30, 0.8);
}
.success-actions[data-v-fc38ac1e] {
display: grid;
gap: 8px;
}
.success-actions[data-v-fc38ac1e] .ui-icon-block-btn {
width: 100%;
}
@media (max-aspect-ratio: 3/4) {
.success-dialog[data-v-fc38ac1e] {
border-radius: 16px;
max-width: 360px;
padding: 16px;
gap: 12px;
}
.success-title[data-v-fc38ac1e] {
font-size: 18px;
}
.success-text[data-v-fc38ac1e] {
font-size: 12px;
}
}
/* Mascot underlay (mobile only) */
.mascot-underlay[data-v-fc38ac1e] {
position: fixed;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
display: grid;
place-items: center;
}
.mascot-img[data-v-fc38ac1e] {
width: 70%;
height: 100%;
object-fit: contain;
display: block;
}
@media (min-aspect-ratio: 3/4) {
.mascot-underlay[data-v-fc38ac1e] {
display: none;
}
}
/* Generic Dialog Styles */
.overlay[data-v-fc38ac1e] {
position: fixed;
inset: 0;
z-index: 300;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: grid;
place-items: center;
padding: 16px;
}
.dialog[data-v-fc38ac1e] {
background: #fff;
border-radius: 20px;
width: 100%;
display: flex;
flex-direction: column;
max-height: 90vh;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.dialog--sm[data-v-fc38ac1e] {
max-width: 400px;
}
.dialog--md[data-v-fc38ac1e] {
max-width: 600px;
}
.dialog__header[data-v-fc38ac1e] {
padding: 20px 24px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.dialog__title[data-v-fc38ac1e] {
margin: 0;
font-size: 20px;
font-weight: 700;
color: #1e1e1e;
}
.dialog__close[data-v-fc38ac1e] {
width: 32px;
height: 32px;
border: 0;
padding: 0;
border-radius: 50%;
background: #f5f5f5;
display: grid;
place-items: center;
cursor: pointer;
transition: background 0.2s;
}
.dialog__close[data-v-fc38ac1e]:hover {
background: #ebebeb;
}
.close-icon[data-v-fc38ac1e] {
width: 12px;
height: 12px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%231e1e1e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 3l6 6M9 3L3 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.dialog__body[data-v-fc38ac1e] {
padding: 24px;
display: grid;
gap: 20px;
overflow-y: auto;
}
.dialog__text[data-v-fc38ac1e] {
margin: 0;
font-size: 16px;
color: rgba(30, 30, 30, 0.8);
line-height: 1.5;
}
.input--code[data-v-fc38ac1e] {
text-align: center;
font-size: 24px;
letter-spacing: 4px;
font-weight: 600;
background: #f5f5f5;
border-radius: 12px;
padding: 16px;
}
.error-text[data-v-fc38ac1e] {
color: #ff3b30;
font-size: 14px;
margin: 0;
text-align: center;
}
/* Verification Step Styles */
.panel--left-media[data-v-fc38ac1e] {
height: 802px;
border-radius: 28px;
overflow: hidden;
position: relative;
padding: 0;
background: linear-gradient(90deg, #4752f1 0%, #b4de5e 100%);
}
.media-content[data-v-fc38ac1e] {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0;
transition: opacity 0.8s ease-in-out;
transform: scale(1.01);
}
.media-content.is-loaded[data-v-fc38ac1e] {
opacity: 1;
}
.panel--right-verify[data-v-fc38ac1e] {
background: #fff;
border-radius: 28px;
padding: 28px;
display: flex;
flex-direction: column;
gap: 42px;
min-height: 802px;
box-sizing: border-box;
}
.verify-title[data-v-fc38ac1e] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
line-height: 1.2;
margin: 0;
letter-spacing: -0.48px;
}
.verify-form[data-v-fc38ac1e] {
display: grid;
gap: 12px;
}
.verify-field[data-v-fc38ac1e] {
display: block;
background: rgba(235, 235, 235, 0.5);
padding: 28px;
border-radius: 16px;
}
.verify-input[data-v-fc38ac1e] {
width: 100%;
padding: 0;
box-sizing: border-box;
border: 0;
background: transparent;
outline: none;
font-size: 18px;
color: #1e1e1e;
font-weight: 400;
letter-spacing: normal;
text-align: left;
}
.verify-input[data-v-fc38ac1e]::placeholder {
color: rgba(30, 30, 30, 0.4);
font-weight: 500;
}
/* Small spinner for verification submit button */
.btn-spinner[data-v-fc38ac1e] {
width: 16px;
height: 16px;
border-radius: 999px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-top-color: rgba(255, 255, 255, 1);
animation: btn-spin-fc38ac1e 0.7s linear infinite;
}
@keyframes btn-spin-fc38ac1e {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* CTA Spinner for submit button */
.cta-spinner[data-v-fc38ac1e] {
width: 24px;
height: 24px;
border-radius: 50%;
border: 3px solid rgba(30, 30, 30, 0.2);
border-top-color: #1e1e1e;
animation: cta-spin-fc38ac1e 0.8s linear infinite;
display: block;
}
@keyframes cta-spin-fc38ac1e {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Loading state for CTA button */
.form[data-v-fc38ac1e] .ui-icon-block-btn.is-loading {
pointer-events: none;
}
/* Mobile adjustments for Verification Step */
@media (max-aspect-ratio: 3/4) {
.panel--left-media[data-v-fc38ac1e] {
height: 300px;
margin-top: 16px;
order: 1;
z-index: 1;
}
.panel--right-verify[data-v-fc38ac1e] {
height: auto;
min-height: auto;
order: 2;
z-index: 2;
margin-top: 16px;
padding: 16px;
gap: 24px;
}
.verify-title[data-v-fc38ac1e] {
font-size: 20px;
}
.verify-field[data-v-fc38ac1e] {
padding: 20px;
}
}
/* Page layout */
.payment-selector[data-v-7e1b55cb] {
background: transparent;
position: relative;
padding: 0;
padding-top: 0;
padding-bottom: 40px;
box-sizing: border-box;
display: grid;
gap: 28px;
min-height: 100%;
align-content: start;
}
/* Hero (back button) */
.payment-selector__hero[data-v-7e1b55cb] {
display: flex;
align-items: center;
}
.hero__back[data-v-7e1b55cb] {
display: inline-flex;
align-items: center;
gap: 15px;
height: 100%;
background: none;
border: 0;
padding: 0;
cursor: pointer;
transition: transform 0.1s ease, opacity 0.2s ease;
}
.hero__back:hover .hero__back-icon[data-v-7e1b55cb] {
background: rgba(255, 255, 255, 0.25);
}
.hero__back[data-v-7e1b55cb]:active {
transform: scale(0.98);
}
.hero__back-icon[data-v-7e1b55cb] {
width: 40px;
height: 40px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease;
}
.hero__back-icon svg[data-v-7e1b55cb] {
display: block;
width: 50%;
height: 50%;
}
.hero__back-text[data-v-7e1b55cb] {
color: #fff;
font-size: 32px;
font-weight: 600;
}
/* Selector layout */
.selector-layout[data-v-7e1b55cb] {
display: flex;
align-items: flex-start;
justify-content: center;
width: 100%;
}
.selector-cards[data-v-7e1b55cb] {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
max-width: 597px;
}
/* Info Card */
.info-card[data-v-7e1b55cb] {
background: #fff;
border-radius: 28px;
padding: 28px;
overflow: hidden;
}
.info-card__header[data-v-7e1b55cb] {
display: flex;
align-items: center;
justify-content: space-between;
}
.info-card__title[data-v-7e1b55cb],
.info-card__price[data-v-7e1b55cb] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
letter-spacing: -0.48px;
}
/* Method Card */
.method-card[data-v-7e1b55cb] {
background: #fff;
border-radius: 28px;
padding: 28px;
display: flex;
flex-direction: column;
gap: 30px;
overflow: hidden;
}
.method-card__title[data-v-7e1b55cb] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
letter-spacing: -0.48px;
margin: 0;
}
/* Method List */
.method-list[data-v-7e1b55cb] {
display: flex;
flex-direction: column;
gap: 20px;
}
/* Method Item */
.method-item[data-v-7e1b55cb] {
display: flex;
align-items: center;
gap: 32px;
padding: 8px 16px;
border-radius: 8px;
background: transparent;
border: 0;
cursor: pointer;
width: 100%;
text-align: left;
transition: background-color 0.15s ease;
}
.method-item[data-v-7e1b55cb]:hover {
background: rgba(235, 235, 235, 0.5);
}
.method-item__radio[data-v-7e1b55cb] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.method-item__radio-visual[data-v-7e1b55cb] {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid #8d8d8d;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: border-color 0.15s ease;
}
.method-item--selected .method-item__radio-visual[data-v-7e1b55cb] {
border-color: #1e1e1e;
}
.method-item__radio-dot[data-v-7e1b55cb] {
width: 8px;
height: 8px;
border-radius: 50%;
background: #1e1e1e;
transform: scale(0);
transition: transform 0.15s ease;
}
.method-item--selected .method-item__radio-dot[data-v-7e1b55cb] {
transform: scale(1);
}
.method-item__card-icon[data-v-7e1b55cb] {
width: 83.2px;
height: 52px;
border-radius: 5px;
background: #ebebeb;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.method-item__card-icon--new[data-v-7e1b55cb] {
background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
border: none;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.method-item__new-card-dots[data-v-7e1b55cb] {
font-size: 16px;
font-weight: 600;
color: #fff;
letter-spacing: 2px;
}
.method-item__card-img[data-v-7e1b55cb] {
width: 68px;
height: 43px;
object-fit: contain;
}
.method-item__info[data-v-7e1b55cb] {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 4px;
padding: 2px 0;
flex: 1;
}
.method-item__name[data-v-7e1b55cb] {
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 16px;
color: #1e1e1e;
}
.method-item__number[data-v-7e1b55cb] {
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 16px;
color: #8d8d8d;
}
.method-item__plus-icon[data-v-7e1b55cb] {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.method-item__plus-icon svg[data-v-7e1b55cb] {
display: block;
}
.method-item--add[data-v-7e1b55cb] {
justify-content: flex-start;
}
.method-item__arrow[data-v-7e1b55cb] {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
margin-left: auto;
}
.method-item__arrow svg[data-v-7e1b55cb] {
display: block;
}
/* Divider */
.method-divider[data-v-7e1b55cb] {
width: 100%;
height: 1px;
background: #ebebeb;
}
/* Summary Card */
.summary-card[data-v-7e1b55cb] {
background: #fff;
border-radius: 28px;
padding: 28px;
display: flex;
flex-direction: column;
gap: 20px;
overflow: hidden;
}
.summary-card__title[data-v-7e1b55cb] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
letter-spacing: -0.48px;
margin: 0;
}
.summary-card__content[data-v-7e1b55cb] {
display: flex;
align-items: center;
gap: 20px;
padding: 8px 16px;
}
.summary-card__card-icon[data-v-7e1b55cb] {
width: 83.2px;
height: 52px;
border-radius: 5px;
background: #ebebeb;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.summary-card__card-img[data-v-7e1b55cb] {
width: 68px;
height: 43px;
object-fit: contain;
}
.summary-card__info[data-v-7e1b55cb] {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 4px;
padding: 2px 0;
}
.summary-card__name[data-v-7e1b55cb] {
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 16px;
color: #1e1e1e;
}
.summary-card__number[data-v-7e1b55cb] {
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 16px;
color: #8d8d8d;
}
.summary-card__continue[data-v-7e1b55cb] {
width: 100%;
height: 58px;
background: #c3fd56;
border: 0;
border-radius: 16px;
padding: 0 28px;
font-size: 20px;
font-weight: 700;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
}
.summary-card__continue[data-v-7e1b55cb]:hover:not(:disabled) {
background: #b5f342;
}
.summary-card__continue[data-v-7e1b55cb]:active:not(:disabled) {
transform: scale(0.99);
}
.summary-card__continue[data-v-7e1b55cb]:disabled {
opacity: 0.6;
cursor: default;
}
/* Mobile responsive */
@media (max-aspect-ratio: 3/4) {
.payment-selector[data-v-7e1b55cb] {
gap: 16px;
}
.hero__back[data-v-7e1b55cb] {
gap: 8px;
}
.hero__back-icon[data-v-7e1b55cb] {
width: 30px;
height: 30px;
}
.hero__back-text[data-v-7e1b55cb] {
font-size: 24px;
font-weight: 500;
}
.selector-cards[data-v-7e1b55cb] {
gap: 8px;
}
.info-card[data-v-7e1b55cb],
.method-card[data-v-7e1b55cb],
.summary-card[data-v-7e1b55cb] {
padding: 20px;
border-radius: 20px;
}
.info-card__title[data-v-7e1b55cb],
.info-card__price[data-v-7e1b55cb],
.method-card__title[data-v-7e1b55cb],
.summary-card__title[data-v-7e1b55cb] {
font-size: 20px;
}
.method-card[data-v-7e1b55cb] {
gap: 20px;
}
.method-list[data-v-7e1b55cb] {
gap: 16px;
}
.method-item[data-v-7e1b55cb] {
gap: 16px;
padding: 8px 12px;
}
.method-item__card-icon[data-v-7e1b55cb],
.summary-card__card-icon[data-v-7e1b55cb] {
width: 64px;
height: 40px;
}
.method-item__card-img[data-v-7e1b55cb],
.summary-card__card-img[data-v-7e1b55cb] {
width: 52px;
height: 33px;
}
.method-item__name[data-v-7e1b55cb],
.method-item__number[data-v-7e1b55cb],
.summary-card__name[data-v-7e1b55cb],
.summary-card__number[data-v-7e1b55cb] {
font-size: 14px;
}
.summary-card__continue[data-v-7e1b55cb] {
height: 52px;
font-size: 18px;
}
}
@media (max-aspect-ratio: 2/3) {
.hero__back-icon[data-v-7e1b55cb] {
width: 20px;
height: 20px;
}
.hero__back-text[data-v-7e1b55cb] {
font-size: 14px;
font-weight: 500;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
[data-v-7e1b55cb] {
transition: none !important;
animation: none !important;
}
}
/* Page background / layout */
.checkout[data-v-cdad9503] {
--topbar-h: 72px;
--hero-h: 40px;
--pad-top: 24px;
--pad-bottom: 48px;
--hero-gap: 16px;
background: transparent;
position: relative;
padding: 0;
padding-top: 48px;
padding-bottom: 40px;
box-sizing: border-box;
display: grid;
gap: 28px;
}
/* Hero (back button) */
.checkout__hero[data-v-cdad9503] {
display: flex;
align-items: center;
}
.hero__back[data-v-cdad9503] {
display: inline-flex;
align-items: center;
gap: 15px;
height: 100%;
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
.hero__back-icon[data-v-cdad9503] {
width: 40px;
height: 40px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
}
.hero__back-icon svg[data-v-cdad9503] {
display: block;
width: 50%;
height: 50%;
}
.hero__back-text[data-v-cdad9503] {
color: #fff;
font-size: 32px;
font-weight: 600;
}
/* Payment Step Styles */
.payment-layout[data-v-cdad9503] {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
min-height: 600px;
width: 100%;
height: 100%;
}
.payment-card[data-v-cdad9503] {
background: #fff;
border-radius: 20px;
width: 100%;
max-width: 600px;
padding: 40px;
box-shadow: 0 20px 60px rgba(0,0,0,0.05);
z-index: 2;
position: relative;
min-height: 100%;
}
.payment-form[data-v-cdad9503] {
min-height: 100%;
}
.payment-mascot-wrapper[data-v-cdad9503] {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 400px;
pointer-events: none;
z-index: 1;
}
.payment-mascot-img[data-v-cdad9503] {
width: 100%;
display: block;
}
@media (max-aspect-ratio: 3/4) {
.payment-card[data-v-cdad9503] {
padding: 20px;
}
.payment-mascot-wrapper[data-v-cdad9503] {
display: none;
}
}
@media (max-aspect-ratio: 3/4) {
.hero__back-icon[data-v-cdad9503] {
width: 30px;
height: 30px;
}
.hero__back-text[data-v-cdad9503] {
font-size: 24px;
font-weight: 500;
}
}
@media (max-aspect-ratio: 2/3) {
.hero__back-icon[data-v-cdad9503] {
width: 20px;
height: 20px;
}
.hero__back-text[data-v-cdad9503] {
font-size: 14px;
font-weight: 500;
}
}
/* ===== Animations & Transitions ===== */
/* Buttons */
.btn[data-v-cdad9503] { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .1s ease, box-shadow .2s ease;
}
.btn[data-v-cdad9503]:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.btn[data-v-cdad9503]:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.btn--primary[data-v-cdad9503]:hover { background: #b5f342; border-color: #b5f342;
}
.btn--primary[data-v-cdad9503]:active { background: #a8e83a; border-color: #a8e83a;
}
.btn--ghost[data-v-cdad9503]:hover { background: rgba(30,30,30,.05);
}
.btn--ghost[data-v-cdad9503]:active { background: rgba(30,30,30,.08);
}
/* Back button */
.hero__back[data-v-cdad9503] { transition: transform .1s ease, opacity .2s ease;
}
.hero__back:hover .hero__back-icon[data-v-cdad9503] { background: rgba(255,255,255,0.25);
}
.hero__back[data-v-cdad9503]:active { transform: scale(0.98);
}
/* Chooser items */
.chooser-item[data-v-cdad9503] { transition: background-color .15s ease, transform .1s ease;
}
.chooser-item[data-v-cdad9503]:hover { background: #f5f5f5;
}
.chooser-item[data-v-cdad9503]:active { transform: scale(0.99);
}
.mobile-chooser__item[data-v-cdad9503] { transition: transform .1s ease, opacity .2s ease;
}
.mobile-chooser__item[data-v-cdad9503]:active { transform: scale(0.99);
}
.mobile-chooser__close[data-v-cdad9503] { transition: transform .1s ease, background-color .2s ease;
}
.mobile-chooser__close[data-v-cdad9503]:hover { background-color: #2b2b2b;
}
.mobile-chooser__close[data-v-cdad9503]:active { transform: scale(0.96);
}
/* CTA button (UiIconBlockButton) */
.form[data-v-cdad9503] .ui-icon-block-btn { transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.form[data-v-cdad9503] .ui-icon-block-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.form[data-v-cdad9503] .ui-icon-block-btn:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.form[data-v-cdad9503] .ui-icon-block-btn[disabled],
.form[data-v-cdad9503] .ui-icon-block-btn[aria-disabled="true"] {
opacity: .5;
cursor: not-allowed;
pointer-events: none;
transform: none;
box-shadow: none;
}
/* Overlay/dialog transitions */
.fade-enter-active[data-v-cdad9503], .fade-leave-active[data-v-cdad9503] { transition: opacity .2s ease;
}
.fade-enter-from[data-v-cdad9503], .fade-leave-to[data-v-cdad9503] { opacity: 0;
}
.slide-down-enter-active[data-v-cdad9503], .slide-down-leave-active[data-v-cdad9503] { transition: opacity .2s ease, transform .2s ease; transform-origin: top;
}
.slide-down-enter-from[data-v-cdad9503], .slide-down-leave-to[data-v-cdad9503] { opacity: 0; transform: translateY(-8px);
}
.pop-enter-active[data-v-cdad9503], .pop-leave-active[data-v-cdad9503] { transition: opacity .25s ease, transform .25s ease;
}
.pop-enter-from[data-v-cdad9503], .pop-leave-to[data-v-cdad9503] { opacity: 0; transform: translateY(8px) scale(0.98);
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
[data-v-cdad9503] { transition: none !important; animation: none !important;
}
}
/* Keyframes */
@keyframes checkbox-pop-cdad9503 {
0% { transform: scale(0.9);
}
50% { transform: scale(1.05);
}
100% { transform: scale(1);
}
}
@keyframes error-pulse-cdad9503 {
0% { box-shadow: 0 0 0 0 rgba(255,59,48,0.0);
}
50% { box-shadow: 0 0 0 6px rgba(255,59,48,0.18);
}
100% { box-shadow: 0 0 0 0 rgba(255,59,48,0.0);
}
}
/* Success overlay */
.success-overlay[data-v-cdad9503] {
position: fixed;
inset: 0;
z-index: 300;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: grid;
place-items: center;
padding: 16px;
}
.success-dialog[data-v-cdad9503] {
background: #fff;
border-radius: 20px;
width: 100%;
max-width: 460px;
display: grid;
gap: 16px;
padding: 24px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.success-topbar[data-v-cdad9503] { display: flex; align-items: center; justify-content: space-between;
}
.success-title[data-v-cdad9503] { font-size: 20px; font-weight: 700; color: #1e1e1e;
}
.success-text[data-v-cdad9503] { font-size: 14px; color: rgba(30,30,30,.8);
}
.success-actions[data-v-cdad9503] { display: grid; gap: 8px;
}
.success-actions[data-v-cdad9503] .ui-icon-block-btn { width: 100%;
}
@media (max-aspect-ratio: 3/4) {
.success-dialog[data-v-cdad9503] {
border-radius: 16px;
max-width: 360px;
padding: 16px;
gap: 12px;
}
.success-title[data-v-cdad9503] { font-size: 18px;
}
.success-text[data-v-cdad9503] { font-size: 12px;
}
}
/* Mascot underlay (mobile only) */
.mascot-underlay[data-v-cdad9503] {
position: fixed;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
display: grid;
place-items: center;
}
.mascot-img[data-v-cdad9503] {
width: 70%;
height: 100%;
object-fit: contain;
display: block;
}
@media (min-aspect-ratio: 3/4) {
.mascot-underlay[data-v-cdad9503] { display: none;
}
}
/* Generic Dialog Styles */
.overlay[data-v-cdad9503] {
position: fixed;
inset: 0;
z-index: 300;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: grid;
place-items: center;
padding: 16px;
}
.dialog[data-v-cdad9503] {
background: #fff;
border-radius: 20px;
width: 100%;
display: flex;
flex-direction: column;
max-height: 90vh;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
overflow: hidden;
}
.dialog--sm[data-v-cdad9503] { max-width: 400px;
}
.dialog--md[data-v-cdad9503] { max-width: 600px;
}
.dialog__header[data-v-cdad9503] {
padding: 20px 24px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.dialog__title[data-v-cdad9503] {
margin: 0;
font-size: 20px;
font-weight: 700;
color: #1e1e1e;
}
.dialog__close[data-v-cdad9503] {
width: 32px;
height: 32px;
border: 0;
padding: 0;
border-radius: 50%;
background: #f5f5f5;
display: grid;
place-items: center;
cursor: pointer;
transition: background .2s;
}
.dialog__close[data-v-cdad9503]:hover { background: #ebebeb;
}
.close-icon[data-v-cdad9503] {
width: 12px;
height: 12px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%231e1e1e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 3l6 6M9 3L3 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.dialog__body[data-v-cdad9503] {
padding: 24px;
display: grid;
gap: 20px;
overflow-y: auto;
}
.dialog__text[data-v-cdad9503] {
margin: 0;
font-size: 16px;
color: rgba(30,30,30,0.8);
line-height: 1.5;
}
.input--code[data-v-cdad9503] {
text-align: center;
font-size: 24px;
letter-spacing: 4px;
font-weight: 600;
background: #f5f5f5;
border-radius: 12px;
padding: 16px;
}
.error-text[data-v-cdad9503] {
color: #ff3b30;
font-size: 14px;
margin: 0;
text-align: center;
}
.payment-container[data-v-cdad9503] {
min-height: 200px;
}
.payment-container.is-hidden[data-v-cdad9503] {
display: none;
}
.payment-card.is-hidden[data-v-cdad9503] {
display: none;
}
/* Widget loading state */
.widget-loading-state[data-v-cdad9503] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
gap: 20px;
min-height: 300px;
}
.widget-spinner[data-v-cdad9503] {
width: 48px;
height: 48px;
border-radius: 50%;
border: 4px solid rgba(30, 30, 30, 0.15);
border-top-color: #1e1e1e;
animation: widget-spin-cdad9503 0.9s linear infinite;
}
.widget-loading-text[data-v-cdad9503] {
margin: 0;
font-size: 16px;
font-weight: 500;
color: rgba(30, 30, 30, 0.6);
}
@keyframes widget-spin-cdad9503 {
to {
transform: rotate(360deg);
}
}
.loading-state[data-v-cdad9503] {
text-align: center;
color: rgba(30,30,30,0.5);
padding: 40px;
}
/* Checkout loading state */
.checkout__loading[data-v-cdad9503] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 400px;
gap: 16px;
color: #fff;
}
.checkout__loading p[data-v-cdad9503] {
margin: 0;
font-size: 18px;
font-weight: 500;
}
.loading-spinner[data-v-cdad9503] {
width: 48px;
height: 48px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin-cdad9503 1s linear infinite;
}
@keyframes spin-cdad9503 {
to {
transform: rotate(360deg);
}
}
@media (max-width: 600px) {
.dialog[data-v-cdad9503] { border-radius: 16px;
}
.dialog__header[data-v-cdad9503] { padding: 16px;
}
.dialog__body[data-v-cdad9503] { padding: 16px;
}
.dialog__title[data-v-cdad9503] { font-size: 18px;
}
}
/* Error state */
.checkout__error[data-v-cdad9503] {
display: flex;
align-items: center;
justify-content: center;
min-height: 400px;
padding: 20px;
}
.error-card[data-v-cdad9503] {
background: #fff;
border-radius: 20px;
padding: 32px;
text-align: center;
max-width: 400px;
width: 100%;
display: flex;
flex-direction: column;
gap: 20px;
}
.error-card__text[data-v-cdad9503] {
margin: 0;
font-size: 16px;
color: #1e1e1e;
line-height: 1.5;
}
.btn-back[data-v-cdad9503] {
width: 100%;
height: 50px;
background: #f5f5f5;
border: 0;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease;
}
.btn-back[data-v-cdad9503]:hover {
background: #ebebeb;
}
/* Retry Dialog Modal */
.modal-overlay[data-v-cdad9503] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
box-sizing: border-box;
overflow: auto;
}
.modal-dialog[data-v-cdad9503] {
background: #fff;
border-radius: 28px;
padding: 32px;
width: 100%;
max-width: 420px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
margin: auto;
}
.modal-content--retry[data-v-cdad9503] {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
}
.retry-icon[data-v-cdad9503] {
margin-bottom: 4px;
}
.modal-title[data-v-cdad9503] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
margin: 0;
}
.modal-text[data-v-cdad9503] {
font-size: 16px;
color: #5c5c5c;
margin: 0;
line-height: 1.5;
}
.modal-actions[data-v-cdad9503] {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
margin-top: 8px;
}
.btn-primary[data-v-cdad9503] {
width: 100%;
height: 54px;
background: #c3fd56;
border: 0;
border-radius: 14px;
font-size: 17px;
font-weight: 700;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
}
.btn-primary[data-v-cdad9503]:hover:not(:disabled) {
background: #b5f342;
}
.btn-primary[data-v-cdad9503]:active:not(:disabled) {
transform: scale(0.99);
}
.btn-primary[data-v-cdad9503]:disabled {
opacity: 0.6;
cursor: default;
}
.btn-secondary[data-v-cdad9503] {
width: 100%;
height: 48px;
background: transparent;
border: 1px solid rgba(30, 30, 30, 0.2);
border-radius: 14px;
font-size: 15px;
font-weight: 600;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.btn-secondary[data-v-cdad9503]:hover:not(:disabled) {
background: rgba(235, 235, 235, 0.5);
}
.btn-secondary[data-v-cdad9503]:active:not(:disabled) {
transform: scale(0.99);
}
.btn-secondary[data-v-cdad9503]:disabled {
opacity: 0.5;
cursor: default;
}
@media (max-aspect-ratio: 3/4) {
.modal-dialog[data-v-cdad9503] {
padding: 24px;
border-radius: 20px;
}
.modal-title[data-v-cdad9503] {
font-size: 20px;
}
.modal-text[data-v-cdad9503] {
font-size: 14px;
}
.btn-primary[data-v-cdad9503] {
height: 50px;
font-size: 16px;
border-radius: 12px;
}
.btn-secondary[data-v-cdad9503] {
height: 44px;
font-size: 14px;
border-radius: 12px;
}
}
/* Confirmation URL Modal (iframe) */
.confirmation-modal-overlay[data-v-cdad9503] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 10000;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
box-sizing: border-box;
}
.confirmation-modal[data-v-cdad9503] {
position: relative;
background: #fff;
border-radius: 20px;
width: 100%;
max-width: 420px;
height: auto;
max-height: 600px;
min-height: 400px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
overflow: hidden;
display: flex;
flex-direction: column;
}
.confirmation-modal__iframe[data-v-cdad9503] {
width: 100%;
height: 500px;
border: 0;
flex: 1;
}
@media (max-aspect-ratio: 3/4) {
.confirmation-modal-overlay[data-v-cdad9503] {
padding: 16px;
}
.confirmation-modal[data-v-cdad9503] {
max-width: 100%;
max-height: 70vh;
min-height: 350px;
border-radius: 16px;
}
.confirmation-modal__iframe[data-v-cdad9503] {
height: 400px;
}
}
/* Verification Step Styles */
.panel--left-media[data-v-cdad9503] {
height: 802px;
border-radius: 28px;
overflow: hidden;
position: relative;
padding: 0;
background: linear-gradient(90deg, #4752F1 0%, #B4DE5E 100%);
}
.media-content[data-v-cdad9503] {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0;
transition: opacity 0.8s ease-in-out;
transform: scale(1.01);
}
.media-content.is-loaded[data-v-cdad9503] {
opacity: 1;
}
.panel--right-verify[data-v-cdad9503] {
background: #fff;
border-radius: 28px;
padding: 28px;
display: flex;
flex-direction: column;
gap: 42px;
min-height: 802px;
box-sizing: border-box;
}
.verify-title[data-v-cdad9503] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
line-height: 1.2;
margin: 0;
letter-spacing: -0.48px;
}
.verify-form[data-v-cdad9503] {
display: grid;
gap: 12px;
}
.verify-field[data-v-cdad9503] {
display: block;
background: rgba(235, 235, 235, 0.5);
padding: 28px;
border-radius: 16px;
}
.verify-input[data-v-cdad9503] {
width: 100%;
padding: 0;
box-sizing: border-box;
border: 0;
background: transparent;
outline: none;
font-size: 18px; /* Match other inputs */
color: #1e1e1e;
font-weight: 400; /* Match other inputs */
letter-spacing: normal;
text-align: left;
}
.verify-input[data-v-cdad9503]::placeholder {
color: rgba(30, 30, 30, 0.4);
font-weight: 500;
}
/* Mobile adjustments for Verification Step */
@media (max-aspect-ratio: 3/4) {
.panel--left-media[data-v-cdad9503] {
height: 300px; /* Smaller on mobile */
margin-top: 16px;
order: 1;
z-index: 1;
}
.panel--right-verify[data-v-cdad9503] {
height: auto;
min-height: auto;
order: 2;
z-index: 2;
margin-top: -24px; /* overlap? or just stack */
margin-top: 16px;
padding: 16px;
gap: 24px;
}
.verify-title[data-v-cdad9503] {
font-size: 20px;
}
.verify-field[data-v-cdad9503] {
padding: 20px;
}
}
.thanks-view[data-v-2bf8a6b1] {
--pad-top: 24px;
--pad-bottom: 48px;
background: transparent;
position: relative;
padding: 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-height: calc(100vh - var(--app-header-height, 72px) - 40px);
}
.thanks-container[data-v-2bf8a6b1] {
width: 100%;
max-width: 600px;
padding: 0 20px;
box-sizing: border-box;
position: relative;
z-index: 1;
}
.card[data-v-2bf8a6b1] {
background: #fff;
border-radius: 28px;
padding: 40px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
/* Ensure card has enough space for mascot overlapping top */
margin-top: 100px;
}
.mascot-wrapper[data-v-2bf8a6b1] {
position: absolute;
top: -180px; /* Pull mascot even more up */
left: 50%;
transform: translateX(-50%);
width: 480px; /* Increased size even more */
height: 400px; /* Increased size even more */
display: flex;
flex-direction: column;
align-items: center;
pointer-events: none;
}
.mascot-img[data-v-2bf8a6b1] {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
position: relative;
z-index: 2;
}
.title[data-v-2bf8a6b1] {
margin: 200px 0 32px; /* Increased margin for larger mascot */
font-size: 32px;
font-weight: 600;
color: #1e1e1e;
line-height: 1.1;
letter-spacing: -0.01em;
}
@media (max-aspect-ratio: 3/4) {
.thanks-view[data-v-2bf8a6b1] {
align-items: flex-start;
padding-top: 40px;
}
.card[data-v-2bf8a6b1] {
border-radius: 20px;
padding: 24px;
margin-top: 100px;
}
.mascot-wrapper[data-v-2bf8a6b1] {
width: 360px;
top: -180px;
}
.title[data-v-2bf8a6b1] {
margin-top: 160px;
font-size: 24px;
margin-bottom: 24px;
}
}
/* Page background / layout */
.card-management[data-v-3e45f12a] {
--topbar-h: 72px;
--hero-h: 40px;
--pad-top: 24px;
--pad-bottom: 48px;
--hero-gap: 16px;
background: transparent;
position: relative;
padding: 0;
padding-top: 48px;
padding-bottom: 40px;
box-sizing: border-box;
display: grid;
gap: 28px;
}
/* Hero (back button) */
.card-management__hero[data-v-3e45f12a] {
display: flex;
align-items: center;
}
.hero__back[data-v-3e45f12a] {
display: inline-flex;
align-items: center;
gap: 15px;
height: 100%;
background: none;
border: 0;
padding: 0;
cursor: pointer;
transition: transform 0.1s ease, opacity 0.2s ease;
}
.hero__back:hover .hero__back-icon[data-v-3e45f12a] {
background: rgba(255, 255, 255, 0.25);
}
.hero__back[data-v-3e45f12a]:active {
transform: scale(0.98);
}
.hero__back-icon[data-v-3e45f12a] {
width: 40px;
height: 40px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
}
.hero__back-icon svg[data-v-3e45f12a] {
display: block;
width: 50%;
height: 50%;
}
.hero__back-text[data-v-3e45f12a] {
color: #fff;
font-size: 32px;
font-weight: 600;
}
/* Cards layout */
.cards-layout[data-v-3e45f12a] {
display: flex;
align-items: flex-start;
justify-content: center;
width: 100%;
}
.cards-panel[data-v-3e45f12a] {
background: #fff;
border-radius: 28px;
padding: 28px;
width: 100%;
max-width: 597px;
display: flex;
flex-direction: column;
gap: 30px;
}
.cards-panel__title[data-v-3e45f12a] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
margin: 0;
letter-spacing: -0.48px;
}
/* Cards list */
.cards-list[data-v-3e45f12a] {
display: flex;
flex-direction: column;
gap: 20px;
}
.cards-list__empty[data-v-3e45f12a] {
margin: 0;
padding: 20px 0;
text-align: center;
color: #9c9c9c;
font-size: 16px;
font-weight: 500;
}
.cards-list__loading[data-v-3e45f12a] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
gap: 16px;
color: #9c9c9c;
}
.cards-list__loading p[data-v-3e45f12a] {
margin: 0;
font-size: 16px;
font-weight: 500;
}
.loading-spinner[data-v-3e45f12a] {
width: 36px;
height: 36px;
border: 3px solid rgba(30, 30, 30, 0.1);
border-top-color: #1e1e1e;
border-radius: 50%;
animation: spin-3e45f12a 1s linear infinite;
}
@keyframes spin-3e45f12a {
to {
transform: rotate(360deg);
}
}
.cards-list__error[data-v-3e45f12a] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
gap: 16px;
text-align: center;
}
.cards-list__error p[data-v-3e45f12a] {
margin: 0;
font-size: 16px;
color: #f43030;
}
.btn-retry[data-v-3e45f12a] {
padding: 10px 24px;
background: #f5f5f5;
border: 0;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease;
}
.btn-retry[data-v-3e45f12a]:hover {
background: #ebebeb;
}
.cards-panel__add-button[data-v-3e45f12a] {
margin-top: 4px;
display: flex;
align-items: center;
justify-content: center;
}
/* Button spinner */
.btn-spinner[data-v-3e45f12a] {
width: 24px;
height: 24px;
border-radius: 50%;
border: 3px solid rgba(30, 30, 30, 0.2);
border-top-color: #1e1e1e;
animation: btn-spin-3e45f12a 0.8s linear infinite;
display: block;
}
.btn-spinner--red[data-v-3e45f12a] {
width: 20px;
height: 20px;
border: 2px solid rgba(244, 48, 48, 0.25);
border-top-color: #f43030;
}
@keyframes btn-spin-3e45f12a {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.card-item[data-v-3e45f12a] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
border-radius: 8px;
background: transparent;
border: 0;
cursor: pointer;
width: 100%;
text-align: left;
transition: background-color 0.15s ease, transform 0.1s ease;
}
.card-item[data-v-3e45f12a]:hover {
background: rgba(235, 235, 235, 0.5);
}
.card-item[data-v-3e45f12a]:active {
transform: scale(0.99);
}
.card-item__left[data-v-3e45f12a] {
display: flex;
align-items: center;
gap: 20px;
}
.card-item__icon[data-v-3e45f12a] {
width: 83.2px;
height: 52px;
border-radius: 5px;
background: #ebebeb;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.card-item__icon-img[data-v-3e45f12a] {
width: 68px;
height: 43px;
object-fit: contain;
}
.card-item__info[data-v-3e45f12a] {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 4px;
padding: 2px 0;
}
.card-item__name[data-v-3e45f12a] {
display: flex;
align-items: center;
gap: 5px;
}
.card-item__type[data-v-3e45f12a] {
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 16px;
color: #1e1e1e;
}
.card-item__dot[data-v-3e45f12a] {
color: #8d8d8d;
font-size: 12px;
}
.card-item__default[data-v-3e45f12a] {
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 16px;
color: #8d8d8d;
}
.card-item__number[data-v-3e45f12a] {
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 16px;
color: #8d8d8d;
}
.card-item__arrow[data-v-3e45f12a] {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.card-item__arrow svg[data-v-3e45f12a] {
display: block;
}
/* Mobile responsive */
@media (max-aspect-ratio: 3/4) {
.card-management[data-v-3e45f12a] {
gap: 16px;
}
.hero__back[data-v-3e45f12a] {
gap: 8px;
}
.hero__back-icon[data-v-3e45f12a] {
width: 30px;
height: 30px;
}
.hero__back-text[data-v-3e45f12a] {
font-size: 24px;
font-weight: 500;
}
.cards-panel[data-v-3e45f12a] {
padding: 16px;
border-radius: 16px;
gap: 20px;
}
.cards-panel__title[data-v-3e45f12a] {
font-size: 20px;
}
.cards-list[data-v-3e45f12a] {
gap: 12px;
}
.cards-panel__add-button[data-v-3e45f12a] {
height: 52px;
font-size: 18px;
}
.card-item[data-v-3e45f12a] {
padding: 8px 12px;
}
.card-item__left[data-v-3e45f12a] {
gap: 12px;
}
.card-item__icon[data-v-3e45f12a] {
width: 64px;
height: 40px;
}
.card-item__icon-img[data-v-3e45f12a] {
width: 52px;
height: 33px;
}
.card-item__type[data-v-3e45f12a],
.card-item__default[data-v-3e45f12a],
.card-item__number[data-v-3e45f12a] {
font-size: 14px;
}
}
@media (max-aspect-ratio: 2/3) {
.hero__back-icon[data-v-3e45f12a] {
width: 20px;
height: 20px;
}
.hero__back-text[data-v-3e45f12a] {
font-size: 14px;
font-weight: 500;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
[data-v-3e45f12a] {
transition: none !important;
animation: none !important;
}
}
/* Modal Overlay */
.modal-overlay[data-v-3e45f12a] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
box-sizing: border-box;
overflow: auto;
}
.modal-dialog[data-v-3e45f12a] {
background: #fff;
border-radius: 28px;
padding: 28px;
width: 100%;
max-width: 456px;
max-height: calc(100vh - 32px);
display: flex;
flex-direction: column;
gap: 30px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
overflow: auto;
margin: auto;
position: relative;
}
.modal-header[data-v-3e45f12a] {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.modal-title[data-v-3e45f12a] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
margin: 0;
letter-spacing: -0.48px;
}
.modal-close[data-v-3e45f12a] {
width: 32px;
height: 32px;
border: 0;
padding: 0;
border-radius: 8px;
background: #f5f5f5;
display: grid;
place-items: center;
cursor: pointer;
flex-shrink: 0;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.modal-close[data-v-3e45f12a]:hover {
background: #ebebeb;
}
.modal-close[data-v-3e45f12a]:active {
transform: scale(0.95);
}
.modal-content[data-v-3e45f12a] {
display: flex;
flex-direction: column;
gap: 30px;
align-items: center;
position: relative;
z-index: 1;
}
/* Card Verification Modal */
.verification-modal-overlay[data-v-3e45f12a] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
box-sizing: border-box;
}
.verification-modal[data-v-3e45f12a] {
position: relative;
background: #fff;
border-radius: 24px;
width: 100%;
max-width: 460px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.verification-modal__content[data-v-3e45f12a] {
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 32px;
gap: 20px;
text-align: center;
}
.verification-modal__icon[data-v-3e45f12a] {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(195, 253, 86, 0.15);
display: flex;
align-items: center;
justify-content: center;
color: #1e1e1e;
}
.verification-modal__title[data-v-3e45f12a] {
margin: 0;
font-size: 22px;
font-weight: 600;
color: #1e1e1e;
}
.verification-modal__text[data-v-3e45f12a] {
margin: 0;
font-size: 15px;
line-height: 1.5;
color: #5c5c5c;
}
.verification-modal__actions[data-v-3e45f12a] {
display: flex;
gap: 12px;
width: 100%;
margin-top: 8px;
}
.verification-modal__btn[data-v-3e45f12a] {
flex: 1;
padding: 14px 24px;
border: 0;
border-radius: 14px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.verification-modal__btn[data-v-3e45f12a]:active {
transform: scale(0.98);
}
.verification-modal__btn--secondary[data-v-3e45f12a] {
background: #f5f5f5;
color: #1e1e1e;
}
.verification-modal__btn--secondary[data-v-3e45f12a]:hover {
background: #ebebeb;
}
.verification-modal__btn--primary[data-v-3e45f12a] {
background: #c3fd56;
color: #1e1e1e;
}
.verification-modal__btn--primary[data-v-3e45f12a]:hover {
background: #b5f342;
}
@media (max-aspect-ratio: 3/4) {
.verification-modal-overlay[data-v-3e45f12a] {
padding: 16px;
}
.verification-modal[data-v-3e45f12a] {
max-width: 100%;
border-radius: 20px;
}
.verification-modal__content[data-v-3e45f12a] {
padding: 32px 24px;
gap: 16px;
}
.verification-modal__icon[data-v-3e45f12a] {
width: 56px;
height: 56px;
}
.verification-modal__icon svg[data-v-3e45f12a] {
width: 28px;
height: 28px;
}
.verification-modal__title[data-v-3e45f12a] {
font-size: 20px;
}
.verification-modal__text[data-v-3e45f12a] {
font-size: 14px;
}
.verification-modal__actions[data-v-3e45f12a] {
flex-direction: column-reverse;
gap: 10px;
}
.verification-modal__btn[data-v-3e45f12a] {
padding: 12px 20px;
font-size: 15px;
border-radius: 12px;
}
}
/* Card Preview (stylized bank card) with 3D effect */
.card-preview[data-v-3e45f12a] {
width: 400px;
height: 252px;
background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
border-radius: 20px;
padding: 25px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
position: relative;
transform-style: preserve-3d;
transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
cursor: grab;
overflow: hidden;
}
/* Hover effect only for devices with mouse/pointer */
@media (hover: hover) {
.card-preview[data-v-3e45f12a]:hover {
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.25),
0 15px 30px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
}
/* Active state controlled by JS (works on both desktop and mobile) */
.card-preview--active[data-v-3e45f12a] {
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.25),
0 15px 30px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
/* Shine/gloss effect overlay */
.card-preview__shine[data-v-3e45f12a] {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 20px;
background: radial-gradient(
circle at var(--shine-x, 50%) var(--shine-y, 50%),
rgba(255, 255, 255, 0.35) 0%,
rgba(255, 255, 255, 0.1) 30%,
transparent 60%
);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 10;
}
/* Shine effect only for devices with mouse/pointer */
@media (hover: hover) {
.card-preview:hover .card-preview__shine[data-v-3e45f12a] {
opacity: 1;
}
}
/* Active state controlled by JS (works on both desktop and mobile) */
.card-preview--active .card-preview__shine[data-v-3e45f12a] {
opacity: 1;
}
/* Delete confirmation overlay */
.modal-confirm-overlay[data-v-3e45f12a] {
position: absolute;
inset: 0;
background: rgba(150, 150, 150, 0.7);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
border-radius: 28px;
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
z-index: 5;
}
.delete-confirm[data-v-3e45f12a] {
background: #fff;
border-radius: 20px;
padding: 24px;
width: 100%;
max-width: 320px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
.delete-confirm__icon[data-v-3e45f12a] {
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(244, 48, 48, 0.08);
display: flex;
align-items: center;
justify-content: center;
}
.delete-confirm__title[data-v-3e45f12a] {
font-size: 20px;
font-weight: 600;
margin: 0;
color: #1e1e1e;
}
.delete-confirm__card[data-v-3e45f12a] {
margin: 0;
padding: 10px 16px;
border-radius: 14px;
background: #f5f5f5;
font-size: 16px;
font-weight: 600;
color: #1e1e1e;
}
.delete-confirm__text[data-v-3e45f12a] {
margin: 0;
font-size: 16px;
color: #5c5c5c;
}
.delete-confirm__actions[data-v-3e45f12a] {
display: flex;
gap: 12px;
width: 100%;
}
.delete-confirm__btn[data-v-3e45f12a] {
flex: 1;
height: 48px;
border-radius: 14px;
border: 0;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: transform 0.1s ease, opacity 0.2s ease;
}
.delete-confirm__btn[data-v-3e45f12a]:active {
transform: scale(0.98);
}
.delete-confirm__btn--muted[data-v-3e45f12a] {
background: #f5f5f5;
color: #1e1e1e;
}
.delete-confirm__btn--muted[data-v-3e45f12a]:hover {
opacity: 0.85;
}
.delete-confirm__btn--danger[data-v-3e45f12a] {
background: #f43030;
color: #fff;
}
.delete-confirm__btn--danger[data-v-3e45f12a]:hover {
opacity: 0.85;
}
/* Last Card Warning Modal */
.last-card-warning-overlay[data-v-3e45f12a] {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 10000;
}
.last-card-warning[data-v-3e45f12a] {
background: #fff;
border-radius: 24px;
padding: 32px 28px 28px;
width: 100%;
max-width: 400px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
}
.last-card-warning__icon[data-v-3e45f12a] {
width: 64px;
height: 64px;
border-radius: 50%;
background: #fef3cd;
display: flex;
align-items: center;
justify-content: center;
color: #b8860b;
}
.last-card-warning__title[data-v-3e45f12a] {
font-size: 22px;
font-weight: 700;
margin: 0;
color: #1e1e1e;
}
.last-card-warning__text[data-v-3e45f12a] {
margin: 0;
font-size: 16px;
line-height: 1.5;
color: #1e1e1e;
}
.last-card-warning__text strong[data-v-3e45f12a] {
color: #d32f2f;
font-weight: 600;
}
.last-card-warning__text--muted[data-v-3e45f12a] {
font-size: 14px;
color: #666;
}
.last-card-warning__actions[data-v-3e45f12a] {
display: flex;
gap: 12px;
width: 100%;
margin-top: 8px;
}
.last-card-warning__btn[data-v-3e45f12a] {
flex: 1;
height: 52px;
border-radius: 14px;
border: 0;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: transform 0.1s ease, opacity 0.2s ease;
}
.last-card-warning__btn[data-v-3e45f12a]:active {
transform: scale(0.98);
}
.last-card-warning__btn--secondary[data-v-3e45f12a] {
background: #f5f5f5;
color: #1e1e1e;
}
.last-card-warning__btn--secondary[data-v-3e45f12a]:hover {
opacity: 0.85;
}
.last-card-warning__btn--danger[data-v-3e45f12a] {
background: #f43030;
color: #fff;
}
.last-card-warning__btn--danger[data-v-3e45f12a]:hover {
opacity: 0.85;
}
@media (max-width: 480px) {
.last-card-warning[data-v-3e45f12a] {
padding: 24px 20px 20px;
gap: 14px;
border-radius: 20px;
}
.last-card-warning__icon[data-v-3e45f12a] {
width: 56px;
height: 56px;
}
.last-card-warning__icon svg[data-v-3e45f12a] {
width: 28px;
height: 28px;
}
.last-card-warning__title[data-v-3e45f12a] {
font-size: 20px;
}
.last-card-warning__text[data-v-3e45f12a] {
font-size: 15px;
}
.last-card-warning__text--muted[data-v-3e45f12a] {
font-size: 13px;
}
.last-card-warning__actions[data-v-3e45f12a] {
flex-direction: column-reverse;
gap: 10px;
}
.last-card-warning__btn[data-v-3e45f12a] {
height: 48px;
font-size: 15px;
}
}
.card-preview__top[data-v-3e45f12a] {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.card-preview__logo[data-v-3e45f12a] {
width: 48px;
height: 30px;
object-fit: contain;
}
.card-preview__chip svg[data-v-3e45f12a] {
display: block;
}
.card-preview__number-section[data-v-3e45f12a] {
display: flex;
flex-direction: column;
gap: 12px;
}
.card-preview__label[data-v-3e45f12a] {
font-size: 12px;
font-weight: 500;
color: #1e1e1e;
letter-spacing: -0.24px;
}
.card-preview__number[data-v-3e45f12a] {
font-size: 18px;
font-weight: 500;
color: #1e1e1e;
letter-spacing: 4.86px;
}
.card-preview__bottom[data-v-3e45f12a] {
display: flex;
align-items: center;
justify-content: space-between;
}
.card-preview__holder[data-v-3e45f12a] {
font-size: 16px;
font-weight: 500;
color: #1e1e1e;
letter-spacing: -0.32px;
}
.card-preview__expiry[data-v-3e45f12a] {
font-size: 16px;
font-weight: 500;
color: #1e1e1e;
letter-spacing: 3.2px;
}
/* Buttons */
.btn-default[data-v-3e45f12a] {
width: 100%;
height: 58px;
background: #c3fd56;
border: 0;
border-radius: 16px;
padding: 0 28px;
font-size: 20px;
font-weight: 700;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
}
.btn-default[data-v-3e45f12a]:hover:not(:disabled) {
background: #b5f342;
}
.btn-default[data-v-3e45f12a]:active:not(:disabled) {
transform: scale(0.99);
}
.btn-default[data-v-3e45f12a]:disabled {
opacity: 0.6;
cursor: default;
}
.btn-delete[data-v-3e45f12a] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
background: transparent;
border: 0;
padding: 8px 16px;
cursor: pointer;
transition: opacity 0.2s ease, transform 0.1s ease;
}
.btn-delete span[data-v-3e45f12a] {
font-size: 20px;
font-weight: 500;
color: #f43030;
}
.btn-delete[data-v-3e45f12a]:hover {
opacity: 0.8;
}
.btn-delete[data-v-3e45f12a]:active {
transform: scale(0.98);
}
/* Transitions */
.fade-enter-active[data-v-3e45f12a],
.fade-leave-active[data-v-3e45f12a] {
transition: opacity 0.2s ease;
}
.fade-enter-from[data-v-3e45f12a],
.fade-leave-to[data-v-3e45f12a] {
opacity: 0;
}
.pop-enter-active[data-v-3e45f12a],
.pop-leave-active[data-v-3e45f12a] {
transition: opacity 0.25s ease, transform 0.25s ease;
}
.pop-enter-from[data-v-3e45f12a],
.pop-leave-to[data-v-3e45f12a] {
opacity: 0;
transform: translateY(8px) scale(0.98);
}
/* Mobile responsive for modal */
@media (max-aspect-ratio: 3/4) {
.modal-dialog[data-v-3e45f12a] {
padding: 20px;
border-radius: 20px;
gap: 24px;
}
.modal-title[data-v-3e45f12a] {
font-size: 20px;
}
.modal-content[data-v-3e45f12a] {
gap: 24px;
}
.card-preview[data-v-3e45f12a] {
width: 100%;
max-width: 320px;
height: 200px;
padding: 20px;
border-radius: 16px;
}
.card-preview__shine[data-v-3e45f12a] {
border-radius: 16px;
}
.modal-confirm-overlay[data-v-3e45f12a] {
border-radius: 20px;
padding: 20px;
}
.delete-confirm[data-v-3e45f12a] {
padding: 20px;
gap: 14px;
}
.card-preview__logo[data-v-3e45f12a] {
width: 40px;
height: 25px;
}
.card-preview__chip svg[data-v-3e45f12a] {
width: 38px;
height: 28px;
}
.card-preview__label[data-v-3e45f12a] {
font-size: 10px;
}
.card-preview__number[data-v-3e45f12a] {
font-size: 14px;
letter-spacing: 3px;
}
.card-preview__holder[data-v-3e45f12a],
.card-preview__expiry[data-v-3e45f12a] {
font-size: 14px;
}
.btn-default[data-v-3e45f12a] {
height: 50px;
font-size: 16px;
border-radius: 12px;
}
.btn-delete span[data-v-3e45f12a] {
font-size: 16px;
}
}
/* Page layout */
.tariff-change[data-v-d1a3c7ba] {
--topbar-h: 72px;
--hero-h: 40px;
--pad-top: 24px;
--pad-bottom: 48px;
--hero-gap: 16px;
background: transparent;
position: relative;
padding: 0;
padding-top: 48px;
padding-bottom: 40px;
box-sizing: border-box;
display: grid;
gap: 28px;
}
/* Hero (back button) */
.tariff-change__hero[data-v-d1a3c7ba] {
display: flex;
align-items: center;
}
.hero__back[data-v-d1a3c7ba] {
display: inline-flex;
align-items: center;
gap: 15px;
height: 100%;
background: none;
border: 0;
padding: 0;
cursor: pointer;
transition: transform 0.1s ease, opacity 0.2s ease;
}
.hero__back:hover .hero__back-icon[data-v-d1a3c7ba] {
background: rgba(255, 255, 255, 0.25);
}
.hero__back[data-v-d1a3c7ba]:active {
transform: scale(0.98);
}
.hero__back-icon[data-v-d1a3c7ba] {
width: 40px;
height: 40px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
}
.hero__back-icon svg[data-v-d1a3c7ba] {
display: block;
width: 50%;
height: 50%;
}
.hero__back-text[data-v-d1a3c7ba] {
color: #fff;
font-size: 32px;
font-weight: 600;
}
/* Main layout */
.tariff-layout[data-v-d1a3c7ba] {
display: flex;
align-items: flex-start;
justify-content: center;
width: 100%;
}
.tariff-panel[data-v-d1a3c7ba] {
background: #fff;
border-radius: 28px;
padding: 28px;
width: 100%;
max-width: 800px;
display: flex;
flex-direction: column;
gap: 28px;
}
.tariff-panel__title[data-v-d1a3c7ba] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
margin: 0;
letter-spacing: -0.48px;
}
/* Loading & Error states */
.tariff-panel__loading[data-v-d1a3c7ba] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
gap: 16px;
color: #9c9c9c;
}
.tariff-panel__loading p[data-v-d1a3c7ba] {
margin: 0;
font-size: 16px;
font-weight: 500;
}
.loading-spinner[data-v-d1a3c7ba] {
width: 36px;
height: 36px;
border: 3px solid rgba(30, 30, 30, 0.1);
border-top-color: #1e1e1e;
border-radius: 50%;
animation: spin-d1a3c7ba 1s linear infinite;
}
@keyframes spin-d1a3c7ba {
to { transform: rotate(360deg);
}
}
.tariff-panel__error[data-v-d1a3c7ba] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
gap: 16px;
text-align: center;
}
.tariff-panel__error p[data-v-d1a3c7ba] {
margin: 0;
font-size: 16px;
color: #f43030;
}
.btn-retry[data-v-d1a3c7ba] {
padding: 10px 24px;
background: #f5f5f5;
border: 0;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease;
}
.btn-retry[data-v-d1a3c7ba]:hover {
background: #ebebeb;
}
/* Tariff comparison */
.tariff-comparison[data-v-d1a3c7ba] {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 20px;
align-items: stretch;
}
.tariff-card[data-v-d1a3c7ba] {
display: flex;
flex-direction: column;
gap: 16px;
}
.tariff-card__label[data-v-d1a3c7ba] {
font-size: 14px;
font-weight: 600;
color: #8d8d8d;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.tariff-card__label--highlight[data-v-d1a3c7ba] {
color: #4a48e9;
}
/* Tariff header (colored block) */
.tariff-header[data-v-d1a3c7ba] {
background: #4a48e9;
border-radius: 20px;
min-height: 140px;
padding: 20px;
color: #fff;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
.header-art[data-v-d1a3c7ba] {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 1;
}
.flare[data-v-d1a3c7ba] {
position: absolute;
right: -120px;
top: 50%;
transform: translateY(-50%);
opacity: 1;
height: 300px;
max-width: none;
}
.tariff__badge[data-v-d1a3c7ba] {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
backdrop-filter: blur(10px);
font-weight: 500;
font-size: 12px;
margin: 0;
position: relative;
z-index: 1;
}
.tariff__name[data-v-d1a3c7ba] {
margin: 0;
font-size: 28px;
line-height: 1;
font-weight: 600;
letter-spacing: -0.01em;
position: relative;
z-index: 1;
}
/* Header color variants */
.tariff-header.is-green[data-v-d1a3c7ba] {
background: #c3fd56;
color: #1e1e1e;
}
.tariff-header.is-blue[data-v-d1a3c7ba] {
background: #4a48e9;
color: #fff;
}
.tariff-header.is-dark[data-v-d1a3c7ba] {
background: rgba(235, 235, 235, 1);
color: #1e1e1e;
}
.tariff-header.is-black[data-v-d1a3c7ba] {
background: #1e1e1e;
color: #fff;
}
.tariff-header.is-green .tariff__badge[data-v-d1a3c7ba] {
background-color: rgba(255, 255, 255, 0.57);
color: #1e1e1e;
}
.tariff-header.is-blue .tariff__badge[data-v-d1a3c7ba],
.tariff-header.is-dark .tariff__badge[data-v-d1a3c7ba] {
background-color: rgba(30, 30, 30, 0.57);
color: #fff;
}
.tariff-header.is-black .tariff__badge[data-v-d1a3c7ba] {
background-color: rgba(255, 255, 255, 0.25);
color: #fff;
}
/* Tariff details */
.tariff-card__details[data-v-d1a3c7ba] {
display: flex;
flex-direction: column;
gap: 12px;
}
.tariff-card__price[data-v-d1a3c7ba] {
font-size: 22px;
font-weight: 700;
color: #1e1e1e;
}
.tariff-card__price--highlight[data-v-d1a3c7ba] {
color: #4a48e9;
}
.tariff-card__limits[data-v-d1a3c7ba] {
display: flex;
flex-direction: column;
gap: 6px;
}
.limit-item[data-v-d1a3c7ba] {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: rgba(235, 235, 235, 0.5);
border-radius: 10px;
transition: background-color 0.2s ease;
}
.limit-item--improved[data-v-d1a3c7ba] {
background: rgba(195, 253, 86, 0.3);
}
.limit-value[data-v-d1a3c7ba] {
font-size: 16px;
font-weight: 600;
color: #1e1e1e;
}
.limit-unit[data-v-d1a3c7ba] {
font-size: 14px;
color: #8d8d8d;
}
.limit-badge[data-v-d1a3c7ba] {
margin-left: auto;
font-size: 14px;
font-weight: 700;
color: #22c55e;
}
.infinity-icon[data-v-d1a3c7ba] {
width: 24px;
height: auto;
}
/* Arrow transition */
.tariff-arrow[data-v-d1a3c7ba] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 20px 0;
}
.arrow-line[data-v-d1a3c7ba] {
width: 2px;
flex: 1;
min-height: 20px;
background: linear-gradient(180deg, transparent 0%, #c3fd56 50%, transparent 100%);
}
.arrow-icon[data-v-d1a3c7ba] {
width: 48px;
height: 48px;
border-radius: 50%;
background: #c3fd56;
display: flex;
align-items: center;
justify-content: center;
color: #1e1e1e;
box-shadow: 0 4px 16px rgba(195, 253, 86, 0.4);
}
/* New features */
.new-features[data-v-d1a3c7ba] {
display: flex;
flex-direction: column;
gap: 12px;
}
.new-features__title[data-v-d1a3c7ba] {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #1e1e1e;
}
.new-features__list[data-v-d1a3c7ba] {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.new-features__item[data-v-d1a3c7ba] {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 15px;
color: #1e1e1e;
}
.feature-check[data-v-d1a3c7ba] {
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(34, 197, 94, 0.15);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Actions */
.tariff-actions[data-v-d1a3c7ba] {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 8px;
}
.btn-default[data-v-d1a3c7ba] {
width: 100%;
height: 58px;
background: #c3fd56;
border: 0;
border-radius: 16px;
padding: 0 28px;
font-size: 18px;
font-weight: 700;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
}
.btn-default[data-v-d1a3c7ba]:hover:not(:disabled) {
background: #b5f342;
}
.btn-default[data-v-d1a3c7ba]:active:not(:disabled) {
transform: scale(0.99);
}
.btn-default[data-v-d1a3c7ba]:disabled {
opacity: 0.6;
cursor: default;
}
.btn-secondary[data-v-d1a3c7ba] {
width: 100%;
height: 50px;
background: transparent;
border: 1px solid rgba(30, 30, 30, 0.2);
border-radius: 16px;
padding: 0 28px;
font-size: 16px;
font-weight: 600;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.btn-secondary[data-v-d1a3c7ba]:hover:not(:disabled) {
background: rgba(235, 235, 235, 0.5);
}
.btn-secondary[data-v-d1a3c7ba]:active:not(:disabled) {
transform: scale(0.99);
}
.btn-secondary[data-v-d1a3c7ba]:disabled {
opacity: 0.5;
cursor: default;
}
/* Modal */
.modal-overlay[data-v-d1a3c7ba] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
box-sizing: border-box;
overflow: auto;
}
.modal-dialog[data-v-d1a3c7ba] {
background: #fff;
border-radius: 28px;
padding: 32px;
width: 100%;
max-width: 420px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
margin: auto;
}
.modal-content--success[data-v-d1a3c7ba] {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
}
.success-icon[data-v-d1a3c7ba] {
margin-bottom: 4px;
}
.modal-title[data-v-d1a3c7ba] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
margin: 0;
}
.modal-text[data-v-d1a3c7ba] {
font-size: 16px;
color: #5c5c5c;
margin: 0;
line-height: 1.5;
}
/* Transitions */
.fade-enter-active[data-v-d1a3c7ba],
.fade-leave-active[data-v-d1a3c7ba] {
transition: opacity 0.2s ease;
}
.fade-enter-from[data-v-d1a3c7ba],
.fade-leave-to[data-v-d1a3c7ba] {
opacity: 0;
}
.pop-enter-active[data-v-d1a3c7ba],
.pop-leave-active[data-v-d1a3c7ba] {
transition: opacity 0.25s ease, transform 0.25s ease;
}
.pop-enter-from[data-v-d1a3c7ba],
.pop-leave-to[data-v-d1a3c7ba] {
opacity: 0;
transform: translateY(8px) scale(0.98);
}
/* Mobile responsive */
@media (max-aspect-ratio: 3/4) {
.tariff-change[data-v-d1a3c7ba] {
gap: 16px;
}
.hero__back[data-v-d1a3c7ba] {
gap: 8px;
}
.hero__back-icon[data-v-d1a3c7ba] {
width: 30px;
height: 30px;
}
.hero__back-text[data-v-d1a3c7ba] {
font-size: 24px;
font-weight: 500;
}
.tariff-panel[data-v-d1a3c7ba] {
padding: 16px;
border-radius: 16px;
gap: 20px;
}
.tariff-panel__title[data-v-d1a3c7ba] {
font-size: 20px;
}
/* Stack tariffs vertically on mobile */
.tariff-comparison[data-v-d1a3c7ba] {
grid-template-columns: 1fr;
gap: 0;
}
.tariff-arrow[data-v-d1a3c7ba] {
flex-direction: row;
padding: 16px 0;
}
.arrow-line[data-v-d1a3c7ba] {
height: 2px;
width: 100%;
min-height: auto;
min-width: 20px;
background: linear-gradient(90deg, transparent 0%, #c3fd56 50%, transparent 100%);
}
.arrow-icon[data-v-d1a3c7ba] {
width: 40px;
height: 40px;
transform: rotate(90deg);
}
.tariff-header[data-v-d1a3c7ba] {
min-height: 100px;
padding: 16px;
border-radius: 16px;
}
.tariff__name[data-v-d1a3c7ba] {
font-size: 22px;
}
.flare[data-v-d1a3c7ba] {
height: 200px;
right: -80px;
}
.tariff-card__price[data-v-d1a3c7ba] {
font-size: 18px;
}
.price-difference[data-v-d1a3c7ba] {
padding: 16px;
border-radius: 12px;
}
.price-difference__label[data-v-d1a3c7ba] {
font-size: 14px;
}
.price-difference__value[data-v-d1a3c7ba] {
font-size: 16px;
}
.price-difference__note[data-v-d1a3c7ba] {
font-size: 12px;
}
.new-features__title[data-v-d1a3c7ba] {
font-size: 16px;
}
.new-features__item[data-v-d1a3c7ba] {
font-size: 14px;
}
.btn-default[data-v-d1a3c7ba] {
height: 52px;
font-size: 16px;
border-radius: 12px;
}
.btn-secondary[data-v-d1a3c7ba] {
height: 46px;
font-size: 14px;
border-radius: 12px;
}
.modal-dialog[data-v-d1a3c7ba] {
padding: 24px;
border-radius: 20px;
}
.modal-title[data-v-d1a3c7ba] {
font-size: 20px;
}
.modal-text[data-v-d1a3c7ba] {
font-size: 14px;
}
}
@media (max-aspect-ratio: 2/3) {
.hero__back-icon[data-v-d1a3c7ba] {
width: 20px;
height: 20px;
}
.hero__back-text[data-v-d1a3c7ba] {
font-size: 14px;
font-weight: 500;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
[data-v-d1a3c7ba] {
transition: none !important;
animation: none !important;
}
}
/* Page layout */
.cancel-subscription[data-v-58da611b] {
--topbar-h: 72px;
--hero-h: 40px;
--pad-top: 24px;
--pad-bottom: 48px;
--hero-gap: 16px;
background: transparent;
position: relative;
padding: 0;
padding-top: 48px;
padding-bottom: 40px;
box-sizing: border-box;
display: grid;
gap: 28px;
}
/* Hero (back button) */
.cancel-subscription__hero[data-v-58da611b] {
display: flex;
align-items: center;
}
.hero__back[data-v-58da611b] {
display: inline-flex;
align-items: center;
gap: 15px;
height: 100%;
background: none;
border: 0;
padding: 0;
cursor: pointer;
transition: transform 0.1s ease, opacity 0.2s ease;
}
.hero__back:hover .hero__back-icon[data-v-58da611b] {
background: rgba(255, 255, 255, 0.25);
}
.hero__back[data-v-58da611b]:active {
transform: scale(0.98);
}
.hero__back-icon[data-v-58da611b] {
width: 40px;
height: 40px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
}
.hero__back-icon svg[data-v-58da611b] {
display: block;
width: 50%;
height: 50%;
}
.hero__back-text[data-v-58da611b] {
color: #fff;
font-size: 32px;
font-weight: 600;
}
/* Main layout */
.cancel-layout[data-v-58da611b] {
display: flex;
align-items: flex-start;
justify-content: center;
width: 100%;
}
.cancel-panel[data-v-58da611b] {
background: #fff;
border-radius: 28px;
padding: 28px;
width: 100%;
max-width: 560px;
display: flex;
flex-direction: column;
gap: 28px;
}
.cancel-panel__title[data-v-58da611b] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
margin: 0;
letter-spacing: -0.48px;
}
/* Loading & Error states */
.cancel-panel__loading[data-v-58da611b] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
gap: 16px;
color: #9c9c9c;
}
.cancel-panel__loading p[data-v-58da611b] {
margin: 0;
font-size: 16px;
font-weight: 500;
}
.loading-spinner[data-v-58da611b] {
width: 36px;
height: 36px;
border: 3px solid rgba(30, 30, 30, 0.1);
border-top-color: #1e1e1e;
border-radius: 50%;
animation: spin-58da611b 1s linear infinite;
}
@keyframes spin-58da611b {
to { transform: rotate(360deg);
}
}
.cancel-panel__error[data-v-58da611b] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
gap: 16px;
text-align: center;
}
.cancel-panel__error p[data-v-58da611b] {
margin: 0;
font-size: 16px;
color: #f43030;
}
.btn-retry[data-v-58da611b] {
padding: 10px 24px;
background: #f5f5f5;
border: 0;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease;
}
.btn-retry[data-v-58da611b]:hover {
background: #ebebeb;
}
/* Subscription info */
.subscription-info[data-v-58da611b] {
display: flex;
flex-direction: column;
gap: 16px;
}
.subscription-card[data-v-58da611b] {
display: flex;
flex-direction: column;
gap: 16px;
}
.subscription-card__label[data-v-58da611b] {
font-size: 14px;
font-weight: 600;
color: #8d8d8d;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Subscription header (colored block) */
.subscription-header[data-v-58da611b] {
background: #4a48e9;
border-radius: 20px;
min-height: 140px;
padding: 20px;
color: #fff;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
.header-art[data-v-58da611b] {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 1;
}
.flare[data-v-58da611b] {
position: absolute;
right: -120px;
top: 50%;
transform: translateY(-50%);
opacity: 1;
height: 300px;
max-width: none;
}
.subscription__badge[data-v-58da611b] {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
backdrop-filter: blur(10px);
font-weight: 500;
font-size: 12px;
margin: 0;
position: relative;
z-index: 1;
}
.subscription__name[data-v-58da611b] {
margin: 0;
font-size: 28px;
line-height: 1;
font-weight: 600;
letter-spacing: -0.01em;
position: relative;
z-index: 1;
}
/* Header color variants */
.subscription-header.is-green[data-v-58da611b] {
background: #c3fd56;
color: #1e1e1e;
}
.subscription-header.is-blue[data-v-58da611b] {
background: #4a48e9;
color: #fff;
}
.subscription-header.is-dark[data-v-58da611b] {
background: rgba(235, 235, 235, 1);
color: #1e1e1e;
}
.subscription-header.is-black[data-v-58da611b] {
background: #1e1e1e;
color: #fff;
}
.subscription-header.is-green .subscription__badge[data-v-58da611b] {
background-color: rgba(255, 255, 255, 0.57);
color: #1e1e1e;
}
.subscription-header.is-blue .subscription__badge[data-v-58da611b],
.subscription-header.is-dark .subscription__badge[data-v-58da611b] {
background-color: rgba(30, 30, 30, 0.57);
color: #fff;
}
.subscription-header.is-black .subscription__badge[data-v-58da611b] {
background-color: rgba(255, 255, 255, 0.25);
color: #fff;
}
/* Subscription details */
.subscription-card__details[data-v-58da611b] {
display: flex;
flex-direction: column;
gap: 12px;
}
.subscription-card__price[data-v-58da611b] {
font-size: 22px;
font-weight: 700;
color: #1e1e1e;
}
.subscription-card__limits[data-v-58da611b] {
display: flex;
flex-direction: column;
gap: 6px;
}
.limit-item[data-v-58da611b] {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: rgba(235, 235, 235, 0.5);
border-radius: 10px;
}
.limit-value[data-v-58da611b] {
font-size: 16px;
font-weight: 600;
color: #1e1e1e;
}
.limit-unit[data-v-58da611b] {
font-size: 14px;
color: #8d8d8d;
}
.infinity-icon[data-v-58da611b] {
width: 24px;
height: auto;
}
/* Warning block */
.cancel-warning[data-v-58da611b] {
display: flex;
gap: 16px;
padding: 20px;
background: rgba(244, 48, 48, 0.08);
border: 1px solid rgba(244, 48, 48, 0.2);
border-radius: 16px;
}
.cancel-warning__icon[data-v-58da611b] {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(244, 48, 48, 0.15);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #f43030;
}
.cancel-warning__content[data-v-58da611b] {
display: flex;
flex-direction: column;
gap: 4px;
}
.cancel-warning__title[data-v-58da611b] {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #f43030;
}
.cancel-warning__text[data-v-58da611b] {
margin: 0;
font-size: 14px;
color: #5c5c5c;
line-height: 1.5;
}
/* Lose features */
.lose-features[data-v-58da611b] {
display: flex;
flex-direction: column;
gap: 12px;
}
.lose-features__title[data-v-58da611b] {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #1e1e1e;
}
.lose-features__list[data-v-58da611b] {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.lose-features__item[data-v-58da611b] {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 15px;
color: #1e1e1e;
}
.feature-cross[data-v-58da611b] {
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(244, 48, 48, 0.15);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Cancel reason */
.cancel-reason[data-v-58da611b] {
display: flex;
flex-direction: column;
gap: 8px;
}
.cancel-reason__label[data-v-58da611b] {
font-size: 14px;
font-weight: 500;
color: #5c5c5c;
}
.cancel-reason__select[data-v-58da611b] {
width: 100%;
height: 52px;
padding: 0 16px;
border: 1px solid rgba(30, 30, 30, 0.15);
border-radius: 12px;
font-size: 16px;
color: #1e1e1e;
background: #fff;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238d8d8d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
transition: border-color 0.2s ease;
}
.cancel-reason__select[data-v-58da611b]:focus {
outline: none;
border-color: #4a48e9;
}
/* Actions */
.cancel-actions[data-v-58da611b] {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 8px;
}
.btn-cancel[data-v-58da611b] {
width: 100%;
height: 58px;
background: #f43030;
border: 0;
border-radius: 16px;
padding: 0 28px;
font-size: 18px;
font-weight: 700;
color: #fff;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
}
.btn-cancel[data-v-58da611b]:hover:not(:disabled) {
background: #e02020;
}
.btn-cancel[data-v-58da611b]:active:not(:disabled) {
transform: scale(0.99);
}
.btn-cancel[data-v-58da611b]:disabled {
opacity: 0.6;
cursor: default;
}
.btn-keep[data-v-58da611b] {
width: 100%;
height: 58px;
background: #c3fd56;
border: 0;
border-radius: 16px;
padding: 0 28px;
font-size: 18px;
font-weight: 700;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.btn-keep[data-v-58da611b]:hover:not(:disabled) {
background: #b5f342;
}
.btn-keep[data-v-58da611b]:active:not(:disabled) {
transform: scale(0.99);
}
.btn-keep[data-v-58da611b]:disabled {
opacity: 0.5;
cursor: default;
}
.btn-default[data-v-58da611b] {
width: 100%;
height: 58px;
background: #c3fd56;
border: 0;
border-radius: 16px;
padding: 0 28px;
font-size: 18px;
font-weight: 700;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
}
.btn-default[data-v-58da611b]:hover:not(:disabled) {
background: #b5f342;
}
.btn-default[data-v-58da611b]:active:not(:disabled) {
transform: scale(0.99);
}
/* Modal */
.modal-overlay[data-v-58da611b] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
box-sizing: border-box;
overflow: auto;
}
.modal-dialog[data-v-58da611b] {
background: #fff;
border-radius: 28px;
padding: 32px;
width: 100%;
max-width: 420px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
margin: auto;
}
.modal-content--success[data-v-58da611b] {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
}
.success-icon[data-v-58da611b] {
margin-bottom: 4px;
}
.modal-title[data-v-58da611b] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
margin: 0;
}
.modal-text[data-v-58da611b] {
font-size: 16px;
color: #5c5c5c;
margin: 0;
line-height: 1.5;
}
/* Transitions */
.fade-enter-active[data-v-58da611b],
.fade-leave-active[data-v-58da611b] {
transition: opacity 0.2s ease;
}
.fade-enter-from[data-v-58da611b],
.fade-leave-to[data-v-58da611b] {
opacity: 0;
}
.pop-enter-active[data-v-58da611b],
.pop-leave-active[data-v-58da611b] {
transition: opacity 0.25s ease, transform 0.25s ease;
}
.pop-enter-from[data-v-58da611b],
.pop-leave-to[data-v-58da611b] {
opacity: 0;
transform: translateY(8px) scale(0.98);
}
/* Mobile responsive */
@media (max-aspect-ratio: 3/4) {
.cancel-subscription[data-v-58da611b] {
gap: 16px;
}
.hero__back[data-v-58da611b] {
gap: 8px;
}
.hero__back-icon[data-v-58da611b] {
width: 30px;
height: 30px;
}
.hero__back-text[data-v-58da611b] {
font-size: 24px;
font-weight: 500;
}
.cancel-panel[data-v-58da611b] {
padding: 16px;
border-radius: 16px;
gap: 20px;
}
.cancel-panel__title[data-v-58da611b] {
font-size: 20px;
}
.subscription-header[data-v-58da611b] {
min-height: 100px;
padding: 16px;
border-radius: 16px;
}
.subscription__name[data-v-58da611b] {
font-size: 22px;
}
.flare[data-v-58da611b] {
height: 200px;
right: -80px;
}
.subscription-card__price[data-v-58da611b] {
font-size: 18px;
}
.cancel-warning[data-v-58da611b] {
padding: 16px;
border-radius: 12px;
}
.cancel-warning__icon[data-v-58da611b] {
width: 32px;
height: 32px;
}
.cancel-warning__title[data-v-58da611b] {
font-size: 14px;
}
.cancel-warning__text[data-v-58da611b] {
font-size: 13px;
}
.lose-features__title[data-v-58da611b] {
font-size: 16px;
}
.lose-features__item[data-v-58da611b] {
font-size: 14px;
}
.cancel-reason__select[data-v-58da611b] {
height: 48px;
font-size: 14px;
border-radius: 10px;
}
.btn-cancel[data-v-58da611b],
.btn-keep[data-v-58da611b],
.btn-default[data-v-58da611b] {
height: 52px;
font-size: 16px;
border-radius: 12px;
}
.modal-dialog[data-v-58da611b] {
padding: 24px;
border-radius: 20px;
}
.modal-title[data-v-58da611b] {
font-size: 20px;
}
.modal-text[data-v-58da611b] {
font-size: 14px;
}
}
@media (max-aspect-ratio: 2/3) {
.hero__back-icon[data-v-58da611b] {
width: 20px;
height: 20px;
}
.hero__back-text[data-v-58da611b] {
font-size: 14px;
font-weight: 500;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
[data-v-58da611b] {
transition: none !important;
animation: none !important;
}
}
/* Page layout */
.confirmation[data-v-9a2570ae] {
--topbar-h: 72px;
--hero-h: 40px;
--pad-top: 24px;
--pad-bottom: 48px;
--hero-gap: 16px;
background: transparent;
position: relative;
padding: 0;
padding-top: 48px;
padding-bottom: 40px;
box-sizing: border-box;
display: grid;
gap: 28px;
}
/* Hero (back button) */
.confirmation__hero[data-v-9a2570ae] {
display: flex;
align-items: center;
}
.hero__back[data-v-9a2570ae] {
display: inline-flex;
align-items: center;
gap: 15px;
height: 100%;
background: none;
border: 0;
padding: 0;
cursor: pointer;
transition: transform 0.1s ease, opacity 0.2s ease;
}
.hero__back:hover .hero__back-icon[data-v-9a2570ae] {
background: rgba(255, 255, 255, 0.25);
}
.hero__back[data-v-9a2570ae]:active {
transform: scale(0.98);
}
.hero__back-icon[data-v-9a2570ae] {
width: 40px;
height: 40px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
}
.hero__back-icon svg[data-v-9a2570ae] {
display: block;
width: 50%;
height: 50%;
}
.hero__back-text[data-v-9a2570ae] {
color: #fff;
font-size: 32px;
font-weight: 600;
}
/* Main layout */
.confirmation-layout[data-v-9a2570ae] {
display: flex;
align-items: flex-start;
justify-content: center;
width: 100%;
}
.confirmation-panel[data-v-9a2570ae] {
background: #fff;
border-radius: 28px;
padding: 28px;
width: 100%;
max-width: 700px;
display: flex;
flex-direction: column;
gap: 28px;
}
.confirmation-panel__title[data-v-9a2570ae] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
margin: 0;
letter-spacing: -0.48px;
}
/* Loading & Error states */
.confirmation-panel__loading[data-v-9a2570ae] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
gap: 16px;
color: #9c9c9c;
}
.confirmation-panel__loading p[data-v-9a2570ae] {
margin: 0;
font-size: 16px;
font-weight: 500;
}
.loading-spinner[data-v-9a2570ae] {
width: 36px;
height: 36px;
border: 3px solid rgba(30, 30, 30, 0.1);
border-top-color: #1e1e1e;
border-radius: 50%;
animation: spin-9a2570ae 1s linear infinite;
}
@keyframes spin-9a2570ae {
to { transform: rotate(360deg);
}
}
.confirmation-panel__error[data-v-9a2570ae] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
gap: 16px;
text-align: center;
}
.confirmation-panel__error p[data-v-9a2570ae] {
margin: 0;
font-size: 16px;
color: #f43030;
}
.btn-retry[data-v-9a2570ae] {
padding: 10px 24px;
background: #f5f5f5;
border: 0;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease;
}
.btn-retry[data-v-9a2570ae]:hover {
background: #ebebeb;
}
/* Empty state */
.confirmation-panel__empty[data-v-9a2570ae] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
gap: 16px;
text-align: center;
}
.empty-icon[data-v-9a2570ae] {
margin-bottom: 8px;
}
.empty-title[data-v-9a2570ae] {
margin: 0;
font-size: 22px;
font-weight: 600;
color: #1e1e1e;
}
.empty-text[data-v-9a2570ae] {
margin: 0;
font-size: 16px;
color: #8d8d8d;
}
/* Subscriptions list */
.subscriptions-list[data-v-9a2570ae] {
display: flex;
flex-direction: column;
gap: 12px;
max-height: 400px;
overflow-y: auto;
padding-right: 4px;
margin-right: -4px;
}
.subscriptions-list[data-v-9a2570ae]::-webkit-scrollbar {
width: 4px;
}
.subscriptions-list[data-v-9a2570ae]::-webkit-scrollbar-track {
background: transparent;
}
.subscriptions-list[data-v-9a2570ae]::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15);
border-radius: 4px;
}
.subscriptions-list[data-v-9a2570ae]::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.25);
}
.subscription-card[data-v-9a2570ae] {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid rgba(235, 235, 235, 1);
border-radius: 14px;
overflow: hidden;
flex-shrink: 0;
}
.subscription-card__header[data-v-9a2570ae] {
background: #4a48e9;
min-height: 56px;
padding: 12px 16px;
color: #fff;
position: relative;
overflow: hidden;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.header-art[data-v-9a2570ae] {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.7;
}
.flare[data-v-9a2570ae] {
position: absolute;
right: -80px;
top: 50%;
transform: translateY(-50%);
opacity: 1;
height: 140px;
max-width: none;
}
.tariff__badge[data-v-9a2570ae] {
display: none;
}
.tariff__name[data-v-9a2570ae] {
margin: 0;
font-size: 16px;
line-height: 1;
font-weight: 600;
letter-spacing: -0.01em;
position: relative;
z-index: 1;
}
/* Header color variants */
.subscription-card__header.is-green[data-v-9a2570ae] {
background: #c3fd56;
color: #1e1e1e;
}
.subscription-card__header.is-blue[data-v-9a2570ae] {
background: #4a48e9;
color: #fff;
}
.subscription-card__header.is-dark[data-v-9a2570ae] {
background: rgba(235, 235, 235, 1);
color: #1e1e1e;
}
.subscription-card__header.is-black[data-v-9a2570ae] {
background: #1e1e1e;
color: #fff;
}
.subscription-card__header.is-green .tariff__badge[data-v-9a2570ae] {
background-color: rgba(255, 255, 255, 0.57);
color: #1e1e1e;
}
.subscription-card__header.is-blue .tariff__badge[data-v-9a2570ae],
.subscription-card__header.is-dark .tariff__badge[data-v-9a2570ae] {
background-color: rgba(30, 30, 30, 0.57);
color: #fff;
}
.subscription-card__header.is-black .tariff__badge[data-v-9a2570ae] {
background-color: rgba(255, 255, 255, 0.25);
color: #fff;
}
/* Subscription details */
.subscription-card__details[data-v-9a2570ae] {
display: flex;
flex-direction: column;
gap: 0;
padding: 10px 14px;
}
.detail-row[data-v-9a2570ae] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 6px 0;
border-bottom: 1px solid rgba(235, 235, 235, 0.5);
}
.detail-row[data-v-9a2570ae]:last-child {
border-bottom: none;
}
.detail-row--price[data-v-9a2570ae] {
padding-top: 8px;
border-top: 1px solid #ebebeb;
border-bottom: none;
margin-top: 2px;
}
.detail-label[data-v-9a2570ae] {
font-size: 13px;
color: #8d8d8d;
}
.detail-value[data-v-9a2570ae] {
font-size: 13px;
font-weight: 600;
color: #1e1e1e;
}
.detail-value--status[data-v-9a2570ae] {
padding: 3px 8px;
border-radius: 6px;
font-size: 11px;
}
.detail-value--status.status--active[data-v-9a2570ae] {
background: rgba(34, 197, 94, 0.15);
color: #22c55e;
}
.detail-value--status.status--overdue[data-v-9a2570ae] {
background: rgba(244, 48, 48, 0.15);
color: #f43030;
}
.detail-value--status.status--canceled[data-v-9a2570ae] {
background: rgba(141, 141, 141, 0.15);
color: #8d8d8d;
}
.detail-value--status.status--trial[data-v-9a2570ae] {
background: rgba(74, 72, 233, 0.15);
color: #4a48e9;
}
.detail-value--status.status--paused[data-v-9a2570ae] {
background: rgba(245, 158, 11, 0.15);
color: #f59e0b;
}
.detail-value--amount[data-v-9a2570ae] {
font-size: 15px;
font-weight: 700;
color: #1e1e1e;
}
/* Total section */
.total-section[data-v-9a2570ae] {
background: #f5f5f5;
border-radius: 16px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.total-row[data-v-9a2570ae] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.total-label[data-v-9a2570ae] {
font-size: 18px;
font-weight: 600;
color: #1e1e1e;
}
.total-value[data-v-9a2570ae] {
font-size: 24px;
font-weight: 700;
color: #4a48e9;
}
.total-note[data-v-9a2570ae] {
margin: 0;
font-size: 14px;
color: #8d8d8d;
}
/* Actions */
.confirmation-actions[data-v-9a2570ae] {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 8px;
}
.btn-default[data-v-9a2570ae] {
width: 100%;
height: 58px;
background: #c3fd56;
border: 0;
border-radius: 16px;
padding: 0 28px;
font-size: 18px;
font-weight: 700;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
}
.btn-default[data-v-9a2570ae]:hover:not(:disabled) {
background: #b5f342;
}
.btn-default[data-v-9a2570ae]:active:not(:disabled) {
transform: scale(0.99);
}
.btn-default[data-v-9a2570ae]:disabled {
opacity: 0.6;
cursor: default;
}
.btn-secondary[data-v-9a2570ae] {
width: 100%;
height: 50px;
background: transparent;
border: 1px solid rgba(30, 30, 30, 0.2);
border-radius: 16px;
padding: 0 28px;
font-size: 16px;
font-weight: 600;
color: #1e1e1e;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.btn-secondary[data-v-9a2570ae]:hover:not(:disabled) {
background: rgba(235, 235, 235, 0.5);
}
.btn-secondary[data-v-9a2570ae]:active:not(:disabled) {
transform: scale(0.99);
}
.btn-secondary[data-v-9a2570ae]:disabled {
opacity: 0.5;
cursor: default;
}
/* Mobile responsive */
@media (max-aspect-ratio: 3/4) {
.confirmation[data-v-9a2570ae] {
gap: 16px;
}
.hero__back[data-v-9a2570ae] {
gap: 8px;
}
.hero__back-icon[data-v-9a2570ae] {
width: 30px;
height: 30px;
}
.hero__back-text[data-v-9a2570ae] {
font-size: 24px;
font-weight: 500;
}
.confirmation-panel[data-v-9a2570ae] {
padding: 16px;
border-radius: 16px;
gap: 20px;
}
.confirmation-panel__title[data-v-9a2570ae] {
font-size: 20px;
}
.subscriptions-list[data-v-9a2570ae] {
max-height: 320px;
gap: 10px;
}
.subscription-card[data-v-9a2570ae] {
border-radius: 12px;
}
.subscription-card__header[data-v-9a2570ae] {
min-height: 48px;
padding: 10px 12px;
}
.tariff__name[data-v-9a2570ae] {
font-size: 14px;
}
.flare[data-v-9a2570ae] {
height: 100px;
right: -50px;
}
.subscription-card__details[data-v-9a2570ae] {
padding: 8px 12px;
gap: 0;
}
.detail-row[data-v-9a2570ae] {
padding: 5px 0;
}
.detail-label[data-v-9a2570ae],
.detail-value[data-v-9a2570ae] {
font-size: 12px;
}
.detail-value--amount[data-v-9a2570ae] {
font-size: 14px;
}
.detail-value--status[data-v-9a2570ae] {
padding: 2px 6px;
font-size: 10px;
}
.total-section[data-v-9a2570ae] {
padding: 16px;
border-radius: 12px;
}
.total-label[data-v-9a2570ae] {
font-size: 16px;
}
.total-value[data-v-9a2570ae] {
font-size: 20px;
}
.total-note[data-v-9a2570ae] {
font-size: 12px;
}
.btn-default[data-v-9a2570ae] {
height: 52px;
font-size: 16px;
border-radius: 12px;
}
.btn-secondary[data-v-9a2570ae] {
height: 46px;
font-size: 14px;
border-radius: 12px;
}
}
@media (max-aspect-ratio: 2/3) {
.hero__back-icon[data-v-9a2570ae] {
width: 20px;
height: 20px;
}
.hero__back-text[data-v-9a2570ae] {
font-size: 14px;
font-weight: 500;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
[data-v-9a2570ae] {
transition: none !important;
animation: none !important;
}
}
.image-field[data-v-093a0dd8] {
gap: 12px;
}
.image-field__body[data-v-093a0dd8] {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: flex-start;
}
.image-field__inputs[data-v-093a0dd8] {
flex: 1 1 0;
min-width: 220px;
display: grid;
gap: 10px;
}
.image-field__inputs[data-v-093a0dd8] > * {
min-width: 0;
}
.image-preview[data-v-093a0dd8] {
--preview-height: 140px;
width: 160px;
border: 1px dashed #dfe4f5;
border-radius: 16px;
background: #f9fbff;
padding: 12px;
display: grid;
gap: 10px;
}
.image-preview__frame[data-v-093a0dd8] {
border-radius: 12px;
background: #fff;
padding: 6px;
height: var(--preview-height);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.image-preview__media[data-v-093a0dd8] {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.image-preview__media img[data-v-093a0dd8] {
max-height: 100%;
max-width: 100%;
object-fit: contain;
display: block;
border-radius: 10px;
}
.image-preview__state[data-v-093a0dd8] {
width: 100%;
height: 100%;
border-radius: 10px;
background: rgba(124, 133, 163, 0.08);
color: #7c85a3;
font-size: 13px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
}
.image-preview__meta[data-v-093a0dd8] {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
color: #4f5673;
flex-wrap: wrap;
}
.image-preview__url[data-v-093a0dd8] {
display: block;
min-width: 0;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace;
}
.image-preview__link[data-v-093a0dd8] {
font-weight: 600;
color: #3d5afe;
text-decoration: none;
}
.image-preview__link[data-v-093a0dd8]:hover {
text-decoration: underline;
}
.image-preview--empty[data-v-093a0dd8] {
border-style: solid;
background: #f5f7fb;
}
@media (max-width: 640px) {
.image-preview[data-v-093a0dd8] {
width: 100%;
}
}
.preview-wrapper[data-v-9ab532e3] {
margin-top: 12px;
padding-top: 16px;
border-top: 1px dashed #dfe4f5;
display: grid;
gap: 12px;
}
.preview-label[data-v-9ab532e3] {
margin: 0;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #8c95b1;
}
.preview-frame[data-v-9ab532e3] {
border: 1px solid #dfe4f5;
border-radius: 24px;
background: #f9fbff;
padding: 16px;
overflow: hidden;
}
.preview-scale-container[data-v-9ab532e3] {
position: relative;
width: 100%;
overflow: hidden;
}
.preview-scale-target section[data-v-9ab532e3] {
margin: 0;
}
.preview-scale-target[data-v-9ab532e3] .home-hero {
margin-top: 0;
}
.preview-scale-target[data-v-9ab532e3] {
transform-origin: top left;
}
.panel[data-v-80896106] {
background: linear-gradient(180deg, #1e1e1e 0%, #4A48E9 100%);
border-radius: 24px;
padding: 28px;
color: #fff;
display: grid;
gap: 32px;
}
.title[data-v-80896106] { margin: 0; font-weight: 600; font-size: 64px; line-height: 0.9; letter-spacing: -0.01em;
}
.cards[data-v-80896106] { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; align-items: end;
}
.card[data-v-80896106] {
border-radius: 24px;
padding: 20px;
display: grid;
gap: 24px;
position: relative;
isolation: isolate;
/* Антиалиасинг для трансформаций */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform-style: preserve-3d;
}
/* Фон с блюром в отдельном слое, чтобы не блюрился контент карточки */
.card[data-v-80896106]::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: rgba(30,30,30,0.25);
backdrop-filter: blur(16.75px);
-webkit-backdrop-filter: blur(16.75px);
z-index: -1;
}
.cards .card[data-v-80896106]:nth-child(odd) { transform: rotate(-3deg) translateZ(0);
}
.cards .card[data-v-80896106]:nth-child(even) { transform: rotate(3deg) translateZ(0);
}
.head[data-v-80896106] { display: grid; gap: 8px;
}
.card-title[data-v-80896106] { margin: 0; font-weight: 600; font-size: 26px; line-height: 1.1; letter-spacing: -0.01em; color: #fff;
}
.card-sub[data-v-80896106] { margin: 0; font-weight: 500; font-size: 20px; line-height: 1.2; color: rgba(255,255,255,0.9); letter-spacing: -0.01em;
}
.media[data-v-80896106] { position: relative; border-radius: 12px; overflow: hidden; display: grid; grid-template-rows: 180px auto;
}
.preview[data-v-80896106] { position: relative; height: 180px;
}
.img[data-v-80896106] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.preview[data-v-80896106]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; top: 50%; background: linear-gradient(to top, #1e1e1e 0%, rgba(30,30,30,0) 100%); pointer-events: none;
}
.body[data-v-80896106] { background: #1e1e1e; padding: 16px; display: grid; gap: 20px;
}
.card-desc[data-v-80896106] { margin: 0; font-weight: 500; font-size: 20px; line-height: 1.2; color: rgba(255,255,255,0.9); letter-spacing: -0.01em;
}
.body[data-v-80896106] .ui-icon-block-btn { width: 100%; border-radius: 8px;
}
/* Gradient outline like ManageNewWay panels */
.card[data-v-80896106]::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(80deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.9) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
z-index: 1;
}
@media (max-aspect-ratio: 1/1) {
.cards[data-v-80896106] { grid-template-columns: repeat(2, 1fr);
}
.preview[data-v-80896106] { height: 260px;
}
.media[data-v-80896106] { grid-template-rows: 260px auto;
}
}
/* Medium (tablet portrait/square only) */
@media (max-aspect-ratio: 3/4) {
.title[data-v-80896106] { font-size: 48px;
}
.card-sub[data-v-80896106],
.card-desc[data-v-80896106] { font-size: 18px;
}
.preview[data-v-80896106] { height: 160px;
}
.media[data-v-80896106] { grid-template-rows: 160px auto;
}
}
/* Mobile (portrait/square only) */
@media (max-aspect-ratio: 2/3) {
.title[data-v-80896106] { font-size: 36px;
}
.panel[data-v-80896106] { padding: 16px;
}
.cards[data-v-80896106] { margin: 0; padding: 0; padding-bottom: 8px; display: grid; grid-template-columns: 1fr; gap: 24px; overflow: visible; align-items: stretch;
}
.card-sub[data-v-80896106],
.card-desc[data-v-80896106] { font-size: 14px; font-weight: 500;
}
.card[data-v-80896106] { min-height: 350px;
}
.preview[data-v-80896106] { height: 260px;
}
.media[data-v-80896106] { grid-template-rows: 260px auto;
}
.body[data-v-80896106] { padding: 12px; gap: 16px;
}
}
@media (max-aspect-ratio: 2/3) {
.preview[data-v-80896106] { height: 200px;
}
.media[data-v-80896106] { grid-template-rows: 200px auto;
}
}
.wrap[data-v-60a33bc5] { display: grid; gap: 40px;
}
.title[data-v-60a33bc5] {
margin: 0;
font-weight: 600;
font-size: 64px;
line-height: 0.9;
letter-spacing: -0.01em;
color: var(--color-primary);
}
.row[data-v-60a33bc5] { position: relative; display: grid; gap: 24px;
}
.scroller-wrapper[data-v-60a33bc5] {
position: relative;
margin: -40px 0 -60px;
min-width: 0;
}
.scroller-overlay[data-v-60a33bc5] {
position: absolute;
top: 0; bottom: 0;
width: 20px;
pointer-events: none;
z-index: 2;
}
.scroller-overlay.left[data-v-60a33bc5] {
left: -1px;
background: linear-gradient(to right, var(--color-bg) 0%, rgba(235, 235, 235, 0) 100%);
}
.scroller-overlay.right[data-v-60a33bc5] {
right: -1px;
background: linear-gradient(to left, var(--color-bg) 0%, rgba(235, 235, 235, 0) 100%);
}
.scroller[data-v-60a33bc5] {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.scroller[data-v-60a33bc5]::-webkit-scrollbar { display: none;
}
.cards[data-v-60a33bc5] {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 363px;
gap: 24px;
list-style: none;
padding: 40px 0 60px;
margin: 0;
user-select: none; /* Disable text selection */
overflow-x: visible;
}
.card[data-v-60a33bc5] {
position: relative;
height: 521px;
border-radius: 28px;
overflow: hidden;
padding: 20px;
color: #fff;
background: rgba(0,0,0,0.7);
display: flex;
flex-direction: column;
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
will-change: transform;
}
.card[data-v-60a33bc5]:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 20px 40px -10px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1) inset;
z-index: 1;
}
.card[data-v-60a33bc5]:first-child:hover {
transform: translateY(-12px) translateX(4px) scale(1.02);
box-shadow: 20px 20px 40px -10px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1) inset;
}
.card[data-v-60a33bc5]:last-child:hover {
transform: translateY(-12px) translateX(-4px) scale(1.02);
box-shadow: -20px 20px 40px -10px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1) inset;
}
.photo[data-v-60a33bc5] {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; display: block;
pointer-events: none; /* Disable image dragging */
}
.gradients[data-v-60a33bc5] {
position: absolute; inset: 0; pointer-events: none;
border-radius: 28px;
background:
/* Top shadow (dark at top) */
linear-gradient(0deg, rgba(0,0,0,0) 74.38%, #000000 110.65%),
/* Bottom shadow (dark at bottom) */
linear-gradient(180deg, rgba(0,0,0,0) 54.42%, #000000 107.97%);
}
.meta[data-v-60a33bc5] {
position: relative;
display: flex; align-items: center; justify-content: space-between;
}
.user[data-v-60a33bc5] { display: flex; align-items: center; gap: 10px;
}
.user-icon[data-v-60a33bc5] { width: 27px; height: 27px; display: block;
}
.user-name[data-v-60a33bc5] { margin: 0; font-weight: 600; font-size: 24px; letter-spacing: -0.03em;
}
.date[data-v-60a33bc5] { margin: 0; font-weight: 500; font-size: 20px;
}
.desc[data-v-60a33bc5] { position: relative; margin: 0; font-size: 20px; margin-top: auto;
}
.scrollbar[data-v-60a33bc5] {
position: relative;
height: 4px;
user-select: none;
}
.track[data-v-60a33bc5] {
position: absolute; inset: 0;
background: #d9d9d9;
border-radius: 100px;
}
.thumb[data-v-60a33bc5] {
position: absolute; top: 0;
height: 4px;
background: var(--color-primary);
border-radius: 100px;
cursor: grab;
z-index: 2;
}
.arrow[data-v-60a33bc5] {
position: absolute; top: 50%;
transform: translateY(-50%);
width: 40px; height: 40px;
border: none; background: transparent; padding: 0; cursor: pointer;
display: grid; place-items: center;
z-index: 3;
}
.arrow.right[data-v-60a33bc5] { right: 24px;
}
.arrow.left[data-v-60a33bc5] { left: 24px;
}
.fade-enter-active[data-v-60a33bc5],
.fade-leave-active[data-v-60a33bc5] {
transition: opacity 0.3s ease;
}
.fade-enter-from[data-v-60a33bc5],
.fade-leave-to[data-v-60a33bc5] {
opacity: 0;
}
@media (max-aspect-ratio: 1/1) {
.scrollbar[data-v-60a33bc5] {
display: none;
}
.title[data-v-60a33bc5] { font-size: 36px;
}
.cards[data-v-60a33bc5] {
grid-auto-columns: 286px;
gap: 12px;
padding: 20px 8px 30px;
width: max-content;
min-width: 100%;
}
.scroller-wrapper[data-v-60a33bc5] { margin: -20px -8px -30px;
}
.card[data-v-60a33bc5] { height: 390px; width: 286px; border-radius: 24px; padding: 16px;
}
.user-name[data-v-60a33bc5] { font-size: 18px;
}
.date[data-v-60a33bc5] { font-size: 14px;
}
.meta[data-v-60a33bc5] {
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.desc[data-v-60a33bc5] { font-size: 14px;
}
.arrow[data-v-60a33bc5], .scroller-overlay[data-v-60a33bc5] { display: none;
}
.card[data-v-60a33bc5]:hover, .card[data-v-60a33bc5]:first-child:hover, .card[data-v-60a33bc5]:last-child:hover {
transform: none;
box-shadow: none;
z-index: auto;
}
}
.good-deeds-shelter[data-v-0f49dfde] {
display: flex;
gap: 24px;
height: 575px;
}
.panel[data-v-0f49dfde] {
border-radius: 28px;
overflow: hidden;
position: relative;
}
/* Shelter Info */
.shelter-info[data-v-0f49dfde] {
background: #c3fd56;
padding: 28px;
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.shelter-info[data-v-0f49dfde]::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50%;
background: linear-gradient(180deg, rgba(195, 253, 86, 0.00) 0%, #C3FD56 100%);
pointer-events: none;
z-index: 1;
}
.header[data-v-0f49dfde] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
z-index: 2;
}
.title[data-v-0f49dfde] {
font-size: clamp(36px, 4vw, 64px);
font-weight: 600;
color: #1e1e1e;
line-height: 1;
margin: 0;
}
.badge[data-v-0f49dfde] {
background: rgba(255,255,255,0.01);
border: 1px solid rgba(0,0,0,0.25);
border-radius: 100px;
padding: 12px 25px;
font-size: 20px;
color: #1e1e1e;
white-space: nowrap;
backdrop-filter: blur(50px);
width: 100%;
max-width: 241px;
text-align: center;
}
.decor-bone[data-v-0f49dfde] {
position: absolute;
right: -130px;
bottom: -230px;
width: auto;
height: 700px;
pointer-events: none;
z-index: 0;
}
.description[data-v-0f49dfde] {
font-size: clamp(18px, 2vw, 26px);
font-weight: 600;
color: rgba(30,30,30,0.9);
line-height: 1.2;
z-index: 2;
max-width: min(700px, 80%);
}
.description p[data-v-0f49dfde] { margin: 0;
}
/* Help CTA */
.help-cta[data-v-0f49dfde] {
flex: 1;
position: relative;
padding: 28px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
}
.bg-image-wrapper[data-v-0f49dfde] {
position: absolute;
inset: 0;
z-index: 0;
}
.bg-img[data-v-0f49dfde] {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.bg-img-blurred[data-v-0f49dfde] {
display: none;
}
.bg-blur-overlay[data-v-0f49dfde] {
display: none;
}
.cta-box[data-v-0f49dfde] {
position: relative;
z-index: 1;
background: rgba(30,30,30,0.25);
border: 1px solid white;
backdrop-filter: blur(40px);
border-radius: 28px;
padding: 24px;
width: 360px;
max-width: 100%;
color: white;
display: flex;
flex-direction: column;
gap: 20px;
}
.cta-header[data-v-0f49dfde] { margin-bottom: 4px;
}
.cta-title[data-v-0f49dfde] {
font-size: 26px;
font-weight: 600;
margin: 0;
}
.cta-text[data-v-0f49dfde] {
font-size: 20px;
font-weight: 500;
line-height: 1.3;
color: rgba(255,255,255,0.9);
margin: 0;
}
.btn-text[data-v-0f49dfde] {
font-size: 20px;
line-height: 1.3;
}
.btn-arrow[data-v-0f49dfde] { font-size: 24px;
}
@media (max-aspect-ratio: 1/1) {
.good-deeds-shelter[data-v-0f49dfde] {
flex-direction: column;
height: auto;
gap: 8px; /* Figma implies close stacking or gap in parent? Let's use 8px or match stats gap */
}
.shelter-info[data-v-0f49dfde] {
width: 100%;
padding: 16px;
min-height: 400px;
border-radius: 20px;
}
.header[data-v-0f49dfde] {
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.title[data-v-0f49dfde] {
font-size: 36px;
min-width: 0;
letter-spacing: -0.72px;
line-height: 36px;
}
.badge[data-v-0f49dfde] {
width: auto;
padding: 4px 16px;
font-size: 14px;
height: 32px;
order: -1;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.01);
border: 1px solid rgba(0,0,0,0.25);
backdrop-filter: blur(10px);
}
.description[data-v-0f49dfde] {
font-size: 18px;
line-height: 24px;
max-width: 100%;
}
.help-cta[data-v-0f49dfde] {
width: 100%;
min-height: 491px;
padding: 16px;
justify-content: flex-end;
border-radius: 20px;
}
.bg-img[data-v-0f49dfde] {
height: 60%;
top: 0;
}
.bg-img-blurred[data-v-0f49dfde] {
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 40%;
object-fit: cover;
object-position: bottom;
}
.bg-blur-overlay[data-v-0f49dfde] {
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50%;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: rgba(0, 0, 0, 0.4);
/* 50% незаблюренное, 10% переход, 40% заблюренное */
/* В координатах оверлея: 0% = прозрачно, 20% = полный блюр + затемнение */
mask-image: linear-gradient(to bottom, transparent 0%, black 20%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%);
z-index: 1;
}
.cta-box[data-v-0f49dfde] {
width: 100%;
padding: 16px;
gap: 16px;
border-radius: 20px; /* Match nested radius */
}
.cta-title[data-v-0f49dfde] {
font-size: 18px;
line-height: 24px;
}
.cta-text[data-v-0f49dfde] {
font-size: 16px;
line-height: 20px;
}
.btn-text[data-v-0f49dfde] {
font-size: 20px;
}
.help-cta[data-v-0f49dfde] .ui-icon-block-btn {
height: 64px !important;
}
.decor-bone[data-v-0f49dfde] {
height: 500px;
right: -110px;
bottom: -140px;
min-width: 450px;
object-fit: contain;
}
}
.good-deeds-stats[data-v-0e75661a] {
background-color: #c3fd56;
background-image: none;
height: auto;
min-height: 848px;
padding: 28px;
overflow: hidden;
color: #1e1e1e;
border-radius: 28px;
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.good-deeds-stats .container[data-v-0e75661a] {
display: flex;
}
.left-col[data-v-0e75661a] {
width: 33%;
display: flex;
flex-direction: column;
position: relative;
}
.right-col-wrapper[data-v-0e75661a] {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
min-width: 0;
}
.right-col-clip[data-v-0e75661a] {
height: 848px;
width: 100%;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
box-sizing: border-box;
}
.right-col[data-v-0e75661a] {
height: 100%;
width: 100%;
overflow-y: auto;
padding-right: 20px; /* Scrollbar space */
cursor: grab;
box-sizing: border-box;
}
.stats-list[data-v-0e75661a] {
display: flex;
flex-direction: column;
gap: 20px;
}
/* ... existing styles ... */
.title[data-v-0e75661a] {
font-size: 64px;
line-height: 1;
color: #4a48e9;
font-weight: 600;
margin-bottom: 40px;
margin-top: 0;
}
.decor-wrapper[data-v-0e75661a] {
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.decor-img[data-v-0e75661a] {
position: absolute;
width: 837px;
height: 731px;
max-width: none;
right: -22px;
bottom: -27px;
object-fit: contain;
}
.stat-card[data-v-0e75661a] {
display: flex;
align-items: center;
height: 340px;
position: relative;
}
.card-image-wrapper[data-v-0e75661a] {
width: 588px;
height: 340px;
flex-shrink: 0;
border-radius: 20px;
z-index: 2;
position: relative;
overflow: hidden;
}
.card-bg[data-v-0e75661a] {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-content-wrapper[data-v-0e75661a] {
flex-grow: 1;
height: 100%;
margin-left: -40px; /* Overlap */
padding-top: 0; /* Visual alignment */
padding-bottom: 0;
position: relative;
z-index: 1;
display: flex;
}
.card-content[data-v-0e75661a] {
background: white;
border-radius: 28px;
width: 100%;
height: 100%;
padding: 28px 28px 28px 68px; /* Left padding covers overlap */
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid rgba(30,30,30,0.25);
}
.card-header[data-v-0e75661a] {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.stat-value[data-v-0e75661a] {
font-size: 48px;
font-weight: 600;
line-height: 1.1;
margin: 0;
}
.stat-icon[data-v-0e75661a] {
width: 45px;
height: 45px;
}
.stat-icon img[data-v-0e75661a] { width: 100%; height: 100%;
}
.stat-desc[data-v-0e75661a] {
font-size: 32px;
line-height: 1.2;
color: black;
}
.stat-desc[data-v-0e75661a] p { margin: 0;
}
.right-col[data-v-0e75661a]::-webkit-scrollbar {
width: 6px;
}
.right-col[data-v-0e75661a]::-webkit-scrollbar-track {
background: rgba(0,0,0,0.05);
border-radius: 3px;
}
.right-col[data-v-0e75661a]::-webkit-scrollbar-thumb {
background: #4a48e9;
border-radius: 3px;
}
/* Scrollbar hidden by default (desktop uses right-col scrollbar) */
.scrollbar[data-v-0e75661a] { display: none;
}
@media (max-aspect-ratio: 1/1) {
.good-deeds-stats[data-v-0e75661a] {
flex-direction: column;
padding: 0;
min-height: auto;
height: auto;
border-radius: 0;
gap: 20px;
background: transparent;
}
.container[data-v-0e75661a] {
display: flex;
flex-direction: column;
gap: 20px;
padding-inline: 0;
}
.left-col[data-v-0e75661a] {
width: 100%;
padding-bottom: 0;
padding-right: 0;
}
.title[data-v-0e75661a] {
font-size: 36px;
margin-bottom: 0;
letter-spacing: -0.72px;
}
.right-col-wrapper[data-v-0e75661a] {
display: flex;
flex-direction: column;
gap: 8px;
}
.right-col-clip[data-v-0e75661a] {
height: auto;
border-radius: 0;
overflow: visible;
}
.right-col[data-v-0e75661a] {
width: 100%;
height: auto;
overflow-x: auto;
overflow-y: hidden;
cursor: default;
scrollbar-width: none;
-ms-overflow-style: none;
}
.right-col[data-v-0e75661a]::-webkit-scrollbar {
display: none;
}
.stats-list[data-v-0e75661a] {
flex-direction: row;
gap: 8px;
padding-bottom: 0;
padding-right: 0;
}
.stat-card[data-v-0e75661a] {
flex-direction: column;
width: 286px;
height: 340px;
flex-shrink: 0;
align-items: stretch;
}
.card-image-wrapper[data-v-0e75661a] {
width: 100%;
height: calc(55% + 12px);
position: absolute;
inset: 0;
border-radius: 12px;
margin: 0;
}
.card-content-wrapper[data-v-0e75661a] {
margin-left: 0;
margin-top: auto;
height: 45%;
width: 100%;
padding: 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.card-content[data-v-0e75661a] {
padding: 16px;
border-radius: 0 0 12px 12px;
height: auto;
gap: 12px;
min-height: 120px;
border: none;
}
.card-header[data-v-0e75661a] {
align-items: flex-start;
margin-top: 12px;
}
.stat-value[data-v-0e75661a] {
font-size: 26px;
}
.stat-icon[data-v-0e75661a] {
width: 27px;
height: 27px;
}
.stat-desc[data-v-0e75661a] {
font-size: 16px;
}
.decor-img[data-v-0e75661a] { display: none;
}
/* Mobile Custom Scrollbar */
.scrollbar[data-v-0e75661a] {
display: block;
position: relative;
height: 4px;
margin-right: 0;
background: transparent;
}
.track[data-v-0e75661a] {
position: absolute;
inset: 0;
background: #d9d9d9;
border-radius: 100px;
}
.thumb[data-v-0e75661a] {
position: absolute;
top: 0;
height: 4px;
background: #4a48e9;
border-radius: 100px;
cursor: grab;
z-index: 2;
}
}
.good-deeds-stories[data-v-02214a03] {
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.section-title[data-v-02214a03] {
font-size: 64px;
font-weight: 600;
color: #4a48e9;
margin-bottom: 32px;
margin-top: 0;
}
.stories-row[data-v-02214a03] {
position: relative;
display: grid;
gap: 24px;
}
.stories-grid[data-v-02214a03] {
display: flex;
gap: 24px;
}
.scroller-wrapper[data-v-02214a03] {
position: relative;
margin: 0;
min-width: 0;
}
.scroller-overlay[data-v-02214a03] {
position: absolute;
top: 0;
bottom: 0;
width: 20px;
pointer-events: none;
z-index: 2;
}
.scroller-overlay.left[data-v-02214a03] {
left: -1px;
background: linear-gradient(to right, var(--color-bg) 0%, rgba(235, 235, 235, 0) 100%);
}
.scroller-overlay.right[data-v-02214a03] {
right: -1px;
background: linear-gradient(to left, var(--color-bg) 0%, rgba(235, 235, 235, 0) 100%);
}
.scroller[data-v-02214a03] {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.scroller[data-v-02214a03]::-webkit-scrollbar {
display: none;
}
.story-card[data-v-02214a03] {
width: 403px;
height: 521px;
flex-shrink: 0;
display: flex;
flex-direction: column;
border-radius: 28px;
overflow: hidden;
position: relative;
}
.image-wrapper[data-v-02214a03] {
flex: 1;
position: relative;
margin-bottom: -40px; /* Overlap */
z-index: 0;
border-radius: 28px;
overflow: hidden;
}
.story-bg[data-v-02214a03] {
width: 100%;
height: 100%;
object-fit: cover;
}
.gradient-overlay[data-v-02214a03] {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.8) 100%);
}
.story-content[data-v-02214a03] {
height: 149px;
background: #f5f5f5;
border: 1px solid rgba(30, 30, 30, 0.25);
border-radius: 28px;
padding: 20px;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.author[data-v-02214a03] {
display: flex;
align-items: center;
gap: 10px;
}
.avatar[data-v-02214a03] {
width: 27px;
height: 27px;
border-radius: 50%; /* Design seems to show small icons */
}
.name[data-v-02214a03] {
font-size: 26px;
font-weight: 600;
color: #1e1e1e;
}
.action[data-v-02214a03] {
font-size: 20px;
color: #1e1e1e;
margin: 0;
line-height: 1.3;
}
.scrollbar[data-v-02214a03] {
position: relative;
height: 4px;
user-select: none;
}
.track[data-v-02214a03] {
position: absolute;
inset: 0;
background: #d9d9d9;
border-radius: 100px;
}
.thumb[data-v-02214a03] {
position: absolute;
top: 0;
height: 4px;
background: var(--color-primary);
border-radius: 100px;
cursor: grab;
z-index: 2;
}
.arrow[data-v-02214a03] {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border: none;
background: transparent;
padding: 0;
cursor: pointer;
display: grid;
place-items: center;
z-index: 3;
}
.arrow.right[data-v-02214a03] {
right: 24px;
}
.arrow.left[data-v-02214a03] {
left: 24px;
}
.fade-enter-active[data-v-02214a03],
.fade-leave-active[data-v-02214a03] {
transition: opacity 0.3s ease;
}
.fade-enter-from[data-v-02214a03],
.fade-leave-to[data-v-02214a03] {
opacity: 0;
}
@media (max-aspect-ratio: 1/1) {
.arrow[data-v-02214a03],
.scroller-overlay[data-v-02214a03] {
display: none;
}
}
@media (max-aspect-ratio: 3/4) {
.section-title[data-v-02214a03] {
font-size: 36px;
margin-bottom: 24px;
letter-spacing: -0.72px;
line-height: 36px;
}
.stories-row[data-v-02214a03] {
gap: 8px; /* Wrapper gap */
}
.stories-grid[data-v-02214a03] {
gap: 8px; /* Gap between cards */
}
.scroller[data-v-02214a03] {
padding-right: 20px;
}
.story-card[data-v-02214a03] {
width: 286px;
height: 420px;
border-radius: 12px;
}
.image-wrapper[data-v-02214a03] {
border-radius: 12px;
margin-bottom: -40px;
}
.story-content[data-v-02214a03] {
height: 140px;
padding: 16px;
border-radius: 12px;
}
.name[data-v-02214a03] {
font-size: 20px;
line-height: 32px;
}
.action[data-v-02214a03] {
font-size: 18px;
line-height: 26px;
}
}
.good-deeds-total[data-v-10991f3f] {
position: relative;
height: 400px;
border-radius: 28px;
overflow: hidden;
padding: 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
background: #000;
}
.bg-image[data-v-10991f3f] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.bg-overlay[data-v-10991f3f] {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(30,30,30,0.4) 0%, rgba(30,30,30,0) 100%);
z-index: 1;
pointer-events: none;
}
.bg-overlay-top[data-v-10991f3f] {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 33%;
background: linear-gradient(180deg, rgba(30, 30, 30, 0.75) 0%, rgba(30, 30, 30, 0) 100%);
z-index: 1;
pointer-events: none;
}
.bg-overlay-bottom[data-v-10991f3f] {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30%;
background: linear-gradient(0deg, rgba(30, 30, 30, 0.75) 0%, rgba(30, 30, 30, 0) 100%);
z-index: 1;
pointer-events: none;
}
.content[data-v-10991f3f] {
position: relative;
z-index: 2;
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.title[data-v-10991f3f] {
font-size: 64px;
font-weight: 600;
color: white;
line-height: 100px;
letter-spacing: -1.28px;
margin: 0;
align-self: flex-end;
}
.badge[data-v-10991f3f] {
background: rgba(255,255,255,0.01);
border: 1px solid rgba(255,255,255,0.25);
backdrop-filter: blur(20px);
border-radius: 100px;
padding: 18px 25px;
font-size: 20px;
color: white;
white-space: nowrap;
align-self: flex-end;
margin-bottom: 10px;
cursor: pointer;
text-decoration: none;
user-select: none;
display: inline-flex;
align-items: center;
justify-content: center;
transition:
background 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.15s ease;
}
.badge[data-v-10991f3f]:hover {
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.35);
box-shadow: 0 12px 30px rgba(0,0,0,0.35);
transform: translateY(-2px);
}
.badge[data-v-10991f3f]:active {
transform: translateY(1px) scale(0.97);
box-shadow: 0 4px 14px rgba(0,0,0,0.4);
background: rgba(255,255,255,0.18);
}
/* Progress bar matching design */
.progress-bar-container[data-v-10991f3f] {
position: absolute;
bottom: 28px; /* прогресс-бар у нижнего края панели */
left: 28px;
right: 28px;
height: 126px;
z-index: 3;
pointer-events: none;
}
.progress-bar-bg[data-v-10991f3f] {
position: absolute;
inset: 0;
background: rgba(255,255,255,0.24);
border-radius: 100px;
box-shadow: inset 0 2px 0 rgba(255,255,255,0.25);
backdrop-filter: blur(10px);
}
.progress-bar-fill[data-v-10991f3f] {
position: absolute;
/* те же отступы, что и у progress-bar-overlay */
left: 16.5px;
top: 14px;
height: calc(100% - 28px); /* 14px сверху и снизу */
/* динамическая ширина под прогресс в пределах тех же горизонтальных отступов */
width: calc(100px + (100% - 133px) * var(--progress, 0)); /* 16.5px слева и справа */
border-radius: 100px;
/* Градиент, который «достраивается» по мере прогресса:
при маленьком progress видна только самая левая часть (почти сплошной #4A48E9),
при progress = 1 — полностью весь градиент */
background: linear-gradient(
90deg,
#4A48E9 0%,
#4D64E0 30%,
#5BD6BD 65%,
#C3FD56 100%
);
background-repeat: no-repeat;
background-size: calc(100% / max(var(--progress, 0.0001), 0.0001)) 100%;
box-shadow:
inset -4px 5px 20px #ffffff,
inset 5px -9px 30px rgba(0,0,0,0.25);
display: flex;
align-items: center;
justify-content: flex-end; /* иконка всегда в правом конце заполненной части */
padding: 0; /* без внутренних отступов, прогресс определяется только шириной */
transform-origin: left center;
z-index: 3;
pointer-events: none;
}
.heart-icon[data-v-10991f3f] {
display: block;
transform-origin: center bottom;
/* Чем больше прогресс, тем сильнее наклон (0–15deg) и сдвиг вверх */
transform: translateY(-100px) rotate(calc(15deg * var(--progress, 0)));
/* Размер от 14px до 70px в зависимости от --progress (0–1) */
width: calc(14px + 56px * var(--progress, 0));
height: calc(14px + 56px * var(--progress, 0));
/* Мягкое белое свечение вокруг иконки */
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
/* Вертикальный сдвиг управляется через :style="heartIconStyle" */
}
.progress-bar-overlay[data-v-10991f3f] {
position: absolute;
left: 16.5px;
right: 16.5px;
top: 14px;
bottom: 14px;
border-radius: 100px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
pointer-events: none;
}
@media (max-aspect-ratio: 1/1) {
.good-deeds-total[data-v-10991f3f] {
height: auto;
min-height: 300px; /* Match Figma height approximately or let content drive it with gap */
padding: 16px;
border-radius: 20px;
gap: 52px; /* From Figma */
justify-content: flex-start;
}
.bg-image[data-v-10991f3f] {
width: 160%;
height: 160%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.bg-overlay-top[data-v-10991f3f] {
height: 50%;
backdrop-filter: blur(7.5px);
-webkit-backdrop-filter: blur(7.5px);
mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,0.67) 50%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,0.67) 50%, transparent 100%);
}
.bg-overlay-bottom[data-v-10991f3f] {
height: 70%;
backdrop-filter: blur(7.5px);
-webkit-backdrop-filter: blur(7.5px);
mask-image: linear-gradient(to top, black 0%, transparent 100%);
-webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
}
.content[data-v-10991f3f] {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 24px;
height: auto;
}
.badge[data-v-10991f3f] {
order: -1;
align-self: flex-start;
padding: 4px 16px;
font-size: 14px;
height: 32px;
margin-bottom: 0;
backdrop-filter: blur(10px);
background: rgba(255,255,255,0.01);
border: 1px solid rgba(255,255,255,0.25);
}
.title[data-v-10991f3f] {
align-self: flex-start;
font-size: 36px;
line-height: 36px; /* Leading 36px from Figma */
letter-spacing: -0.72px; /* -0.72px from Figma */
margin-bottom: 0;
}
.progress-bar-container[data-v-10991f3f] {
position: relative;
bottom: auto;
left: auto;
right: auto;
width: 100%;
height: 68px;
margin-top: auto;
}
.progress-bar-bg[data-v-10991f3f] {
border-radius: 100px;
}
.progress-bar-fill[data-v-10991f3f] {
top: 7px;
left: 7px;
height: calc(100% - 14px);
border-radius: 100px;
}
.progress-bar-overlay[data-v-10991f3f] {
top: 7px;
bottom: 7px;
left: 7px;
right: 7px;
}
.heart-icon[data-v-10991f3f] {
width: 55px;
height: 55px;
transform: translateY(-70px) rotate(calc(15deg * var(--progress, 0)));
}
}
.panel[data-v-cfc151de] {
position: relative;
background: var(--color-primary);
border-radius: 20px;
padding: 28px;
min-height: 447px;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr; /* Split content and visual area roughly */
gap: 24px;
color: #fff;
}
.content[data-v-cfc151de] {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 32px;
max-width: 100%;
}
.text-block[data-v-cfc151de] { display: grid; gap: 32px;
}
.title[data-v-cfc151de] {
margin: 0;
font-weight: 600;
font-size: 64px;
line-height: 0.9;
letter-spacing: -0.01em;
}
.lead-block[data-v-cfc151de] { display: grid; gap: 0;
}
.lead[data-v-cfc151de] {
margin: 0;
font-size: 24px;
line-height: 1.1;
color: rgba(255,255,255,0.9);
}
.action-block[data-v-cfc151de] { display: grid; gap: 24px; justify-items: start;
}
.desc[data-v-cfc151de] {
margin: 0;
font-weight: 600;
font-size: 20px;
line-height: 1.1;
color: rgba(255,255,255,0.9);
max-width: 550px;
}
/* Animations */
@keyframes float-cfc151de {
0%, 100% { transform: translateY(0);
}
50% { transform: translateY(-20px);
}
}
@keyframes drift-s-cfc151de {
from { transform: translateX(-25px);
}
to { transform: translateX(25px);
}
}
@keyframes drift-m-cfc151de {
from { transform: translateX(-40px);
}
to { transform: translateX(40px);
}
}
@keyframes drift-l-cfc151de {
from { transform: translateX(-60px);
}
to { transform: translateX(60px);
}
}
/* Visuals area */
.visuals[data-v-cfc151de] {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
/* Clouds positioning based on Figma export approximation */
.cloud[data-v-cfc151de] { position: absolute; display: flex; align-items: center; justify-content: center;
}
.cloud-img[data-v-cfc151de] { display: block; width: 100%; height: 100%; object-fit: cover;
}
/* Cloud 2: center top small */
.c2[data-v-cfc151de] { width: 765px; height: 765px; left: 45%; top: 45px; opacity: 0.95; animation: drift-s-cfc151de 18s ease-in-out infinite alternate;
}
.c2 .cloud-img[data-v-cfc151de] { transform: rotate(16deg);
}
/* Cloud 3: right top deep */
.c3[data-v-cfc151de] { width: 1049px; height: 1049px; left: 60%; top: -270px; animation: drift-l-cfc151de 25s ease-in-out infinite alternate-reverse;
}
.c3 .cloud-img[data-v-cfc151de] { transform: rotate(335deg);
}
/* Cloud 4: left bottom deep */
.c4[data-v-cfc151de] { width: 1049px; height: 1049px; left: 59%; top: -35px; animation: drift-m-cfc151de 22s ease-in-out infinite alternate;
}
.c4 .cloud-img[data-v-cfc151de] { transform: rotate(163deg);
}
/* Cloud 5: right middle small sharp */
.c5[data-v-cfc151de] { width: 622px; height: 622px; left: 59%; top: 90px; opacity: 0.5; animation: drift-s-cfc151de 15s ease-in-out infinite alternate-reverse;
}
.c5 .cloud-img[data-v-cfc151de] { transform: rotate(163deg);
}
/* Cloud 6: right top very blurry */
.c6[data-v-cfc151de] { width: 970px; height: 970px; left: 59%; top: -320px; opacity: 0.4; animation: drift-l-cfc151de 28s ease-in-out infinite alternate;
}
.c6 .cloud-img[data-v-cfc151de] { transform: rotate(163deg);
}
/* Cloud 7: right middle blur */
.c7[data-v-cfc151de] { width: 622px; height: 622px; left: 62%; top: 70px; opacity: 0.6; animation: drift-m-cfc151de 20s ease-in-out infinite alternate-reverse;
}
.c7 .cloud-img[data-v-cfc151de] { transform: rotate(163deg);
}
/* Cloud 8: left middle blur */
.c8[data-v-cfc151de] {
width: 1200px;
height: 1200px;
left: 24%;
top: -36px;
opacity: 0.9;
animation: drift-l-cfc151de 30s ease-in-out infinite alternate;
}
.c8 .cloud-img[data-v-cfc151de] { transform: rotate(377deg);
}
.c9[data-v-cfc151de] { width: 622px; height: 622px; left: 20%; top: 212px; animation: drift-s-cfc151de 16s ease-in-out infinite alternate-reverse;
}
.c9 .cloud-img[data-v-cfc151de] { transform: rotate(365deg);
}
/* Main Image */
.main-img[data-v-cfc151de] {
position: absolute;
width: 582px;
height: auto;
right: 10%; /* Adjusted relative to container width */
top: -70px;
z-index: 2;
animation: float-cfc151de 6s ease-in-out infinite;
}
/* Stars */
.stars[data-v-cfc151de] { position: absolute; inset: 0; z-index: 3;
}
.star[data-v-cfc151de] { position: absolute; mix-blend-mode: overlay; width: 158px; height: 26px;
}
.s1[data-v-cfc151de] { right: 20%; top: 321px; transform: translate(50%, 0);
}
.s2[data-v-cfc151de] { right: 20%; top: 321px; transform: translate(50%, 0); opacity: 0.5;
} /* Stacked in design? */
.s3[data-v-cfc151de] { right: 20%; top: 321px; transform: translate(50%, 0); opacity: 0.5;
}
.text-mobile[data-v-cfc151de] { display: none;
}
@media (max-aspect-ratio: 1/1) {
.text-desktop[data-v-cfc151de] { display: none;
}
.text-mobile[data-v-cfc151de] { display: inline;
}
.panel[data-v-cfc151de] {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 16px;
min-height: 516px;
gap: 0;
}
.content[data-v-cfc151de] {
flex-grow: 1;
justify-content: space-between;
gap: 0;
}
.text-block[data-v-cfc151de] { gap: 20px;
}
.title[data-v-cfc151de] { font-size: 36px; letter-spacing: -0.02em;
}
.lead[data-v-cfc151de] { font-size: 18px; font-weight: 500; line-height: 1.2;
}
.action-block[data-v-cfc151de] { gap: 20px; justify-items: stretch;
}
.desc[data-v-cfc151de] { font-size: 14px; font-weight: 500; line-height: 1.2; margin-bottom: 0;
}
.help-btn[data-v-cfc151de] {
height: 64px;
font-size: 20px;
font-weight: 700;
padding: 0;
width: 100%;
}
/* Visuals & Gradients */
.visuals[data-v-cfc151de] {
opacity: 1;
z-index: 1;
left: -150%;
width: 350%;
right: auto;
}
/* Top Gradient */
.visuals[data-v-cfc151de]::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 250px;
background: linear-gradient(to bottom, #4a48e9 0%, rgba(74,72,233,0) 100%);
z-index: 10;
pointer-events: none;
}
/* Bottom Gradient */
.visuals[data-v-cfc151de]::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 320px;
background: linear-gradient(to top, #4a48e9 0%, rgba(74,72,233,0) 100%);
z-index: 10;
pointer-events: none;
}
.main-img[data-v-cfc151de] {
display: block;
width: 520px;
height: auto;
left: auto;
/*
Visuals width = 350% of Panel.
Visuals left = -150% of Panel.
Visuals right edge = -150 + 350 = 200% of Panel.
Panel right edge = 100% of Panel.
Gap = 100% (1 Panel Width).
100% Panel Width / 350% Panel Width = 1/3.5 ≈ 28.5%
We want image at Panel Right - 80px (shifted right by 80px? No, right: -80px means shifted out).
So right: calc(28.5% - 80px).
*/
right: calc(28.5% - 120px);
top: 50%;
transform: translateY(-50%);
opacity: 1;
animation: none;
}
/* Adjust clouds visibility/opacity if needed to match clean look,
but design has them. Gradients handle readability. */
.cloud[data-v-cfc151de] { opacity: 1;
}
}
/* Modal Styles */
.modal-overlay[data-v-cfc151de] {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(30, 30, 30, 0.4);
backdrop-filter: blur(10px);
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.modal-container[data-v-cfc151de] {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border: 2px solid #FFFFFF;
border-radius: 28px;
padding: 28px;
width: 100%;
max-width: 640px;
max-height: 90vh;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 40px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}
.modal-header[data-v-cfc151de] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 32px;
}
.modal-text[data-v-cfc151de] {
display: flex;
flex-direction: column;
gap: 20px;
}
.modal-title[data-v-cfc151de] {
margin: 0;
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 1;
color: #1E1E1E;
letter-spacing: -0.02em;
}
.modal-desc[data-v-cfc151de] {
margin: 0;
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 1.1;
color: rgba(30, 30, 30, 0.9);
letter-spacing: -0.02em;
}
.services-modal-close[data-v-cfc151de] {
width: 24px;
height: 24px;
padding: 7px;
border-radius: 8px;
background: #1e1e1e;
color: #fff;
border: none;
display: grid;
place-items: center;
cursor: pointer;
line-height: 1;
flex-shrink: 0;
}
.services-modal-close img[data-v-cfc151de] { width: 100%; height: 100%; display: block;
}
.modal-form[data-v-cfc151de] {
display: flex;
flex-direction: column;
gap: 28px;
}
.form-fields[data-v-cfc151de] {
display: flex;
flex-direction: column;
gap: 12px;
}
.input-wrapper[data-v-cfc151de] {
background: #FFFFFF;
border-radius: 16px;
padding: 28px;
display: flex;
align-items: center;
}
.form-input[data-v-cfc151de] {
width: 100%;
border: none;
outline: none;
background: transparent;
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 1.1;
color: #1E1E1E;
padding: 0;
resize: none;
}
.form-input[data-v-cfc151de]::placeholder {
color: rgba(30, 30, 30, 0.4);
}
.form-actions[data-v-cfc151de] {
display: flex;
flex-direction: column;
gap: 28px;
}
.submit-btn[data-v-cfc151de] {
width: 100%;
height: 64px;
background: #C3FD56;
border-radius: 12px;
border: none;
font-family: 'Onest', sans-serif;
font-weight: 700;
font-size: 24px;
color: #1E1E1E;
cursor: pointer;
box-shadow: 0px 4px 4px rgba(164, 213, 73, 0.3);
transition: all 0.2s;
}
.submit-btn[data-v-cfc151de]:hover {
transform: translateY(-2px);
box-shadow: 0px 6px 8px rgba(164, 213, 73, 0.4);
}
.submit-btn[data-v-cfc151de]:active {
transform: translateY(0);
}
.agree[data-v-cfc151de] {
display: flex;
align-items: flex-start;
gap: 8px;
color: rgba(30, 30, 30, 0.6);
font-size: 14px;
margin: 0;
cursor: pointer;
}
.agreement-text[data-v-cfc151de] {
margin: 0;
font-family: 'Onest', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.2;
color: rgba(30, 30, 30, 0.6);
}
.agreement-text a[data-v-cfc151de] {
color: inherit;
text-decoration: underline;
}
.agree__checkbox[data-v-cfc151de] {
min-width: 16px;
min-height: 16px;
border: 1px solid rgba(30, 30, 30, 0.25);
border-radius: 4px;
appearance: none;
background: #fff;
margin-top: 3px;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
transform 0.08s ease,
box-shadow 0.2s ease;
will-change: transform;
}
.agree__checkbox[data-v-cfc151de]:hover {
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06);
}
.agree__checkbox[data-v-cfc151de]:active {
transform: scale(0.92);
}
.agree__checkbox[data-v-cfc151de]:checked {
background-color: #000;
border-color: #000;
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
background-image: url('data:image/svg+xml;utf8,');
animation: checkbox-pop-cfc151de 0.18s ease;
}
.agree__checkbox[data-v-cfc151de]:focus-visible {
outline: none;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
}
.agree__checkbox.is-error[data-v-cfc151de] {
border-color: #ff3b30;
box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.15);
animation: error-pulse-cfc151de 0.5s ease;
}
@keyframes error-pulse-cfc151de {
0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
}
50% { box-shadow: 0 0 0 6px rgba(255, 59, 48, 0.18);
}
100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
}
}
@keyframes checkbox-pop-cfc151de {
0% { transform: scale(0.9);
}
50% { transform: scale(1.05);
}
100% { transform: scale(1);
}
}
/* Transitions */
.fade-enter-active[data-v-cfc151de],
.fade-leave-active[data-v-cfc151de] {
transition: opacity 0.3s ease;
}
.fade-enter-from[data-v-cfc151de],
.fade-leave-to[data-v-cfc151de] {
opacity: 0;
}
@media (max-width: 768px) {
.modal-overlay[data-v-cfc151de] {
padding: 0;
align-items: flex-end;
}
.modal-container[data-v-cfc151de] {
max-width: 100%;
border-radius: 28px 28px 0 0;
max-height: 85vh;
padding: 20px;
gap: 24px;
border-bottom: none;
/* Animation for sliding up */
transform: translateY(0);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-enter-active .modal-container[data-v-cfc151de] {
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-enter-from .modal-container[data-v-cfc151de],
.fade-leave-to .modal-container[data-v-cfc151de] {
transform: translateY(100%);
}
.modal-header[data-v-cfc151de] {
gap: 16px;
}
.input-wrapper[data-v-cfc151de] {
padding: 20px;
}
.form-input[data-v-cfc151de] {
font-size: 16px;
}
.submit-btn[data-v-cfc151de] {
font-size: 20px;
height: 56px;
}
}
.home-hero[data-v-c1018880] { margin-top: 0;
}
.hero[data-v-c1018880] {
position: relative;
min-height: 690px;
border-radius: 28px;
overflow: hidden;
}
.carousel[data-v-c1018880] { position: absolute; inset: 0;
}
.slide[data-v-c1018880] { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 800ms ease-in-out; opacity: 0;
}
.slide-picture[data-v-c1018880], .slide-img[data-v-c1018880] { position: absolute; inset: 0; width: 100%; height: 100%;
}
.slide-img[data-v-c1018880] { object-fit: cover; display: block;
}
.overlay[data-v-c1018880] { position: absolute; inset: 0; padding: 28px; display: grid; grid-template-rows: auto 1fr auto; color: #fff;
}
.overlay[data-v-c1018880]::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 0% 0%, rgba(30,30,30,0.75) 0%, rgba(30,30,30,0) 60%);
pointer-events: none;
z-index: 0;
}
.overlay[data-v-c1018880]::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(30,30,30,1) 0%, rgba(30,30,30,0) 50%);
pointer-events: none;
z-index: 0;
}
.overlay[data-v-c1018880] > * { position: relative; z-index: 1;
}
.top[data-v-c1018880] { display: grid; grid-template-columns: 1fr 1fr; align-items: start;
}
.title[data-v-c1018880] {
margin: 0;
max-width: 100%;
font-weight: 600;
font-size: 100px;
line-height: 0.9;
letter-spacing: -0.01em;
}
.dots[data-v-c1018880] { justify-self: end; display: flex; align-items: center; gap: 10px; padding: 0; margin: 0; list-style: none;
}
.dot[data-v-c1018880] { width: 12px; height: 12px; border-radius: 50%; background: #fff; opacity: 0.25; position: relative; transition: opacity 200ms ease, background-color 200ms ease, border-radius 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.dot.active[data-v-c1018880] { opacity: 1;
}
.dots .dot[data-v-c1018880] { cursor: pointer;
}
.hero.paused .dot.active[data-v-c1018880] { background: transparent; box-shadow: inset 0 0 0 2px #fff; transform: scale(1.2);
}
.bottom[data-v-c1018880] { display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; align-items: start; gap: 16px; margin-top: auto;
}
.subtitle[data-v-c1018880] {
margin: 0;
max-width: 100%;
color: rgba(255,255,255,0.75);
font-weight: 600;
font-size: 24px;
line-height: 1.1;
letter-spacing: -0.01em;
}
.fade-text-enter-active[data-v-c1018880], .fade-text-leave-active[data-v-c1018880] { transition: opacity 600ms ease, transform 600ms ease;
}
.fade-text-enter-from[data-v-c1018880], .fade-text-leave-to[data-v-c1018880] { opacity: 0; transform: translateX(-20px);
}
.fade-button-enter-active[data-v-c1018880], .fade-button-leave-active[data-v-c1018880] { transition: opacity 600ms ease, transform 600ms ease;
}
.fade-button-enter-from[data-v-c1018880], .fade-button-leave-to[data-v-c1018880] { opacity: 0; transform: scale(0.95);
}
.cta-wrapper[data-v-c1018880] { justify-self: start; align-self: start;
}
.cta-wrapper[data-v-c1018880] .ui-icon-block-btn { min-width: 0;
}
@media (max-aspect-ratio: 3/4) {
.hero[data-v-c1018880] { min-height: 560px;
}
.overlay[data-v-c1018880] { padding: 24px;
}
.title[data-v-c1018880] { font-size: 48px; max-width: 50%;
}
.subtitle[data-v-c1018880] { font-size: 20px;
}
}
@media (max-aspect-ratio: 2/3) {
.home-hero[data-v-c1018880] { margin-top: 0;
}
.hero[data-v-c1018880] { min-height: 468px; border-radius: 20px;
}
.overlay[data-v-c1018880] { padding: 16px;
}
.top[data-v-c1018880] { grid-template-columns: 1fr auto;
}
.title[data-v-c1018880] { font-size: 36px; max-width: 100%;
}
.dots[data-v-c1018880] { gap: 8px;
}
.bottom[data-v-c1018880] { grid-template-columns: 1fr; gap: 16px;
}
.subtitle[data-v-c1018880] { font-size: 18px;
}
.cta-wrapper[data-v-c1018880] { justify-self: stretch;
}
.cta-wrapper[data-v-c1018880] .ui-icon-block-btn { width: 100%;
}
.cta-wrapper[data-v-c1018880] .ui-icon-block-btn .label { white-space: nowrap;
}
.cta-wrapper[data-v-c1018880] .ui-icon-block-btn.size-lg { padding-left: 0; padding-right: 0;
}
}
@media (max-aspect-ratio: 3/4) {
.hero[data-v-c1018880] { min-height: 520px;
}
.overlay[data-v-c1018880] { padding: 20px;
}
.title[data-v-c1018880] { font-size: 40px; max-width: 60%;
}
.subtitle[data-v-c1018880] { font-size: 18px;
}
}
.home-features[data-v-7d786669] { margin-top: 0;
}
.features-grid[data-v-7d786669] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.features-left[data-v-7d786669], .features-right[data-v-7d786669] {
position: relative;
min-height: 495px;
border-radius: 28px;
overflow: hidden;
}
.info-panel[data-v-7d786669] { position: absolute; inset: 0; padding: 28px; border-radius: 20px; background: linear-gradient(to top right, #4A48E9 40%, #C3FC56 100%); color: #fff; display: grid; grid-template-rows: auto 1fr auto; gap: 16px; overflow: hidden;
}
.blob[data-v-7d786669] { position: absolute; opacity: 0.35; filter: blur(2px);
}
.blob.a[data-v-7d786669] { width: 60%; left: -10%; top: -10%; transform: rotate(-18deg);
}
.blob.b[data-v-7d786669] { width: 55%; right: -10%; bottom: -10%; transform: rotate(12deg) scaleX(-1);
}
.info-panel > .panel-header[data-v-7d786669], .info-panel > .panel-foot[data-v-7d786669] { position: relative; z-index: 2;
}
.panel-header h3[data-v-7d786669] { margin: 0; color: #fff; font-weight: 600; font-size: 64px; line-height: 0.9; letter-spacing: -0.01em;
}
.muted[data-v-7d786669] { color: rgba(255,255,255,0.75); margin: 20px 0 0; font-weight: 600; font-size: 26px; line-height: 1.1; letter-spacing: -0.01em;
}
.decor-coins[data-v-7d786669] {
position: absolute;
right: -180px;
bottom: -72px;
width: 720px;
transform: rotate(-15deg);
z-index: 1;
pointer-events: none;
filter: blur(0px);
opacity: 1;
transition: filter 200ms linear, opacity 200ms linear;
}
@media (min-aspect-ratio: 2/3) and (max-aspect-ratio: 1/1) {
.decor-coins[data-v-7d786669] {
filter: blur(calc(8px * (1 - var(--coins-t, 1))));
opacity: calc(0.6 + 0.3 * var(--coins-t, 1));
}
}
.decor-coins .coins-img[data-v-7d786669] { display: block; width: 100%; height: auto;
}
.tiles-panel[data-v-7d786669] { position: absolute; inset: 0; padding: 0; background: transparent; border-radius: 28px; display: grid;
}
.tiles[data-v-7d786669] { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 16px; align-content: stretch; justify-content: stretch; align-items: stretch; justify-items: stretch; width: 100%; height: 100%; align-self: stretch; justify-self: stretch;
}
.tile[data-v-7d786669] { position: relative; display: grid; grid-template-rows: auto 1fr auto; background: #fff; color: #1e1e1e; border-radius: 20px; padding: 20px; width: 100%; height: 100%;
}
.tile .icon[data-v-7d786669] { position: absolute; top: 20px; right: 20px; width: 16px; height: 16px; opacity: 0.9; z-index: 2;
}
.tile h4[data-v-7d786669] { margin: 0 0 8px; font-weight: 600; font-size: 24px; line-height: 1; letter-spacing: -0.02em; align-self: start; justify-self: start;
}
.tile p[data-v-7d786669] { margin: 0; color: rgba(30,30,30,0.9); font-weight: 500; font-size: 18px; line-height: 1.1; letter-spacing: -0.01em; align-self: end; justify-self: start;
}
.panel-foot[data-v-7d786669] { align-self: end; margin: 0; color: rgba(255,255,255,0.75); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em;
}
.tile-good[data-v-7d786669] { background: #C3FD56; overflow: hidden;
}
.tile-good[data-v-7d786669]::before { content: ""; position: absolute; background-image: var(--v4aadc5cc); background-size: contain; background-repeat: no-repeat; transform: rotate(15deg); z-index: 0; pointer-events: none;
width: 260px;
height: 260px;
right: -35px;
bottom: -35px;
}
.tile-good[data-v-7d786669]::after { border-radius: 0px 0px 20px 20px; content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(180deg, rgba(195, 253, 86, 0.00) 0%, rgba(195, 253, 86, 0.75) 50%, rgba(195, 253, 86, 0.75) 100%);
backdrop-filter: blur(3.75px); -webkit-backdrop-filter: blur(3.75px); z-index: 1; pointer-events: none;
-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,.75) 50%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,.75) 50%, rgba(0,0,0,0) 100%);
}
.tile-good h4[data-v-7d786669], .tile-good p[data-v-7d786669] { position: relative; z-index: 2;
}
@media (max-aspect-ratio: 3/4) {
.tile-good[data-v-7d786669]::before {
width: 200px;
height: 200px;
}
.home-features[data-v-7d786669] { margin-top: 0;
}
.features-left[data-v-7d786669], .features-right[data-v-7d786669] { min-height: 400px;
}
.info-panel[data-v-7d786669], .tiles-panel[data-v-7d786669] { position: relative; inset: auto; min-height: 400px; border-radius: 20px;
}
.panel-header h3[data-v-7d786669] { font-size: 48px;
}
.muted[data-v-7d786669], .panel-foot[data-v-7d786669] { font-size: 24px;
}
.tiles[data-v-7d786669] { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr;
}
.tile[data-v-7d786669] { width: auto; height: auto; padding: 16px;
}
}
@media (max-aspect-ratio: 2/3) {
.tile-good[data-v-7d786669]::before {
width: 170px;
height: 170px;
}
.home-features[data-v-7d786669] { margin-top: 0;
}
.features-left[data-v-7d786669], .features-right[data-v-7d786669] { min-height: 468px; border-radius: 20px;
}
.info-panel[data-v-7d786669], .tiles-panel[data-v-7d786669] { padding: 16px; gap: 12px; min-height: 592px;
}
.tiles-panel--mobile[data-v-7d786669] { position: static; padding: 0; min-height: auto; border-radius: 0;
}
.panel-header h3[data-v-7d786669] { font-size: 36px;
}
.muted[data-v-7d786669] { font-size: 20px; font-weight: 400;
}
.decor-coins[data-v-7d786669] { width: 60%; right: -10px; bottom: -10px;
}
.tiles[data-v-7d786669] { grid-template-columns: 1fr 1fr; grid-auto-rows: 156px; gap: 4px;
}
.tile[data-v-7d786669] { padding: 12px; overflow: hidden;
}
.tile .icon[data-v-7d786669] { top: 12px; right: 12px; width: 12px; height: 12px;
}
.tile h4[data-v-7d786669] { font-size: 18px;
}
.tile p[data-v-7d786669] { font-size: 14px;
}
.panel-foot[data-v-7d786669] { font-size: 14px;
}
.decor-coins[data-v-7d786669] { display: none;
}
.info-panel[data-v-7d786669]::before {
content: "";
position: absolute;
top: -90px;
right: -200px;
width: 450px;
height: 450px;
background-image: var(--v2bc22d2f);
background-size: contain;
background-repeat: no-repeat;
transform: rotate(-55deg);
z-index: 1;
pointer-events: none;
}
}
@media (max-aspect-ratio: 3/4) {
.features-grid[data-v-7d786669] { grid-template-columns: 1fr;
}
.tiles[data-v-7d786669] { grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.tile[data-v-7d786669] { padding: 16px;
}
.tile h4[data-v-7d786669] { font-size: 20px;
}
.tile p[data-v-7d786669] { font-size: 14px;
}
}
.panel[data-v-ab754d8d] {
position: relative;
background: var(--color-primary);
border-radius: 20px;
padding: 28px;
min-height: 616px;
color: #fff;
overflow: hidden;
display: grid;
grid-template-rows: auto auto auto;
row-gap: 0;
align-content: space-between;
/* full-cover background */
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
/* remove old decorative pseudo elements */
.header[data-v-ab754d8d] { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 16px; position: relative; z-index: 3;
}
.title[data-v-ab754d8d] { margin: 0; font-weight: 600; font-size: 64px; line-height: 0.9; letter-spacing: -0.01em;
}
.bang[data-v-ab754d8d] { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #fff; color: #1e1e1e; font-weight: 700; font-size: 18px; cursor: pointer; user-select: none; -webkit-user-select: none; -ms-user-select: none;
}
.bang-wrapper[data-v-ab754d8d] { position: relative;
}
/* Bang modal */
.bang-modal[data-v-ab754d8d] { position: absolute; right: 0; top: 0; z-index: 9999; background: rgba(255,255,255,0.75); border: 2px solid #fff; border-radius: 16px; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); width: 370px; max-width: min(370px, 90vw);
}
.bang-modal-head[data-v-ab754d8d] { display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.bang-lead[data-v-ab754d8d] { display: flex; align-items: center; gap: 12px;
}
.bang-lead-icon[data-v-ab754d8d] { width: 48px; height: 48px; border-radius: 8px; display: block; object-fit: cover;
}
.bang-lead-title[data-v-ab754d8d] { margin: 0; font-weight: 600; font-size: 18px; line-height: 1.1; color: #1e1e1e; letter-spacing: -0.01em;
}
.bang-modal-close[data-v-ab754d8d] { width: 24px; height: 24px; padding: 7px; border-radius: 8px; background: #1e1e1e; color: #fff; border: none; display: grid; place-items: center; cursor: pointer; line-height: 1; position: absolute; top: 12px; right: 12px;
}
.bang-modal-close img[data-v-ab754d8d] { width: 100%; height: 100%; display: block;
}
.bang-modal-body[data-v-ab754d8d] { margin-top: 12px;
}
.bang-modal-body p[data-v-ab754d8d] { margin: 0; font-weight: 500; font-size: 16px; line-height: 1.2; color: rgba(30,30,30,0.9); letter-spacing: -0.01em;
}
.bang-pop-enter-active[data-v-ab754d8d],
.bang-pop-leave-active[data-v-ab754d8d] { transition: opacity 300ms cubic-bezier(0.2, 0.6, 0.2, 1)
}
.bang-pop-enter-from[data-v-ab754d8d],
.bang-pop-leave-to[data-v-ab754d8d] { opacity: 0;
}
.bang-pop-enter-to[data-v-ab754d8d],
.bang-pop-leave-from[data-v-ab754d8d] { opacity: 1;
}
.cards[data-v-ab754d8d] {
list-style: none;
padding: 0;
margin: 0;
margin-left: -512px;
padding-left: 512px;
margin-right: -512px;
padding-right: 512px;
padding-bottom: 32px;
padding-top: 32px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
gap: 24px; position:
relative; z-index: 2;
justify-content: stretch;
justify-items: stretch;
align-items: stretch;
}
.glass[data-v-ab754d8d] { background: rgba(30,30,30,0.4); color: #fff; border-radius: 24px; padding: 25px; min-height: 219px; backdrop-filter: blur(80px); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; text-align: left; gap: 50px; position: relative; height: 100%;
}
.glass h3[data-v-ab754d8d] { margin: 0 0 10px; font-weight: 600; font-size: 26px; line-height: 1; letter-spacing: -0.01em;
}
.glass p[data-v-ab754d8d] { margin: 0; color: rgba(255,255,255,1); font-weight: 300; font-size: 20px; line-height: 1.2; letter-spacing: -0.03em;
}
/* Alternate slight rotation for cards */
.cards .glass[data-v-ab754d8d]:nth-child(odd) { transform: rotate(-3deg);
}
.cards .glass[data-v-ab754d8d]:nth-child(even) { transform: rotate(3deg);
}
.glass[data-v-ab754d8d]::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
background: linear-gradient(45deg, rgba(255,255,255,0.5) 0%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.5) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude; pointer-events: none; z-index: 0;
}
.card-icon[data-v-ab754d8d] { position: absolute; top: 25px; right: 25px; width: 28px; height: 28px; display: block; z-index: 1;
}
.fade[data-v-ab754d8d] { position: absolute; left: 0; right: 0; bottom: 0; height: 202px; background: linear-gradient(to bottom, rgba(74,72,233,0) 0%, #4a48e9 100%); pointer-events: none; z-index: 1;
}
.cta-bar[data-v-ab754d8d] { position: relative; z-index: 2;
}
.cta-bar[data-v-ab754d8d] .ui-icon-block-btn { width: 100%; height: 100%; border-radius: 12px; box-shadow: 0 4px 4px rgba(164,213,73,0.3), inset 0 -3px 4px rgba(167,218,72,0.4), inset 0 0 7px #ade04e;
}
.cta-bar[data-v-ab754d8d] .ui-icon-block-btn.size-lg { padding-left: 0; padding-right: 0;
}
/* Tablet (portrait/square only) */
@media (max-aspect-ratio: 3/4) {
.panel[data-v-ab754d8d]::before,
.panel[data-v-ab754d8d]::after {
display: none;
}
.fade[data-v-ab754d8d] { display: none;
}
.panel[data-v-ab754d8d] { min-height: 560px;
}
.title[data-v-ab754d8d] { font-size: 48px;
}
.cards[data-v-ab754d8d] { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 24px; justify-content: stretch;
}
.glass[data-v-ab754d8d] { min-height: 200px;
}
}
/* Mobile (portrait/square only) */
@media (max-aspect-ratio: 2/3) {
.panel[data-v-ab754d8d]::before,
.panel[data-v-ab754d8d]::after {
display: none;
}
.fade[data-v-ab754d8d] { display: none;
}
.panel[data-v-ab754d8d] { padding: 16px; min-height: auto; background-image: none;
}
.header[data-v-ab754d8d] { gap: 12px;
}
.title[data-v-ab754d8d] { font-size: 36px;
}
.bang[data-v-ab754d8d] { width: 28px; height: 28px; font-size: 16px;
}
.cards[data-v-ab754d8d] { margin-left: -512px; padding-left: 512px; margin-right: -512px; padding-right: 512px; display: grid; grid-auto-flow: column; grid-template-columns: none; gap: 24px; overflow-x: auto; padding-bottom: 32px; padding-top: 32px; justify-content: start;
}
/* hide scrollbars while keeping horizontal scroll */
.cards[data-v-ab754d8d] { scrollbar-width: none; -ms-overflow-style: none;
}
.cards[data-v-ab754d8d]::-webkit-scrollbar { display: none; width: 0; height: 0;
}
.glass[data-v-ab754d8d] { width: 310px; min-height: 200px; height: auto; transform: none; scroll-snap-align: start; padding: 16px; border-radius: 16px;
}
.glass h3[data-v-ab754d8d] { font-size: 24px;
}
.glass p[data-v-ab754d8d] { font-size: 14px;
}
.card-icon[data-v-ab754d8d] { width: 24px; height: 24px; top: 16px; right: 16px;
}
.cta-bar[data-v-ab754d8d] { position: relative; padding: 0; margin: 0; height: auto;
}
}
/* Medium (≤900px) tuning (portrait/square only) */
@media (max-aspect-ratio: 3/4) {
.panel[data-v-ab754d8d] { min-height: 520px; padding: 24px;
}
.title[data-v-ab754d8d] { font-size: 40px;
}
.cards[data-v-ab754d8d] { grid-template-columns: repeat(2, 1fr); gap: 20px;
}
.glass[data-v-ab754d8d] { padding: 20px; min-height: 180px;
}
.glass h3[data-v-ab754d8d] { font-size: 24px;
}
.glass p[data-v-ab754d8d] { font-size: 16px;
}
.bang-modal[data-v-ab754d8d] { width: 320px; max-width: min(320px, 90vw);
}
}
/* ≥1920px: fixed card width (portrait/square only) */
@media (min-aspect-ratio: 1/1) {
.cards[data-v-ab754d8d] { grid-template-columns: repeat(4, 429px); justify-content: space-between; gap: 0;
}
.glass[data-v-ab754d8d] { width: 429px;
}
}
/* Mid portrait range: fixed width + horizontal scroll (portrait/square only) */
@media (min-aspect-ratio: 2/3) and (max-aspect-ratio: 1/1) {
.cards[data-v-ab754d8d] {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 429px;
grid-template-columns: none;
gap: 24px;
overflow-x: auto; /* only horizontal scrolling */
overflow-y: visible; /* avoid clipping rotated cards */
justify-content: start;
/* hide scrollbars cross-browser */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
.cards[data-v-ab754d8d]::-webkit-scrollbar { display: none; width: 0; height: 0;
} /* WebKit */
.glass[data-v-ab754d8d] { width: 429px;
}
}
section.stickers-intro[data-v-a91fe1d4] { display: grid; gap: 40px;
}
.heading[data-v-a91fe1d4] { margin: 0; font-weight: 600; font-size: 64px; line-height: 0.9; letter-spacing: -0.01em; color: var(--color-primary);
}
.cards[data-v-a91fe1d4] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.card[data-v-a91fe1d4] { background: #fff; border-radius: 24px; padding: 20px; display: grid; grid-template-rows: auto 1fr auto; min-height: 200px;
}
.card-head[data-v-a91fe1d4] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.card-head-text[data-v-a91fe1d4] { display: grid; gap: 20px;
}
.title[data-v-a91fe1d4] { margin: 0; font-weight: 600; font-size: 26px; line-height: 1.1; letter-spacing: -0.01em; color: #1e1e1e;
}
.accent[data-v-a91fe1d4] { color: #1e1e1e;
}
.accent.is-purple[data-v-a91fe1d4] { color: #4a48e9;
}
.accent.is-green[data-v-a91fe1d4] { color: #74b200;
}
.accent.is-orange[data-v-a91fe1d4] { color: #ff8800;
}
.card-foot[data-v-a91fe1d4] { align-self: end; padding-top: 24px;}
.desc[data-v-a91fe1d4] { margin: 0; font-weight: 500; font-size: 20px; line-height: 1.2; color: #8e8e8e; letter-spacing: -0.01em;
}
.foot[data-v-a91fe1d4] { margin: 0; font-weight: 500; font-size: 20px; line-height: 1.2; color: #1e1e1e; letter-spacing: -0.01em;
}
/* Thumbnail with color tint overlay */
.thumb[data-v-a91fe1d4] { position: relative; width: 120px; height: 120px; border-radius: 12px; overflow: hidden; flex: 0 0 auto;
}
.thumb-img[data-v-a91fe1d4] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
/* CTA bar using shared button */
.cta-bar[data-v-a91fe1d4] { position: relative;
}
.cta-bar[data-v-a91fe1d4] .ui-icon-block-btn { width: 100%; border-radius: 12px; box-shadow: 0 4px 4px rgba(164,213,73,0.3), inset 0 -3px 4px rgba(167,218,72,0.4), inset 0 0 7px #ade04e;
}
@media (max-aspect-ratio: 1/1) {
.cards[data-v-a91fe1d4] { grid-template-columns: 1fr;
}
.desc[data-v-a91fe1d4] { max-width: 600px;
}
}
/* Tablet (apply to all portrait <1) */
@media (max-aspect-ratio: 1/1) {
.heading[data-v-a91fe1d4] { font-size: 48px;
}
}
/* Medium (≤900px) */
@media (max-aspect-ratio: 1/1) {
.heading[data-v-a91fe1d4] { font-size: 40px;
}
.card[data-v-a91fe1d4] { padding: 18px; width: 100%;
}
.desc[data-v-a91fe1d4], .foot[data-v-a91fe1d4] { font-size: 18px;
}
.thumb[data-v-a91fe1d4] { width: 108px; height: 108px;
}
}
/* Mobile */
@media (max-aspect-ratio: 2/3) {
section.stickers-intro[data-v-a91fe1d4] { gap: 16px;
}
.heading[data-v-a91fe1d4] { font-size: 36px; letter-spacing: -0.02em;
}
.cards[data-v-a91fe1d4] { grid-template-columns: 1fr; gap: 12px;
}
.card[data-v-a91fe1d4] { padding: 16px; border-radius: 16px; gap: 16px;
}
.title[data-v-a91fe1d4] { font-size: 24px;
}
.desc[data-v-a91fe1d4], .foot[data-v-a91fe1d4] { font-size: 16px;
}
.thumb[data-v-a91fe1d4] { width: 96px; height: 96px; border-radius: 10px;
}
.cta-bar[data-v-a91fe1d4] { height: 56px;
}
.cta-bar strong[data-v-a91fe1d4] { font-size: 20px;
}
.card-head-text[data-v-a91fe1d4] { gap: 12px;
}
.card[data-v-a91fe1d4] { gap: 0;
}
}
.bonuses-hero[data-v-0f526437] {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.hero-visual[data-v-0f526437] {
position: relative;
height: 945px;
overflow: visible;
}
.hero-img[data-v-0f526437] {
position: absolute;
left: 50%;
top: -73px;
width: 105%;
height: 110%;
object-fit: cover;
max-width: none;
transform: translateX(-50%);
background-color: lightgray;
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
mask-image: linear-gradient(180deg, black 50%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, black 50%, transparent 100%);
}
.badge-group[data-v-0f526437] {
position: absolute;
left: 50%;
top: 590px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
z-index: 2;
}
.badge[data-v-0f526437] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.4em 0.64em;
border-radius: 1.89em;
font-family: 'Onest', sans-serif;
font-weight: 900;
font-size: 100px;
line-height: 0.8;
letter-spacing: -0.05em;
text-transform: uppercase;
white-space: nowrap;
}
.badge-green[data-v-0f526437] {
background: #C3FD56;
color: #1E1E1E;
transform: rotate(-15deg) translateX(-25%) translateY(-70%);
z-index: 3;
margin-bottom: -1em;
}
.badge-white[data-v-0f526437] {
background: #fff;
color: #1E1E1E;
gap: 0.32em;
transform: translateX(25%);
}
.badge-icon[data-v-0f526437] {
width: 0.37em;
height: 0.37em;
flex-shrink: 0;
object-fit: contain;
}
.badge-icon--hero[data-v-0f526437] {
width: 0.8em;
height: 0.8em;
}
/* Step Cards */
.step-cards[data-v-0f526437] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
position: relative;
z-index: 1;
width: 100%;
}
.step-card[data-v-0f526437] {
background: #fff;
border-radius: 28px;
padding: 28px;
height: 198px;
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
}
.step-card-accent[data-v-0f526437] {
background: #C3FD56;
box-shadow: 0 0 40px #C3FD56;
position: relative;
overflow: hidden;
}
.step-card-stickers[data-v-0f526437] {
position: relative;
}
.step-card-stickers .step-header[data-v-0f526437] {
position: relative;
overflow: visible;
}
.step-header[data-v-0f526437] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 4px;
width: 100%;
position: relative;
z-index: 1;
}
.step-title[data-v-0f526437] {
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 36px;
line-height: 1;
letter-spacing: -0.72px;
color: #1E1E1E;
margin: 0;
flex: 1;
}
.step-title-with-icon[data-v-0f526437] {
display: inline-flex;
align-items: center;
gap: 8px;
}
.step-stickers-image[data-v-0f526437] {
height: 40px;
width: auto;
transform: scale(1.4);
transform-origin: left center;
}
.step-icon[data-v-0f526437] {
width: 37px;
height: 37px;
flex-shrink: 0;
object-fit: contain;
}
.step-footer[data-v-0f526437] {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 12px;
width: 100%;
position: relative;
z-index: 1;
}
.step-desc[data-v-0f526437] {
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 24px;
line-height: 1.33;
color: rgba(30, 30, 30, 0.9);
margin: 0;
flex: 1;
}
.step-arrow[data-v-0f526437] {
width: 20px;
height: 20px;
flex-shrink: 0;
object-fit: contain;
transform: rotate(45deg);
}
.step-live-icon[data-v-0f526437] {
position: absolute;
right: -81.937px;
bottom: -74.938px;
width: 235.045px;
height: 235.045px;
z-index: 0;
object-fit: contain;
transform: rotate(2.465deg);
}
/* Responsive */
@media (max-aspect-ratio: 1/1) {
.hero-visual[data-v-0f526437] {
height: 700px;
}
.hero-img[data-v-0f526437] {
left: 50%;
transform: translateX(-50%);
width: 1200px;
height: 800px;
top: -50px;
}
.badge-group[data-v-0f526437] {
top: 500px;
}
.badge[data-v-0f526437] {
font-size: 64px;
}
.step-cards[data-v-0f526437] {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.step-card[data-v-0f526437] {
height: 180px;
}
.step-title[data-v-0f526437] {
font-size: 30px;
}
.step-desc[data-v-0f526437] {
font-size: 20px;
}
}
@media (max-aspect-ratio: 3/4) {
.hero-visual[data-v-0f526437] {
height: 500px;
}
.hero-img[data-v-0f526437] {
left: 50%;
top: -40px;
width: 600px;
height: 600px;
transform: translateX(-50%);
}
.badge-group[data-v-0f526437] {
top: 380px;
}
.badge[data-v-0f526437] {
font-size: 48px;
}
.step-cards[data-v-0f526437] {
grid-template-columns: 1fr;
gap: 12px;
}
.step-card[data-v-0f526437] {
min-height: 150px;
padding: 20px;
border-radius: 16px;
}
.step-title[data-v-0f526437] {
font-size: 28px;
line-height: 32px;
}
.step-desc[data-v-0f526437] {
font-size: 18px;
line-height: 22px;
}
.step-icon[data-v-0f526437] {
width: 32px;
height: 32px;
}
.step-live-icon[data-v-0f526437] {
width: 160px;
height: 160px;
right: -30px;
bottom: -20px;
}
.step-arrow[data-v-0f526437] {
transform: rotate(135deg);
}
}
@media (max-aspect-ratio: 2/3) {
.bonuses-hero[data-v-0f526437] {
gap: 16px;
}
.hero-visual[data-v-0f526437] {
height: 383px;
width: 100%;
}
.hero-img[data-v-0f526437] {
left: 50%;
top: -51px;
width: 110%;
height: 486px;
transform: translateX(-50%);
background-size: cover;
background-position: center;
}
.badge-group[data-v-0f526437] {
top: 280px;
}
.badge[data-v-0f526437] {
font-size: 32px;
}
/* Step Cards Mobile */
.step-cards[data-v-0f526437] {
grid-template-columns: 1fr;
gap: 16px;
width: 100%;
}
.step-card[data-v-0f526437] {
height: 130px;
min-height: unset;
padding: 16px;
border-radius: 12px;
}
.step-card-stickers .step-stickers-image[data-v-0f526437] {
transform: scale(1);
height: 30px;
}
.step-title[data-v-0f526437] {
font-size: 26px;
line-height: 30px;
letter-spacing: -0.52px;
}
.step-desc[data-v-0f526437] {
font-size: 16px;
line-height: 20px;
}
.step-icon[data-v-0f526437] {
width: 27px;
height: 27px;
}
.step-arrow[data-v-0f526437] {
width: 14px;
height: 14px;
transform: rotate(135deg);
}
.step-live-icon[data-v-0f526437] {
width: 148px;
height: 148px;
right: -50px;
bottom: auto;
top: -30px;
}
.step-card-accent[data-v-0f526437] {
overflow: hidden;
}
.step-card-accent .step-title[data-v-0f526437] {
max-width: 284px;
}
}
.monthly-section[data-v-de2afc7c] {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 64px;
}
.section-title[data-v-de2afc7c] {
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 100px;
line-height: 1;
margin: 0;
color: #fff;
}
.mega-decor[data-v-de2afc7c] {
position: absolute;
top: -30px;
right: 0;
width: 500px;
height: 300px;
pointer-events: none;
}
.mega-decor-img[data-v-de2afc7c] {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* Main Prize */
.main-prize[data-v-de2afc7c] {
position: relative;
background: linear-gradient(90deg, #C3FD56 0%, #C3FD56 100%);
border-radius: 28px;
padding: 28px;
min-height: 690px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.main-prize-content[data-v-de2afc7c] {
display: flex;
flex-direction: column;
gap: 48px;
position: relative;
z-index: 1;
}
.main-prize-header[data-v-de2afc7c] {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.main-prize-title[data-v-de2afc7c] {
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 100px;
line-height: 1;
letter-spacing: -2px;
color: #1E1E1E;
margin: 0;
}
.prize-badge[data-v-de2afc7c] {
width: 37px;
height: 37px;
flex-shrink: 0;
object-fit: contain;
}
.main-prize-desc[data-v-de2afc7c] {
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 36px;
line-height: 1.2;
color: rgba(30, 30, 30, 0.9);
margin: 0;
max-width: 372px;
}
.main-prize-visual[data-v-de2afc7c] {
position: absolute;
right: -241px;
top: -10px;
width: 1821px;
height: 700px;
max-width: none;
overflow: hidden;
}
.main-prize-visual[data-v-de2afc7c]::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(270deg, rgba(195, 253, 86, 0) 87.01%, #C3FD56 99.73%);
pointer-events: none;
}
.main-prize-img[data-v-de2afc7c] {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
[data-v-de2afc7c] .main-prize-btn {
position: relative;
z-index: 1;
width: 425px;
height: 67px;
border-radius: 12px;
font-family: 'Onest', sans-serif;
font-weight: 700;
font-size: 26px;
line-height: 32px;
background: #1E1E1E;
color: #fff;
}
[data-v-de2afc7c] .main-prize-btn .label {
color: #fff;
font-size: 26px !important;
line-height: 32px;
}
/* Prize Grid */
.prize-grid[data-v-de2afc7c] {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 24px;
}
.prize-card[data-v-de2afc7c] {
display: flex;
flex-direction: column;
border-radius: 28px;
overflow: hidden;
}
.prize-card-image[data-v-de2afc7c] {
position: relative;
height: 338px;
background: linear-gradient(180deg, #fff 0%, #C3FD56 100%);
border-radius: 28px 28px 0 0;
}
.prize-card-image[data-v-de2afc7c]::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: -2px;
left: 0;
background: linear-gradient(181deg, rgba(195, 253, 86, 0) 58.34%, #C3FD56 98.95%);
pointer-events: none;
z-index: 1;
}
.prize-card-image img[data-v-de2afc7c] {
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
z-index: 0;
}
.prize-count[data-v-de2afc7c] {
position: absolute;
top: 0;
right: 0;
background: #4846E7;
color: #fff;
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 1.3;
letter-spacing: -0.2px;
width: 37px;
height: 37px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
padding: 0;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 2;
}
.prize-count-offset[data-v-de2afc7c] {
top: 28px;
right: 28px;
}
.prize-card-info[data-v-de2afc7c] {
flex: 1;
background: #C3FD56;
padding: 28px;
border-radius: 0 0 28px 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 198px;
}
.prize-name[data-v-de2afc7c] {
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 28px;
line-height: 1;
letter-spacing: -0.28px;
color: #1E1E1E;
margin: 0;
}
.prize-spec[data-v-de2afc7c] {
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 1.2;
letter-spacing: -0.2px;
color: rgba(30, 30, 30, 0.9);
margin: 0;
}
/* Responsive */
@media (max-aspect-ratio: 1/1) {
.main-prize-visual[data-v-de2afc7c] {
right: auto;
}
.section-title[data-v-de2afc7c] {
font-size: 72px;
}
.main-prize-title[data-v-de2afc7c] {
font-size: 72px;
}
.main-prize-desc[data-v-de2afc7c] {
font-size: 28px;
}
.prize-grid[data-v-de2afc7c] {
grid-template-columns: 1fr;
gap: 12px;
}
.prize-card-image img[data-v-de2afc7c] {
width: 110%;
height: 110%;
}
.prize-card[data-v-de2afc7c] {
position: relative;
display: block;
height: 200px;
border-radius: 16px;
background: linear-gradient(270deg, #fff 0%, #C3FD56 100%);
overflow: hidden;
}
.prize-card-image[data-v-de2afc7c] {
position: absolute;
right: 16px;
top: 16px;
width: 180px;
height: 180px;
background: none;
border-radius: 0;
}
.prize-card-image[data-v-de2afc7c]::after {
display: none;
}
.prize-card-image img[data-v-de2afc7c] {
object-fit: contain;
}
.prize-count-offset[data-v-de2afc7c] {
top: 0;
right: 0;
}
.prize-card-info[data-v-de2afc7c] {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: auto;
background: none;
padding: 20px;
border-radius: 0;
min-height: unset;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.prize-name[data-v-de2afc7c] {
font-size: 22px;
}
.prize-spec[data-v-de2afc7c] {
font-size: 16px;
}
.prize-count[data-v-de2afc7c] {
font-size: 16px;
width: 40px;
height: 40px;
top: 0;
right: 0;
}
.mega-decor[data-v-de2afc7c] {
width: 400px;
height: 240px;
display: none;
}
}
@media (max-aspect-ratio: 3/4) {
.monthly-section[data-v-de2afc7c] {
gap: 40px;
}
.section-title[data-v-de2afc7c] {
font-size: 48px;
}
.mega-decor[data-v-de2afc7c] {
width: 300px;
height: 180px;
top: 0;
right: 0;
display: none;
}
.main-prize[data-v-de2afc7c] {
min-height: 480px;
padding: 24px;
border-radius: 20px;
}
.main-prize-title[data-v-de2afc7c] {
font-size: 56px;
}
.main-prize-desc[data-v-de2afc7c] {
font-size: 24px;
}
.main-prize-visual[data-v-de2afc7c] {
position: absolute;
right: -400px;
top: 50%;
transform: translateY(-50%);
width: 808px;
height: 311px;
}
.main-prize-img[data-v-de2afc7c] {
width: 100%;
height: 100%;
}
[data-v-de2afc7c] .main-prize-btn {
width: 100%;
height: 60px;
font-size: 22px;
}
[data-v-de2afc7c] .main-prize-btn .label {
font-size: 22px !important;
}
.prize-grid[data-v-de2afc7c] {
grid-template-columns: 1fr;
gap: 12px;
}
.prize-card[data-v-de2afc7c] {
position: relative;
display: block;
height: 200px;
border-radius: 16px;
background: linear-gradient(270deg, #fff 0%, #C3FD56 100%);
overflow: hidden;
}
.prize-card-image[data-v-de2afc7c] {
position: absolute;
right: 16px;
top: 16px;
width: 180px;
height: 180px;
background: none;
border-radius: 0;
}
.prize-card-image[data-v-de2afc7c]::after {
display: none;
}
.prize-card-image img[data-v-de2afc7c] {
object-fit: contain;
}
.prize-count-offset[data-v-de2afc7c] {
top: 0;
right: 0;
}
.prize-card-info[data-v-de2afc7c] {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: auto;
background: none;
padding: 20px;
border-radius: 0;
min-height: unset;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.prize-name[data-v-de2afc7c] {
font-size: 22px;
}
.prize-spec[data-v-de2afc7c] {
font-size: 16px;
}
.prize-count[data-v-de2afc7c] {
font-size: 16px;
width: 40px;
height: 40px;
top: 0;
right: 0;
}
.prize-badge[data-v-de2afc7c] {
width: 36px;
height: 36px;
}
}
@media (max-aspect-ratio: 2/3) {
.monthly-section[data-v-de2afc7c] {
gap: 8px;
padding-top: 32px;
}
.section-title[data-v-de2afc7c] {
font-size: 36px;
line-height: 36px;
letter-spacing: -0.72px;
padding: 0 16px;
}
.mega-decor[data-v-de2afc7c] {
width: 130px;
height: 113px;
top: 50px;
right: 0;
display: block;
}
.main-prize[data-v-de2afc7c] {
min-height: 468px;
padding: 20px 16px;
border-radius: 20px;
margin-top: 24px;
}
.main-prize-content[data-v-de2afc7c] {
gap: 20px;
}
.main-prize-title[data-v-de2afc7c] {
font-size: 36px;
line-height: 36px;
letter-spacing: -0.72px;
}
.main-prize-desc[data-v-de2afc7c] {
font-size: 20px;
line-height: 1.1;
letter-spacing: -0.2px;
max-width: 194px;
}
.main-prize-visual[data-v-de2afc7c] {
position: absolute;
right: -400px;
top: 50%;
transform: translateY(-50%);
width: 808px;
height: 311px;
}
.main-prize-visual[data-v-de2afc7c]::after {
background: linear-gradient(270deg, rgba(195, 253, 86, 0) 87.01%, #C3FD56 99.73%), linear-gradient(359deg, rgba(195, 253, 86, 0.00) 84.48%, #C3FD56 99.68%), linear-gradient(179deg, rgba(195, 253, 86, 0.00) 88.87%, #C3FD56 97.8%);
}
[data-v-de2afc7c] .main-prize-btn {
width: 100%;
height: 64px;
font-size: 20px;
}
[data-v-de2afc7c] .main-prize-btn .label {
font-size: 20px !important;
}
.prize-grid[data-v-de2afc7c] {
grid-template-columns: 1fr;
gap: 8px;
}
.prize-card[data-v-de2afc7c] {
position: relative;
display: block;
height: 180px;
border-radius: 12px;
background: linear-gradient(270deg, #fff 0%, #C3FD56 100%);
overflow: hidden;
}
.prize-card-image[data-v-de2afc7c] {
position: absolute;
right: 6px;
top: 12px;
width: 168px;
height: 168px;
background: none;
border-radius: 0;
}
.prize-card-image[data-v-de2afc7c]::after {
display: none;
}
.prize-card-image img[data-v-de2afc7c] {
object-fit: contain;
}
.prize-count-offset[data-v-de2afc7c] {
top: 0;
right: 0;
}
.prize-card-info[data-v-de2afc7c] {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: auto;
background: none;
padding: 16px;
border-radius: 0;
min-height: unset;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.prize-name[data-v-de2afc7c] {
font-size: 20px;
line-height: 1;
letter-spacing: -0.2px;
max-width: 176px;
}
.prize-spec[data-v-de2afc7c] {
font-size: 14px;
line-height: 1.2;
letter-spacing: -0.14px;
}
}
.mega-section[data-v-4de52d7f] {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 64px;
}
.section-title[data-v-4de52d7f] {
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 100px;
line-height: 1;
margin: 0;
color: #fff;
}
.mega-decor[data-v-4de52d7f] {
position: absolute;
top: 10px;
right: 20px;
width: 600px;
height: 350px;
pointer-events: none;
}
.mega-decor-img[data-v-4de52d7f] {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.mega-grid[data-v-4de52d7f] {
display: flex;
flex-direction: column;
gap: 24px;
}
.mega-row[data-v-4de52d7f] {
display: grid;
gap: 24px;
}
.mega-row.large[data-v-4de52d7f] {
grid-template-columns: repeat(3, 1fr);
}
.mega-row.small[data-v-4de52d7f] {
grid-template-columns: repeat(3, 1fr);
}
.mega-card[data-v-4de52d7f] {
position: relative;
height: 414px;
border-radius: 28px;
padding: 28px;
overflow: hidden;
background: linear-gradient(180deg, #C3FD56 0%, #fff 100%);
}
.mega-card[data-v-4de52d7f]::after,
.mega-card-small[data-v-4de52d7f]::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(181deg, rgba(255, 255, 255, 0) 58.34%, #FFF 98.95%);
pointer-events: none;
}
.mega-card-header[data-v-4de52d7f] {
display: flex;
justify-content: space-between;
align-items: flex-start;
position: relative;
z-index: 1;
}
.mega-name[data-v-4de52d7f] {
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 28px;
line-height: 1;
letter-spacing: -0.28px;
color: #1E1E1E;
margin: 0;
}
.prize-badge[data-v-4de52d7f] {
width: 37px;
height: 37px;
flex-shrink: 0;
object-fit: contain;
}
.prize-count[data-v-4de52d7f] {
background: #4846E7;
color: #fff;
font-family: 'Onest', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 1.3;
letter-spacing: -0.2px;
width: 37px;
height: 37px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
padding: 0;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.mega-card-img[data-v-4de52d7f] {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
}
.mega-card-small[data-v-4de52d7f] {
position: relative;
height: 260px;
border-radius: 28px;
padding: 28px;
overflow: hidden;
background: linear-gradient(180deg, #C3FD56 0%, #fff 100%);
}
.mega-card-small-img[data-v-4de52d7f] {
position: absolute;
right: 47px;
top: 0;
width: 260px;
height: 260px;
overflow: hidden;
}
.mega-card-small-img img[data-v-4de52d7f] {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
[data-v-4de52d7f] .full-width {
width: 100%;
height: 64px;
border-radius: 12px;
background: #C3FD56;
color: #1E1E1E;
box-shadow: 0 4px 4px rgba(164, 213, 73, 0.3), inset 0 -3px 4px rgba(167, 218, 72, 0.4), inset 0 0 7px #ADE04E;
}
/* Responsive */
@media (max-aspect-ratio: 1/1) {
.mega-card-img[data-v-4de52d7f] {
width: auto;
}
.mega-row.large[data-v-4de52d7f],
.mega-row.small[data-v-4de52d7f] {
grid-template-columns: 1fr;
}
.mega-decor[data-v-4de52d7f] {
width: 450px;
height: 280px;
display: none;
}
.section-title[data-v-4de52d7f] {
font-size: 72px;
}
}
@media (max-aspect-ratio: 3/4) {
.mega-section[data-v-4de52d7f] {
gap: 40px;
}
.section-title[data-v-4de52d7f] {
font-size: 48px;
}
.mega-decor[data-v-4de52d7f] {
display: none;
}
.mega-row.large[data-v-4de52d7f],
.mega-row.small[data-v-4de52d7f] {
grid-template-columns: 1fr;
}
.mega-card[data-v-4de52d7f] {
height: 220px;
border-radius: 16px;
padding: 20px;
}
.mega-card-small[data-v-4de52d7f] {
height: 200px;
border-radius: 16px;
padding: 20px;
}
.mega-card-small-img[data-v-4de52d7f] {
right: 40px;
width: 200px;
height: 200px;
}
.mega-name[data-v-4de52d7f] {
font-size: 22px;
}
.prize-badge[data-v-4de52d7f] {
width: 36px;
height: 36px;
}
}
@media (max-aspect-ratio: 2/3) {
.mega-section[data-v-4de52d7f] {
gap: 32px;
padding-top: 32px;
}
.section-title[data-v-4de52d7f] {
font-size: 36px;
line-height: 36px;
letter-spacing: -0.72px;
padding: 0 16px;
}
.mega-decor[data-v-4de52d7f] {
width: 180px;
height: 150px;
top: 65px;
right: 0px;
display: block;
}
.mega-grid[data-v-4de52d7f] {
gap: 8px;
}
.mega-row[data-v-4de52d7f] {
gap: 8px;
}
.mega-row.large[data-v-4de52d7f],
.mega-row.small[data-v-4de52d7f] {
grid-template-columns: 1fr;
}
.mega-card[data-v-4de52d7f] {
height: 180px;
border-radius: 12px;
padding: 16px;
}
.mega-card-img[data-v-4de52d7f] {
width: 65%;
height: auto;
object-position: right bottom;
}
.mega-card-small[data-v-4de52d7f] {
height: 180px;
border-radius: 12px;
padding: 16px;
}
.mega-card-small-img[data-v-4de52d7f] {
right: 32px;
width: 180px;
height: 180px;
}
.mega-name[data-v-4de52d7f] {
font-size: 20px;
line-height: 1;
letter-spacing: -0.2px;
}
.prize-badge[data-v-4de52d7f] {
width: 32px;
height: 32px;
}
[data-v-4de52d7f] .full-width {
height: 64px;
border-radius: 12px;
}
}
.winners-section[data-v-f38922fb] {
display: flex;
flex-direction: column;
gap: 32px;
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.section-title[data-v-f38922fb] {
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 64px;
line-height: 0.9;
letter-spacing: -0.64px;
margin: 0;
color: #4A48E9;
}
.winners-row[data-v-f38922fb] {
position: relative;
display: grid;
gap: 24px;
}
.winners-grid[data-v-f38922fb] {
display: flex;
gap: 24px;
}
.scroller-wrapper[data-v-f38922fb] {
position: relative;
margin: 0;
min-width: 0;
}
.scroller-overlay[data-v-f38922fb] {
position: absolute;
top: 0;
bottom: 0;
width: 20px;
pointer-events: none;
z-index: 2;
}
.scroller-overlay.left[data-v-f38922fb] {
left: -1px;
background: linear-gradient(to right, var(--color-bg) 0%, rgba(235, 235, 235, 0) 100%);
}
.scroller-overlay.right[data-v-f38922fb] {
right: -1px;
background: linear-gradient(to left, var(--color-bg) 0%, rgba(235, 235, 235, 0) 100%);
}
.scroller[data-v-f38922fb] {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
}
.scroller[data-v-f38922fb]::-webkit-scrollbar {
display: none;
}
.winner-card[data-v-f38922fb] {
width: 363px;
height: 519px;
flex-shrink: 0;
display: flex;
flex-direction: column;
border-radius: 28px;
overflow: hidden;
position: relative;
}
.winner-image-wrapper[data-v-f38922fb] {
flex: 1;
position: relative;
margin-bottom: -30px;
z-index: 0;
border-radius: 28px;
overflow: hidden;
}
.winner-bg[data-v-f38922fb] {
width: 100%;
height: 100%;
object-fit: cover;
}
.gradient-overlay[data-v-f38922fb] {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 54%, rgba(0, 0, 0, 0.8) 107%);
}
.winner-content[data-v-f38922fb] {
height: 126px;
background: #f5f5f5;
border-radius: 28px;
padding: 20px;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.winner-author[data-v-f38922fb] {
display: flex;
align-items: center;
gap: 10px;
}
.winner-icon[data-v-f38922fb] {
width: 27px;
height: 27px;
flex-shrink: 0;
object-fit: contain;
}
.winner-name[data-v-f38922fb] {
font-family: 'Onest', sans-serif;
font-weight: 600;
font-size: 20px;
line-height: 0.9;
letter-spacing: -0.6px;
color: #1E1E1E;
}
.winner-action[data-v-f38922fb] {
font-family: 'Onest', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 1.1;
letter-spacing: -0.18px;
color: #1E1E1E;
margin: 0;
}
/* Scrollbar */
.scrollbar[data-v-f38922fb] {
position: relative;
height: 4px;
user-select: none;
}
.track[data-v-f38922fb] {
position: absolute;
inset: 0;
background: #d9d9d9;
border-radius: 100px;
}
.thumb[data-v-f38922fb] {
position: absolute;
top: 0;
height: 4px;
background: var(--color-primary);
border-radius: 100px;
cursor: grab;
z-index: 2;
}
/* Arrow buttons */
.arrow[data-v-f38922fb] {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border: none;
background: transparent;
padding: 0;
cursor: pointer;
display: grid;
place-items: center;
z-index: 3;
}
.arrow.right[data-v-f38922fb] {
right: 24px;
}
.arrow.left[data-v-f38922fb] {
left: 24px;
}
/* Transitions */
.fade-enter-active[data-v-f38922fb],
.fade-leave-active[data-v-f38922fb] {
transition: opacity 0.3s ease;
}
.fade-enter-from[data-v-f38922fb],
.fade-leave-to[data-v-f38922fb] {
opacity: 0;
}
/* Responsive */
@media (max-aspect-ratio: 1/1) {
.section-title[data-v-f38922fb] {
font-size: 52px;
}
.arrow[data-v-f38922fb],
.scroller-overlay[data-v-f38922fb] {
display: none;
}
}
@media (max-aspect-ratio: 3/4) {
.winners-row[data-v-f38922fb] {
gap: 8px;
}
.winners-section[data-v-f38922fb] {
padding-top: 24px;
gap: 24px;
}
.section-title[data-v-f38922fb] {
font-size: 40px;
}
.winner-card[data-v-f38922fb] {
width: 300px;
height: 420px;
border-radius: 16px;
}
.winner-image-wrapper[data-v-f38922fb] {
border-radius: 16px;
margin-bottom: -35px;
}
.winner-content[data-v-f38922fb] {
height: 120px;
border-radius: 16px;
padding: 18px;
}
.winner-name[data-v-f38922fb] {
font-size: 18px;
}
.winner-action[data-v-f38922fb] {
font-size: 16px;
}
}
@media (max-aspect-ratio: 2/3) {
.winners-section[data-v-f38922fb] {
padding-top: 24px;
gap: 24px;
}
.section-title[data-v-f38922fb] {
font-size: 36px;
line-height: 36px;
letter-spacing: -0.72px;
padding: 0;
}
.winners-grid[data-v-f38922fb] {
gap: 8px;
}
.winner-card[data-v-f38922fb] {
width: 286px;
height: 390px;
border-radius: 12px;
}
.winner-image-wrapper[data-v-f38922fb] {
border-radius: 12px;
margin-bottom: -40px;
}
.winner-content[data-v-f38922fb] {
height: 120px;
border-radius: 12px;
padding: 16px;
border: 1px solid rgba(30, 30, 30, 0.25);
}
.winner-icon[data-v-f38922fb] {
width: 27px;
height: 27px;
}
.winner-name[data-v-f38922fb] {
font-size: 20px;
line-height: 20px;
}
.winner-action[data-v-f38922fb] {
font-size: 18px;
line-height: 16px;
}
}
.pricing[data-v-156818cc] { display: grid; gap: 0;
}
.heading[data-v-156818cc] { margin: 0 0 32px; font-weight: 600; font-size: 64px; line-height: 0.9; color: var(--color-primary); letter-spacing: -0.01em;
}
.grid[data-v-156818cc] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
}
.plan[data-v-156818cc] { background: rgba(255, 255, 255, 0.50); border-radius: 28px; box-shadow: inset 0 0 0 1px rgba(30,30,30,0.25); display: grid; grid-template-rows: auto 1fr; height: 740px; min-width: 0; overflow: hidden; padding: 20px;
}
.plan-header[data-v-156818cc] { padding: 20px; border-radius: 16px; margin: 0; color: #1e1e1e; position: relative; height: 174px; overflow: hidden;
}
.header-art[data-v-156818cc] { position: absolute; inset: 0; pointer-events: none;
}
.flare[data-v-156818cc] {
position: absolute;
right: -150px;
top: 75px;
transform: translateY(-50%);
opacity: 1;
height: 400px;
max-width: none;
}
.plan-header.is-green[data-v-156818cc] { background: #c3fd56;
}
.plan-header.is-blue[data-v-156818cc] { background: var(--color-primary); color: #fff;
}
.plan-header.is-dark[data-v-156818cc] { background: #FFFFFF; color: #1E1E1E;
}
.plan-header.is-black[data-v-156818cc] { background: #1e1e1e; color: #fff;
}
.badge[data-v-156818cc] { display: inline-block; background: rgba(255,255,255,0.6); color: #1e1e1e; border-radius: 52px; padding: 8px 12px; font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; margin: 0; position: relative;
}
/* Badge outline/background variants per plan */
.plan-header.is-green .badge[data-v-156818cc] { background-color: rgba(255,255,255,0.57); color: #1e1e1e;
}
.plan-header.is-green .badge[data-v-156818cc]::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
background: linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,1) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
}
.plan-header.is-blue .badge[data-v-156818cc],
.plan-header.is-dark .badge[data-v-156818cc] { background-color: rgba(30,30,30,0.57); color: #fff;
}
.plan-header.is-blue .badge[data-v-156818cc]::before,
.plan-header.is-dark .badge[data-v-156818cc]::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
background: linear-gradient(45deg, rgba(30,30,30,1) 0%, rgba(30,30,30,0.25) 50%, rgba(30,30,30,1) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
}
.plan-header.is-black .badge[data-v-156818cc] { background-color: rgba(255,255,255,0.25); color: #fff;
}
.plan-header.is-black .badge[data-v-156818cc]::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
background: linear-gradient(45deg, rgba(30,30,30,1) 0%, rgba(30,30,30,0.25) 50%, rgba(30,30,30,1) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
}
.title[data-v-156818cc] { margin: 0; position: absolute; left: 20px; bottom: 20px; font-size: 36px; line-height: 0.9; letter-spacing: -0.03em; font-weight: 700; white-space: pre-line;
}
.subcaption[data-v-156818cc] { display: none;
}
.category-row[data-v-156818cc] { display: flex; align-items: center; gap: 8px; margin: 0; padding-top: 20px; position: relative;
}
.category-row .label[data-v-156818cc] { margin: 0; font-weight: 500; font-size: 16px; line-height: 1.1; color: rgba(30,30,30,0.9); letter-spacing: -0.01em;
}
.category-badge[data-v-156818cc] { display: inline-flex; align-items: center; gap: 8px; border-radius: 6px; padding: 4px 8px; font-weight: 600; font-size: 16px; line-height: 1; color: #1e1e1e; position: relative;
}
.category-badge[data-v-156818cc]::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
background: linear-gradient(45deg, rgba(255,255,255,0.5) 0%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.5) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
}
.category-badge.is-blue[data-v-156818cc] { background: linear-gradient(58.4162deg, #ffccb2 4.5866%, #d9ad98 34.559%, #ffccb2 64.532%, #d9ad98 95.413%);
}
.category-badge.is-dark[data-v-156818cc] { background: linear-gradient(50.9915deg, #d9d9d9 4.6215%, #ffffff 35.813%, #d9d9d9 66.088%, #ffffff 96.362%);
}
.category-badge.is-black[data-v-156818cc] { background: linear-gradient(59deg,#ffd480 5%,#d9b56c 35%,#ffd480 65%,#d9b56c 96%);
}
.vip-row[data-v-156818cc] { padding-top: 20px; margin: 0; font-weight: 500; font-size: 16px; line-height: 1.1; color: rgba(30,30,30,0.9); letter-spacing: -0.01em;
}
.category-wrapper[data-v-156818cc] {
position: relative;
flex: 1;
display: flex;
justify-content: flex-end;
min-width: 0;
}
.category-badge[role="button"][data-v-156818cc] { cursor: pointer; user-select: none; transition: opacity 0.2s;
}
.category-badge[role="button"][data-v-156818cc]:hover { opacity: 0.8;
}
.category-modal[data-v-156818cc] {
text-align: left;
z-index: 25;
padding: 16px 44px 16px 16px;
left: 0;
right: 0;
transform: none;
max-width: none;
width: 100%;
}
.category-modal-content[data-v-156818cc] { display: flex; flex-direction: column; gap: 20px;
}
.category-modal-header[data-v-156818cc] { display: flex; align-items: flex-start; gap: 12px;
}
.category-subtitle[data-v-156818cc] { font-size: 18px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: #1e1e1e; padding-top: 4px;
}
.category-desc[data-v-156818cc] { font-size: 16px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: rgba(30,30,30,0.9); margin: 0;
}
.category-example[data-v-156818cc] { display: block; margin-top: 4px;
}
.category-modal-footer[data-v-156818cc] { display: flex; flex-direction: column; gap: 0; color: #8e8e8e; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em;
}
.category-modal-footer p[data-v-156818cc] { margin: 0;
}
.category-modal .category-badge[data-v-156818cc] { font-size: 18px; padding: 4px 8px; border-radius: 8px;
}
@media (max-width: 900px) {
.category-modal[data-v-156818cc] { width: 100%; padding: 14px 40px 14px 14px;
}
.category-subtitle[data-v-156818cc] { font-size: 16px;
}
.category-desc[data-v-156818cc] { font-size: 15px;
}
.category-modal-footer[data-v-156818cc] { font-size: 13px;
}
.category-modal .category-badge[data-v-156818cc] { font-size: 16px;
}
}
.content[data-v-156818cc] { display: flex; flex-direction: column; gap: 42px; min-height: 0;
}
.sections[data-v-156818cc] { padding: 0; display: flex; flex-direction: column; gap: 0; flex: 1 1 auto; min-height: 0;
}
.category-row + .block[data-v-156818cc] { padding-top: 20px;
}
.block + .block[data-v-156818cc] { padding-top: 20px;
}
.auto-spacer[data-v-156818cc] { flex: 1 1 auto;
}
.block[data-v-156818cc] { display: grid; gap: 12px; position: relative;
}
.services-row[data-v-156818cc] { display: flex; align-items: center; gap: 8px; cursor: pointer;
}
.services-icons[data-v-156818cc] { display: flex; align-items: center; gap: 5px; background: #ebebeb; padding: 8px; border-radius: 8px;
}
.svc[data-v-156818cc] { width: 24px; height: 24px; border-radius: 6px; background: #fff; display: grid; place-items: center; overflow: hidden;
}
.svc-img[data-v-156818cc] { width: 100%; height: 100%; display: block;
}
.services-more[data-v-156818cc] { width: 40px; height: 40px; border-radius: 8px; background: #1e1e1e; color: #fff; display: grid; place-items: center; font-weight: 700;
}
.block-title[data-v-156818cc] { margin: 0; font-weight: 500; color: rgba(30,30,30,0.9); line-height: 1.1;
}
.services[data-v-156818cc] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0;
}
.services li[data-v-156818cc] { width: 24px; height: 24px; border-radius: 6px; background: #ebebeb; position: relative; overflow: hidden;
}
.services li[data-v-156818cc]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,#fff, #ddd); opacity: 0.7;
}
.services .more[data-v-156818cc] { width: 40px; height: 40px; border-radius: 8px; background: #1e1e1e; color: #fff; display: grid; place-items: center; font-weight: 700;
}
.stats[data-v-156818cc] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.stat[data-v-156818cc] { background: #fff; border-radius: 16px; padding: 16px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04); display: flex; flex-direction: column; gap: 24px; position: relative;
}
.stat .row[data-v-156818cc] { display: flex; align-items: center; justify-content: space-between;
}
.stat strong[data-v-156818cc] { font-size: 24px; line-height: 0.9; color: #1e1e1e; font-weight: 600; letter-spacing: -0.03em;
}
.stat .icon[data-v-156818cc] { width: 12px; height: 12px; background-repeat: no-repeat; background-size: 12px 12px; background-position: center; position: absolute; top: 16px; right: 16px;
}
.icon-data[data-v-156818cc] { background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3e%3cmask%20id='mask0_27_380'%20style='mask-type:alpha'%20maskUnits='userSpaceOnUse'%20x='0'%20y='0'%20width='12'%20height='12'%3e%3crect%20width='12'%20height='12'%20fill='%23D9D9D9'/%3e%3c/mask%3e%3cg%20mask='url(%23mask0_27_380)'%3e%3cpath%20d='M0.75%2010.0002V6.00024H2.25V10.0002H0.75ZM3.75%2010.0002V4.75024H5.25V10.0002H3.75ZM6.75%2010.0002V3.50024H8.25V10.0002H6.75ZM9.75%2010.0002V2.00024H11.25V10.0002H9.75Z'%20fill='%231E1E1E'/%3e%3c/g%3e%3c/svg%3e");
}
.icon-minutes[data-v-156818cc] { background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3e%3cmask%20id='mask0_27_387'%20style='mask-type:alpha'%20maskUnits='userSpaceOnUse'%20x='0'%20y='0'%20width='12'%20height='12'%3e%3crect%20width='12'%20height='12'%20fill='%23D9D9D9'/%3e%3c/mask%3e%3cg%20mask='url(%23mask0_27_387)'%3e%3cpath%20d='M9.975%207.97466L9.2%207.19966C9.56667%206.85799%209.85417%206.45382%2010.0625%205.98716C10.2708%205.52049%2010.375%205.02466%2010.375%204.49966C10.375%203.97466%2010.2708%203.48299%2010.0625%203.02466C9.85417%202.56632%209.56667%202.16632%209.2%201.82466L9.975%201.02466C10.4417%201.46632%2010.8125%201.98716%2011.0875%202.58716C11.3625%203.18716%2011.5%203.82466%2011.5%204.49966C11.5%205.17466%2011.3625%205.81216%2011.0875%206.41216C10.8125%207.01216%2010.4417%207.53299%209.975%207.97466ZM8.375%206.37466L7.575%205.57466C7.725%205.43299%207.84583%205.27257%207.9375%205.09341C8.02917%204.91424%208.075%204.71633%208.075%204.49966C8.075%204.28299%208.02917%204.08508%207.9375%203.90591C7.84583%203.72674%207.725%203.56632%207.575%203.42466L8.375%202.62466C8.64167%202.86632%208.85%203.14758%209%203.46841C9.15%203.78924%209.225%204.13299%209.225%204.49966C9.225%204.86633%209.15%205.21007%209%205.53091C8.85%205.85174%208.64167%206.13299%208.375%206.37466ZM4.5%206.49966C3.95%206.49966%203.47917%206.30383%203.0875%205.91216C2.69583%205.52049%202.5%205.04966%202.5%204.49966C2.5%203.94966%202.69583%203.47882%203.0875%203.08716C3.47917%202.69549%203.95%202.49966%204.5%202.49966C5.05%202.49966%205.52083%202.69549%205.9125%203.08716C6.30417%203.47882%206.5%203.94966%206.5%204.49966C6.5%205.04966%206.30417%205.52049%205.9125%205.91216C5.52083%206.30383%205.05%206.49966%204.5%206.49966ZM0.5%2010.4997V9.09966C0.5%208.82466%200.570833%208.56633%200.7125%208.32466C0.854167%208.08299%201.05%207.89966%201.3%207.77466C1.725%207.55799%202.20417%207.37466%202.7375%207.22466C3.27083%207.07466%203.85833%206.99966%204.5%206.99966C5.14167%206.99966%205.72917%207.07466%206.2625%207.22466C6.79583%207.37466%207.275%207.55799%207.7%207.77466C7.95%207.89966%208.14583%208.08299%208.2875%208.32466C8.42917%208.56633%208.5%208.82466%208.5%209.09966V10.4997H0.5Z'%20fill='%231E1E1E'/%3e%3c/g%3e%3c/svg%3e");
}
.icon-sms[data-v-156818cc] { background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3e%3cmask%20id='mask0_27_394'%20style='mask-type:alpha'%20maskUnits='userSpaceOnUse'%20x='0'%20y='0'%20width='12'%20height='12'%3e%3crect%20width='12'%20height='12'%20fill='%23D9D9D9'/%3e%3c/mask%3e%3cg%20mask='url(%23mask0_27_394)'%3e%3cpath%20d='M1%2010.9998V1.99976C1%201.72476%201.09792%201.48934%201.29375%201.29351C1.48958%201.09767%201.725%200.999756%202%200.999756H10C10.275%200.999756%2010.5104%201.09767%2010.7063%201.29351C10.9021%201.48934%2011%201.72476%2011%201.99976V7.99976C11%208.27476%2010.9021%208.51017%2010.7063%208.70601C10.5104%208.90184%2010.275%208.99976%2010%208.99976H3L1%2010.9998ZM3%206.99976H7V5.99976H3V6.99976ZM3%205.49976H9V4.49976H3V5.49976ZM3%203.99976H9V2.99976H3V3.99976Z'%20fill='%231E1E1E'/%3e%3c/g%3e%3c/svg%3e");
}
.stat .label[data-v-156818cc] { font-size: 16px; color: rgba(30,30,30,0.9); line-height: 0.8; margin-top: auto; font-weight: 500;
}
.infinity-icon[data-v-156818cc] { width: 36px; display: block;
}
.plan-footer[data-v-156818cc] { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: #1e1e1e; border-radius: 12px;
}
.price[data-v-156818cc] { display: flex; align-items: flex-start; gap: 4px; color: #fff;
}
.price strong[data-v-156818cc] { font-size: 36px; color: #fff; letter-spacing: -0.04em; line-height: 0.9;
}
.price span[data-v-156818cc] { font-size: 18px; color: rgba(255,255,255,0.75); line-height: 1.1;
}
.stickers-head[data-v-156818cc] { height: 19px; display: flex; align-items: center; justify-content: space-between;
}
.more-icon[data-v-156818cc] { width: 24px; height: 24px; border-radius: 8px; background-color: #1E1E1E; background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='6'%20height='10'%20viewBox='0%200%206%2010'%20fill='none'%3e%3cpath%20d='M2.03896%206.67586C2.0303%206.62069%202.02165%206.56092%202.01299%206.49655C2.01299%206.43218%202.01299%206.36782%202.01299%206.30345C2.01299%206.01839%202.05628%205.76552%202.14286%205.54483C2.22944%205.32414%202.34199%205.12644%202.48052%204.95172C2.62771%204.76782%202.77922%204.5977%202.93507%204.44138C3.09957%204.28506%203.25974%204.13333%203.41558%203.98621C3.55411%203.85747%203.67532%203.72874%203.77922%203.6C3.89178%203.46207%203.98268%203.32414%204.05195%203.18621C4.12121%203.03908%204.15584%202.89195%204.15584%202.74483C4.15584%202.55172%204.10823%202.38621%204.01299%202.24828C3.92641%202.10115%203.80087%201.9908%203.63636%201.91724C3.48052%201.84368%203.28139%201.8069%203.03896%201.8069C2.80519%201.8069%202.5974%201.84828%202.41558%201.93103C2.23377%202.0046%202.09091%202.11494%201.98701%202.26207C1.88312%202.4092%201.81818%202.58851%201.79221%202.8H0C0.017316%202.27586%200.112554%201.83448%200.285714%201.47586C0.458874%201.11724%200.688312%200.832184%200.974026%200.62069C1.25974%200.4%201.58009%200.243678%201.93507%200.151724C2.2987%200.0505746%202.671%200%203.05195%200C3.55411%200%204.0303%200.0919539%204.48052%200.275862C4.93074%200.450574%205.29437%200.726436%205.57143%201.10345C5.85714%201.48046%206%201.98161%206%202.6069C6%202.93793%205.94805%203.23218%205.84416%203.48966C5.74026%203.74713%205.5974%203.9908%205.41558%204.22069C5.23377%204.45057%205.02597%204.68506%204.79221%204.92414C4.64502%205.08046%204.49784%205.23218%204.35065%205.37931C4.20346%205.52644%204.07792%205.68276%203.97403%205.84828C3.87013%206.01379%203.80519%206.22069%203.77922%206.46897C3.77922%206.49655%203.77489%206.52874%203.76623%206.56552C3.76623%206.6023%203.76623%206.63908%203.76623%206.67586H2.03896ZM2.90909%2010C2.61472%2010%202.35065%209.89885%202.11688%209.69655C1.89177%209.48506%201.77922%209.17701%201.77922%208.77241C1.77922%208.38621%201.89177%208.09655%202.11688%207.90345C2.35065%207.70115%202.61472%207.6%202.90909%207.6C3.21212%207.6%203.47619%207.70115%203.7013%207.90345C3.92641%208.09655%204.03896%208.38621%204.03896%208.77241C4.03896%209.17701%203.92641%209.48506%203.7013%209.69655C3.47619%209.89885%203.21212%2010%202.90909%2010Z'%20fill='white'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center; background-size: 6px 10px; cursor: pointer; user-select: none; -webkit-user-select: none; -ms-user-select: none;
}
.stickers[data-v-156818cc] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.sticker[data-v-156818cc] { background: #ebebeb; border-radius: 16px; padding: 16px; display: grid; gap: 24px; justify-items: start;
}
.sticker-row[data-v-156818cc] { display: flex; align-items: center;
}
.sticker-row[data-v-156818cc] > * { position: relative;
}
.sticker-bubble[data-v-156818cc] { background: #1e1e1e; color: #fff; width: 27px; height: 27px; border-radius: 23.047px; display: grid; place-items: center; font-weight: 700; font-size: 16px; line-height: 1.1; letter-spacing: -0.48px; text-align: center; border: 2px solid #EBEBEB; margin-right: -10.8px; z-index: 2;
}
.sticker-label[data-v-156818cc] { font-size: 14px; color: rgba(30,30,30,0.9); line-height: 0.7;
}
/* Services modal */
.services-wrapper[data-v-156818cc] { position: static; width: 100%;
}
.services-modal[data-v-156818cc] { position: absolute; left: 0; right: 0; top: -10px; z-index: 20; background: rgba(255,255,255,0.75); border: 2px solid #fff; border-radius: 16px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); backdrop-filter: blur(20px); width: 100%; max-width: none; transform-origin: top left; will-change: opacity, transform; padding-right: 44px;
}
.services-modal-head[data-v-156818cc] { display: flex; align-items: center; justify-content: space-between;
}
.services-modal-head p[data-v-156818cc] { margin: 0; font-weight: 500; font-size: inherit; line-height: 1.2; color: rgba(30,30,30,0.9); letter-spacing: -0.01em;
}
.services-modal-close[data-v-156818cc] { width: 24px; height: 24px; padding: 7px; border-radius: 8px; background: #1e1e1e; color: #fff; border: none; display: grid; place-items: center; cursor: pointer; line-height: 1; position: absolute; top: 12px; right: 12px;
}
.services-modal-close img[data-v-156818cc] { width: 100%; height: 100%; display: block;
}
.services-modal-body[data-v-156818cc] { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px;
}
.pill[data-v-156818cc] { background: #fff; display: flex; align-items: center; gap: 6px; padding: 8px; border-radius: 8px;
}
.svc-sm[data-v-156818cc] { width: 24px; height: 24px; border-radius: 4px;
}
/* Transition for services-modal */
.services-pop-enter-active[data-v-156818cc],
.services-pop-leave-active[data-v-156818cc] { transition: opacity 500ms cubic-bezier(0.2, 0.6, 0.2, 1)
}
.services-pop-enter-from[data-v-156818cc],
.services-pop-leave-to[data-v-156818cc] { opacity: 0;
}
.services-pop-enter-to[data-v-156818cc],
.services-pop-leave-from[data-v-156818cc] { opacity: 1;
}
/* Stickers modal overrides + transition */
.stickers-modal-head[data-v-156818cc] { display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.stickers-lead[data-v-156818cc] { display: flex; align-items: center; gap: 12px;
}
.stickers-lead-icon[data-v-156818cc] { width: 48px; height: 48px; display: block; border-radius: 8px;}
.stickers-lead-title[data-v-156818cc] { margin: 0; font-weight: 600; font-size: 18px; line-height: 1.1; color: #1e1e1e; letter-spacing: -0.01em;
}
.stickers-modal-body[data-v-156818cc] { margin-top: 12px;
}
.stickers-modal-body p[data-v-156818cc] { margin: 0; font-weight: 500; font-size: 16px; line-height: 1.2; color: rgba(30,30,30,0.9); letter-spacing: -0.01em;
}
.stickers-pop-enter-active[data-v-156818cc],
.stickers-pop-leave-active[data-v-156818cc] { transition: opacity 500ms cubic-bezier(0.2, 0.6, 0.2, 1)
}
.stickers-pop-enter-from[data-v-156818cc],
.stickers-pop-leave-to[data-v-156818cc] { opacity: 0;
}
.stickers-pop-enter-to[data-v-156818cc],
.stickers-pop-leave-from[data-v-156818cc] { opacity: 1;
}
/* Medium (portrait/square only) — apply to all portrait (<1) */
@media (max-aspect-ratio: 1/1) {
.heading[data-v-156818cc] { font-size: 48px; margin: 0 0 24px;
}
.grid[data-v-156818cc] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
}
.plan-header[data-v-156818cc] { height: 160px;
}
.title[data-v-156818cc] { font-size: 32px;
}
}
/* Tablet / large portrait (portrait/square only) */
@media (max-aspect-ratio: 1/1) {
.grid[data-v-156818cc] { grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flare[data-v-156818cc] {
right: -150px;
}
}
/* Medium refinement (≤900px, portrait/square only) — apply to all portrait (<1) */
@media (max-aspect-ratio: 1/1) {
.price strong[data-v-156818cc] { font-size: 32px;
}
.price span[data-v-156818cc] { font-size: 16px;
}
.stat[data-v-156818cc] { padding: 14px; gap: 16px;
}
.stat strong[data-v-156818cc] { font-size: 22px;
}
.plan[data-v-156818cc] { height: 720px;
}
}
/* Mobile (portrait/square only) */
@media (max-aspect-ratio: 2/3) {
.heading[data-v-156818cc] { font-size: 36px; margin: 0 0 16px; letter-spacing: -0.02em;
}
.grid[data-v-156818cc] { grid-template-columns: 1fr; gap: 16px;
}
.plan[data-v-156818cc] { position: sticky; top: calc(var(--app-header-offset-top) + var(--app-header-height) + var(--plan-sticky-offset-extra)); height: 650px; padding: 16px; backdrop-filter: blur(60px); -webkit-backdrop-filter: blur(60px);
}
.plan-header[data-v-156818cc] { padding: 16px; height: 150px;
}
.badge[data-v-156818cc] { font-size: 12px; padding: 6px 10px;
}
.title[data-v-156818cc] { font-size: 28px;
}
.block[data-v-156818cc] { gap: 8px;
}
.stat[data-v-156818cc] { padding: 12px; gap: 16px; border-radius: 12px;
}
.stat strong[data-v-156818cc] { font-size: 24px;
}
.stat .label[data-v-156818cc] { font-size: 14px;
}
.plan-footer[data-v-156818cc] { padding: 12px;
}
.price strong[data-v-156818cc] { font-size: 28px;
}
.price span[data-v-156818cc] { font-size: 16px;
}
.stickers[data-v-156818cc] { grid-template-columns: repeat(3, 1fr);
}
.sticker[data-v-156818cc] { padding: 12px; gap: 16px;
}
}
body {
background: #f5f7fb;
color: #1d2433;
}
body.admin-overlay-open {
overflow: hidden;
}
.admin-view[data-v-60ebcd3a] {
display: flex;
flex-direction: column;
gap: 24px;
}
.admin-header[data-v-60ebcd3a] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
flex-wrap: wrap;
}
.header-actions[data-v-60ebcd3a] {
display: flex;
align-items: center;
gap: 16px;
}
.session-indicator[data-v-60ebcd3a] {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
color: #1e2e66;
}
.session-dot[data-v-60ebcd3a] {
width: 8px;
height: 8px;
border-radius: 50%;
background: #30b27a;
box-shadow: 0 0 0 6px rgba(48, 178, 122, 0.2);
}
.header-content h1[data-v-60ebcd3a] {
margin: 0;
font-size: 32px;
font-weight: 700;
}
.header-description[data-v-60ebcd3a] {
margin: 8px 0 0;
max-width: 560px;
color: #5f6b85;
font-size: 15px;
line-height: 1.5;
}
.status-stack[data-v-60ebcd3a] {
display: flex;
flex-direction: column;
gap: 10px;
}
.status[data-v-60ebcd3a] {
padding: 14px 18px;
border-radius: 18px;
border: 1px solid #e2e8f3;
background: #fff;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
color: #1f2433;
}
.status-error[data-v-60ebcd3a] {
border-color: #ffd9d5;
background: #fff4f2;
color: #c04741;
}
.status-success[data-v-60ebcd3a] {
border-color: #c8f0da;
background: #f2fff8;
color: #167d52;
}
.admin-layout[data-v-60ebcd3a] {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: 32px;
align-items: flex-start;
}
.admin-tabs[data-v-60ebcd3a] {
top: 24px;
align-self: flex-start;
background: #fff;
border: 1px solid #e2e8f3;
border-radius: 28px;
padding: 24px;
box-shadow: 0 24px 45px rgba(22, 34, 71, 0.08);
display: flex;
flex-direction: column;
gap: 16px;
}
.tabs-header[data-v-60ebcd3a] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.tabs-title[data-v-60ebcd3a] {
margin: 0;
font-size: 13px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #9aa4c0;
}
.view-toggle[data-v-60ebcd3a] {
display: flex;
gap: 4px;
background: #f0f2f8;
border-radius: 10px;
padding: 3px;
}
.view-toggle-btn[data-v-60ebcd3a] {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
border-radius: 7px;
background: transparent;
color: #7b86a5;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.view-toggle-btn[data-v-60ebcd3a]:hover {
color: #4f5871;
background: #e4e8f2;
}
.view-toggle-btn.active[data-v-60ebcd3a] {
background: #fff;
color: #1e2e66;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.page-group[data-v-60ebcd3a] {
display: flex;
flex-direction: column;
gap: 8px;
}
.page-group-title[data-v-60ebcd3a] {
margin: 0;
padding: 8px 0 4px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #7b86a5;
border-top: 1px solid #e8edf7;
}
.page-group:first-child .page-group-title[data-v-60ebcd3a] {
border-top: none;
padding-top: 0;
}
.tab-btn[data-v-60ebcd3a] {
width: 100%;
text-align: left;
border: 1px solid transparent;
border-radius: 18px;
padding: 14px 16px;
background: transparent;
display: flex;
flex-direction: column;
gap: 4px;
cursor: pointer;
color: #4f5871;
font-size: 15px;
font-weight: 600;
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.tab-btn[data-v-60ebcd3a]:hover {
border-color: #dbe4ff;
background: #f5f7ff;
color: #1f2a5c;
}
.tab-btn.active[data-v-60ebcd3a] {
border-color: #c7d5ff;
background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%);
color: #1e2e66;
box-shadow: 0 16px 35px rgba(52, 82, 255, 0.18);
}
.tab-label[data-v-60ebcd3a] {
font-size: 15px;
font-weight: 600;
}
.tab-label-row[data-v-60ebcd3a] {
display: flex;
align-items: center;
gap: 8px;
justify-content: space-between;
}
.tab-unsaved-badge[data-v-60ebcd3a] {
padding: 1px 6px;
border-radius: 999px;
background: #fff7e3;
color: #a14b00;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.9;
}
.tab-description[data-v-60ebcd3a] {
font-size: 13px;
color: #7b86a5;
font-weight: 500;
}
.admin-content[data-v-60ebcd3a] {
min-height: 100%;
}
.admin-overlay[data-v-60ebcd3a] {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 20;
padding: 24px;
}
.overlay-card[data-v-60ebcd3a] {
background: #fff;
border-radius: 28px;
padding: 32px;
box-shadow: 0 30px 70px rgba(22, 34, 71, 0.2);
text-align: center;
max-width: 420px;
border: 1px solid #dfe6fb;
}
.overlay-card.has-error[data-v-60ebcd3a] {
border-color: #ffd2d2;
background: #fff6f6;
}
.overlay-error[data-v-60ebcd3a] {
display: flex;
flex-direction: column;
gap: 8px;
}
.overlay-title[data-v-60ebcd3a] {
margin: 16px 0 6px;
font-size: 20px;
font-weight: 600;
color: #1e2b4d;
}
.overlay-subtitle[data-v-60ebcd3a] {
margin: 0;
font-size: 15px;
color: #5c6687;
}
.loader[data-v-60ebcd3a] {
width: 48px;
height: 48px;
border-radius: 50%;
border: 4px solid #dfe4ff;
border-top-color: #3d5afe;
margin: 0 auto;
animation: spin-60ebcd3a 0.9s linear infinite;
}
.fade-overlay-enter-active[data-v-60ebcd3a],
.fade-overlay-leave-active[data-v-60ebcd3a] {
transition: opacity 0.25s ease;
}
.fade-overlay-enter-from[data-v-60ebcd3a],
.fade-overlay-leave-to[data-v-60ebcd3a] {
opacity: 0;
}
.fade-slide-enter-active[data-v-60ebcd3a],
.fade-slide-leave-active[data-v-60ebcd3a] {
transition: opacity 0.25s ease, transform 0.25s ease;
}
.fade-slide-enter-from[data-v-60ebcd3a],
.fade-slide-leave-to[data-v-60ebcd3a] {
opacity: 0;
transform: translateY(12px);
}
.admin-card[data-v-60ebcd3a] {
background: #fff;
border: 1px solid #e2e8f3;
border-radius: 30px;
box-shadow: 0 30px 60px rgba(15, 23, 42, 0.08);
overflow: hidden;
}
[data-v-60ebcd3a] .card-header {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 26px 32px;
background: #f9fbff;
border-bottom: 1px solid #e8edf7;
align-items: center;
flex-wrap: wrap;
}
[data-v-60ebcd3a] .card-header h2 {
margin: 0;
font-size: 24px;
color: #1e2b4d;
}
[data-v-60ebcd3a] .toggle {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #5a6379;
margin-top: 6px;
}
[data-v-60ebcd3a] .card-actions {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.card-body[data-v-60ebcd3a] {
padding: 28px 32px 32px;
display: grid;
gap: 18px;
}
[data-v-60ebcd3a] .form-field {
display: grid;
gap: 8px;
font-size: 14px;
color: #4c5672;
}
[data-v-60ebcd3a] .form-field input,[data-v-60ebcd3a] .form-field textarea,[data-v-60ebcd3a] .form-field select {
width: 100%;
border-radius: 14px;
border: 1px solid #d7dfee;
background: #f8faff;
color: #1f2433;
padding: 10px 14px;
font-size: 14px;
resize: vertical;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
[data-v-60ebcd3a] .form-field input:focus,[data-v-60ebcd3a] .form-field textarea:focus,[data-v-60ebcd3a] .form-field select:focus {
border-color: #8aa2ff;
box-shadow: 0 0 0 2px rgba(138, 162, 255, 0.2);
outline: none;
background: #fff;
}
[data-v-60ebcd3a] .image-input {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
[data-v-60ebcd3a] .image-input input[type='file'] {
padding: 8px;
border-radius: 14px;
border: 1px dashed #cbd5f0;
background: #f8faff;
cursor: pointer;
}
[data-v-60ebcd3a] .btn {
border: 1px solid #d5ddf1;
border-radius: 14px;
padding: 10px 18px;
background: #fff;
color: #1d2433;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
[data-v-60ebcd3a] .btn:hover:not(:disabled) {
background: #f2f4ff;
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}
[data-v-60ebcd3a] .btn.ghost {
background: #f5f6ff;
border-color: #d9e0ff;
color: #1e2e66;
}
[data-v-60ebcd3a] .btn.primary {
background: #3d5afe;
border-color: #3d5afe;
color: #fff;
box-shadow: 0 15px 30px rgba(61, 90, 254, 0.35);
}
[data-v-60ebcd3a] .btn.primary:hover:not(:disabled) {
background: #3048d0;
border-color: #3048d0;
color: #fff;
box-shadow: 0 12px 24px rgba(48, 72, 208, 0.4);
}
[data-v-60ebcd3a] .btn:disabled {
opacity: 0.6;
cursor: not-allowed;
box-shadow: none;
}
[data-v-60ebcd3a] .link-btn {
background: none;
border: none;
color: #f25a67;
cursor: pointer;
font-size: 13px;
font-weight: 600;
text-decoration: underline;
padding: 0;
}
.list-header[data-v-60ebcd3a] {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
gap: 12px;
flex-wrap: wrap;
}
.list-header h3[data-v-60ebcd3a] {
margin: 0;
font-size: 18px;
color: #1f2b45;
}
.block[data-v-60ebcd3a] {
border: 1px solid #e3e9f7;
border-radius: 20px;
padding: 18px;
display: grid;
gap: 14px;
background: #f8faff;
}
.block-header[data-v-60ebcd3a] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.grid-2[data-v-60ebcd3a] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
}
.grid-2[data-v-60ebcd3a] > * {
align-self: start;
}
.stickers-grid[data-v-60ebcd3a] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.info-text[data-v-60ebcd3a] {
margin: 0;
padding: 14px 18px;
background: #f0f4ff;
border: 1px solid #d9e0ff;
border-radius: 14px;
color: #4c5672;
font-size: 14px;
line-height: 1.5;
}
.hint[data-v-60ebcd3a] {
font-size: 12px;
color: #7b86a5;
margin-top: 4px;
}
.checkbox-group[data-v-60ebcd3a] {
display: flex;
flex-wrap: wrap;
gap: 10px;
position: relative;
padding: 2px;
margin: -2px;
border-radius: 14px;
}
.checkbox-option[data-v-60ebcd3a] {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border: 1px solid #d7dfee;
border-radius: 12px;
background: #fff;
font-size: 14px;
color: #4c5672;
white-space: nowrap;
flex-shrink: 0;
}
.checkbox-option input[data-v-60ebcd3a] {
margin: 0;
}
.field-dirty[data-v-60ebcd3a] {
border-color: #ffce5c !important;
background: #fffaf0 !important;
box-shadow: 0 0 0 1px rgba(255, 206, 92, 0.7);
}
.field-dirty.checkbox-group[data-v-60ebcd3a] {
/* Safari fix: use outline instead of box-shadow on flex container */
box-shadow: none;
outline: 2px solid #ffce5c;
outline-offset: -1px;
background: transparent !important;
}
.field-dirty.checkbox-group .checkbox-option[data-v-60ebcd3a] {
border-color: #ffce5c;
background: #fffaf0;
}
.field-dirty[data-v-60ebcd3a] .image-input input[type='file'] {
border-color: #ffce5c;
background: #fffaf0;
}
@keyframes spin-60ebcd3a {
to {
transform: rotate(360deg);
}
}
@media (max-width: 1024px) {
.admin-layout[data-v-60ebcd3a] {
grid-template-columns: 1fr;
}
.admin-tabs[data-v-60ebcd3a] {
position: static;
flex-direction: row;
flex-wrap: wrap;
}
.tab-btn[data-v-60ebcd3a] {
flex: 1 1 240px;
}
}
@media (max-width: 768px) {
.admin-view[data-v-60ebcd3a] {
padding: 24px 20px 40px;
}
.card-body[data-v-60ebcd3a] {
padding: 24px;
}
[data-v-60ebcd3a] .card-header {
padding: 22px 24px;
}
}
/* Bonuses preview wrapper */
[data-v-60ebcd3a] .bonuses-preview-wrapper {
position: relative;
background: #4A48E9;
border-radius: 28px;
padding: 28px;
overflow: hidden;
}
[data-v-60ebcd3a] .bonuses-preview-bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
[data-v-60ebcd3a] .bonuses-preview-pattern {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.2;
mix-blend-mode: luminosity;
}
/* Multi-page preview grid (for sections on multiple pages) */
[data-v-60ebcd3a] .multi-page-preview-grid,[data-v-60ebcd3a] .help-make-dream-preview-grid {
display: grid;
gap: 24px;
}
[data-v-60ebcd3a] .preview-variant-label,[data-v-60ebcd3a] .preview-label {
margin: 0 0 12px;
font-size: 14px;
font-weight: 600;
color: #5c6687;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.media-card[data-v-a07fe4ee] {
background: #fff;
border-radius: 32px;
border: 1px solid #e2e8f3;
box-shadow: 0 35px 80px rgba(28, 44, 91, 0.1);
padding: 32px;
display: flex;
flex-direction: column;
gap: 24px;
}
.media-card__header[data-v-a07fe4ee] {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: flex-start;
flex-wrap: wrap;
}
.media-card__actions[data-v-a07fe4ee] {
display: flex;
gap: 12px;
}
.media-stats[data-v-a07fe4ee] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
}
.media-stat[data-v-a07fe4ee] {
padding: 16px;
border-radius: 20px;
border: 1px solid #edf1fb;
background: #f8fafc;
display: flex;
flex-direction: column;
gap: 6px;
}
.media-stat__label[data-v-a07fe4ee] {
color: #6b778f;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.media-stat__value[data-v-a07fe4ee] {
font-size: 20px;
}
.media-empty[data-v-a07fe4ee] {
padding: 40px;
text-align: center;
border: 1px dashed #d5dcef;
border-radius: 24px;
color: #6b738c;
}
.media-grid[data-v-a07fe4ee] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 18px;
list-style: none;
padding: 0;
margin: 0;
}
.media-grid-item[data-v-a07fe4ee] {
border: 1px solid #e2e8f3;
border-radius: 24px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
background: #fdfdff;
}
.media-thumb[data-v-a07fe4ee] {
width: 100%;
border-radius: 18px;
border: 1px solid #eceff8;
background: #f6f7fb;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.media-thumb--image img[data-v-a07fe4ee] {
width: 100%;
height: 100%;
object-fit: cover;
}
.media-thumb__ext[data-v-a07fe4ee] {
font-weight: 700;
color: #111c4e;
font-size: 28px;
}
.media-meta[data-v-a07fe4ee] {
display: flex;
flex-direction: column;
gap: 4px;
}
.media-key[data-v-a07fe4ee] {
font-weight: 600;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.media-info[data-v-a07fe4ee] {
margin: 0;
color: #6b778f;
font-size: 14px;
}
.media-meta__badges[data-v-a07fe4ee] {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.media-badge[data-v-a07fe4ee] {
padding: 4px 10px;
border-radius: 999px;
background: #e8f2ff;
color: #1c3faa;
font-size: 12px;
font-weight: 600;
}
.media-badge--muted[data-v-a07fe4ee] {
background: #f4f7fb;
color: #6b738c;
}
.media-actions[data-v-a07fe4ee] {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.link-btn[data-v-a07fe4ee] {
border: none;
background: none;
padding: 0;
color: #1c3faa;
font-weight: 600;
cursor: pointer;
}
.media-footer[data-v-a07fe4ee] {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: flex-end;
}
@media (max-width: 768px) {
.media-page[data-v-a07fe4ee] {
padding: 0;
}
.media-card[data-v-a07fe4ee] {
border-radius: 0;
padding: 24px 16px;
}
.media-filter[data-v-a07fe4ee] {
grid-template-columns: 1fr;
}
.media-grid[data-v-a07fe4ee] {
grid-template-columns: 1fr;
}
}
.utm-page[data-v-d748c340] {
display: flex;
flex-direction: column;
gap: 24px;
}
.utm-tabs[data-v-d748c340] {
display: inline-flex;
gap: 4px;
padding: 4px;
background: #fff;
border-radius: 12px;
border: 1px solid #e2e8f3;
}
.utm-tab[data-v-d748c340] {
border: none;
border-radius: 8px;
padding: 8px 16px;
background: transparent;
font-weight: 600;
font-size: 14px;
color: #4f5871;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.utm-tab[data-v-d748c340]:hover {
background: #f5f7fb;
}
.utm-tab.active[data-v-d748c340] {
background: #111c4e;
color: #fff;
}
.utm-content[data-v-d748c340] {
display: flex;
flex-direction: column;
gap: 24px;
}
.card[data-v-d748c340] {
background: #fff;
border-radius: 20px;
padding: 24px;
border: 1px solid #e2e8f3;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}
.card-header[data-v-d748c340] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.card-title[data-v-d748c340] {
margin: 0 0 16px;
font-size: 18px;
font-weight: 700;
}
.card-header .card-title[data-v-d748c340] {
margin: 0;
}
.generator-form[data-v-d748c340] {
display: flex;
flex-direction: column;
gap: 16px;
}
.form-row[data-v-d748c340] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 640px) {
.form-row[data-v-d748c340] {
grid-template-columns: 1fr;
}
}
.required[data-v-d748c340] {
color: #f25a67;
}
.generated-url[data-v-d748c340] {
margin-top: 8px;
padding-top: 16px;
border-top: 1px solid #e2e8f3;
}
.url-output[data-v-d748c340] {
display: flex;
gap: 8px;
}
.url-output input[data-v-d748c340] {
flex: 1;
font-family: monospace;
font-size: 13px;
}
.save-campaign[data-v-d748c340] {
margin-top: 8px;
padding-top: 16px;
border-top: 1px solid #e2e8f3;
}
.save-row[data-v-d748c340] {
display: flex;
gap: 8px;
}
.save-row input[data-v-d748c340] {
flex: 1;
}
.campaigns-list[data-v-d748c340] {
display: flex;
flex-direction: column;
gap: 8px;
}
.campaign-item[data-v-d748c340] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 12px 16px;
background: #f8faff;
border-radius: 12px;
border: 1px solid #e2e8f3;
transition: background 0.15s ease, border-color 0.15s ease;
}
.campaign-item.clickable[data-v-d748c340] {
cursor: pointer;
}
.campaign-item.clickable[data-v-d748c340]:hover {
background: #eef1ff;
border-color: #c5d0ff;
}
.campaign-info[data-v-d748c340] {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.campaign-name[data-v-d748c340] {
font-weight: 600;
color: #1d2433;
}
.edit-input[data-v-d748c340] {
padding: 4px 8px;
border: 1px solid #3d5afe;
border-radius: 6px;
font-size: 14px;
}
.campaign-keys[data-v-d748c340] {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.key-badge[data-v-d748c340] {
display: inline-block;
padding: 2px 8px;
background: #e8ecff;
color: #3d5afe;
border-radius: 4px;
font-size: 12px;
font-family: monospace;
}
.campaign-url[data-v-d748c340] {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 8px 12px;
background: #f1f5f9;
border-radius: 8px;
max-width: 100%;
}
.url-text[data-v-d748c340] {
font-size: 12px;
color: #475569;
word-break: break-all;
flex: 1;
min-width: 0;
}
.copy-btn[data-v-d748c340] {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e2e8f3;
background: #fff;
border-radius: 8px;
color: #5f6b85;
cursor: pointer;
transition: all 0.2s ease;
}
.copy-btn[data-v-d748c340]:hover {
background: #eef1ff;
border-color: #3d5afe;
color: #3d5afe;
}
.copy-btn.copied[data-v-d748c340] {
background: #e8f5e9;
border-color: #4caf50;
color: #2e7d32;
}
.copy-btn svg[data-v-d748c340] {
display: block;
}
.campaign-actions[data-v-d748c340] {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.loading[data-v-d748c340], .empty[data-v-d748c340] {
padding: 32px;
text-align: center;
color: #5f6b85;
}
/* Stats */
.stats-filters[data-v-d748c340] {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
/* Checkbox Filters */
.checkbox-filters[data-v-d748c340] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
.filter-group[data-v-d748c340] {
background: #f8faff;
border: 1px solid #e2e8f3;
border-radius: 12px;
overflow: hidden;
}
.filter-group-header[data-v-d748c340] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
background: #fff;
border-bottom: 1px solid #e2e8f3;
}
.filter-group-title[data-v-d748c340] {
font-weight: 600;
font-size: 13px;
color: #1d2433;
font-family: monospace;
}
.selected-count[data-v-d748c340] {
color: #3d5afe;
font-weight: 700;
margin-left: 4px;
}
.filter-group-content[data-v-d748c340] {
padding: 10px;
}
.filter-group-actions[data-v-d748c340] {
display: flex;
gap: 6px;
}
.mini-btn[data-v-d748c340] {
padding: 3px 8px;
border: 1px solid #d5ddf1;
background: #f8faff;
border-radius: 5px;
font-size: 11px;
color: #5f6b85;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mini-btn[data-v-d748c340]:hover {
background: #eef1ff;
border-color: #3d5afe;
color: #3d5afe;
}
.checkbox-list[data-v-d748c340] {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 200px;
overflow-y: auto;
padding-right: 6px;
}
.checkbox-list[data-v-d748c340]::-webkit-scrollbar {
width: 5px;
}
.checkbox-list[data-v-d748c340]::-webkit-scrollbar-track {
background: #e8ecf3;
border-radius: 3px;
}
.checkbox-list[data-v-d748c340]::-webkit-scrollbar-thumb {
background: #c0c8d8;
border-radius: 3px;
}
.checkbox-list[data-v-d748c340]::-webkit-scrollbar-thumb:hover {
background: #9aa3b3;
}
.checkbox-item[data-v-d748c340] {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 8px;
background: #fff;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s ease;
}
.checkbox-item[data-v-d748c340]:hover {
background: #eef1ff;
}
.checkbox-item input[type="checkbox"][data-v-d748c340] {
width: 15px;
height: 15px;
accent-color: #3d5afe;
cursor: pointer;
flex-shrink: 0;
}
.checkbox-label[data-v-d748c340] {
font-size: 12px;
color: #1d2433;
word-break: break-word;
line-height: 1.3;
}
.no-filters-hint[data-v-d748c340] {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: #e8f4fd;
border-radius: 10px;
font-size: 13px;
color: #1565c0;
}
.hint-icon[data-v-d748c340] {
font-size: 16px;
}
.filter-actions[data-v-d748c340] {
display: flex;
gap: 12px;
}
.stats-results[data-v-d748c340] {
padding-top: 24px;
border-top: 1px solid #e2e8f3;
}
.stats-results h3[data-v-d748c340] {
margin: 0 0 16px;
font-size: 16px;
color: #1d2433;
}
.funnel[data-v-d748c340] {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.funnel-item[data-v-d748c340] {
display: flex;
flex-direction: column;
align-items: center;
padding: 16px 20px;
background: #f5f7fb;
border-radius: 12px;
min-width: 100px;
}
.funnel-value[data-v-d748c340] {
font-size: 24px;
font-weight: 700;
color: #1d2433;
}
.funnel-label[data-v-d748c340] {
font-size: 12px;
color: #5f6b85;
text-align: center;
margin-top: 4px;
}
.funnel-percent[data-v-d748c340] {
font-size: 11px;
color: #3d5afe;
font-weight: 600;
margin-top: 4px;
}
.funnel-arrow[data-v-d748c340] {
color: #c0c8d8;
font-size: 20px;
}
.total-conversion[data-v-d748c340] {
padding: 16px;
background: #e8f5e9;
border-radius: 12px;
color: #2e7d32;
}
/* Modal */
.modal-overlay[data-v-d748c340] {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-dialog[data-v-d748c340] {
background: #fff;
border-radius: 20px;
padding: 24px;
max-width: 400px;
width: 90%;
}
.modal-dialog h3[data-v-d748c340] {
margin: 0 0 12px;
}
.modal-dialog p[data-v-d748c340] {
margin: 0 0 20px;
color: #5f6b85;
}
.modal-actions[data-v-d748c340] {
display: flex;
gap: 12px;
}
/* Transitions */
.fade-enter-active[data-v-d748c340],
.fade-leave-active[data-v-d748c340] {
transition: opacity 0.2s ease;
}
.fade-enter-from[data-v-d748c340],
.fade-leave-to[data-v-d748c340] {
opacity: 0;
}
.users-page[data-v-0944f6a4] {
padding: 24px;
background: #fff;
border-radius: 24px;
border: 1px solid #e2e8f3;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}
.users-header[data-v-0944f6a4] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.users-header h2[data-v-0944f6a4] {
margin: 0;
font-size: 20px;
font-weight: 700;
}
.users-header .btn[data-v-0944f6a4] {
display: inline-flex;
align-items: center;
gap: 8px;
}
.users-table-wrapper[data-v-0944f6a4] {
overflow-x: auto;
}
.users-table[data-v-0944f6a4] {
width: 100%;
border-collapse: collapse;
}
.users-table th[data-v-0944f6a4],
.users-table td[data-v-0944f6a4] {
padding: 14px 16px;
text-align: left;
border-bottom: 1px solid #e8edf5;
}
.users-table th[data-v-0944f6a4] {
font-weight: 600;
font-size: 13px;
color: #5f6b85;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.users-table tbody tr[data-v-0944f6a4]:hover {
background: #f8faff;
}
.users-table tbody tr.current-user[data-v-0944f6a4] {
background: #f0f4ff;
}
.user-name[data-v-0944f6a4] {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
}
.you-badge[data-v-0944f6a4] {
display: inline-block;
padding: 2px 8px;
background: #e8f0ff;
color: #3d5afe;
font-size: 11px;
font-weight: 600;
border-radius: 999px;
}
.role-badge[data-v-0944f6a4] {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
}
.role-badge.admin[data-v-0944f6a4] {
background: #fff0f0;
color: #c04741;
}
.role-badge.manager[data-v-0944f6a4] {
background: #e8fff0;
color: #167d52;
}
.actions[data-v-0944f6a4] {
display: flex;
gap: 8px;
}
.no-actions[data-v-0944f6a4] {
color: #9ca3af;
}
.btn.small[data-v-0944f6a4] {
padding: 6px 12px;
font-size: 13px;
}
.btn.danger[data-v-0944f6a4] {
color: #c04741;
border-color: #ffd9d5;
}
.btn.danger[data-v-0944f6a4]:hover:not(:disabled) {
background: #fff4f2;
}
.btn.primary.danger[data-v-0944f6a4] {
background: #c04741;
border-color: #c04741;
color: #fff;
box-shadow: 0 15px 30px rgba(192, 71, 65, 0.35);
}
.btn.primary.danger[data-v-0944f6a4]:hover:not(:disabled) {
background: #a03935;
border-color: #a03935;
}
/* Modal Styles - using :global() since Teleport moves content to body */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 24px;
}
.modal {
background: #fff;
border-radius: 24px;
padding: 32px;
max-width: 480px;
width: 100%;
box-shadow: 0 35px 80px rgba(28, 44, 91, 0.25);
}
.modal h3 {
margin: 0 0 24px;
font-size: 22px;
font-weight: 700;
}
.modal form {
display: flex;
flex-direction: column;
gap: 18px;
}
.modal .form-field {
display: grid;
gap: 8px;
font-size: 14px;
color: #4c5672;
}
.modal .form-field input,.modal .form-field select {
width: 100%;
border-radius: 14px;
border: 1px solid #d7dfee;
background: #f8faff;
color: #1f2433;
padding: 10px 14px;
font-size: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.modal .form-field input:focus,.modal .form-field select:focus {
border-color: #8aa2ff;
box-shadow: 0 0 0 2px rgba(138, 162, 255, 0.2);
outline: none;
background: #fff;
}
.modal .role-description {
padding: 14px 18px;
background: #f8faff;
border-radius: 14px;
border: 1px solid #e8edf5;
}
.modal .role-description p {
margin: 0;
font-size: 13px;
color: #5f6b85;
line-height: 1.5;
}
.modal .modal-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 8px;
}
.modal .btn {
border: 1px solid #d5ddf1;
border-radius: 14px;
padding: 10px 18px;
background: #fff;
color: #1d2433;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.modal .btn:hover:not(:disabled) {
background: #f2f4ff;
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}
.modal .btn.ghost {
background: #f5f6ff;
border-color: #d9e0ff;
color: #1e2e66;
}
.modal .btn.primary {
background: #3d5afe;
border-color: #3d5afe;
color: #fff;
box-shadow: 0 15px 30px rgba(61, 90, 254, 0.35);
}
.modal .btn.primary:hover:not(:disabled) {
background: #3048d0;
border-color: #3048d0;
color: #fff;
box-shadow: 0 12px 24px rgba(48, 72, 208, 0.4);
}
.modal .btn:disabled {
opacity: 0.6;
cursor: not-allowed;
box-shadow: none;
}
.modal .btn.primary.danger {
background: #c04741;
border-color: #c04741;
color: #fff;
box-shadow: 0 15px 30px rgba(192, 71, 65, 0.35);
}
.modal .btn.primary.danger:hover:not(:disabled) {
background: #a03935;
border-color: #a03935;
}
.modal-confirm p {
margin: 0 0 12px;
color: #5f6b85;
line-height: 1.5;
}
.modal-confirm .warning {
color: #c04741;
font-size: 13px;
}
.modal .status-error {
padding: 14px 18px;
border-radius: 18px;
border: 1px solid #ffd9d5;
background: #fff4f2;
color: #c04741;
}
/* Fade transition */
.fade-enter-active,.fade-leave-active {
transition: opacity 0.2s ease;
}
.fade-enter-from,.fade-leave-to {
opacity: 0;
}
@media (max-width: 640px) {
.users-page[data-v-0944f6a4] {
padding: 16px;
}
.users-header[data-v-0944f6a4] {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.users-table th[data-v-0944f6a4],
.users-table td[data-v-0944f6a4] {
padding: 10px 12px;
}
.actions[data-v-0944f6a4] {
flex-direction: column;
}
}
[data-v-0b495078]::global(body) {
background: #f5f7fb;
color: #1d2433;
}
.admin-shell[data-v-0b495078] {
min-height: 100vh;
display: flex;
flex-direction: column;
padding: 32px 48px 48px;
}
.status-stack {
display: flex;
flex-direction: column;
gap: 10px;
}
.status {
padding: 14px 18px;
border-radius: 18px;
border: 1px solid #e2e8f3;
background: #fff;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
color: #1f2433;
}
.status-error {
border-color: #ffd9d5;
background: #fff4f2;
color: #c04741;
}
.status-success {
border-color: #c8f0da;
background: #f2fff8;
color: #167d52;
}
.admin-login-card[data-v-0b495078] {
max-width: 480px;
margin: 60px auto;
padding: 48px;
border-radius: 32px;
background: #fff;
border: 1px solid #e2e8f3;
box-shadow: 0 35px 80px rgba(28, 44, 91, 0.12);
display: flex;
flex-direction: column;
gap: 24px;
}
.login-intro h1[data-v-0b495078] {
margin: 0 0 12px;
font-size: 32px;
}
.login-intro p[data-v-0b495078] {
margin: 0;
color: #5f6b85;
line-height: 1.5;
}
.login-form[data-v-0b495078] {
display: flex;
flex-direction: column;
gap: 18px;
}
.login-error[data-v-0b495078] {
margin: 0;
}
.login-submit[data-v-0b495078] {
width: 100%;
margin-top: 8px;
}
.admin-shell-content[data-v-0b495078] {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 16px;
}
.admin-shell-header[data-v-0b495078] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
flex-wrap: wrap;
}
.header-content h1[data-v-0b495078] {
margin: 0;
font-size: 32px;
font-weight: 700;
}
.header-description[data-v-0b495078] {
margin: 8px 0 0;
max-width: 560px;
color: #5f6b85;
font-size: 15px;
line-height: 1.5;
}
.header-actions[data-v-0b495078] {
display: flex;
align-items: center;
gap: 16px;
}
.header-actions .btn[data-v-0b495078] {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.link-btn {
background: none;
border: none;
color: #f25a67;
cursor: pointer;
font-size: 13px;
font-weight: 600;
text-decoration: underline;
padding: 0;
}
.btn {
border: 1px solid #d5ddf1;
border-radius: 14px;
padding: 10px 18px;
background: #fff;
color: #1d2433;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.btn:hover:not(:disabled) {
background: #f2f4ff;
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}
.btn.ghost {
background: #f5f6ff;
border-color: #d9e0ff;
color: #1e2e66;
}
.btn.primary {
background: #3d5afe;
border-color: #3d5afe;
color: #fff;
box-shadow: 0 15px 30px rgba(61, 90, 254, 0.35);
}
.btn.primary:hover:not(:disabled) {
background: #3048d0;
border-color: #3048d0;
color: #fff;
box-shadow: 0 12px 24px rgba(48, 72, 208, 0.4);
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
box-shadow: none;
}
.admin-shell-tabs-row[data-v-0b495078] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.admin-shell-tabs[data-v-0b495078] {
display: inline-flex;
gap: 8px;
padding: 6px;
background: #fff;
border-radius: 999px;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
border: 1px solid #e2e8f3;
}
.shell-tab[data-v-0b495078] {
border: none;
border-radius: 999px;
padding: 10px 20px;
background: transparent;
font-weight: 600;
color: #4f5871;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.shell-tab.active[data-v-0b495078] {
background: #111c4e;
color: #fff;
box-shadow: 0 12px 24px rgba(17, 28, 78, 0.35);
}
.user-info[data-v-0b495078] {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
background: #fff;
border-radius: 999px;
border: 1px solid #e2e8f3;
font-size: 14px;
}
.user-role[data-v-0b495078] {
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
}
.user-role.admin[data-v-0b495078] {
background: #fff0f0;
color: #c04741;
}
.user-role.manager[data-v-0b495078] {
background: #e8fff0;
color: #167d52;
}
.user-name[data-v-0b495078] {
font-weight: 600;
color: #1d2433;
}
.form-field {
display: grid;
gap: 8px;
font-size: 14px;
color: #4c5672;
}
.form-field input,.form-field textarea,.form-field select {
width: 100%;
border-radius: 14px;
border: 1px solid #d7dfee;
background: #f8faff;
color: #1f2433;
padding: 10px 14px;
font-size: 14px;
resize: vertical;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus {
border-color: #8aa2ff;
box-shadow: 0 0 0 2px rgba(138, 162, 255, 0.2);
outline: none;
background: #fff;
}
.admin-shell-body[data-v-0b495078] {
flex: 1;
min-height: 0;
}
@media (max-width: 768px) {
.admin-shell[data-v-0b495078] {
padding: 24px 20px 32px;
}
.admin-shell-tabs[data-v-0b495078] {
flex-wrap: wrap;
}
}
.login-view[data-v-fa26d6ca] {
background: transparent;
position: relative;
padding: 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-height: calc(100vh - var(--app-header-height, 72px) - 40px);
}
.login-container[data-v-fa26d6ca] {
width: 100%;
max-width: 597px;
padding: 0 20px;
box-sizing: border-box;
position: relative;
z-index: 1;
}
.card[data-v-fa26d6ca] {
background: #fff;
border-radius: 28px;
padding: 28px;
display: flex;
flex-direction: column;
gap: 42px;
}
.card--verification[data-v-fa26d6ca] {
gap: 28px;
}
.title[data-v-fa26d6ca] {
margin: 0;
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
letter-spacing: -0.48px;
}
.method-selector[data-v-fa26d6ca] {
border: 1px solid rgba(30, 30, 30, 0.25);
border-radius: 28px;
padding: 16px;
overflow: hidden;
}
.method-selector__inner[data-v-fa26d6ca] {
display: flex;
gap: 16px;
}
.method-btn[data-v-fa26d6ca] {
flex: 1;
padding: 16px;
border-radius: 16px;
border: none;
background: transparent;
font-size: 18px;
font-weight: 500;
color: #1e1e1e;
cursor: pointer;
text-align: center;
transition: background-color 0.2s ease, color 0.2s ease;
letter-spacing: -0.18px;
}
.method-btn--active[data-v-fa26d6ca] {
background: #1e1e1e;
color: #fff;
}
.form[data-v-fa26d6ca] {
display: flex;
flex-direction: column;
gap: 12px;
}
.field[data-v-fa26d6ca] {
display: block;
background: rgba(235, 235, 235, 0.5);
padding: 28px;
border-radius: 16px;
}
.input[data-v-fa26d6ca] {
width: 100%;
padding: 0;
box-sizing: border-box;
border: 0;
background: transparent;
outline: none;
font-size: 18px;
font-weight: 500;
color: #1e1e1e;
letter-spacing: -0.18px;
}
.input[data-v-fa26d6ca]::placeholder {
color: rgba(30, 30, 30, 0.4);
}
.error-text[data-v-fa26d6ca] {
color: #ff3b30;
font-size: 14px;
margin: 0;
text-align: center;
}
/* Verification Step */
.back-btn[data-v-fa26d6ca] {
display: inline-flex;
align-items: center;
gap: 12px;
background: none;
border: 0;
padding: 0;
cursor: pointer;
align-self: flex-start;
}
.back-btn__icon[data-v-fa26d6ca] {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(235, 235, 235, 0.5);
display: flex;
align-items: center;
justify-content: center;
}
.back-btn__icon svg[data-v-fa26d6ca] {
width: 8px;
height: auto;
}
.back-btn__text[data-v-fa26d6ca] {
color: #1e1e1e;
font-size: 16px;
font-weight: 500;
}
.verify-title[data-v-fa26d6ca] {
margin: 0;
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
line-height: 1.2;
letter-spacing: -0.48px;
}
.verify-form[data-v-fa26d6ca] {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Make UiIconBlockButton full-width */
.form[data-v-fa26d6ca] .ui-icon-block-btn,
.verify-form[data-v-fa26d6ca] .ui-icon-block-btn {
width: 100%;
}
/* Mobile styles */
@media (max-aspect-ratio: 3/4) {
.login-view[data-v-fa26d6ca] {
align-items: flex-start;
padding-top: 40px;
}
.card[data-v-fa26d6ca] {
border-radius: 20px;
padding: 20px;
gap: 28px;
}
.card--verification[data-v-fa26d6ca] {
gap: 20px;
}
.title[data-v-fa26d6ca] {
font-size: 20px;
}
.method-selector[data-v-fa26d6ca] {
padding: 12px;
border-radius: 20px;
}
.method-btn[data-v-fa26d6ca] {
padding: 12px;
font-size: 16px;
border-radius: 12px;
}
.field[data-v-fa26d6ca] {
padding: 20px;
border-radius: 12px;
}
.input[data-v-fa26d6ca] {
font-size: 16px;
}
.verify-title[data-v-fa26d6ca] {
font-size: 18px;
}
.form[data-v-fa26d6ca] .ui-icon-block-btn,
.verify-form[data-v-fa26d6ca] .ui-icon-block-btn {
width: 100%;
padding: 16px;
font-size: 18px;
font-weight: 700;
}
}
.not-found[data-v-73d355c0] {
background: transparent;
position: relative;
padding: 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
height: calc(100vh - var(--app-header-height, 72px));
height: calc(100dvh - var(--app-header-height, 72px));
overflow: hidden;
}
.not-found__content[data-v-73d355c0] {
width: 100%;
max-width: 600px;
padding: 20px;
box-sizing: border-box;
position: relative;
z-index: 1;
}
/* Floating decorative elements */
.floater[data-v-73d355c0] {
position: absolute;
border-radius: 50%;
pointer-events: none;
opacity: 0.15;
background: var(--color-accent);
filter: blur(60px);
}
.floater--1[data-v-73d355c0] {
width: 300px;
height: 300px;
top: -100px;
left: -150px;
animation: float-1-73d355c0 8s ease-in-out infinite;
}
.floater--2[data-v-73d355c0] {
width: 200px;
height: 200px;
bottom: -50px;
right: -100px;
animation: float-2-73d355c0 10s ease-in-out infinite;
}
.floater--3[data-v-73d355c0] {
width: 150px;
height: 150px;
top: 50%;
right: -50px;
animation: float-3-73d355c0 6s ease-in-out infinite;
}
@keyframes float-1-73d355c0 {
0%, 100% { transform: translate(0, 0) scale(1);
}
50% { transform: translate(30px, 20px) scale(1.1);
}
}
@keyframes float-2-73d355c0 {
0%, 100% { transform: translate(0, 0) scale(1);
}
50% { transform: translate(-20px, -30px) scale(1.05);
}
}
@keyframes float-3-73d355c0 {
0%, 100% { transform: translate(0, 0);
}
50% { transform: translate(-15px, 15px);
}
}
/* Card */
.card[data-v-73d355c0] {
background: #fff;
border-radius: 32px;
padding: 48px 40px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.1);
animation: card-appear-73d355c0 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
transform: translateY(20px);
opacity: 0;
}
@keyframes card-appear-73d355c0 {
to {
transform: translateY(0);
opacity: 1;
}
}
/* Error code 404 */
.error-code[data-v-73d355c0] {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin-bottom: 16px;
}
.digit[data-v-73d355c0] {
font-size: 96px;
font-weight: 800;
line-height: 1;
background: linear-gradient(135deg, var(--color-primary) 0%, #6366f1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.04em;
animation: digit-bounce-73d355c0 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
transform: scale(0.5) translateY(20px);
opacity: 0;
}
.digit--first[data-v-73d355c0] {
animation-delay: 0.2s;
}
.digit--zero[data-v-73d355c0] {
background: linear-gradient(135deg, var(--color-accent) 0%, #a8e063 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation-delay: 0.35s;
}
.digit--last[data-v-73d355c0] {
animation-delay: 0.5s;
}
@keyframes digit-bounce-73d355c0 {
0% { transform: scale(0.5) translateY(20px); opacity: 0;
}
60% { transform: scale(1.08) translateY(-5px); opacity: 1;
}
100% { transform: scale(1) translateY(0); opacity: 1;
}
}
/* Mascot */
.mascot-wrapper[data-v-73d355c0] {
width: 180px;
height: 150px;
margin-bottom: 8px;
animation: mascot-appear-73d355c0 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
transform: scale(0.5) translateY(30px);
opacity: 0;
}
@keyframes mascot-appear-73d355c0 {
0% { transform: scale(0.5) translateY(30px); opacity: 0;
}
60% { transform: scale(1.05) translateY(-5px); opacity: 1;
}
100% { transform: scale(1) translateY(0); opacity: 1;
}
}
.mascot-img[data-v-73d355c0] {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Text */
.title[data-v-73d355c0] {
margin: 0 0 12px;
font-size: 28px;
font-weight: 700;
color: #1e1e1e;
line-height: 1.2;
letter-spacing: -0.02em;
}
.subtitle[data-v-73d355c0] {
margin: 0 0 32px;
font-size: 16px;
color: rgba(30, 30, 30, 0.6);
line-height: 1.5;
}
/* Button */
.home-btn[data-v-73d355c0] {
min-width: 220px;
}
/* Mobile responsive */
@media (max-aspect-ratio: 3/4) {
.card[data-v-73d355c0] {
border-radius: 24px;
padding: 32px 24px;
}
.digit[data-v-73d355c0] {
font-size: 64px;
}
.mascot-wrapper[data-v-73d355c0] {
width: 140px;
height: 120px;
}
.title[data-v-73d355c0] {
font-size: 22px;
}
.subtitle[data-v-73d355c0] {
font-size: 14px;
margin-bottom: 24px;
}
.floater--1[data-v-73d355c0] { width: 200px; height: 200px;
}
.floater--2[data-v-73d355c0] { width: 150px; height: 150px;
}
.floater--3[data-v-73d355c0] { width: 100px; height: 100px;
}
}
@media (max-aspect-ratio: 2/3) {
.card[data-v-73d355c0] {
padding: 24px 20px;
}
.digit[data-v-73d355c0] {
font-size: 56px;
}
.mascot-wrapper[data-v-73d355c0] {
width: 120px;
height: 100px;
}
.title[data-v-73d355c0] {
font-size: 20px;
}
.subtitle[data-v-73d355c0] {
font-size: 13px;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.card[data-v-73d355c0],
.digit[data-v-73d355c0],
.mascot-wrapper[data-v-73d355c0],
.floater[data-v-73d355c0] {
animation: none;
transform: none;
opacity: 1;
}
}
.header-fixed-wrap[data-v-bf8eaff5] {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
.header-fixed-wrap[data-v-bf8eaff5]::before {
content: '';
position: absolute;
inset: 0;
background-color: var(--color-bg, #EBEBEB);
mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
transition: background-color 0.3s ease;
z-index: -1;
}
.header-fixed-wrap.is-relative[data-v-bf8eaff5] { position: relative;
}
.header-fixed-wrap.is-relative[data-v-bf8eaff5]::before { display: none;
}
/* Match global scaled layout only when JS has marked landscape (no aspect-ratio mismatch) */
.header-fixed-wrap.is-landscape[data-v-bf8eaff5] {
left: 50%;
right: auto;
width: var(--app-base-width, 100%);
transform: translateX(-50%) scale(calc(var(--app-scale, 1) *1.001));
transform-origin: top center;
}
.app-header[data-v-bf8eaff5] {
height: var(--app-header-height, 72px);
padding: 16px;
border-radius: 20px;
border: 1px solid #FFF;
background: rgba(255, 255, 255, 1);
/* Make header slightly wider than container */
/* width: calc(100% + 2px);
margin-left: -2px;
margin-right: -2px; */
overflow: visible;
}
.header-inner[data-v-bf8eaff5] {
position: relative;
display: flex;
align-items: center;
gap: 16px;
width: 100%;
}
.left[data-v-bf8eaff5] { flex: 3 1 0; display: flex; align-items: center;
}
.right[data-v-bf8eaff5] { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}
/* Login button - text left of icon */
.right[data-v-bf8eaff5] .login-btn {
flex-direction: row-reverse;
}
.right[data-v-bf8eaff5] .login-btn .label {
color: #1E1E1E;
font-weight: var(--font-weight-medium);
font-size: 20px;
}
.brand[data-v-bf8eaff5] { display: inline-flex; align-items: center; cursor: pointer;
}
.logo[data-v-bf8eaff5] { height: 40px; width: auto;
}
.nav[data-v-bf8eaff5] { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 100%; overflow: visible;
}
.nav-list[data-v-bf8eaff5] { position: relative; display: flex; align-items: center; gap: 33px; padding: 0; margin: 0; list-style: none;
}
/* Обёртка индикатора - не занимает места в flex */
.nav-indicator-wrapper[data-v-bf8eaff5] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* Анимированный индикатор навигации */
.nav-indicator[data-v-bf8eaff5] {
position: absolute;
top: 0;
display: block;
background: rgba(74, 72, 233, 0.1);
border-radius: 12px;
pointer-events: none;
opacity: 0;
will-change: left, width, opacity;
transition:
left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.25s ease;
box-shadow:
inset 0 0 0 1px rgba(74, 72, 233, 0.12);
}
.nav-indicator.is-visible[data-v-bf8eaff5] {
opacity: 1;
}
/* Отключаем transition при первом появлении индикатора */
.nav-indicator.no-transition[data-v-bf8eaff5] {
transition: none;
}
.nav-link[data-v-bf8eaff5] {
display: block;
color: #1E1E1E;
font-weight: var(--font-weight-medium);
font-size: var(--font-size-24);
white-space: nowrap;
padding: 8px 14px;
border-radius: 12px;
transition: color 0.25s ease;
}
.nav-link[data-v-bf8eaff5]:hover {
color: var(--color-primary);
}
.nav-link.router-link-active[data-v-bf8eaff5] {
color: var(--color-primary);
}
/* Mobile menu button - hidden by default, matches profile button size */
.mobile-menu-btn[data-v-bf8eaff5] {
display: none;
width: 40px;
height: 40px;
justify-content: center;
align-items: center;
border-radius: 8px;
background: #1E1E1E;
border: none;
cursor: pointer;
transition: transform 0.2s ease, background-color 0.2s ease;
}
.mobile-menu-btn[data-v-bf8eaff5]:hover {
background: #2a2a2a;
}
.mobile-menu-btn[data-v-bf8eaff5]:active {
transform: scale(0.95);
}
.mobile-menu-btn svg[data-v-bf8eaff5] {
flex-shrink: 0;
}
/* Mobile menu backdrop */
.mobile-menu-backdrop[data-v-bf8eaff5] {
position: fixed;
inset: 0;
z-index: 9998;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
/* Block scroll through CSS */
touch-action: none;
overscroll-behavior: contain;
-webkit-overflow-scrolling: auto;
}
/* Mobile menu panel - slides from right */
.mobile-menu-panel[data-v-bf8eaff5] {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 9999;
width: 300px;
max-width: 85vw;
background: #FFFFFF;
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
border-radius: 24px 0 0 24px;
/* Block scroll */
touch-action: pan-y;
overscroll-behavior: contain;
}
.mobile-menu-header[data-v-bf8eaff5] {
display: flex;
justify-content: flex-end;
padding: 20px;
}
.mobile-menu-close[data-v-bf8eaff5] {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(30, 30, 30, 0.08);
border: none;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.mobile-menu-close[data-v-bf8eaff5]:hover {
background: rgba(30, 30, 30, 0.12);
}
.mobile-menu-close[data-v-bf8eaff5]:active {
transform: scale(0.95);
}
.mobile-nav[data-v-bf8eaff5] {
flex: 1;
padding: 0 24px;
}
.mobile-nav-list[data-v-bf8eaff5] {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0;
margin: 0;
list-style: none;
}
.mobile-nav-list li[data-v-bf8eaff5] {
opacity: 0;
animation: slideIn-bf8eaff5 0.35s ease forwards;
animation-delay: calc(var(--i, 0) * 0.06s + 0.1s);
}
.mobile-nav-link[data-v-bf8eaff5] {
display: block;
padding: 14px 16px;
color: #1E1E1E;
font-weight: var(--font-weight-medium);
font-size: 20px;
text-decoration: none;
border-radius: 12px;
transition: background-color 0.2s ease, color 0.2s ease;
}
.mobile-nav-link[data-v-bf8eaff5]:hover {
background: rgba(74, 72, 233, 0.08);
color: var(--color-primary);
}
.mobile-nav-link.router-link-active[data-v-bf8eaff5] {
background: rgba(74, 72, 233, 0.1);
color: var(--color-primary);
}
.mobile-menu-footer[data-v-bf8eaff5] {
padding: 24px;
opacity: 0;
animation: slideIn-bf8eaff5 0.35s ease forwards;
animation-delay: 0.36s;
}
.mobile-menu-footer[data-v-bf8eaff5] .ui-icon-block-btn {
width: 100%;
}
/* Mobile menu transitions - backdrop */
.mobile-menu-backdrop-enter-active[data-v-bf8eaff5],
.mobile-menu-backdrop-leave-active[data-v-bf8eaff5] {
transition: opacity 0.3s ease;
}
.mobile-menu-backdrop-enter-from[data-v-bf8eaff5],
.mobile-menu-backdrop-leave-to[data-v-bf8eaff5] {
opacity: 0;
}
/* Mobile menu transitions - panel */
.mobile-menu-panel-enter-active[data-v-bf8eaff5] {
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-menu-panel-leave-active[data-v-bf8eaff5] {
transition: transform 0.25s ease-in;
}
.mobile-menu-panel-enter-from[data-v-bf8eaff5],
.mobile-menu-panel-leave-to[data-v-bf8eaff5] {
transform: translateX(100%);
}
.mobile-menu-panel-enter-from .mobile-nav-list li[data-v-bf8eaff5],
.mobile-menu-panel-enter-from .mobile-menu-footer[data-v-bf8eaff5] {
animation: none;
opacity: 0;
}
@keyframes slideIn-bf8eaff5 {
from {
opacity: 0;
transform: translateX(16px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Show mobile menu button when aspect ratio is vertical (< 1/1) */
@media (max-aspect-ratio: 1/1) {
.nav[data-v-bf8eaff5] { display: none;
}
.mobile-menu-btn[data-v-bf8eaff5] { display: flex;
}
/* Slightly smaller login button */
.right[data-v-bf8eaff5] .login-btn .label {
font-size: 18px;
}
}
@media (max-aspect-ratio: 3/4) {
/* Treat any portrait (<1) same as 3:4 by lowering breakpoint */
.nav-link[data-v-bf8eaff5] { font-size: var(--font-size-20); padding: 6px 10px;
}
.nav-list[data-v-bf8eaff5] { gap: 12px;
}
.logo[data-v-bf8eaff5] { height: 27px;
}
.app-header[data-v-bf8eaff5] { padding: 12px;
}
/* Smaller login button text */
.right[data-v-bf8eaff5] .login-btn .label {
font-size: 16px;
}
}
@media (max-aspect-ratio: 2/3) {
.app-header[data-v-bf8eaff5] { height: var(--app-header-height, 59px); padding: 0 16px;
}
.header-inner[data-v-bf8eaff5] { height: 100%;
}
.logo[data-v-bf8eaff5] { height: 27px;
}
.right[data-v-bf8eaff5] .ui-icon-block-btn.is-square { width: 32px; height: 32px; padding: 0;
}
/* Scale mobile menu button to match profile button */
.mobile-menu-btn[data-v-bf8eaff5] { width: 32px; height: 32px; border-radius: 6px;
}
.mobile-menu-btn svg[data-v-bf8eaff5] { width: 10px; height: 8px;
}
.nav[data-v-bf8eaff5] { display: none;
}
/* Hide login text on mobile, show only icon */
.right[data-v-bf8eaff5] .login-btn {
width: 32px;
height: 32px;
padding: 0;
}
.right[data-v-bf8eaff5] .login-btn .label {
display: none;
}
.right[data-v-bf8eaff5] .login-btn .icon-slot {
width: 20px;
height: 20px;
}
}
.footer-padding[data-v-7a65542c] { padding-top: 64px; padding-bottom: 40px;
}
/* Wrapper */
.app-footer[data-v-7a65542c] {
border: 1px solid #FFF;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border-radius: 24px;
padding: 20px;
}
.footer-inner[data-v-7a65542c] { display: grid; gap: 24px;
}
/* Top brand */
.brand[data-v-7a65542c] { height: 40px; display: flex; align-items: center;
}
.logo[data-v-7a65542c] { height: 40px; width: auto;
}
/* Middle area */
.middle[data-v-7a65542c] { display: grid; grid-template-columns: max-content 1fr; gap: 64px; align-items: start;
}
.socials-area[data-v-7a65542c] { display: grid; gap: 20px; width: max-content; justify-self: start;
}
.socials[data-v-7a65542c] {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.soc-card[data-v-7a65542c] {
background: #fff;
width: 116px;
height: 116px;
border-radius: 16px;
display: grid;
place-items: center;
padding: 25.2px; /* Figma: ~25.198px */
box-sizing: border-box;
}
.soc-link[data-v-7a65542c] { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit;
}
.soc-icon[data-v-7a65542c] { width: 100%; height: 100%; display: block; object-fit: contain;
}
.legal-list[data-v-7a65542c] { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; font-size: 20px; font-weight: 500; line-height: 1;
}
.legal-link[data-v-7a65542c] { color: #1e1e1e; font-weight: 500; font-size: 20px; line-height: 1; display: block;
}
/* Text styles */
.muted[data-v-7a65542c] { color: #8e8e8e; font-weight: 500; font-size: 20px; line-height: 1; margin: 0;
}
.disclaimer[data-v-7a65542c] { max-width: 100%;
}
.fineprint[data-v-7a65542c] { display: grid; gap: 8px; margin-top: 23px;
} /* 20 + 23 = 43px separation */
.m-0[data-v-7a65542c] { margin: 0;
}
/* Normalize all text boxes inside footer */
.app-footer[data-v-7a65542c] :where(p, a) { line-height: 1; display: block;
}
/* Bottom */
.bottom[data-v-7a65542c] { display: grid;
}
.bottom-block[data-v-7a65542c] { display: grid; gap: 20px;
}
/* Responsive (portrait/square only, by aspect ratio) — use this profile for all portrait (<1) */
@media (max-aspect-ratio: 1/1) {
.middle[data-v-7a65542c] { grid-template-columns: 1fr; gap: 24px;
}
.logo[data-v-7a65542c] { height: 36px;
}
/* Make socials area fluid and grid-based to avoid overflow */
.socials-area[data-v-7a65542c] { width: 100%;
}
.socials[data-v-7a65542c] { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px;
}
.soc-card[data-v-7a65542c] { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 14px; padding: 12px;
}
.legal-link[data-v-7a65542c] { font-size: 18px;
}
.muted[data-v-7a65542c] { font-size: 18px;
}
/* Improve wrapping to prevent layout shift */
.bottom-block[data-v-7a65542c] :where(p, a), .disclaimer[data-v-7a65542c] { line-height: 1.25; word-break: break-word; hyphens: auto;
}
.footer-padding[data-v-7a65542c] { padding-top: 56px; padding-bottom: 24px;
}
}
/* Large tablet / small laptop (portrait/square only) */
@media (max-aspect-ratio: 1/1) {
/* Allow socials to wrap within container bounds */
.socials-area[data-v-7a65542c] { width: 100%;
}
.socials[data-v-7a65542c] { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px;
}
.soc-card[data-v-7a65542c] { width: 100%; height: auto; aspect-ratio: 1 / 1; padding: 14px;
}
}
@media (max-aspect-ratio: 2/3) {
.app-footer[data-v-7a65542c] { border-radius: 20px; padding: 16px;
}
.footer-inner[data-v-7a65542c] { gap: 20px;
}
.brand[data-v-7a65542c] { justify-content: center;
}
.logo[data-v-7a65542c] { height: 32px;
}
.middle[data-v-7a65542c] { gap: 16px;
}
.socials-area[data-v-7a65542c] { width: 100%; gap: 35px;
}
.socials[data-v-7a65542c] { display: grid; grid-template-columns: repeat(4, 75px); justify-content: space-between; gap: unset; row-gap: 4px;
}
.soc-card[data-v-7a65542c] { width: 75px; height: 75px; border-radius: 12px; padding: 4px;
}
.legal-list[data-v-7a65542c] { gap: 12px;
}
.legal-link[data-v-7a65542c] { font-size: 14px; white-space: normal; letter-spacing: -0.01em;
}
.muted[data-v-7a65542c] { font-size: 14px;
}
.bottom-block[data-v-7a65542c] { gap: 12px;
}
.bottom-block[data-v-7a65542c] :where(p, a), .disclaimer[data-v-7a65542c] { line-height: 1.35; word-break: break-word; hyphens: auto;
}
.footer-padding[data-v-7a65542c] { padding-top: 32px; padding-bottom: 8px;
}
}
.chat-widget-container[data-v-36f2c56f] {
/* Контейнер для React-виджета, стили виджета управляются им самим */
}
main.container.with-fixed-header[data-v-376261d1] { padding-top: calc(var(--app-header-offset-top) + var(--app-header-height));
}
/* Global scaling shell styles */
.app-scale-shell[data-v-376261d1] { position: relative; width: 100%; display: flex; justify-content: center;
}
.app-scale-inner[data-v-376261d1] { transform-origin: top center; width: 100%;
}
.app-scale-inner.scaled[data-v-376261d1] { position: absolute; top: 0; left: 50%; margin: 0;
}
/* Global loader overlay */
.app-loader[data-v-376261d1] {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #4A48E9 0%, #6366f1 50%, #4A48E9 100%);
background-size: 200% 200%;
animation: gradient-shift-376261d1 3s ease infinite;
}
@keyframes gradient-shift-376261d1 {
0%, 100% { background-position: 0% 50%;
}
50% { background-position: 100% 50%;
}
}
.loader-content[data-v-376261d1] {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.loader-spinner[data-v-376261d1] {
position: relative;
width: 64px;
height: 64px;
}
.spinner-ring[data-v-376261d1] {
position: absolute;
inset: 0;
border: 3px solid transparent;
border-radius: 50%;
}
.spinner-ring[data-v-376261d1]:nth-child(1) {
border-top-color: rgba(255, 255, 255, 0.9);
animation: spin-376261d1 1s linear infinite;
}
.spinner-ring[data-v-376261d1]:nth-child(2) {
inset: 6px;
border-right-color: rgba(255, 255, 255, 0.6);
animation: spin-376261d1 1.5s linear infinite reverse;
}
.spinner-ring[data-v-376261d1]:nth-child(3) {
inset: 12px;
border-bottom-color: rgba(255, 255, 255, 0.3);
animation: spin-376261d1 2s linear infinite;
}
@keyframes spin-376261d1 {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}
.loader-text[data-v-376261d1] {
margin: 0;
font-size: 16px;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
letter-spacing: 0.5px;
}
/* Loader fade transition */
.loader-fade-enter-active[data-v-376261d1] {
transition: opacity 0.3s ease;
}
.loader-fade-leave-active[data-v-376261d1] {
transition: opacity 0.5s ease;
pointer-events: none;
}
.loader-fade-enter-from[data-v-376261d1],
.loader-fade-leave-to[data-v-376261d1] {
opacity: 0;
pointer-events: none;
}
/* ========== Page Transitions ========== */
/* Slide transition - плавное перелистывание */
.page-slide-enter-active[data-v-376261d1] {
transition:
opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.page-slide-leave-active[data-v-376261d1] {
transition:
opacity 0.3s cubic-bezier(0.55, 0.06, 0.68, 0.19),
transform 0.3s cubic-bezier(0.55, 0.06, 0.68, 0.19);
}
.page-slide-enter-from[data-v-376261d1] {
opacity: 0;
transform: translateY(24px) scale(0.98);
}
.page-slide-leave-to[data-v-376261d1] {
opacity: 0;
transform: translateY(-16px) scale(0.99);
}
/* Fade transition - простое затухание */
.page-fade-enter-active[data-v-376261d1] {
transition: opacity 0.35s ease-out;
}
.page-fade-leave-active[data-v-376261d1] {
transition: opacity 0.25s ease-in;
}
.page-fade-enter-from[data-v-376261d1],
.page-fade-leave-to[data-v-376261d1] {
opacity: 0;
}
/* Design tokens: colors, typography, radii, spacing, shadows */
:root {
/* Colors */
--color-bg: #EBEBEB; /* site background */
--color-surface: #FFFFFF; /* cards, header background */
--color-primary: #4A48E9; /* brand blue */
--color-accent: #C3FD56; /* lime frame */
--color-shadow-accent: rgba(164, 213, 73, 0.3); /* A4D549 @ 30% */
--color-text: #111111;
--color-text-secondary: #555555;
/* Typography */
--font-family-sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
"Segoe UI Emoji";
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-size-14: 14px;
--font-size-16: 16px;
--font-size-18: 18px;
--font-size-20: 20px;
--font-size-24: 24px; /* header nav */
/* Radii */
--radius-lg: 20px; /* header corner */
--radius-md: 12px;
--radius-sm: 8px; /* icon button */
/* Spacing scale */
--space-4: 4px;
--space-8: 8px;
--space-12: 12px;
--space-16: 16px;
--space-20: 20px;
--space-24: 24px;
--space-32: 32px;
--space-40: 40px;
/* Shadows */
--shadow-elev-1: 0 4px 4px var(--color-shadow-accent); /* drop shadow */
--shadow-inner-subtle: inset 0 0 7px rgba(0, 0, 0, 0.08); /* inner shadow */
}
@media (prefers-color-scheme: dark) {
/* Keep light design tokens; site is specified light. Reserved in case of dark theme later. */
}
/* Base/reset and app-wide styles */
* { box-sizing: border-box; }
html, body, #app { height: 100%; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
margin: 0;
font-family: var(--font-family-sans);
font-weight: var(--font-weight-regular);
line-height: 1.4;
color: var(--color-text);
background: var(--color-bg);
transition: background-color 0.3s ease;
position: relative;
}
/* Фоновое изображение через псевдоэлемент для плавной анимации */
body::after {
content: '';
position: fixed;
inset: 0;
background-image: var(--page-bg-image);
background-repeat: no-repeat;
background-position: center top;
background-size: inherit;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: -1;
}
body.has-bg-image::after {
opacity: 1;
}
#app {
min-height: 100%;
display: flex;
flex-direction: column;
}
a {
color: var(--color-primary);
text-decoration: none;
}
img, svg { display: block; max-width: 100%; }
/* Layout helpers */
main { flex: 1 1 auto; }
.br-mobile { display: none; }
.br-desktop { display: inline; }
@media (max-aspect-ratio: 2/3) {
.br-mobile { display: inline; }
.br-desktop { display: none; }
}
/* Utility classes: layout, spacing, alignment */
:root {
--app-header-height: 72px;
--app-header-offset-top: 40px;
--plan-sticky-offset-extra: 0px;
}
@media (max-aspect-ratio: 2/3) {
:root { --app-header-height: 59px; --app-header-offset-top: 8px; --plan-sticky-offset-extra: 8px; }
}
.container {
width: 100%;
margin-inline: auto;
padding-inline: 40px;
}
/* Responsive container paddings (portrait/square only, by aspect ratio)
For any portrait (<1), immediately use "3:4" behavior to avoid broken mid range */
@media (max-aspect-ratio: 1/1) {
.container { padding-inline: 24px; }
}
@media (max-aspect-ratio: 2/3) {
.container { padding-inline: 8px; }
}
.header-padding { padding-top: 40px; }
@media (max-aspect-ratio: 2/3) {
.header-padding { padding-top: 8px; }
}
.footer-padding { padding-bottom: 40px; }
.u-flex { display: flex; }
.u-inline-flex { display: inline-flex; }
.u-align-center { align-items: center; }
.u-justify-center { justify-content: center; }
.u-justify-between { justify-content: space-between; }
.u-gap-8 { gap: 8px; }
.u-gap-12 { gap: 12px; }
.u-gap-16 { gap: 16px; }
.u-gap-24 { gap: 24px; }
.u-p-8 { padding: 8px; }
.u-p-12 { padding: 12px; }
.u-p-16 { padding: 16px; }
.u-px-16 { padding-left: 16px; padding-right: 16px; }
.u-px-24 { padding-left: 24px; padding-right: 24px; }
.u-px-40 { padding-left: 40px; padding-right: 40px; }
.u-rounded-20 { border-radius: 20px; }
.u-rounded-8 { border-radius: 8px; }
.u-bg-surface { background: var(--color-surface); }
.u-text-primary { color: var(--color-primary); }
.u-text-24 { font-size: var(--font-size-24); }
.u-text-medium { font-weight: var(--font-weight-medium); }
.u-hide-scrollbar { scrollbar-width: none; }
.u-hide-scrollbar::-webkit-scrollbar { display: none; }
.u-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.app-promo-faq[data-v-8c93e062] { display: grid; gap: 0;
}
.grid[data-v-8c93e062] { display: grid; grid-template-columns: 1fr 597px; gap: 24px;
}
.panel[data-v-8c93e062] {
position: relative;
border-radius: 24px;
padding: 20px;
min-height: 590px;
overflow: hidden;
display: grid;
align-content: space-between;
}
/* Left panel - app */
.panel.app[data-v-8c93e062] { color: #fff;
}
.app-bg .bg-img[data-v-8c93e062] { position: absolute; inset: 0; overflow: hidden; border-radius: 24px; z-index: 0;
}
.app-bg .img[data-v-8c93e062] { position: absolute; left: -0.35%; top: -36.44%; width: 128.5%; height: 176.97%; max-width: none; display: block; object-fit: cover;
}
.app-bg .tint-left[data-v-8c93e062] { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
}
.app-bg .tint-left[data-v-8c93e062]::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 24px;
background: linear-gradient(to bottom right, rgba(74, 72, 233, 1) 10%, rgba(74, 72, 233, 0.75) 70%, rgba(74, 72, 233, 0.00) 100%);
backdrop-filter: blur(3.75px);
-webkit-backdrop-filter: blur(3.75px);
-webkit-mask-image: linear-gradient(to bottom right, rgba(0,0,0,1) 10%, rgba(0,0,0,0.75) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0.75) 10%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
}
.app-bg .tint-bottom[data-v-8c93e062] { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; z-index: 1; pointer-events: none;
}
.app-bg .tint-bottom[data-v-8c93e062]::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 100%;
border-radius: 0px 0px 20px 20px;
background: linear-gradient(180deg, rgba(74, 72, 233, 0.00) 0%, rgba(74, 72, 233, 0.5) 25%, rgba(74, 72, 233, 1) 100%);
backdrop-filter: blur(3.75px);
-webkit-backdrop-filter: blur(3.75px);
-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0) 100%);
}
.app-bg[data-v-8c93e062] { position: absolute; inset: 0; border-radius: 24px; pointer-events: none;
}
.head[data-v-8c93e062] { display: grid; gap: 12px; position: relative; z-index: 1;
}
.title[data-v-8c93e062] { margin: 0; font-weight: 600; font-size: 64px; line-height: 0.9; letter-spacing: -0.02em;
}
.sub[data-v-8c93e062] { margin: 0; font-weight: 600; font-size: 26px; line-height: 1.1; color: rgba(255,255,255,0.75); letter-spacing: -0.01em; max-width: 680px;
}
.stores[data-v-8c93e062] { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; position: relative; z-index: 1;
}
.store[data-v-8c93e062] { display: flex; align-items: center; gap: 12px; background: #1e1e1e; color: #fff; padding: 16px; border-radius: 12px; min-height: 68px;
}
.store-icon[data-v-8c93e062] { width: 36px; height: 36px; border-radius: 10px; overflow: hidden; position: relative; flex: 0 0 auto;
}
.store-icon-img[data-v-8c93e062] { width: 100%; height: 100%; display: block; object-fit: cover;
}
.store-text[data-v-8c93e062] { display: grid; gap: 2px;
}
.store-cap[data-v-8c93e062] { margin: 0; font-weight: 400; font-size: 14px; line-height: 1.1; color: rgba(255,255,255,0.9);
}
.store-name[data-v-8c93e062] { margin: 0; font-size: 18px; line-height: 1.1;
}
/* Right panel - faq */
.panel.faq[data-v-8c93e062] { background: #c3fd56; color: #1e1e1e;
}
.panel.faq .title.alt[data-v-8c93e062] { font-size: 36px; color: #1e1e1e; letter-spacing: -0.02em;
}
.panel.faq .sub.dark[data-v-8c93e062] { color: rgba(30,30,30,0.9); font-weight: 600; font-size: 26px;
}
.mascot[data-v-8c93e062] { position: absolute; right: 0; top: 15px; width: 395px; height: 470px; pointer-events: none;
}
.mascot-img[data-v-8c93e062] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.mascot-ellipse[data-v-8c93e062] { position: absolute; left: 64px; top: 414px; width: 303px; height: 23px;
}
.faq-list[data-v-8c93e062] { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; position: relative; z-index: 1;
}
.faq-item[data-v-8c93e062] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: rgba(255,255,255,0.6);
border: none;
border-radius: 20px;
backdrop-filter: blur(16.75px);
-webkit-backdrop-filter: blur(16.75px);
padding: 16px;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
position: relative;
z-index: 0;
}
.faq-item[data-v-8c93e062]::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(80deg, rgba(255,255,255,0.5) 0%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.5) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
z-index: 0;
}
.faq-text[data-v-8c93e062] { margin: 0; font-weight: 500; font-size: 20px; line-height: 1; color: rgba(0,0,0,0.9); letter-spacing: -0.01em; white-space: pre-line;
}
.faq-icon[data-v-8c93e062] { width: 24px; height: 24px; display: block; flex: 0 0 auto;
}
/* Back button */
.back-btn[data-v-8c93e062] {
display: inline-block;
border: none;
background: #1e1e1e;
color: #fff;
border-radius: 8px;
padding: 8px 12px;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.01em;
cursor: pointer;
width: max-content;
}
.answer .faq-answer[data-v-8c93e062] {
font-weight: 500;
font-size: 20px;
line-height: 1.2 ;
color: rgba(0,0,0,0.9);
letter-spacing: -0.01em;
white-space: pre-line;
}
.answer .faq-answer[data-v-8c93e062] :where(p, ul, ol) { margin: 0 0 8px;
}
.answer .faq-answer ul[data-v-8c93e062] { padding-left: 18px;
}
.answer .faq-answer ol[data-v-8c93e062] { padding-left: 18px;
}
.answer .faq-answer[data-v-8c93e062] :last-child { margin-bottom: 0;
}
/* Press/interaction feedback */
.faq-item[data-v-8c93e062], .back-btn[data-v-8c93e062] { transition: transform 150ms ease, background-color 150ms ease, opacity 150ms ease; will-change: transform;
}
.faq-item[data-v-8c93e062]:active, .back-btn[data-v-8c93e062]:active { transform: scale(0.98); opacity: 0.9;
}
/* Disable press animation on answer panel */
.faq-item.answer[data-v-8c93e062] { transition: none; cursor: default;
}
.faq-item.answer[data-v-8c93e062]:active { transform: none; opacity: 1;
}
@media (max-aspect-ratio: 1/1) {
.stores[data-v-8c93e062] { grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Responsive */
@media (max-aspect-ratio: 1/1) {
.grid[data-v-8c93e062] { grid-template-columns: 1fr;
}
.panel[data-v-8c93e062] { min-height: 520px;
}
.panel.faq[data-v-8c93e062] { min-height: 560px;
}
}
@media (max-aspect-ratio: 3/4) {
.title[data-v-8c93e062] { font-size: 48px;
}
.panel.faq .title.alt[data-v-8c93e062] { font-size: 32px;
}
.panel.faq .sub.dark[data-v-8c93e062] { font-size: 22px;
}
}
@media (max-aspect-ratio: 3/4) {
.grid[data-v-8c93e062] { gap: 20px;
}
.panel[data-v-8c93e062] { min-height: 540px;
}
.panel.faq[data-v-8c93e062] { min-height: 560px;
}
.title[data-v-8c93e062] { font-size: 40px;
}
.panel.faq .title.alt[data-v-8c93e062] { font-size: 30px;
}
.panel.faq .sub.dark[data-v-8c93e062] { font-size: 20px;
}
.store[data-v-8c93e062] { min-height: 60px; padding: 14px;
}
.store-icon[data-v-8c93e062] { width: 28px; height: 28px;
}
.store-name[data-v-8c93e062] { font-size: 16px;
}
.faq-text[data-v-8c93e062] { font-size: 18px;
}
}
@media (max-aspect-ratio: 2/3) {
.grid[data-v-8c93e062] { gap: 16px;
}
.panel[data-v-8c93e062] { padding: 16px; border-radius: 16px; min-height: 565px;
}
.title[data-v-8c93e062] { font-size: 36px;
}
.sub[data-v-8c93e062] { font-size: 14px; color: white; font-weight: 400;}
.store[data-v-8c93e062] { gap: 8px; padding: 12px;}
.stores[data-v-8c93e062] { gap: 8px;
}
.store-icon[data-v-8c93e062] { width: 18px; height: 18px;
}
.store-cap[data-v-8c93e062] { font-size: 12px;
}
.store-name[data-v-8c93e062] { font-size: 16px;
}
.panel.faq .title.alt[data-v-8c93e062] { font-size: 28px;
}
.panel.faq .sub.dark[data-v-8c93e062] { font-size: 16px;
}
.mascot[data-v-8c93e062] {
width: 90%;
height: auto;
aspect-ratio: 395 / 470;
margin-top: 40px;
}
.mascot-ellipse[data-v-8c93e062] { display: none;
}
.app-bg .img[data-v-8c93e062] {
left: -5%;
top: -5%;
width: 145%;
height: 100%
}
.faq-text[data-v-8c93e062] {
font-size: 16px;
}
.faq-list[data-v-8c93e062] { gap: 4px;
}
.answer .faq-answer[data-v-8c93e062] {
font-size: 16px;
}
.panel.faq[data-v-8c93e062] { min-height: 555px;
}
.back-btn[data-v-8c93e062] {
padding: 6px 8px;
font-size: 12px;
}
}
.home-view[data-v-dec41375] { display: grid; gap: 70px; width: 100%;
}
.home-view[data-v-dec41375] > * { min-width: 0;
}
.section[data-v-dec41375] { display: block;
}
.hero-wrap[data-v-dec41375] { display: grid; gap: 32px; padding-top: 32px;
}
@media (max-aspect-ratio: 1/1) {
/* Any portrait (<1) behaves like 3:4 layout */
.home-view[data-v-dec41375] { gap: 40px;
}
}
@media (max-aspect-ratio: 2/3) {
.home-view[data-v-dec41375] { gap: 32px;
}
}
.panel[data-v-f2236394] { display: grid; gap: 40px;
}
.title[data-v-f2236394] {
margin: 0;
font-weight: 600;
font-size: 64px;
line-height: 0.9;
letter-spacing: -0.01em;
color: var(--color-primary);
}
.steps[data-v-f2236394] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
list-style: none;
padding: 0;
margin: 0;
}
.step[data-v-f2236394] {
position: relative;
border-radius: 24px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 48px;
min-height: 196px;
overflow: hidden;
}
.step.light[data-v-f2236394] { background: #fff;
}
.step.dark[data-v-f2236394] { background: var(--color-primary); color: #fff;
}
.badge[data-v-f2236394] {
width: 64px; height: 64px;
border-radius: 8px;
display: grid; place-items: center;
}
.badge.lime[data-v-f2236394] { background: var(--color-accent);
}
.badge.white[data-v-f2236394] { background: #fff;
}
.num[data-v-f2236394] {
font-weight: 600;
font-size: 48px;
line-height: 0.9;
letter-spacing: -0.01em;
color: var(--color-primary);
}
.step-title[data-v-f2236394] {
margin: 0;
font-weight: 600;
font-size: 26px;
line-height: 1.1;
letter-spacing: -0.02em;
color: #1e1e1e;
}
.step-title.white[data-v-f2236394] { color: #fff;
}
.decor[data-v-f2236394] {
position: absolute;
right: -80px;
bottom: -140px;
width: 360px;
height: auto;
pointer-events: none;
transform: scaleX(-1) rotate(-15deg);
}
@media (max-aspect-ratio: 1/1) {
.title[data-v-f2236394] { font-size: 48px;
}
.steps[data-v-f2236394] { grid-template-columns: 1fr;
}
}
@media (max-aspect-ratio: 2/3) {
.title[data-v-f2236394] { font-size: 36px;
}
.step[data-v-f2236394] { gap: 24px; min-height: 160px; padding: 16px;
}
.badge[data-v-f2236394] { width: 40px; height: 40px;
}
.num[data-v-f2236394] { font-size: 24px;
}
.step-title[data-v-f2236394] { font-size: 18px;
}
.decor[data-v-f2236394] { width: 260px; right: -55px; bottom: -100px;
}
}
.dreams-view[data-v-c86d3787] { display: grid; gap: 64px; width: 100%;
}
.dreams-view[data-v-c86d3787] > * { min-width: 0;
}
.section[data-v-c86d3787] { display: block;
}
.hero-wrap[data-v-c86d3787] { display: grid; gap: 32px; padding-top: 32px;
}
@media (max-aspect-ratio: 3/4) {
.dreams-view[data-v-c86d3787] { gap: 40px;
}
}
@media (max-aspect-ratio: 2/3) {
.dreams-view[data-v-c86d3787] { gap: 32px;
}
}
.good-deeds-view[data-v-4fac0214] {
display: grid; gap: 64px; width: 100%;
/* Background is handled by global CSS or meta if needed, but here we can set it for the content wrapper */
}
.sections[data-v-4fac0214] {
display: flex;
flex-direction: column;
gap: 32px;
max-width: 1920px;
margin: 0 auto;
}
.hero-wrap[data-v-4fac0214] {
border-radius: 28px;
overflow: hidden;
padding-top: 32px;
}
@media (max-width: 1024px) {
.sections[data-v-4fac0214] {
padding: 20px;
gap: 20px;
}
}
@media (max-aspect-ratio: 3/4) {
.good-deeds-view[data-v-4fac0214] {
gap: 20px;
}
.hero-wrap[data-v-4fac0214] {
padding-top: 20px;
border-radius: 20px;
}
}
.bonuses-view[data-v-78483244] {
display: grid;
gap: 64px;
width: 100%;
padding-top: 32px;
max-width: 1920px;
margin: 0 auto;
}
/* Hero Section */
.hero-section[data-v-78483244] {
position: relative;
background: #4A48E9;
border-radius: 28px;
padding: 28px;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 64px;
}
.hero-bg[data-v-78483244] {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.hero-bg-color[data-v-78483244] {
position: absolute;
inset: 0;
background: #4A48E9;
}
.hero-pattern[data-v-78483244] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.2;
mix-blend-mode: luminosity;
}
.section[data-v-78483244] {
display: block;
}
/* Responsive */
@media (max-aspect-ratio: 1/1) {
.bonuses-view[data-v-78483244] {
gap: 40px;
}
.hero-section[data-v-78483244] {
padding: 20px;
gap: 48px;
}
}
@media (max-aspect-ratio: 3/4) {
.bonuses-view[data-v-78483244] {
gap: 24px;
padding-top: 16px;
}
.hero-section[data-v-78483244] {
border-radius: 20px;
padding: 16px;
gap: 40px;
}
}
@media (max-aspect-ratio: 2/3) {
.bonuses-view[data-v-78483244] {
gap: 8px;
padding-top: 8px;
}
.hero-section[data-v-78483244] {
border-radius: 20px;
padding: 8px 8px 20px;
gap: 32px;
}
}
/* Page layout */
.clear-data[data-v-1e159bf6] {
background: transparent;
position: relative;
padding: 0;
padding-top: 48px;
padding-bottom: 40px;
box-sizing: border-box;
display: grid;
gap: 28px;
}
/* Hero (title) */
.clear-data__hero[data-v-1e159bf6] {
display: flex;
align-items: center;
}
.hero__title[data-v-1e159bf6] {
color: #fff;
font-size: 32px;
font-weight: 600;
line-height: 0.9;
letter-spacing: -0.32px;
margin: 0;
}
/* Form layout */
.form-layout[data-v-1e159bf6] {
display: flex;
align-items: flex-start;
justify-content: center;
position: relative;
width: 100%;
}
.form-card[data-v-1e159bf6] {
background: #fff;
border-radius: 28px;
width: 100%;
max-width: 597px;
padding: 28px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 42px;
}
.form-card__subtitle[data-v-1e159bf6] {
font-size: 24px;
font-weight: 600;
color: #1e1e1e;
line-height: 1.2;
margin: 0;
letter-spacing: -0.48px;
}
/* Form */
.form[data-v-1e159bf6] {
display: flex;
flex-direction: column;
gap: 12px;
}
.field[data-v-1e159bf6] {
display: block;
background: rgba(235, 235, 235, 0.5);
padding: 28px;
border-radius: 16px;
}
.input[data-v-1e159bf6] {
width: 100%;
padding: 0;
box-sizing: border-box;
border: 0;
background: transparent;
outline: none;
font-size: 18px;
color: #1e1e1e;
}
.input[data-v-1e159bf6]::placeholder {
color: rgba(30, 30, 30, 0.4);
}
/* Make button full-width */
.form-card[data-v-1e159bf6] .ui-icon-block-btn {
width: 100%;
}
/* Error/Success text */
.error-text[data-v-1e159bf6] {
color: #ff3b30;
font-size: 14px;
margin: 0;
text-align: center;
}
.success-text[data-v-1e159bf6] {
color: #4caf50;
font-size: 14px;
margin: 0;
text-align: center;
}
/* Success overlay */
.success-overlay[data-v-1e159bf6] {
position: fixed;
inset: 0;
z-index: 300;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: grid;
place-items: center;
padding: 16px;
}
.success-dialog[data-v-1e159bf6] {
background: #fff;
border-radius: 20px;
width: 100%;
max-width: 460px;
display: grid;
gap: 16px;
padding: 24px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.success-topbar[data-v-1e159bf6] {
display: flex;
align-items: center;
justify-content: space-between;
}
.success-title[data-v-1e159bf6] {
font-size: 20px;
font-weight: 700;
color: #1e1e1e;
}
.success-dialog .success-text[data-v-1e159bf6] {
font-size: 14px;
color: rgba(30, 30, 30, 0.8);
text-align: left;
}
.success-actions[data-v-1e159bf6] {
display: grid;
gap: 8px;
}
.success-actions[data-v-1e159bf6] .ui-icon-block-btn {
width: 100%;
}
.agree[data-v-1e159bf6] {
display: flex;
align-items: flex-start;
gap: 8px;
color: rgba(30, 30, 30, 0.6);
font-size: 14px;
margin: 0;
}
.agree a[data-v-1e159bf6] {
color: inherit;
text-decoration: underline;
}
.agree__checkbox[data-v-1e159bf6] {
min-width: 16px;
min-height: 16px;
border: 1px solid rgba(30, 30, 30, 0.25);
border-radius: 4px;
appearance: none;
background: #fff;
margin-top: 3px;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
transform 0.08s ease,
box-shadow 0.2s ease;
will-change: transform;
}
.agree__checkbox[data-v-1e159bf6]:hover {
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06);
}
.agree__checkbox[data-v-1e159bf6]:active {
transform: scale(0.92);
}
.agree__checkbox[data-v-1e159bf6]:checked {
background-color: #000;
border-color: #000;
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
background-image: url('data:image/svg+xml;utf8,');
animation: checkbox-pop-1e159bf6 0.18s ease;
}
.agree__checkbox[data-v-1e159bf6]:focus-visible {
outline: none;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
}
.agree__checkbox.is-error[data-v-1e159bf6] {
border-color: #ff3b30;
box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.15);
animation: error-pulse-1e159bf6 0.5s ease;
}
/* Transitions */
.fade-enter-active[data-v-1e159bf6],
.fade-leave-active[data-v-1e159bf6] {
transition: opacity 0.2s ease;
}
.fade-enter-from[data-v-1e159bf6],
.fade-leave-to[data-v-1e159bf6] {
opacity: 0;
}
.pop-enter-active[data-v-1e159bf6],
.pop-leave-active[data-v-1e159bf6] {
transition: opacity 0.25s ease, transform 0.25s ease;
}
.pop-enter-from[data-v-1e159bf6],
.pop-leave-to[data-v-1e159bf6] {
opacity: 0;
transform: translateY(8px) scale(0.98);
}
/* Mobile responsive */
@media (max-aspect-ratio: 3/4) {
.clear-data[data-v-1e159bf6] {
gap: 16px;
padding-top: 24px;
}
.hero__title[data-v-1e159bf6] {
font-size: 24px;
}
.form-card[data-v-1e159bf6] {
padding: 16px;
border-radius: 16px;
gap: 24px;
min-height: auto;
}
.form-card__subtitle[data-v-1e159bf6] {
font-size: 18px;
}
.field[data-v-1e159bf6] {
padding: 12px 18px;
border-radius: 12px;
}
.input[data-v-1e159bf6] {
font-size: 14px;
}
.success-dialog[data-v-1e159bf6] {
border-radius: 16px;
max-width: 360px;
padding: 16px;
gap: 12px;
}
.success-title[data-v-1e159bf6] {
font-size: 18px;
}
.success-dialog .success-text[data-v-1e159bf6] {
font-size: 12px;
}
}
@media (max-aspect-ratio: 2/3) {
.hero__title[data-v-1e159bf6] {
font-size: 14px;
}
.form-card__subtitle[data-v-1e159bf6] {
font-size: 16px;
}
.input[data-v-1e159bf6] {
font-size: 14px;
}
}
@keyframes checkbox-pop-1e159bf6 {
0% {
transform: scale(0.9);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
@keyframes error-pulse-1e159bf6 {
0% {
box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
}
50% {
box-shadow: 0 0 0 6px rgba(255, 59, 48, 0.18);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
[data-v-1e159bf6] {
transition: none !important;
animation: none !important;
}
}