:root {
--layout-spacing: 1.5rem;
--primary-50: 253, 60%, 97%;
--primary-100: 256, 61%, 93%;
--primary-200: 255, 61%, 87%;
--primary-300: 255, 61%, 80%;
--primary-400: 255, 61%, 74%;
--primary-500: 255, 60%, 67%;
--primary-600: 255, 60%, 54%;
--primary-700: 255, 60%, 40%;
--primary-800: 255, 61%, 27%;
--primary-900: 255, 61%, 13%;
--primary-950: 254, 61%, 7%;
--secondary-50: 260, 29%, 94%;
--secondary-100: 257, 29%, 88%;
--secondary-200: 255, 30%, 77%;
--secondary-300: 255, 29%, 65%;
--secondary-400: 255, 29%, 53%;
--secondary-500: 255, 29%, 42%;
--secondary-600: 255, 29%, 33%;
--secondary-700: 256, 29%, 25%;
--secondary-800: 254, 29%, 17%;
--secondary-900: 260, 30%, 8%;
--secondary-950: 260, 30%, 4%;
--neutral-50: 0, 0%, 98%;
--neutral-100: 0, 0%, 96%;
--neutral-200: 0, 0%, 90%;
--neutral-300: 0, 0%, 83%;
--neutral-400: 0, 0%, 64%;
--neutral-500: 0, 0%, 45%;
--neutral-600: 0, 0%, 32%;
--neutral-700: 0, 0%, 25%;
--neutral-800: 0, 0%, 15%;
--neutral-900: 0, 0%, 9%;
--neutral-950: 0, 0%, 4%;
}
:root,
[data-theme="light"] {
--color-background: hsl(270, 14%, 97%);
--color-background-secondary: hsl(var(--neutral-100));
--color-background-tertiary: hsl(var(--neutral-200));
--color-surface: hsl(var(--neutral-50));
--color-surface-secondary: hsl(var(--neutral-100));
--color-surface-tertiary: hsl(var(--neutral-200));
--color-text-primary: hsl(var(--neutral-900));
--color-text-secondary: hsl(var(--neutral-700));
--color-text-tertiary: hsl(var(--neutral-600));
--color-text-inverse: hsl(var(--neutral-50));
--color-border: hsl(var(--neutral-200));
--color-border-secondary: hsl(var(--neutral-300));
--color-border-tertiary: hsl(var(--neutral-400));
--color-primary-h: 255;
--color-primary-s: 60%;
--color-primary-l: 40%;
--color-primary-a: 0.5;
--color-primary: var(--color-primary-h), var(--color-primary-s), var(--color-primary-l);
--color-primary-hover: hsl(var(--primary-700));
--color-primary-light: hsl(var(--primary-100));
--color-primary-dark: hsl(var(--primary-800));
--color-secondary: hsl(var(--secondary-600));
--color-secondary-hover: hsl(var(--secondary-700));
--color-secondary-light: hsl(var(--secondary-100));
--color-secondary-dark: hsl(var(--secondary-800));
--color-success: hsl(100, 59%, 49%);
--color-success-h: 100;
--color-success-s: 59%;
--color-success-l: 49%;
--color-success-a: 0.5;
--color-success: var(--color-success-h), var(--color-success-s), var(--color-success-l);
--color-warning: hsl(38, 92%, 50%);
--color-warning-h: 38;
--color-warning-s: 92%;
--color-warning-l: 50%;
--color-warning-a: 0.5;
--color-warning: var(--color-warning-h), var(--color-warning-s), var(--color-warning-l);
--color-error: hsl(0, 84%, 60%);
--color-error-h: 0;
--color-error-s: 84%;
--color-error-l: 60%;
--color-error-a: 0.5;
--color-error: var(--color-error-h), var(--color-error-s), var(--color-error-l);
--color-info: hsl(219, 89%, 55%);
--color-info-h: 219;
--color-info-s: 89%;
--color-info-l: 55%;
--color-info-a: 0.5;
--color-info: var(--color-info-h), var(--color-info-s), var(--color-info-l);
--color-link: hsl(217, 86%, 69%);
--color-link-h: 217;
--color-link-hover: hsl(217, 85%, 46%);
--shadow-sm: 0 1px 2px 0 hsl(var(--neutral-900) / 0.05);
--shadow-md: 0 4px 6px -1px hsl(var(--neutral-900) / 0.1), 0 2px 4px -2px hsl(var(--neutral-900) / 0.1);
--shadow-lg: 0 10px 15px -3px hsl(var(--neutral-900) / 0.1), 0 4px 6px -4px hsl(var(--neutral-900) / 0.1);
--shadow-xl: 0 20px 25px -5px hsl(var(--neutral-900) / 0.1), 0 8px 10px -6px hsl(var(--neutral-900) / 0.1);
--color-ios-h: 214;
--color-ios-s: 59%;
--color-ios-l: 53%;
--color-ios-a: 0.5;
--color-ios: var(--color-ios-h), var(--color-ios-s), var(--color-ios-l);
--color-android-h: 89;
--color-android-s: 59%;
--color-android-l: 53%;
--color-android-a: 0.5;
--color-android: var(--color-android-h), var(--color-android-s), var(--color-android-l);
--color-golden: 45, 93%, 48%;
--color-golden-h: 45;
--color-golden-s: 93%;
--color-golden-l: 48%;
--color-golden-light: 45, 93%, 48%;
--color-golden-dark: 45, 93%, 48%;
--color-regular: 214, 82%, 51%;
--color-regular-h: 214;
--color-regular-s: 82%;
--color-regular-l: 51%;
--color-regular-light: 214, 82%, 51%;
--color-regular-dark: 214, 82%, 51%;
--color-basic: 0, 0%, 86%;
--color-basic-h: 0;
--color-basic-s: 0%;
--color-basic-l: 86%;
--color-basic-light: 0, 0%, 86%;
--color-basic-dark: 0, 0%, 86%;
--color-android: 77, 60%, 42%;
--color-android-h: 77;
--color-android-s: 60%;
--color-android-l: 42%;
--color-android: var(--color-android-h), var(--color-android-s), var(--color-android-l);
}
[data-theme="dark"] {
--neutral-900: 256, 92%, 5%;
--color-background: hsl(var(--neutral-900));
--color-background-secondary: hsl(var(--neutral-800));
--color-background-tertiary: hsl(var(--neutral-700));
--color-surface: hsl(var(--neutral-800));
--color-surface-secondary: hsl(var(--neutral-700));
--color-surface-tertiary: hsl(var(--neutral-600));
--color-text-primary: hsl(var(--neutral-50));
--color-text-secondary: hsl(var(--neutral-300));
--color-text-tertiary: hsl(var(--neutral-400));
--color-text-inverse: hsl(var(--neutral-900));
--color-border: hsl(var(--neutral-700));
--color-border-secondary: hsl(var(--neutral-600));
--color-border-tertiary: hsl(var(--neutral-500));
--color-primary-h: 255;
--color-primary-s: 60%;
--color-primary-l: 40%;
--color-primary-a: 0.5;
--color-primary: var(--color-primary-h), var(--color-primary-s), var(--color-primary-l);
--color-primary-hover: hsl(var(--primary-300));
--color-primary-light: hsl(var(--primary-900));
--color-primary-dark: hsl(var(--primary-200));
--color-secondary: hsl(var(--secondary-400));
--color-secondary-hover: hsl(var(--secondary-300));
--color-secondary-light: hsl(var(--secondary-900));
--color-secondary-dark: hsl(var(--secondary-200));
--color-success: hsl(100, 59%, 49%);
--color-success-h: 100;
--color-success-s: 59%;
--color-success-l: 49%;
--color-success-a: 0.5;
--color-success: var(--color-success-h), var(--color-success-s), var(--color-success-l);
--color-warning: hsl(38, 92%, 50%);
--color-warning-h: 38;
--color-warning-s: 92%;
--color-warning-l: 50%;
--color-warning-a: 0.5;
--color-warning: var(--color-warning-h), var(--color-warning-s), var(--color-warning-l);
--color-error: hsl(0, 84%, 60%);
--color-error-h: 0;
--color-error-s: 84%;
--color-error-l: 60%;
--color-error-a: 0.5;
--color-error: var(--color-error-h), var(--color-error-s), var(--color-error-l);
--color-info: hsl(219, 89%, 55%);
--color-info-h: 219;
--color-info-s: 89%;
--color-info-l: 55%;
--color-info-a: 0.5;
--color-info: var(--color-info-h), var(--color-info-s), var(--color-info-l);
--shadow-sm: 0 1px 2px 0 hsl(var(--neutral-950) / 0.3);
--shadow-md: 0 4px 6px -1px hsl(var(--neutral-950) / 0.4), 0 2px 4px -2px hsl(var(--neutral-950) / 0.4);
--shadow-lg: 0 10px 15px -3px hsl(var(--neutral-950) / 0.4), 0 4px 6px -4px hsl(var(--neutral-950) / 0.4);
--shadow-xl: 0 20px 25px -5px hsl(var(--neutral-950) / 0.4), 0 8px 10px -6px hsl(var(--neutral-950) / 0.4);
--color-ios-h: 214;
--color-ios-s: 59%;
--color-ios-l: 40%;
--color-ios: var(--color-ios-h), var(--color-ios-s), var(--color-ios-l);
--color-android-h: 89;
--color-android-s: 59%;
--color-android-l: 40%;
--color-android: var(--color-android-h), var(--color-android-s), var(--color-android-l);
--color-golden: 45, 93%, 48%;
--color-golden-h: 45;
--color-golden-s: 93%;
--color-golden-l: 48%;
--color-golden-light: 45, 93%, 48%;
--color-golden-dark: 45, 93%, 48%;
--color-golden-gradient: linear-gradient(169.18deg, rgba(247, 207, 129, 0.39) 0%, rgba(242, 172, 32, 0.58) 91.98%);
--color-golden-gradient-dark: linear-gradient(81.79deg, #ffbb1e 0%, #dda600 100%);
--color-golden-gradient-light: linear-gradient(
169.18deg,
rgba(247, 207, 129, 0.39) 0%,
rgba(242, 172, 32, 0.58) 91.98%
);
--color-golden-shadow: 0px 8px 42.9px -6px rgba(161, 122, 0, 0.4);
--color-golden-shadow-dark: 0px 8px 42.9px -6px rgba(161, 122, 0, 0.4);
--color-golden-shadow-light: 0px 8px 42.9px -6px rgba(161, 122, 0, 0.4);
--color-android: 77, 60%, 42%;
--color-android-h: 77;
--color-android-s: 60%;
--color-android-l: 42%;
--color-android: var(--color-android-h), var(--color-android-s), var(--color-android-l);
}
@media (min-width: 992px) {
:root {
--layout-spacing: 2rem;
}
}
.breadcrumb-container {
padding-inline: 1rem;
max-width: 100%;
overflow-x: auto;
padding-top: 1.25rem !important;
}
.breadcrumb-container ol {
display: flex;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
.breadcrumb-container li {
display: flex;
align-items: center;
max-width: 100%;
word-break: break-word;
}
.breadcrumb-container li:not(:last-child)::after {
content: "/";
margin: 0 0.5rem;
opacity: 0.5;
flex-shrink: 0;
}
@media (max-width: 480px) {
.breadcrumb-container {
padding: 1rem 0.5rem 0;
}
.breadcrumb-container li:not(:last-child)::after {
margin: 0 0.3rem;
}
}
.breadcrumb-link {
text-decoration: none;
word-break: break-word;
display: inline-block;
color: var(--color-text-primary);
}
.breadcrumb-link:hover {
text-decoration: underline;
}
.breadcrumb-current {
opacity: 0.3;
word-break: break-word;
}
.icon-flash {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
min-width: 1.5rem;
min-height: 1.5rem;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_i_119_189)'%3E%3Cpath d='M6.10483 12.626L14.7156 3.37178C15.0099 3.05546 15.5272 3.3658 15.3867 3.77437L13.1793 10.1915C13.0908 10.4487 13.2793 10.7173 13.5512 10.7216L17.6368 10.7862C17.9849 10.7917 18.1603 11.2086 17.9207 11.4613L9.11399 20.7516C8.81824 21.0636 8.30576 20.7531 8.44538 20.3465L10.6501 13.9261C10.7379 13.6704 10.5521 13.4031 10.2819 13.3963L6.38761 13.2984C6.04303 13.2897 5.87003 12.8784 6.10483 12.626Z' fill='%23FEDA80'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_i_119_189' x='3.99707' y='3.24182' width='14.0342' height='19.1371' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='-2' dy='1.5'/%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.992912 0 0 0 0 0.919016 0 0 0 0 0.438691 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect1_innerShadow_119_189'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.icon-discount {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
min-width: 1.5rem;
min-height: 1.5rem;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.47845 9.39223C4.23093 8.15465 5.17752 7 6.43961 7H17.5604C18.8225 7 19.7691 8.15465 19.5216 9.39223L19.0784 11.6078C19.0267 11.8667 19.0267 12.1333 19.0784 12.3922L19.5216 14.6078C19.7691 15.8454 18.8225 17 17.5604 17H6.43961C5.17751 17 4.23093 15.8454 4.47845 14.6078L4.92155 12.3922C4.97334 12.1333 4.97334 11.8667 4.92155 11.6078L4.47845 9.39223Z' stroke='white'/%3E%3Cpath d='M10.2444 9.5C10.63 9.5 10.9327 9.63021 11.1525 9.89062C11.3767 10.151 11.4888 10.5133 11.4888 10.9773C11.4888 11.4413 11.3767 11.8059 11.1525 12.071C10.9327 12.3314 10.63 12.4616 10.2444 12.4616C9.98879 12.4616 9.76682 12.4025 9.57848 12.2841C9.39462 12.1657 9.25112 11.9953 9.14798 11.7727C9.04933 11.5502 9 11.285 9 10.9773C9 10.5133 9.10987 10.151 9.3296 9.89062C9.55381 9.63021 9.85874 9.5 10.2444 9.5ZM10.2444 9.95455C10.0112 9.95455 9.83184 10.0445 9.70628 10.2244C9.58072 10.4044 9.51794 10.6553 9.51794 10.9773C9.51794 11.304 9.58072 11.5573 9.70628 11.7372C9.83184 11.9171 10.0112 12.0071 10.2444 12.0071C10.4776 12.0071 10.657 11.9171 10.7825 11.7372C10.9126 11.5573 10.9776 11.304 10.9776 10.9773C10.9776 10.6553 10.9126 10.4044 10.7825 10.2244C10.657 10.0445 10.4776 9.95455 10.2444 9.95455ZM13.3991 9.5142H14.0045L10.5471 14.4858H9.93498L13.3991 9.5142ZM13.7556 11.5384C14.1413 11.5384 14.4439 11.6686 14.6637 11.929C14.8879 12.1894 15 12.5516 15 13.0156C15 13.4796 14.8879 13.8442 14.6637 14.1094C14.4439 14.3698 14.1413 14.5 13.7556 14.5C13.5 14.5 13.278 14.4408 13.0897 14.3224C12.9058 14.2041 12.7623 14.0336 12.6592 13.8111C12.5605 13.5885 12.5112 13.3234 12.5112 13.0156C12.5112 12.5516 12.6211 12.1894 12.8408 11.929C13.065 11.6686 13.37 11.5384 13.7556 11.5384ZM13.7556 11.9929C13.5224 11.9929 13.343 12.0829 13.2175 12.2628C13.0919 12.4427 13.0291 12.6937 13.0291 13.0156C13.0291 13.3423 13.0919 13.5956 13.2175 13.7756C13.343 13.9555 13.5224 14.0455 13.7556 14.0455C13.9888 14.0455 14.1682 13.9555 14.2937 13.7756C14.4238 13.5956 14.4888 13.3423 14.4888 13.0156C14.4888 12.6937 14.4238 12.4427 14.2937 12.2628C14.1682 12.0829 13.9888 11.9929 13.7556 11.9929Z' fill='white'/%3E%3C/svg%3E%0A");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.icon-googleplay-colored {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
min-width: 1.5rem;
min-height: 1.5rem;
background-image: url("data:image/svg+xml,%3Csvg width='21' height='24' viewBox='0 0 21 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.80506 11.4617L0.0898438 22.0059C0.0907562 22.0078 0.0907561 22.0106 0.0916686 22.0125C0.390051 23.1574 1.41203 24 2.62564 24C3.11108 24 3.56641 23.8656 3.95695 23.6305L3.98798 23.6118L14.9232 17.1593L9.80506 11.4617Z' fill='%23EA4335'/%3E%3Cpath d='M19.6332 9.66619L19.624 9.65966L14.9029 6.86123L9.58398 11.7013L14.922 17.1582L19.6177 14.3878C20.4407 13.9324 21.0001 13.045 21.0001 12.0223C21.0001 11.0052 20.4489 10.1225 19.6332 9.66619Z' fill='%23FBBC04'/%3E%3Cpath d='M0.0894234 1.99325C0.0310244 2.21347 0 2.44488 0 2.68376V21.3163C0 21.5552 0.0310245 21.7866 0.0903359 22.0059L10.1386 11.7313L0.0894234 1.99325Z' fill='%234285F4'/%3E%3Cpath d='M9.87617 12L14.904 6.85945L3.98152 0.383598C3.58459 0.140054 3.12105 8.69271e-05 2.62557 8.69271e-05C1.41197 8.69271e-05 0.388161 0.844559 0.0897792 1.99043C0.0897792 1.99136 0.0888672 1.9923 0.0888672 1.99323L9.87617 12Z' fill='%2334A853'/%3E%3C/svg%3E%0A");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.icon-windows-light {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
min-width: 1.5rem;
min-height: 1.5rem;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1070_67293)'%3E%3Cpath d='M0 5.6875V11.375H5.6875H11.375V5.6875V-1.69501e-07H5.6875H0V5.6875Z' fill='white'/%3E%3Cpath d='M12.625 5.6875V11.375H18.3125H24V5.6875V-1.69501e-07H18.3125H12.625V5.6875Z' fill='white'/%3E%3Cpath d='M0 18.3125V24H5.6875H11.375V18.3125V12.625H5.6875H0V18.3125Z' fill='white'/%3E%3Cpath d='M12.625 18.3125V24H18.3125H24V18.3125V12.625H18.3125H12.625V18.3125Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1070_67293'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.icon-whatsapp {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
min-width: 1.5rem;
min-height: 1.5rem;
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 17L1.19496 12.6345C0.457582 11.3567 0.0701248 9.90817 0.0708332 8.42279C0.0729582 3.77896 3.85191 0 8.49502 0C10.7482 0.000708333 12.8633 0.878333 14.4542 2.47067C16.0444 4.063 16.9199 6.1795 16.9192 8.43058C16.9171 13.0751 13.1381 16.8541 8.49502 16.8541C7.08544 16.8534 5.6964 16.4999 4.46603 15.8284L0 17ZM4.67286 14.3034C5.86003 15.0082 6.99336 15.4303 8.49219 15.431C12.3512 15.431 15.4948 12.2903 15.4969 8.42917C15.4983 4.56025 12.3696 1.42375 8.49786 1.42233C4.63603 1.42233 1.49458 4.56308 1.49316 8.4235C1.49245 9.99954 1.95429 11.1796 2.72991 12.4142L2.02229 14.9982L4.67286 14.3034ZM12.7386 10.433C12.6862 10.3452 12.546 10.2928 12.3349 10.1872C12.1245 10.0817 11.0896 9.57242 10.8963 9.50229C10.7036 9.43217 10.5634 9.39675 10.4224 9.60783C10.2821 9.81821 9.87839 10.2928 9.75585 10.433C9.63331 10.5733 9.51006 10.591 9.29969 10.4855C9.08931 10.3799 8.41073 10.1582 7.60677 9.44067C6.98132 8.8825 6.55844 8.19329 6.4359 7.98221C6.31336 7.77183 6.42315 7.65779 6.52798 7.55296C6.6229 7.45875 6.73836 7.30717 6.8439 7.18392C6.95086 7.06208 6.98557 6.97425 7.0564 6.83329C7.12653 6.69304 7.09182 6.56979 7.03869 6.46425C6.98557 6.35942 6.56482 5.32312 6.38986 4.90167C6.21844 4.49154 6.0449 4.54679 5.91599 4.54042L5.51224 4.53333C5.37199 4.53333 5.1439 4.58575 4.95124 4.79683C4.75857 5.00792 4.21457 5.5165 4.21457 6.55279C4.21457 7.58908 4.96895 8.58996 5.07378 8.73021C5.17932 8.87046 6.55773 10.9969 8.66927 11.9085C9.17148 12.1252 9.56389 12.2549 9.86919 12.3519C10.3735 12.512 10.8325 12.4893 11.1952 12.4355C11.5996 12.3753 12.4404 11.9262 12.6161 11.4346C12.7918 10.9423 12.7918 10.5209 12.7386 10.433Z' fill='%2325D366'/%3E%3C/svg%3E%0A");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.icon-whatsapp-light {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
min-width: 1.5rem;
min-height: 1.5rem;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1189_67337)'%3E%3Cpath d='M17.4736 14.382C17.1766 14.233 15.7156 13.515 15.4436 13.415C15.1706 13.316 14.9726 13.267 14.7736 13.565C14.5766 13.862 14.0066 14.531 13.8336 14.729C13.6606 14.928 13.4866 14.952 13.1896 14.804C12.8926 14.654 11.9346 14.341 10.7996 13.329C9.91659 12.541 9.31959 11.568 9.14659 11.27C8.97359 10.973 9.12859 10.812 9.27659 10.664C9.41059 10.531 9.57459 10.317 9.72259 10.144C9.87159 9.97004 9.92059 9.84604 10.0206 9.64704C10.1196 9.44904 10.0706 9.27604 9.99559 9.12704C9.92059 8.97804 9.32659 7.51504 9.07959 6.92004C8.83759 6.34104 8.59259 6.42004 8.41059 6.41004C8.23759 6.40204 8.03959 6.40004 7.84059 6.40004C7.64259 6.40004 7.32059 6.47404 7.04859 6.77204C6.77659 7.06904 6.00859 7.78804 6.00859 9.25104C6.00859 10.713 7.07359 12.126 7.22159 12.325C7.37059 12.523 9.31759 15.525 12.2986 16.812C13.0076 17.118 13.5606 17.301 13.9926 17.437C14.7046 17.664 15.3526 17.632 15.8636 17.555C16.4346 17.47 17.6216 16.836 17.8696 16.142C18.1176 15.448 18.1176 14.853 18.0426 14.729C17.9686 14.605 17.7716 14.531 17.4736 14.382ZM12.0516 21.785H12.0476C10.2774 21.7852 8.53967 21.3092 7.01659 20.407L6.65559 20.193L2.91459 21.175L3.91259 17.527L3.67759 17.153C2.68803 15.5773 2.16453 13.7537 2.16759 11.893C2.16859 6.44304 6.60359 2.00904 12.0556 2.00904C14.6956 2.00904 17.1776 3.03904 19.0436 4.90704C19.9643 5.82366 20.694 6.91377 21.1906 8.11428C21.6872 9.3148 21.9407 10.6019 21.9366 11.901C21.9336 17.351 17.4996 21.785 12.0516 21.785ZM20.4646 3.48804C19.3628 2.37896 18.0518 1.49958 16.6077 0.900841C15.1635 0.302105 13.6149 -0.00407625 12.0516 4.09775e-05C5.49659 4.09775e-05 0.161594 5.33504 0.158594 11.892C0.158594 13.988 0.705594 16.034 1.74659 17.837L0.0585938 24L6.36359 22.346C8.10719 23.296 10.061 23.7938 12.0466 23.794H12.0516C18.6056 23.794 23.9416 18.459 23.9446 11.901C23.9494 10.3383 23.6444 8.79014 23.047 7.34607C22.4497 5.90201 21.572 4.59071 20.4646 3.48804Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1189_67337'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.icon-telegram {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
min-width: 1.5rem;
min-height: 1.5rem;
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1170_67465)'%3E%3Cpath d='M8.5 17C13.1944 17 17 13.1944 17 8.5C17 3.80558 13.1944 0 8.5 0C3.80558 0 0 3.80558 0 8.5C0 13.1944 3.80558 17 8.5 17Z' fill='url(%23paint0_linear_1170_67465)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.84943 8.41046C6.32735 7.33087 7.97969 6.61914 8.80644 6.27526C11.167 5.29343 11.6575 5.12288 11.9772 5.11725C12.0475 5.11601 12.2047 5.13344 12.3066 5.21607C12.3925 5.28585 12.4162 5.38011 12.4275 5.44626C12.4388 5.51242 12.4529 5.66312 12.4417 5.78088C12.3138 7.12493 11.7603 10.3866 11.4787 11.8919C11.3596 12.5289 11.125 12.7425 10.8978 12.7634C10.4042 12.8088 10.0294 12.4372 9.55131 12.1238C8.8032 11.6334 8.38057 11.3281 7.6544 10.8496C6.81518 10.2966 7.35921 9.99259 7.83747 9.49585C7.96264 9.36585 10.1375 7.38764 10.1796 7.20819C10.1849 7.18575 10.1897 7.10209 10.14 7.05791C10.0903 7.01374 10.017 7.02884 9.96406 7.04086C9.88902 7.05789 8.69391 7.84781 6.37871 9.41064C6.03948 9.64358 5.73221 9.75707 5.45691 9.75113C5.15342 9.74457 4.56962 9.57953 4.13563 9.43845C3.60331 9.26542 3.18024 9.17393 3.21708 8.88007C3.23627 8.72701 3.44705 8.57047 3.84943 8.41046Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1170_67465' x1='8.5' y1='0' x2='8.5' y2='16.8739' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%232AABEE'/%3E%3Cstop offset='1' stop-color='%23229ED9'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_1170_67465'%3E%3Crect width='17' height='17' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.icon-web-dark {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
min-width: 1.5rem;
min-height: 1.5rem;
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1170_67481)'%3E%3Cpath d='M5.42604 8.49913H4.67604H5.42604ZM11.5722 8.49913H12.3222H11.5722ZM8.49913 11.5722V12.3222V11.5722ZM8.49913 6.96259V6.21259V6.96259ZM10.089 16.0172L10.2434 16.7511L10.089 16.0172ZM6.90927 16.0172L6.75483 16.7511L6.90927 16.0172ZM1.38386 5.59598L0.68954 5.31239H0.68954L1.38386 5.59598ZM0.98111 10.089L0.247182 10.2434L0.98111 10.089ZM6.90927 0.98111L6.75483 0.247182L6.90927 0.98111ZM10.089 0.981111L10.2434 0.247183L10.089 0.981111ZM15.5525 5.6237L15.3348 4.90599L15.5525 5.6237ZM1.44483 5.62342L1.22713 6.34113L1.44483 5.62342ZM14.9209 5.88146C15.2501 6.68816 15.4319 7.57148 15.4319 8.49913H16.9319C16.9319 7.37383 16.711 6.29824 16.3097 5.3147L14.9209 5.88146ZM15.4319 8.49913C15.4319 8.992 15.3805 9.47207 15.2832 9.93457L16.7511 10.2434C16.8696 9.67998 16.9319 9.09641 16.9319 8.49913H15.4319ZM15.2832 9.93457C14.7201 12.6108 12.6108 14.7201 9.93457 15.2832L10.2434 16.7511C13.5016 16.0655 16.0655 13.5016 16.7511 10.2434L15.2832 9.93457ZM9.93457 15.2832C9.47207 15.3805 8.992 15.4319 8.49913 15.4319V16.9319C9.09642 16.9319 9.67999 16.8696 10.2434 16.7511L9.93457 15.2832ZM8.49913 15.4319C8.00626 15.4319 7.52619 15.3805 7.0637 15.2832L6.75483 16.7511C7.31828 16.8696 7.90185 16.9319 8.49913 16.9319V15.4319ZM1.56641 8.49913C1.56641 7.57076 1.74848 6.68677 2.07818 5.87957L0.68954 5.31239C0.287573 6.29655 0.0664064 7.37295 0.0664064 8.49913H1.56641ZM7.0637 15.2832C4.38746 14.7201 2.27817 12.6108 1.71504 9.93456L0.247182 10.2434C0.932762 13.5016 3.49668 16.0655 6.75483 16.7511L7.0637 15.2832ZM1.71504 9.93456C1.61772 9.47207 1.56641 8.992 1.56641 8.49913H0.0664064C0.0664064 9.09641 0.128621 9.67998 0.247182 10.2434L1.71504 9.93456ZM2.07818 5.87957C2.93663 3.77778 4.79762 2.19187 7.0637 1.71504L6.75483 0.247182C3.99413 0.828091 1.73325 2.75703 0.68954 5.31239L2.07818 5.87957ZM7.0637 1.71504C7.52619 1.61772 8.00626 1.56641 8.49913 1.56641V0.0664062C7.90185 0.0664062 7.31828 0.128621 6.75483 0.247182L7.0637 1.71504ZM8.49913 1.56641C8.992 1.56641 9.47207 1.61772 9.93457 1.71504L10.2434 0.247183C9.67998 0.128621 9.09642 0.0664062 8.49913 0.0664062V1.56641ZM9.93457 1.71504C12.2013 2.19201 14.0628 3.77873 14.9209 5.88146L16.3097 5.3147C15.2664 2.75819 13.005 0.828267 10.2434 0.247183L9.93457 1.71504ZM9.37449 1.20909C9.586 1.87197 10.3667 4.41519 10.6862 6.74713L12.1723 6.54354C11.8342 4.07562 11.0191 1.42892 10.8035 0.753127L9.37449 1.20909ZM10.6862 6.74713C10.7717 7.37128 10.8222 7.96724 10.8222 8.49913H12.3222C12.3222 7.87851 12.2638 7.21106 12.1723 6.54354L10.6862 6.74713ZM15.3348 4.90599C14.4944 5.16089 12.9177 5.60795 11.2931 5.90779L11.5654 7.38288C13.269 7.06846 14.9061 6.6035 15.7702 6.34141L15.3348 4.90599ZM11.2931 5.90779C10.3069 6.0898 9.32895 6.21259 8.49913 6.21259V7.71259C9.45852 7.71259 10.537 7.57266 11.5654 7.38288L11.2931 5.90779ZM10.8222 8.49913C10.8222 9.28794 10.7112 10.2114 10.5435 11.1498L12.0201 11.4138C12.1955 10.4326 12.3222 9.41228 12.3222 8.49913H10.8222ZM10.5435 11.1498C10.1758 13.206 9.55752 15.2155 9.37449 15.7892L10.8035 16.2451C10.9928 15.6518 11.6349 13.568 12.0201 11.4138L10.5435 11.1498ZM15.7892 9.37449C15.2156 9.55752 13.206 10.1758 11.1498 10.5435L11.4138 12.0201C13.568 11.6349 15.6518 10.9928 16.2451 10.8035L15.7892 9.37449ZM11.1498 10.5435C10.2114 10.7112 9.28794 10.8222 8.49913 10.8222V12.3222C9.41229 12.3222 10.4326 12.1955 11.4138 12.0201L11.1498 10.5435ZM8.49913 10.8222C7.71032 10.8222 6.78682 10.7112 5.8485 10.5435L5.58449 12.0201C6.56566 12.1955 7.58598 12.3222 8.49913 12.3222V10.8222ZM5.8485 10.5435C3.79228 10.1758 1.78271 9.55752 1.20909 9.37449L0.753126 10.8035C1.34643 10.9928 3.43026 11.6349 5.58449 12.0201L5.8485 10.5435ZM4.67604 8.49913C4.67604 9.41228 4.80278 10.4326 4.97821 11.4138L6.45479 11.1498C6.28702 10.2114 6.17604 9.28794 6.17604 8.49913H4.67604ZM4.97821 11.4138C5.36338 13.568 6.00545 15.6518 6.19476 16.2451L7.62378 15.7892C7.44075 15.2156 6.82244 13.206 6.45479 11.1498L4.97821 11.4138ZM6.19476 0.753126C5.97913 1.42892 5.16405 4.07562 4.82596 6.54354L6.31208 6.74713C6.63154 4.41519 7.41227 1.87197 7.62377 1.20909L6.19476 0.753126ZM4.82596 6.54354C4.73451 7.21106 4.67604 7.87851 4.67604 8.49913H6.17604C6.17604 7.96724 6.22657 7.37128 6.31208 6.74713L4.82596 6.54354ZM8.49913 6.21259C7.66931 6.21259 6.69135 6.0898 5.70514 5.90779L5.4329 7.38288C6.46122 7.57266 7.53974 7.71259 8.49913 7.71259V6.21259ZM5.70514 5.90779C4.07993 5.60785 2.50273 5.16057 1.66253 4.90571L1.22713 6.34113C2.09101 6.60317 3.72864 7.06835 5.4329 7.38288L5.70514 5.90779ZM15.2696 4.93246C15.289 4.9224 15.3111 4.91318 15.3348 4.90599L15.7702 6.34141C15.8376 6.32097 15.901 6.29479 15.9609 6.2637L15.2696 4.93246ZM0.992566 6.23582C1.06448 6.27979 1.14276 6.31554 1.22713 6.34113L1.66253 4.90571C1.70371 4.91821 1.74174 4.93571 1.77515 4.95614L0.992566 6.23582Z' fill='%231685F3'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1170_67481'%3E%3Crect width='17' height='17' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.icon-copy {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
min-width: 1.5rem;
min-height: 1.5rem;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
[data-theme="dark"] .icon-copy {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5731 6.65185H5.76918C4.73681 6.65185 3.8999 7.50306 3.8999 8.55309V19.0099C3.8999 20.0599 4.73681 20.9111 5.76918 20.9111H14.1809C15.2133 20.9111 16.0502 20.0599 16.0502 19.0099V18.0593M8.5731 6.65185H14.1809C15.2133 6.65185 16.0502 7.50306 16.0502 8.55309V18.0593M8.5731 6.65185V5.3C8.5731 4.47157 9.24468 3.8 10.0731 3.8H18.6499C19.6164 3.8 20.3999 4.5835 20.3999 5.55V16.5593C20.3999 17.3877 19.7283 18.0593 18.8999 18.0593H16.0502' stroke='white'/%3E%3C/svg%3E%0A");
}
[data-theme="light"] .icon-copy {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5731 6.65185H5.76918C4.73681 6.65185 3.8999 7.50306 3.8999 8.55309V19.0099C3.8999 20.0599 4.73681 20.9111 5.76918 20.9111H14.1809C15.2133 20.9111 16.0502 20.0599 16.0502 19.0099V18.0593M8.5731 6.65185H14.1809C15.2133 6.65185 16.0502 7.50306 16.0502 8.55309V18.0593M8.5731 6.65185V5.3C8.5731 4.47157 9.24468 3.8 10.0731 3.8H18.6499C19.6164 3.8 20.3999 4.5835 20.3999 5.55V16.5593C20.3999 17.3877 19.7283 18.0593 18.8999 18.0593H16.0502' stroke='black'/%3E%3C/svg%3E%0A");
}
.store-app-installation__install-button {
position: relative;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
transition:
background 0.2s,
box-shadow 0.2s;
cursor: pointer;
}
.store-app-installation__install-button.is-tapped {
box-shadow: 0 0 0 4px rgba(16, 3, 42, 0.08);
filter: brightness(0.95);
}
.store-app-installation__install-button.is-loading {
pointer-events: none;
opacity: 1;
}
.store-app-installation__install-button.is-loading span,
.store-app-installation__install-button.is-loading svg {
opacity: 0.4;
}
.store-app-installation__install-button.is-loading .button-spinner {
opacity: 1;
pointer-events: none;
}
.store-app-installation__install-button .button-spinner {
position: absolute;
left: 50%;
top: 50%;
width: 1.5em;
height: 1.5em;
margin-left: -0.75em;
margin-top: -0.75em;
border: 2.5px solid #fff;
border-top: 2.5px solid #10032a;
border-radius: 50%;
animation: button-spin 0.7s linear infinite;
opacity: 0;
transition: opacity 0.2s;
z-index: 2;
background: rgba(0, 0, 0, 0);
}
@keyframes button-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.form-section {
margin-bottom: 2.5rem;
color: var(--color-text-primary);
}
.form-section .form-section-title-only {
margin-bottom: 1.25rem;
}
.form-section .form-section-title {
margin-bottom: 0.25rem;
}
.form-section .form-section-subtitle {
margin-bottom: 1.25rem;
opacity: 0.6;
}
.form-section.no-spacing {
margin-bottom: 0;
}
.form-section .form-label {
display: inline-block;
margin-bottom: 0.35rem;
color: var(--color-text-primary);
font-size: 0.875rem;
line-height: 1.5715;
font-weight: 500;
letter-spacing: 0.02em;
}
@media (max-width: 768px) {
.form-section .form-label {
font-size: 0.875rem;
line-height: 1.5715;
}
}
[dir="rtl"] .form-section .form-label {
font-size: 13.72px;
line-height: 24px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .form-section .form-label {
font-size: 13.72px;
line-height: 24px;
}
}
.form-group {
margin-bottom: 0.5rem;
}
.form-group.last {
margin-bottom: 0.5rem;
}
.form-group.no-spacing {
margin-bottom: 0;
}
.form-group[aria-labelledby="payment-method-label"] {
display: flex;
-moz-column-gap: 0.75rem;
column-gap: 0.75rem;
row-gap: 0.75rem;
flex-wrap: wrap;
}
.form-group .input-group-wrapper {
position: relative;
}
.form-group .input-group-wrapper .form-input {
width: 100%;
}
.form-group .input-group-wrapper .input-group-button {
position: absolute;
top: 0;
right: 0;
background: none;
border: none;
cursor: pointer;
height: calc(100% - 0.4rem);
margin: 0.2rem;
background-color: #007bff;
color: #fff;
border-radius: 0.4rem;
line-height: 1;
font-size: 1rem;
line-height: 26px;
font-weight: 500;
letter-spacing: -0.0001em;
padding-inline: 0.85rem;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 768px) {
.form-group .input-group-wrapper .input-group-button {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"] .form-group .input-group-wrapper .input-group-button {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .form-group .input-group-wrapper .input-group-button {
font-size: 14.7px;
line-height: 25px;
}
}
.form-group .input-group-wrapper .copy-button {
position: absolute;
top: -0.35rem;
right: -0.25rem;
background: none;
border: none;
cursor: pointer;
padding: 1rem;
}
.form-group .input-group-wrapper .copy-button i {
opacity: 0.6;
}
.form-group .input-group-wrapper .password-toggle {
position: absolute;
top: 50%;
right: 0.15rem;
transform: translateY(-50%);
background: none;
border: none;
padding: 0.5rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary-text) !important;
transition: color 0.2s ease;
--pti-opacity: 0.6;
}
.form-group .input-group-wrapper .password-toggle:hover {
color: rgba(60, 66, 87, 0.9);
--pti-opacity: 1;
}
.form-group .input-group-wrapper .password-toggle .password-toggle-icon {
width: 1.5rem;
height: 1.5rem;
opacity: var(--pti-opacity);
}
.form-group .input-group-wrapper .password-toggle .password-toggle-icon .slash,
.form-group .input-group-wrapper .password-toggle .password-toggle-icon .slash-bg {
stroke-dasharray: 20;
stroke-dashoffset: 0;
transition: stroke-dashoffset 0.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.form-group .input-group-wrapper .password-toggle.show-password .slash,
.form-group .input-group-wrapper .password-toggle.show-password .slash-bg {
stroke-dashoffset: 20;
}
.form-group .form-label {
display: inline-block;
margin-bottom: 0.35rem;
color: var(--color-text-primary);
font-size: 0.875rem;
line-height: 1.5715;
font-weight: 500;
letter-spacing: 0.02em;
}
@media (max-width: 768px) {
.form-group .form-label {
font-size: 0.875rem;
line-height: 1.5715;
}
}
[dir="rtl"] .form-group .form-label {
font-size: 13.72px;
line-height: 24px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .form-group .form-label {
font-size: 13.72px;
line-height: 24px;
}
}
.form-group .form-input {
display: block;
width: 100%;
padding: 0.95rem 1rem 0.9rem;
color: var(--color-primary-text);
font-size: 0.875rem;
line-height: 1.5715;
font-weight: 400;
letter-spacing: 0.02em;
background-clip: padding-box;
border-radius: 0.5rem;
border: none;
transition:
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
}
@media (max-width: 768px) {
.form-group .form-input {
font-size: 0.875rem;
line-height: 1.5715;
}
}
[dir="rtl"] .form-group .form-input {
font-size: 13.72px;
line-height: 24px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .form-group .form-input {
font-size: 13.72px;
line-height: 24px;
}
}
[data-theme="dark"] .form-group .form-input {
background-color: hsla(var(--color-primary-h), 20%, 80%, 0.08);
box-shadow: 0px 0px 0px 1px hsla(var(--color-primary-h), 30%, 50%, 0.3);
}
[data-theme="light"] .form-group .form-input {
background-color: hsla(var(--color-primary-h), 20%, 70%, 0.1);
box-shadow: 0px 0px 0px 1px hsla(var(--color-primary-h), 30%, 70%, 0.3);
}
.form-group .form-input:focus {
outline: 0;
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
@media (max-width: 47.9975em) {
.form-group .form-input {
padding: 0.6rem 0.7rem;
}
}
.form-group .form-input::-moz-placeholder {
font-size: 1rem;
line-height: 26px;
font-weight: 300;
letter-spacing: -0.0001em;
}
.form-group .form-input::placeholder {
font-size: 1rem;
line-height: 26px;
font-weight: 300;
letter-spacing: -0.0001em;
}
@media (max-width: 768px) {
.form-group .form-input::-moz-placeholder {
font-size: 15px;
line-height: 1.4;
}
.form-group .form-input::placeholder {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"] .form-group .form-input::-moz-placeholder {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
[dir="rtl"] .form-group .form-input::placeholder {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .form-group .form-input::-moz-placeholder {
font-size: 14.7px;
line-height: 25px;
}
[dir="rtl"] .form-group .form-input::placeholder {
font-size: 14.7px;
line-height: 25px;
}
}
.form-group .form-input[type="password"] {
font-size: 1rem;
letter-spacing: 0.2em;
font-family: "Segoe UI Symbol", "Arial", sans-serif;
}
.form-group .form-input:disabled {
color: var(--color-primary-text);
opacity: 1;
cursor: not-allowed;
}
.form-group .form-input.is-invalid {
border-color: #dc3545;
}
.form-group .form-input.is-invalid:focus {
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
.form-group .form-input.is-valid {
border-color: #28a745;
}
.form-group .form-input.is-valid:focus {
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
.form-group .form-select {
display: block;
width: 100%;
padding: 0.95rem 1rem 0.9rem;
color: var(--color-primary-text);
font-size: 0.875rem;
line-height: 1.5715;
font-weight: 400;
letter-spacing: 0.02em;
background-clip: padding-box;
border-radius: 0.5rem;
border: none;
transition:
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
margin: 0;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url('data:image/svg+xml;utf8,') !important;
background-repeat: no-repeat;
background-position: right 0.7rem top 50%;
background-size: 1.2rem auto;
}
@media (max-width: 768px) {
.form-group .form-select {
font-size: 0.875rem;
line-height: 1.5715;
}
}
[dir="rtl"] .form-group .form-select {
font-size: 13.72px;
line-height: 24px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .form-group .form-select {
font-size: 13.72px;
line-height: 24px;
}
}
[data-theme="dark"] .form-group .form-select {
background-color: hsla(var(--color-primary-h), 20%, 80%, 0.08);
box-shadow: 0px 0px 0px 1px hsla(var(--color-primary-h), 30%, 50%, 0.3);
}
[data-theme="light"] .form-group .form-select {
background-color: hsla(var(--color-primary-h), 20%, 70%, 0.1);
box-shadow: 0px 0px 0px 1px hsla(var(--color-primary-h), 30%, 70%, 0.3);
}
.form-group .form-select:focus {
outline: 0;
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
@media (max-width: 47.9975em) {
.form-group .form-select {
padding: 0.6rem 0.7rem;
}
}
.form-group .form-select::-moz-placeholder {
font-size: 1rem;
line-height: 26px;
font-weight: 300;
letter-spacing: -0.0001em;
}
.form-group .form-select::placeholder {
font-size: 1rem;
line-height: 26px;
font-weight: 300;
letter-spacing: -0.0001em;
}
@media (max-width: 768px) {
.form-group .form-select::-moz-placeholder {
font-size: 15px;
line-height: 1.4;
}
.form-group .form-select::placeholder {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"] .form-group .form-select::-moz-placeholder {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
[dir="rtl"] .form-group .form-select::placeholder {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .form-group .form-select::-moz-placeholder {
font-size: 14.7px;
line-height: 25px;
}
[dir="rtl"] .form-group .form-select::placeholder {
font-size: 14.7px;
line-height: 25px;
}
}
.form-group .form-select[type="password"] {
font-size: 1rem;
letter-spacing: 0.2em;
font-family: "Segoe UI Symbol", "Arial", sans-serif;
}
[data-theme="dark"] .form-group .form-select {
background-image: url('data:image/svg+xml;utf8,') !important;
}
[data-theme="light"] .form-group .form-select {
background-image: url('data:image/svg+xml;utf8,') !important;
}
[dir="rtl"] .form-group .form-select {
background-position: left 0.7rem top 50%;
}
.form-group .form-phone {
width: 100%;
display: flex;
align-items: center;
}
.form-group .form-phone * {
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.form-group .form-phone .iti {
width: 100%;
--iti-hover-color: hsla(214, 28%, 42%, 0.05);
--iti-arrow-padding: 0.75rem;
--iti-spacer-horizontal: 1.25rem;
direction: ltr;
}
.form-group .form-phone .iti .iti__country-container {
left: 0;
}
.form-group .form-phone .iti .iti__country-container .iti__dropdown-content {
--iti-dropdown-bg: hsla(var(--color-primary-h), 15%, 30%, 1) !important;
--iti-dropdown-shadow: 0px 0px 0px 1px hsla(var(--color-primary-h), 30%, 50%, 0.3);
margin-top: 0.5rem;
border-radius: 0.5rem;
border: none;
box-shadow: var(--iti-dropdown-shadow);
}
[data-theme="dark"] .form-group .form-phone .iti .iti__country-container .iti__dropdown-content {
--iti-dropdown-bg: hsla(var(--color-primary-h), 15%, 20%, 1) !important;
--iti-dropdown-shadow: 0px 0px 0px 1px hsla(var(--color-primary-h), 30%, 50%, 0.3);
}
[data-theme="light"] .form-group .form-phone .iti .iti__country-container .iti__dropdown-content {
--iti-dropdown-bg: hsla(var(--color-primary-h), 28%, 95%, 1) !important;
--iti-dropdown-shadow: 0px 0px 0px 1px hsla(var(--color-primary-h), 30%, 70%, 0.3);
}
.form-group .form-phone .iti .iti__country-container .iti__dropdown-content .iti__search-input {
display: block;
width: 100%;
padding: 0.95rem 1rem 0.9rem;
color: var(--color-primary-text);
font-size: 0.875rem;
line-height: 1.5715;
font-weight: 400;
letter-spacing: 0.02em;
background-clip: padding-box;
border-radius: 0.5rem;
border: none;
transition:
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
}
@media (max-width: 768px) {
.form-group .form-phone .iti .iti__country-container .iti__dropdown-content .iti__search-input {
font-size: 0.875rem;
line-height: 1.5715;
}
}
[dir="rtl"] .form-group .form-phone .iti .iti__country-container .iti__dropdown-content .iti__search-input {
font-size: 13.72px;
line-height: 24px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .form-group .form-phone .iti .iti__country-container .iti__dropdown-content .iti__search-input {
font-size: 13.72px;
line-height: 24px;
}
}
[data-theme="dark"] .form-group .form-phone .iti .iti__country-container .iti__dropdown-content .iti__search-input {
background-color: hsla(var(--color-primary-h), 20%, 80%, 0.08);
box-shadow: 0px 0px 0px 1px hsla(var(--color-primary-h), 30%, 50%, 0.3);
}
[data-theme="light"] .form-group .form-phone .iti .iti__country-container .iti__dropdown-content .iti__search-input {
background-color: hsla(var(--color-primary-h), 20%, 70%, 0.1);
box-shadow: 0px 0px 0px 1px hsla(var(--color-primary-h), 30%, 70%, 0.3);
}
.form-group .form-phone .iti .iti__country-container .iti__dropdown-content .iti__search-input:focus {
outline: 0;
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
@media (max-width: 47.9975em) {
.form-group .form-phone .iti .iti__country-container .iti__dropdown-content .iti__search-input {
padding: 0.6rem 0.7rem;
}
}
.form-group .form-phone .iti .iti__country-container .iti__dropdown-content .iti__search-input::-moz-placeholder {
font-size: 1rem;
line-height: 26px;
font-weight: 300;
letter-spacing: -0.0001em;
}
.form-group .form-phone .iti .iti__country-container .iti__dropdown-content .iti__search-input::placeholder {
font-size: 1rem;
line-height: 26px;
font-weight: 300;
letter-spacing: -0.0001em;
}
@media (max-width: 768px) {
.form-group .form-phone .iti .iti__country-container .iti__dropdown-content .iti__search-input::-moz-placeholder {
font-size: 15px;
line-height: 1.4;
}
.form-group .form-phone .iti .iti__country-container .iti__dropdown-content .iti__search-input::placeholder {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"]
.form-group
.form-phone
.iti
.iti__country-container
.iti__dropdown-content
.iti__search-input::-moz-placeholder {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
[dir="rtl"]
.form-group
.form-phone
.iti
.iti__country-container
.iti__dropdown-content
.iti__search-input::placeholder {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"]
.form-group
.form-phone
.iti
.iti__country-container
.iti__dropdown-content
.iti__search-input::-moz-placeholder {
font-size: 14.7px;
line-height: 25px;
}
[dir="rtl"]
.form-group
.form-phone
.iti
.iti__country-container
.iti__dropdown-content
.iti__search-input::placeholder {
font-size: 14.7px;
line-height: 25px;
}
}
.form-group .form-phone .iti .iti__country-container .iti__dropdown-content .iti__search-input[type="password"] {
font-size: 1rem;
letter-spacing: 0.2em;
font-family: "Segoe UI Symbol", "Arial", sans-serif;
}
.form-group
.form-phone
.iti
.iti__country-container
.iti__dropdown-content
.iti__country-list
.iti__country.iti__highlight {
--iti-hover-color: hsla(var(--color-primary-h), 30%, 70%, 0.2) !important;
}
.form-group .form-phone .iti .iti__country-container .iti__selected-country .iti__selected-country-primary {
border-start-start-radius: 0.45rem;
border-end-start-radius: 0.45rem;
padding: 0 0 0 var(--iti-spacer-horizontal);
}
.form-group .form-phone .iti .iti__country-container .iti__selected-country .iti__selected-country-primary .iti__flag {
transform: scale(1.875);
}
.form-group .form-phone .iti .iti__arrow {
width: 0.65rem;
height: 0.35rem;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin-left: calc(var(--iti-arrow-padding) * 1.25);
border-left: none;
border-right: none;
border-top: none;
margin-bottom: -0.25rem;
opacity: 0.6;
}
[data-theme="dark"] .form-group .form-phone .iti .iti__arrow {
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.29289 5.29289L0.707107 1.70711C0.077142 1.07714 0.523309 0 1.41421 0H8.58579C9.47669 0 9.92286 1.07714 9.29289 1.70711L5.70711 5.29289C5.31658 5.68342 4.68342 5.68342 4.29289 5.29289Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}
[data-theme="light"] .form-group .form-phone .iti .iti__arrow {
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.29289 5.29289L0.707107 1.70711C0.077142 1.07714 0.523309 0 1.41421 0H8.58579C9.47669 0 9.92286 1.07714 9.29289 1.70711L5.70711 5.29289C5.31658 5.68342 4.68342 5.68342 4.29289 5.29289Z' fill='%23000000'/%3E%3C/svg%3E");
}
.form-group .form-phone .iti .iti__arrow.iti__arrow--up {
transform: rotate(180deg);
border: none;
}
.form-group .input-message {
display: block;
margin-top: 0.25rem;
color: var(--color-primary-text);
font-size: 1rem;
line-height: 26px;
font-weight: 500;
letter-spacing: -0.0001em;
}
@media (max-width: 768px) {
.form-group .input-message {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"] .form-group .input-message {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .form-group .input-message {
font-size: 14.7px;
line-height: 25px;
}
}
.form-group .input-message a {
text-decoration: underline;
text-underline-offset: 0.2rem;
}
.form-group .input-message.info {
color: #8792a2;
}
.form-group .input-message.error {
color: #dc3545;
}
.submit-secondary-link {
display: block;
margin-top: 1.5rem;
text-align: center;
}
.submit-secondary-link a {
text-decoration: underline;
text-underline-offset: 0.2rem;
}
.checkbox-group {
margin-block: 1rem;
}
.checkbox-group .checkbox-wrapper {
display: flex;
align-items: center;
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
}
.checkbox-group .checkbox-wrapper input[type="checkbox"] {
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
width: 1.25rem;
height: 1.25rem;
min-width: 1.25rem;
min-height: 1.25rem;
border-radius: 0.4rem;
cursor: pointer;
position: relative;
}
[data-theme="dark"] .checkbox-group .checkbox-wrapper input[type="checkbox"] {
background-color: hsla(var(--color-primary-h), var(--color-primary-s), 84%, 0.125);
border: 1.5px solid hsla(var(--color-primary-h), var(--color-primary-s), 80%, 0.25);
}
[data-theme="light"] .checkbox-group .checkbox-wrapper input[type="checkbox"] {
background-color: hsla(var(--color-primary-h), var(--color-primary-s), 20%, 0.05);
border: 1.5px solid hsla(var(--color-primary-h), var(--color-primary-s), 20%, 0.125);
}
.checkbox-group .checkbox-wrapper input[type="checkbox"]:checked {
background-color: #007bff;
border-color: #007bff;
}
.checkbox-group .checkbox-wrapper input[type="checkbox"]:checked::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNSA4TDYuNSAxMS41TDEyLjUgNC41IiBzdHJva2U9IiNFOEYzRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.checkbox-group .checkbox-wrapper input[type="checkbox"]:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.checkbox-group .checkbox-wrapper label {
font-size: 1rem;
line-height: 26px;
font-weight: 400;
letter-spacing: -0.0001em;
color: var(--color-primary-text);
cursor: pointer;
}
@media (max-width: 768px) {
.checkbox-group .checkbox-wrapper label {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"] .checkbox-group .checkbox-wrapper label {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .checkbox-group .checkbox-wrapper label {
font-size: 14.7px;
line-height: 25px;
}
}
.link-underline {
text-decoration: underline;
text-underline-offset: 0.2rem;
color: #007bff;
transition: color 0.15s ease-in-out;
}
.link-underline:hover {
color: #0062cc;
}
.card-checkout-summary {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
}
.card-checkout-summary__row {
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: 1.25rem;
padding-block: 0.75rem;
}
[data-theme="dark"] .card-checkout-summary__row {
background: hsla(var(--color-success-h), var(--color-success-s), var(--color-success-l), 0.3);
}
[data-theme="light"] .card-checkout-summary__row {
background: hsla(var(--color-success-h), var(--color-success-s), 40%, 0.3);
}
.card-checkout-summary__label {
font-size: 1.125rem;
line-height: 136%;
font-weight: 600;
letter-spacing: -0.001em;
opacity: 0.9;
}
@media (max-width: 768px) {
.card-checkout-summary__label {
font-size: 16px;
line-height: 26px;
}
}
[dir="rtl"] .card-checkout-summary__label {
font-size: 1.1025rem;
line-height: 136%;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .card-checkout-summary__label {
font-size: 15.68px;
line-height: 26px;
}
}
.card-checkout-summary__value {
font-size: 1.25rem;
line-height: 140%;
font-weight: 600;
letter-spacing: 0.0185em;
}
@media (max-width: 768px) {
.card-checkout-summary__value {
font-size: 1.125rem;
line-height: 25px;
}
}
[dir="rtl"] .card-checkout-summary__value {
font-size: 1.225rem;
line-height: 140%;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .card-checkout-summary__value {
font-size: 1.1025rem;
line-height: 25px;
}
}
.payment-option {
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.3s ease;
color: var(--color-primary-text);
flex: 1;
}
[data-theme="dark"] .payment-option {
background: hsla(var(--color-primary-h), var(--color-primary-s), 80%, 0.15);
}
[data-theme="light"] .payment-option {
background-color: hsla(var(--color-primary-h), 20%, 80%, 0.3);
}
.payment-option .form-radio-label {
height: 100%;
padding-block: 1.125rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
row-gap: 0.8rem;
border-radius: 0.5rem;
}
.payment-option .form-radio-label .payment-method-details {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 0.5rem;
}
.payment-option .form-radio-label .payment-method-details .payment-method-icon-wrapper {
display: flex;
align-items: center;
-moz-column-gap: 0.35rem;
column-gap: 0.35rem;
}
.payment-option .form-radio-label .payment-method-details .payment-method-icon-wrapper .payment-method-name {
font-size: 0.875rem;
line-height: 1.5715;
font-weight: 400;
letter-spacing: 0.02em;
}
@media (max-width: 768px) {
.payment-option .form-radio-label .payment-method-details .payment-method-icon-wrapper .payment-method-name {
font-size: 0.875rem;
line-height: 1.5715;
}
}
[dir="rtl"]
.payment-option
.form-radio-label
.payment-method-details
.payment-method-icon-wrapper
.payment-method-name {
font-size: 13.72px;
line-height: 24px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"]
.payment-option
.form-radio-label
.payment-method-details
.payment-method-icon-wrapper
.payment-method-name {
font-size: 13.72px;
line-height: 24px;
}
}
.payment-option .form-radio-label .payment-method-details .payment-method-icon-wrapper .payment-method-icon {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: -0.1rem !important;
}
.payment-option .form-radio-label .payment-method-details .payment-method-icon-wrapper .payment-method-icon svg path {
stroke: var(--color-text-primary);
stroke-width: 1.25px;
}
.payment-option .form-radio-label .payment-method-details {
display: flex;
align-items: center;
justify-content: space-between;
}
.payment-option .form-radio-label .payment-method-details .payment-method-name {
font-size: 1.125rem;
line-height: 136%;
font-weight: 500;
letter-spacing: -0.001em;
}
@media (max-width: 768px) {
.payment-option .form-radio-label .payment-method-details .payment-method-name {
font-size: 16px;
line-height: 26px;
}
}
[dir="rtl"] .payment-option .form-radio-label .payment-method-details .payment-method-name {
font-size: 1.1025rem;
line-height: 136%;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .payment-option .form-radio-label .payment-method-details .payment-method-name {
font-size: 15.68px;
line-height: 26px;
}
}
.payment-option .form-radio-label .payment-method-details .payment-method-logos {
max-height: 0.72rem;
display: flex;
align-items: center;
justify-content: center;
}
.payment-option .form-radio-label .payment-method-details .payment-method-logos svg {
height: 0.72rem;
}
.payment-option .form-radio-label:hover {
background: rgba(169, 169, 169, 0.1);
}
.payment-option .form-radio-label .icon {
margin-right: 10px;
}
.payment-option .form-radio-label .logos {
margin-left: auto;
}
.payment-option[aria-checked="true"] {
background: hsla(var(--color-info-h), 80%, 60%, 0.8);
color: #fff;
box-shadow: inset 0px 0px 0px 3px hsla(var(--color-info-h), var(--color-info-s), 90%, 0.2);
}
.payment-option[aria-checked="true"] .payment-method-icon svg path {
stroke: #fff !important;
}
.form-select-custom {
display: block;
width: 100%;
padding: 0.95rem 1rem 0.9rem;
color: var(--color-primary-text);
font-size: 0.875rem;
line-height: 1.5715;
font-weight: 400;
letter-spacing: 0.02em;
background-clip: padding-box;
border-radius: 0.5rem;
border: none;
transition:
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
padding: 0.75rem 2.25rem 0.75rem 1.15rem;
box-shadow: none;
background-color: rgba(177, 202, 226, 0.25);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2321578C' stroke-opacity='0.5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 14px;
}
@media (max-width: 768px) {
.form-select-custom {
font-size: 0.875rem;
line-height: 1.5715;
}
}
[dir="rtl"] .form-select-custom {
font-size: 13.72px;
line-height: 24px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .form-select-custom {
font-size: 13.72px;
line-height: 24px;
}
}
[data-theme="dark"] .form-select-custom {
background-color: hsla(var(--color-primary-h), 20%, 80%, 0.08);
box-shadow: 0px 0px 0px 1px hsla(var(--color-primary-h), 30%, 50%, 0.3);
}
[data-theme="light"] .form-select-custom {
background-color: hsla(var(--color-primary-h), 20%, 70%, 0.1);
box-shadow: 0px 0px 0px 1px hsla(var(--color-primary-h), 30%, 70%, 0.3);
}
.form-select-custom:focus {
outline: 0;
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
@media (max-width: 47.9975em) {
.form-select-custom {
padding: 0.6rem 0.7rem;
}
}
.form-select-custom::-moz-placeholder {
font-size: 1rem;
line-height: 26px;
font-weight: 300;
letter-spacing: -0.0001em;
}
.form-select-custom::placeholder {
font-size: 1rem;
line-height: 26px;
font-weight: 300;
letter-spacing: -0.0001em;
}
@media (max-width: 768px) {
.form-select-custom::-moz-placeholder {
font-size: 15px;
line-height: 1.4;
}
.form-select-custom::placeholder {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"] .form-select-custom::-moz-placeholder {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
[dir="rtl"] .form-select-custom::placeholder {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .form-select-custom::-moz-placeholder {
font-size: 14.7px;
line-height: 25px;
}
[dir="rtl"] .form-select-custom::placeholder {
font-size: 14.7px;
line-height: 25px;
}
}
.form-select-custom[type="password"] {
font-size: 1rem;
letter-spacing: 0.2em;
font-family: "Segoe UI Symbol", "Arial", sans-serif;
}
[dir="rtl"] .form-select-custom {
padding: 0.75rem 1.15rem 0.75rem 2.25rem;
background-position: left 0.75rem center;
}
.form-underline-link {
text-decoration: underline;
text-underline-offset: 0.2rem;
color: #007bff;
transition: color 0.15s ease-in-out;
margin-top: 0.5rem;
display: flex;
justify-content: flex-end;
font-size: 0.875rem;
line-height: 1.5715;
font-weight: 400;
letter-spacing: 0.02em;
}
@media (max-width: 768px) {
.form-underline-link {
font-size: 0.875rem;
line-height: 1.5715;
}
}
[dir="rtl"] .form-underline-link {
font-size: 13.72px;
line-height: 24px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .form-underline-link {
font-size: 13.72px;
line-height: 24px;
}
}
.form-underline-link:hover {
color: #0062cc;
}
@media (prefers-reduced-motion: reduce) {
.form-input,
.form-select-custom,
.form-submit {
transition: none;
}
}
.submit-message-wrapper {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-top: 1.1rem;
}
.submit-message-wrapper .submit-message-text {
font-size: 13px;
line-height: 23px;
font-weight: 400;
letter-spacing: 0.025em;
opacity: 0.6;
margin-bottom: 0.125rem;
}
@media (max-width: 768px) {
.submit-message-wrapper .submit-message-text {
font-size: 13px;
line-height: 23px;
}
}
[dir="rtl"] .submit-message-wrapper .submit-message-text {
font-size: 12.74px;
line-height: 23px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .submit-message-wrapper .submit-message-text {
font-size: 12.74px;
line-height: 23px;
}
}
.submit-message-wrapper .submit-message-payment-icon {
height: 18px;
opacity: 0.8;
}
.submit-message-wrapper .submit-message-payment-icon svg {
height: 12px;
}
.submit-message-wrapper .submit-message-payment-icon svg path {
fill: var(--color-text-primary);
}
.submit-message-wrapper .submit-message-payment-methods {
width: 100%;
height: 100%;
max-width: 320px;
margin-inline: auto;
margin-top: 2.5rem;
}
[data-theme="light"] .submit-message-wrapper .submit-message-payment-methods {
opacity: 0.6;
}
.submit-message-wrapper .submit-message-payment-methods svg {
height: 100%;
width: 100%;
}
[dir="rtl"] .form-group .input-group-wrapper .copy-button {
right: auto !important;
left: -0.25rem;
}
[dir="rtl"] .form-group .input-group-wrapper .input-group-button {
right: auto !important;
left: 0;
padding: 1rem 1.25rem;
}
[dir="rtl"] .form-group .input-group-wrapper .password-toggle {
right: auto !important;
left: 0.15rem;
}
.container-available-apps .available-apps-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
row-gap: 2rem;
-moz-column-gap: 2rem;
column-gap: 2rem;
margin: 0 auto;
}
.container-available-apps .available-apps-grid .available-app-item {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 0.5rem;
background-color: rgba(167, 197, 227, 0.4078431373);
border-radius: 0.5rem;
padding: 1rem;
}
.container-available-apps .available-apps-grid .available-app-item .available-app-icon {
width: 80px;
height: 80px;
min-width: 80px;
min-height: 80px;
border-radius: 22%;
}
.container-available-apps .available-apps-grid .available-app-item .available-app-title {
font-size: 1.125rem;
line-height: 136%;
font-weight: 500;
letter-spacing: -0.001em;
}
@media (max-width: 768px) {
.container-available-apps .available-apps-grid .available-app-item .available-app-title {
font-size: 16px;
line-height: 26px;
}
}
[dir="rtl"] .container-available-apps .available-apps-grid .available-app-item .available-app-title {
font-size: 1.1025rem;
line-height: 136%;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .container-available-apps .available-apps-grid .available-app-item .available-app-title {
font-size: 15.68px;
line-height: 26px;
}
}
.component-divider {
display: flex;
align-items: center;
justify-content: center;
margin: 3rem 0;
flex: 1;
height: 1px;
}
[data-theme="dark"] .component-divider {
background-color: hsla(var(--color-primary-h), var(--color-primary-s), 96%, 0.154);
}
[data-theme="light"] .component-divider {
background-color: hsla(var(--color-primary-h), var(--color-primary-s), 16%, 0.154);
}
.modal .modal-content {
background: #f7fcff;
border: none;
border-radius: 1rem;
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.modal .modal-header {
padding: 1.5rem;
border-bottom: none;
background-color: rgba(248, 250, 252, 0.8);
}
.modal .modal-header .modal-title {
font-size: 1.25rem;
line-height: 140%;
font-weight: 500;
letter-spacing: 0.0185em;
color: #1a1f36;
margin: 0;
}
@media (max-width: 768px) {
.modal .modal-header .modal-title {
font-size: 1.125rem;
line-height: 25px;
}
}
[dir="rtl"] .modal .modal-header .modal-title {
font-size: 1.225rem;
line-height: 140%;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .modal .modal-header .modal-title {
font-size: 1.1025rem;
line-height: 25px;
}
}
.modal .modal-header .btn-close {
padding: 1rem;
margin: -1rem -1rem -1rem auto;
background: rgba(0, 0, 0, 0)
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
center/1em auto no-repeat;
opacity: 0.5;
transition: opacity 0.15s ease;
}
.modal .modal-header .btn-close:hover {
opacity: 0.75;
}
.modal .modal-header .btn-close:focus {
box-shadow: none;
outline: none;
}
.modal .modal-body {
padding: 1.5rem;
color: #1a1f36;
}
.modal .modal-body .form-section {
margin-bottom: 0;
}
.modal .modal-body .form-section .form-group:last-child {
margin-bottom: 0;
}
.modal .modal-footer {
width: 100%;
border-top: none;
background-color: rgba(248, 250, 252, 0.8);
display: flex;
flex-direction: column;
row-gap: 0.75rem;
-moz-column-gap: 0.75rem;
column-gap: 0.75rem;
}
.modal .modal-footer > * {
margin: 0 !important;
}
[dir="rtl"] .modal-header .btn-close {
margin: -1rem auto -1rem -1rem;
}
@media (min-width: 35.5em) {
.container-signup {
max-width: 480px !important;
}
}
.container-login {
padding-top: 3rem !important;
}
@media (min-width: 35.5em) {
.container-login {
max-width: 480px !important;
}
}
.container-login form {
display: inline-block !important;
margin-top: 0em;
unicode-bidi: unset !important;
}
@keyframes smoothFadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes smoothFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.animate-on-load {
animation: smoothFadeInUp 600ms cubic-bezier(0.25, 0.1, 0.25, 1) calc(var(--delay, 0) * 1s) both;
}
.container-content {
max-width: 1088px;
margin: 0 auto;
padding-inline: 1.25rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
padding-top: 5.75rem;
}
@media (max-width: 47.9975em) {
.container-content {
padding-top: calc(var(--layout-spacing) * 1.5) !important;
}
}
.container-content.container-no-padding {
padding-inline: 0 !important;
}
@media (min-width: 35.5em) {
.container-content.container-no-padding {
padding-inline: 1rem !important;
}
}
.container-content.container-spacing-top {
padding-top: 2rem !important;
}
.container-content.container-spacing-top--2x {
padding-top: 4rem !important;
}
.container-content.container-spacing-bottom {
padding-bottom: 2rem !important;
}
.container-content.container-spacing-bottom--2x {
padding-bottom: 4rem !important;
}
.container-content .container-headline {
text-align: center;
margin-bottom: 1.15rem;
}
@media (max-width: 47.9975em) {
.container-content .container-headline {
margin-bottom: 0.5rem;
}
}
.container-content .container-headline-only {
width: 100%;
text-align: center;
margin-bottom: 1.25rem;
}
@media (max-width: 47.9975em) {
.container-content .container-headline-only {
margin-bottom: 1.25rem;
}
}
.container-content .container-headline-only.on-side {
text-align: start;
}
.container-content .container-description {
text-align: center;
margin-bottom: 2.65rem;
opacity: 0.6;
}
@media (max-width: 47.9975em) {
.container-content .container-description {
margin-bottom: 2rem;
}
}
.layout-container {
max-width: 1088px;
margin: 0 auto;
padding-inline: 1.25rem;
display: flex;
flex-direction: column;
position: relative;
padding-top: 2.25rem;
}
@media (min-width: 35.5em) {
.layout-container.layout-small {
max-width: 480px !important;
}
}
.layout-container.layout-small form {
display: inline-block !important;
margin-top: 0em;
unicode-bidi: unset !important;
}
.layout-container.container-no-padding {
padding-inline: 0 !important;
}
@media (min-width: 35.5em) {
.layout-container.container-no-padding {
padding-inline: 1rem !important;
}
}
.layout-container.container-no-padding .layout-container-header-only {
padding-inline-start: 1rem;
}
.layout-container .layout-container-header {
margin-bottom: 1.15rem;
}
@media (max-width: 47.9975em) {
.layout-container .layout-container-header {
margin-bottom: 0.5rem;
}
}
.layout-container .layout-container-header.center {
text-align: center;
}
@media (max-width: 47.9975em) {
.layout-container .layout-container-header.center {
text-align: inherit;
}
}
.layout-container .layout-container-header-only {
margin-bottom: 2.6rem;
}
@media (max-width: 47.9975em) {
.layout-container .layout-container-header-only {
margin-bottom: 2rem;
}
}
.layout-container .layout-container-header-only.center {
text-align: center;
margin-bottom: 4rem;
}
@media (max-width: 47.9975em) {
.layout-container .layout-container-header-only.center {
text-align: inherit;
margin-bottom: 2rem;
}
}
.layout-container .layout-container-description {
margin-bottom: 2.65rem;
opacity: 0.6;
}
@media (max-width: 47.9975em) {
.layout-container .layout-container-description {
margin-bottom: 2rem;
}
}
.layout-container .layout-container-description.center {
max-width: 80%;
margin: 0 auto;
text-align: center;
margin-bottom: 3rem !important;
}
@media (max-width: 47.9975em) {
.layout-container .layout-container-description.center {
text-align: inherit;
margin-bottom: 2rem !important;
max-width: unset;
margin: unset;
}
}
.layout-container .layout-container-description.possible-long {
display: -webkit-box;
line-clamp: 3;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.layout-container .layout-container-description-wrapper {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 2.65rem;
-moz-column-gap: 2rem;
column-gap: 2rem;
}
@media (max-width: 47.9975em) {
.layout-container .layout-container-description-wrapper {
flex-direction: column;
align-items: unset;
margin-bottom: 2rem;
}
}
.layout-container .layout-container-description-wrapper .products-count {
font-size: 1.125rem;
line-height: 136%;
font-weight: 500;
letter-spacing: -0.001em;
opacity: 0.6;
flex-shrink: 0;
min-width: 0;
}
@media (max-width: 768px) {
.layout-container .layout-container-description-wrapper .products-count {
font-size: 16px;
line-height: 26px;
}
}
[dir="rtl"] .layout-container .layout-container-description-wrapper .products-count {
font-size: 1.1025rem;
line-height: 136%;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .layout-container .layout-container-description-wrapper .products-count {
font-size: 15.68px;
line-height: 26px;
}
}
@media (max-width: 47.9975em) {
.layout-container .layout-container-description-wrapper .products-count {
margin-top: 0.75rem;
}
}
.layout-container .layout-container-image {
display: flex;
align-items: center;
justify-content: center;
margin-top: 2rem;
}
.layout-container .layout-container-image svg {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.layout-container .button-fill {
margin-inline: auto;
}
.no-breadcrumb {
margin-top: 3.75rem !important;
}
.container-subscription-register {
display: flex;
flex-direction: column;
row-gap: 1.25rem;
}
.container-subscription-register .subscription-register-wrapper {
width: 100%;
display: flex;
flex-direction: column;
}
.container-subscription-register .subscription-register__package-details {
display: flex;
flex-direction: column;
margin-bottom: 0.5rem;
}
[data-theme="light"] .container-subscription-register .subscription-register__package-details.package-details-golden {
--package-details-background: linear-gradient(
169.18deg,
rgba(243, 186, 73, 0.406) 0%,
rgba(240, 166, 19, 0.468) 91.98%
);
--package-details-text-color: hsla(var(--color-golden-h), var(--color-golden-s), 23%, 1);
--package-details-badge-background: linear-gradient(180deg, #e0ac00 0%, #e19e00 100%);
--package-details-badge-shadow: 9px 9px 12.5px -7px rgba(194, 147, 0, 0.2), 9px 9px 45px 2px rgba(248, 165, 0, 0.2),
inset 0px -4px 10px -3px #ffe29f;
--package-details-badge-text-color: hsla(var(--color-golden-h), var(--color-golden-s), 96%, 1);
}
[data-theme="dark"] .container-subscription-register .subscription-register__package-details.package-details-golden {
--package-details-background: linear-gradient(
169.18deg,
rgba(247, 207, 129, 0.39) 0%,
rgba(242, 172, 32, 0.58) 91.98%
);
--package-details-text-color: hsla(var(--color-golden-h), var(--color-golden-s), 96%, 1);
--package-details-badge-background: linear-gradient(180deg, #e0ac00 0%, #e19e00 100%);
--package-details-badge-shadow: 9px 9px 12.5px -7px rgba(194, 147, 0, 0.2), 9px 9px 45px 2px rgba(248, 165, 0, 0.2),
inset 0px -4px 10px -3px #ffe29f;
--package-details-badge-text-color: hsla(var(--color-golden-h), var(--color-golden-s), 96%, 1);
}
[data-theme="light"] .container-subscription-register .subscription-register__package-details.package-details-regular {
--package-details-background: linear-gradient(
169.18deg,
hsla(var(--color-regular), 0.8) 0%,
hsla(var(--color-regular), 0.6) 91.98%
);
--package-details-text-color: hsla(var(--color-regular-h), var(--color-regular-s), 12%, 1);
}
[data-theme="dark"] .container-subscription-register .subscription-register__package-details.package-details-regular {
--package-details-background: linear-gradient(
169.18deg,
hsla(var(--color-regular), 0.4) 0%,
hsla(var(--color-regular), 0.5) 91.98%
);
--package-details-text-color: hsla(var(--color-regular-h), var(--color-regular-s), 96%, 1);
}
[data-theme="light"] .container-subscription-register .subscription-register__package-details.package-details-basic {
--package-details-background: linear-gradient(
169.18deg,
hsla(var(--color-basic), 0.8) 0%,
hsla(var(--color-basic), 0.6) 91.98%
);
--package-details-text-color: hsla(var(--color-basic-h), var(--color-basic-s), 12%, 1);
}
[data-theme="dark"] .container-subscription-register .subscription-register__package-details.package-details-basic {
--package-details-background: linear-gradient(
169.18deg,
hsla(var(--color-basic), 0.4) 0%,
hsla(var(--color-basic), 0.5) 91.98%
);
--package-details-text-color: hsla(var(--color-basic-h), var(--color-basic-s), 96%, 1);
}
[data-theme="light"] .container-subscription-register .subscription-register__package-details.package-details-android {
--package-details-background: linear-gradient(
169.18deg,
hsla(var(--color-android-h), var(--color-android-s), 40%, 0.2) 0%,
hsla(var(--color-android-h), 40%, 60%, 0.751) 91.98%
);
--package-details-text-color: hsla(var(--color-android-h), var(--color-android-s), 12%, 1);
}
[data-theme="dark"] .container-subscription-register .subscription-register__package-details.package-details-android {
--package-details-background: linear-gradient(
169.18deg,
rgba(228, 241, 192, 0.4) 0%,
rgba(125, 158, 30, 0.58) 91.98%
);
--package-details-text-color: hsla(var(--color-android-h), var(--color-android-s), 96%, 1);
}
.container-subscription-register .subscription-register__package-details-wrapper-top {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-end-end-radius: 0;
border-end-start-radius: 0;
border-start-end-radius: 1rem;
border-start-start-radius: 1rem;
padding-inline: 0.75rem;
padding-top: 0.75rem;
padding-bottom: 0.55rem;
background: var(--package-details-background);
color: var(--package-details-text-color);
}
.container-subscription-register .subscription-register__package-details-wrapper-top.no-badge {
border-end-end-radius: 1rem;
border-end-start-radius: 1rem;
border-start-end-radius: 1rem;
border-start-start-radius: 1rem;
}
.container-subscription-register .subscription-register__package-details-side-1 {
display: flex;
align-items: center;
-moz-column-gap: 0.55rem;
column-gap: 0.55rem;
}
.container-subscription-register .subscription-register__package-details-side-2 {
display: flex;
align-items: baseline;
-moz-column-gap: 0.2rem;
column-gap: 0.2rem;
}
.container-subscription-register .subscription-register__package-details-icon {
width: 32px;
height: 32px;
margin-top: -0.25rem;
}
.container-subscription-register .subscription-register__package-details-icon img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.container-subscription-register .subscription-register__package-details-name {
font-size: 1.125rem;
line-height: 136%;
font-weight: 500;
letter-spacing: -0.001em;
}
@media (max-width: 768px) {
.container-subscription-register .subscription-register__package-details-name {
font-size: 16px;
line-height: 26px;
}
}
[dir="rtl"] .container-subscription-register .subscription-register__package-details-name {
font-size: 1.1025rem;
line-height: 136%;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .container-subscription-register .subscription-register__package-details-name {
font-size: 15.68px;
line-height: 26px;
}
}
.container-subscription-register .subscription-register__package-details-price-amount {
font-size: 2rem;
line-height: 34px;
font-weight: 600;
letter-spacing: -0.002em;
}
@media (max-width: 768px) {
.container-subscription-register .subscription-register__package-details-price-amount {
font-size: 1.5rem;
line-height: 26px;
}
}
[dir="rtl"] .container-subscription-register .subscription-register__package-details-price-amount {
font-size: 1.96rem;
line-height: 34px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .container-subscription-register .subscription-register__package-details-price-amount {
font-size: 1.47rem;
line-height: 26px;
}
}
.container-subscription-register .subscription-register__package-details-price-currency {
font-size: 0.875rem;
line-height: 1.5715;
font-weight: 400;
letter-spacing: 0.02em;
opacity: 0.6;
}
@media (max-width: 768px) {
.container-subscription-register .subscription-register__package-details-price-currency {
font-size: 0.875rem;
line-height: 1.5715;
}
}
[dir="rtl"] .container-subscription-register .subscription-register__package-details-price-currency {
font-size: 13.72px;
line-height: 24px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .container-subscription-register .subscription-register__package-details-price-currency {
font-size: 13.72px;
line-height: 24px;
}
}
.container-subscription-register .subscription-register__package-details-price-duration {
font-size: 0.875rem;
line-height: 1.5715;
font-weight: 400;
letter-spacing: 0.02em;
opacity: 0.6;
}
@media (max-width: 768px) {
.container-subscription-register .subscription-register__package-details-price-duration {
font-size: 0.875rem;
line-height: 1.5715;
}
}
[dir="rtl"] .container-subscription-register .subscription-register__package-details-price-duration {
font-size: 13.72px;
line-height: 24px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .container-subscription-register .subscription-register__package-details-price-duration {
font-size: 13.72px;
line-height: 24px;
}
}
.container-subscription-register .subscription-register__package-details-badge {
display: flex;
align-items: center;
padding: 0.4rem 1.05rem;
border-end-end-radius: 1rem;
border-end-start-radius: 1rem;
border-start-end-radius: 0;
border-start-start-radius: 0;
background: var(--package-details-badge-background);
box-shadow: var(--package-details-badge-shadow);
}
.container-subscription-register .subscription-register__package-details-badge i {
margin-inline-end: 0.85rem;
}
.container-subscription-register .subscription-register__package-details-badge p {
font-size: 0.875rem;
line-height: 1.5715;
font-weight: 400;
letter-spacing: 0.02em;
color: var(--package-details-badge-text-color);
line-height: 1;
margin-bottom: 0.125rem;
}
@media (max-width: 768px) {
.container-subscription-register .subscription-register__package-details-badge p {
font-size: 0.875rem;
line-height: 1.5715;
}
}
[dir="rtl"] .container-subscription-register .subscription-register__package-details-badge p {
font-size: 13.72px;
line-height: 24px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .container-subscription-register .subscription-register__package-details-badge p {
font-size: 13.72px;
line-height: 24px;
}
}
.container-subscription-packages {
display: flex;
flex-direction: column;
}
.container-subscription-packages .subscription-package-group-title {
margin-bottom: 1.75rem;
}
.container-subscription-packages .subscription-package-group-title--spacing-top {
padding-top: 2.5rem;
}
.container-subscription-packages .subscription-package-group-title__only {
margin-bottom: 1rem;
}
.container-subscription-packages .subscription-package-grid {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
row-gap: 1.25rem;
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
justify-items: center;
z-index: 10;
}
@media (max-width: 47.9975em) {
.container-subscription-packages .subscription-package-grid {
grid-template-columns: 1fr;
grid-template-rows: repeat(2, 1fr);
padding-inline: 1.25rem;
justify-items: center !important;
}
}
@media (min-width: 48em) and (max-width: 63.9975em) {
.container-subscription-packages .subscription-package-grid {
justify-items: center;
grid-template-rows: 1fr;
}
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item:first-child {
justify-self: center;
}
}
@media (min-width: 64em) {
.container-subscription-packages .subscription-package-grid {
justify-items: start;
grid-template-rows: 1fr;
}
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item:first-child {
justify-self: end;
}
}
.container-subscription-packages .subscription-package-grid--single {
grid-template-columns: 1fr !important;
grid-template-rows: 1fr !important;
justify-items: center !important;
}
.container-subscription-packages .subscription-package-grid--single .subscription-package-grid-item:first-child {
justify-self: center;
}
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item {
padding: 0;
position: relative;
border-radius: 1.5rem;
}
@media (max-width: 47.9975em) {
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item {
width: 100%;
min-width: 100%;
max-width: 100%;
}
}
@media (min-width: 35.5em) {
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item {
width: 400px;
min-width: 400px;
max-width: 400px;
}
}
.theme-transitioning
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item--golden {
transition:
background-color 0.3s,
border-color 0.3s,
color 0.3s;
}
[data-theme="light"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item--golden {
background: linear-gradient(169.18deg, rgba(248, 224, 176, 0.858) 0%, rgba(242, 172, 32, 0.58) 91.98%);
box-shadow: 0px 8px 42.9px -6px rgba(161, 122, 0, 0.4);
color: hsla(var(--color-golden-h), var(--color-golden-s), 12%, 1);
}
[data-theme="dark"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item--golden {
background: linear-gradient(169.18deg, rgba(247, 207, 129, 0.39) 0%, rgba(242, 172, 32, 0.58) 91.98%);
box-shadow: 0px 8px 42.9px -6px rgba(161, 122, 0, 0.4);
color: hsla(var(--color-golden-h), var(--color-golden-s), 96%, 1);
}
[data-theme="light"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item--golden
.subscription-package-grid-item-title {
color: hsla(var(--color-golden-h), var(--color-golden-s), 20%, 1) !important;
}
[data-theme="dark"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item--golden
.subscription-package-grid-item-title {
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(0, 0, 0, 0);
background-clip: text;
text-fill-color: rgba(0, 0, 0, 0);
background-image: linear-gradient(327.64deg, #eeb403 17.39%, #fee47e 92.44%);
}
[data-theme="light"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item--golden
.subscription-package-grid-item-features
li::before {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12.6667L10.7702 14.7909C10.8639 14.9034 11.0339 14.9115 11.138 14.8086L16 10' stroke='%23765B04' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='8' stroke='%23765B04' stroke-width='2'/%3E%3C/svg%3E%0A");
}
[data-theme="dark"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item--golden
.subscription-package-grid-item-features
li::before {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12.6667L10.7702 14.7909C10.8639 14.9034 11.0339 14.9115 11.138 14.8086L16 10' stroke='%23F3FFE0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='8' stroke='%23F3FFE0' stroke-width='2'/%3E%3C/svg%3E%0A");
}
.theme-transitioning
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item--regular {
transition: background-color 0.3s;
}
[data-theme="light"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item--regular {
background: linear-gradient(169.18deg, hsla(var(--color-regular), 0.8) 0%, hsla(var(--color-regular), 0.6) 91.98%);
box-shadow: 0px 8px 42.9px -6px hsla(var(--color-regular), 0.2);
color: hsla(var(--color-regular-h), var(--color-regular-s), 12%, 1);
}
[data-theme="dark"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item--regular {
background: linear-gradient(169.18deg, hsla(var(--color-regular), 0.4) 0%, hsla(var(--color-regular), 0.5) 91.98%);
box-shadow: 0px 8px 42.9px -6px hsla(var(--color-regular), 0.2);
color: hsla(var(--color-regular-h), var(--color-regular-s), 96%, 1);
}
[data-theme="light"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item--regular
.subscription-package-grid-item-features
li::before {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12.6667L10.7702 14.7909C10.8639 14.9034 11.0339 14.9115 11.138 14.8086L16 10' stroke='%23438be8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='8' stroke='%23438be8' stroke-width='2'/%3E%3C/svg%3E%0A");
}
[data-theme="dark"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item--regular
.subscription-package-grid-item-features
li::before {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12.6667L10.7702 14.7909C10.8639 14.9034 11.0339 14.9115 11.138 14.8086L16 10' stroke='%23DDDDDD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='8' stroke='%23DDDDDD' stroke-width='2'/%3E%3C/svg%3E%0A");
}
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item--basic {
transition: background-color 0.3s;
}
[data-theme="light"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item--basic {
background: linear-gradient(169.18deg, hsla(var(--color-basic), 0.8) 0%, hsla(var(--color-basic), 0.6) 91.98%);
box-shadow: 0px 8px 42.9px -6px hsla(var(--color-basic), 0.2);
color: hsla(var(--color-basic-h), var(--color-basic-s), 12%, 1);
}
[data-theme="dark"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item--basic {
background: linear-gradient(169.18deg, hsla(var(--color-basic), 0.4) 0%, hsla(var(--color-basic), 0.5) 91.98%);
box-shadow: 0px 8px 42.9px -6px hsla(var(--color-basic), 0.2);
color: hsla(var(--color-basic-h), var(--color-basic-s), 96%, 1);
}
[data-theme="light"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item--basic
.subscription-package-grid-item-features
li::before {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12.6667L10.7702 14.7909C10.8639 14.9034 11.0339 14.9115 11.138 14.8086L16 10' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='8' stroke='%23808080' stroke-width='2'/%3E%3C/svg%3E%0A");
}
[data-theme="dark"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item--basic
.subscription-package-grid-item-features
li::before {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12.6667L10.7702 14.7909C10.8639 14.9034 11.0339 14.9115 11.138 14.8086L16 10' stroke='%23DDDDDD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='8' stroke='%23DDDDDD' stroke-width='2'/%3E%3C/svg%3E%0A");
}
.theme-transitioning
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item--android {
transition: background-color 0.3s;
}
[data-theme="light"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item--android {
background: linear-gradient(
169.18deg,
hsla(var(--color-android-h), var(--color-android-s), 40%, 0.2) 0%,
hsla(var(--color-android-h), 40%, 60%, 0.751) 91.98%
);
box-shadow: 0px 15px 50px -10px rgba(35, 60, 24, 0.262);
color: hsla(var(--color-android-h), var(--color-android-s), 12%, 1);
}
[data-theme="dark"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item--android {
background: linear-gradient(169.18deg, rgba(228, 241, 192, 0.4) 0%, rgba(125, 158, 30, 0.58) 91.98%);
box-shadow: 0px 8px 42.9px -6px rgba(31, 56, 20, 0.4);
color: hsla(var(--color-android-h), var(--color-android-s), 96%, 1);
}
[data-theme="light"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item--android
.subscription-package-grid-item-features::before {
background: linear-gradient(270deg, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
}
[data-theme="light"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item--android
.subscription-package-grid-item-features
li::before {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12.6667L10.7702 14.7909C10.8639 14.9034 11.0339 14.9115 11.138 14.8086L16 10' stroke='%23355700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='8' stroke='%23355700' stroke-width='2'/%3E%3C/svg%3E%0A");
}
[data-theme="dark"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item--android
.subscription-package-grid-item-features
li::before {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12.6667L10.7702 14.7909C10.8639 14.9034 11.0339 14.9115 11.138 14.8086L16 10' stroke='%23F3FFE0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='8' stroke='%23F3FFE0' stroke-width='2'/%3E%3C/svg%3E%0A");
}
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-badge {
position: absolute;
top: 1rem;
right: 1rem;
left: auto;
z-index: 2;
background: linear-gradient(81.79deg, #ffbb1e 0%, #dda600 100%);
box-shadow:
9px 9px 12.5px -7px rgba(194, 147, 0, 0.6),
9px 9px 45px 2px rgba(248, 165, 0, 0.4),
inset -1px -1px 9.6px -1px #c08500;
border-radius: 100rem;
height: -moz-min-content;
height: min-content;
padding-block: 0.2rem 0.45rem;
padding-inline: 0.35rem 0.95rem;
}
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-badge .badge-instant {
display: flex;
align-items: center;
}
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-badge .badge-instant i {
inset-inline-end: 0.25rem;
margin-bottom: -0.2rem;
}
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-badge .badge-instant p {
color: hsla(var(--color-golden-h), var(--color-golden-s), 96%, 1);
font-size: 0.875rem;
line-height: 1.5715;
font-weight: 400;
letter-spacing: 0.02em;
margin: 0;
line-height: 1;
}
@media (max-width: 768px) {
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-badge .badge-instant p {
font-size: 0.875rem;
line-height: 1.5715;
}
}
[dir="rtl"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item-badge
.badge-instant
p {
font-size: 13.72px;
line-height: 24px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item-badge
.badge-instant
p {
font-size: 13.72px;
line-height: 24px;
}
}
[dir="rtl"] .container-subscription-packages .subscription-package-grid .subscription-package-grid-item-badge {
right: auto !important;
left: 1rem !important;
}
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-header {
display: flex;
flex-direction: column;
row-gap: 1.25rem;
margin-bottom: 1rem;
padding-inline-start: 1rem;
padding-top: 1rem;
}
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-title {
padding-top: 0.5rem;
}
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-price {
display: flex;
align-items: baseline;
-moz-column-gap: 0.35rem;
column-gap: 0.35rem;
margin-bottom: 1rem;
padding-inline-start: 1rem;
padding-top: 0.5rem;
}
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-price .price-amount,
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-price .price-currency,
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-price .price-duration {
transition: opacity 0.2s ease-in-out;
}
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-price .price-amount {
font-size: 2rem;
font-weight: 600;
}
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-price .price-currency {
font-size: 13px;
line-height: 23px;
font-weight: 400;
letter-spacing: 0.025em;
opacity: 0.7;
}
@media (max-width: 768px) {
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-price .price-currency {
font-size: 13px;
line-height: 23px;
}
}
[dir="rtl"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item-price
.price-currency {
font-size: 12.74px;
line-height: 23px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item-price
.price-currency {
font-size: 12.74px;
line-height: 23px;
}
}
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-price .price-duration {
font-size: 13px;
line-height: 23px;
font-weight: 400;
letter-spacing: 0.025em;
opacity: 0.7;
}
@media (max-width: 768px) {
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-price .price-duration {
font-size: 13px;
line-height: 23px;
}
}
[dir="rtl"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item-price
.price-duration {
font-size: 12.74px;
line-height: 23px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item-price
.price-duration {
font-size: 12.74px;
line-height: 23px;
}
}
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-icon {
width: 45px;
height: 45px;
}
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
row-gap: 0.75rem;
padding-top: 2rem;
padding-bottom: 2rem;
}
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-features::before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 1px;
margin-top: -1.5rem;
}
[data-theme="light"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item-features::before {
background: linear-gradient(270deg, rgba(80, 80, 80, 0.1) 50%, rgba(80, 80, 80, 0) 100%);
}
[data-theme="dark"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item-features::before {
background: linear-gradient(270deg, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
}
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-features li {
position: relative;
display: flex;
align-items: flex-start;
padding-inline-start: 1rem;
padding-inline-end: 1.5rem;
font-size: 0.875rem;
line-height: 1.5715;
font-weight: 400;
letter-spacing: 0.02em;
}
@media (max-width: 768px) {
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-features li {
font-size: 0.875rem;
line-height: 1.5715;
}
}
[dir="rtl"] .container-subscription-packages .subscription-package-grid .subscription-package-grid-item-features li {
font-size: 13.72px;
line-height: 24px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item-features
li {
font-size: 13.72px;
line-height: 24px;
}
}
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-features li::before {
content: "";
display: inline-block;
width: 1.65rem;
min-width: 1.65rem;
height: 1.65rem;
min-height: 1.65rem;
background-size: contain;
background-repeat: no-repeat;
margin-bottom: -0.5rem;
margin-inline-end: 0.5rem;
}
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-action {
padding-inline: 1rem;
padding-bottom: 1rem;
}
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-action .button-golden {
border-radius: 0.65rem;
}
[data-theme="light"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item-action
.button-golden {
background: linear-gradient(
360deg,
hsla(var(--color-golden-h), var(--color-golden-s), 40%, 1) 0%,
hsla(var(--color-golden-h), var(--color-golden-s), 50%, 0.9) 100%
);
box-shadow:
6px 10px 15px -3px rgba(116, 81, 0, 0.3),
inset -5px -5px 13px -1px hsla(var(--color-golden-h), var(--color-golden-s), 40%, 0.5);
color: hsla(var(--color-golden-h), var(--color-golden-s), 12%, 1);
}
[data-theme="dark"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item-action
.button-golden {
background: linear-gradient(360deg, #bc8e00 0%, #fbb921 100%);
box-shadow:
6px 10px 10px -3px rgba(104, 73, 0, 0.6),
inset -5px -5px 16.3px -1px #f7d773;
color: hsla(var(--color-golden-h), var(--color-golden-s), 12%, 1);
}
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-action .button-regular {
border-radius: 0.65rem;
}
[data-theme="light"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item-action
.button-regular {
background: linear-gradient(360deg, #1d69d8 0%, #438be8 100%);
box-shadow:
6px 10px 10px -3px rgba(29, 105, 216, 0.3),
inset -5px -5px 16.3px -1px #7baaf2;
color: hsla(var(--color-regular-h), var(--color-regular-s), 96%, 1);
}
[data-theme="dark"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item-action
.button-regular {
background: linear-gradient(360deg, #1d69d8 0%, #438be8 100%);
box-shadow:
6px 10px 15px -3px rgba(29, 105, 216, 0.5),
inset -5px -5px 16.3px -1px #7baaf2;
color: hsla(var(--color-regular-h), var(--color-regular-s), 96%, 1);
}
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-action .button-basic {
border-radius: 0.65rem;
}
[data-theme="light"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item-action
.button-basic {
background: linear-gradient(360deg, #454545 0%, #b1b1b1 100%);
box-shadow:
6px 10px 10px -3px rgba(41, 41, 41, 0.3),
inset -5px -5px 16.3px -1px #9c9c9c;
color: hsla(var(--color-basic-h), var(--color-basic-s), 12%, 1);
}
[data-theme="dark"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item-action
.button-basic {
background: linear-gradient(360deg, #454545 0%, #b1b1b1 100%);
box-shadow:
6px 10px 15px -3px rgba(41, 41, 41, 0.5),
inset -5px -5px 16.3px -1px #9c9c9c;
color: hsla(var(--color-basic-h), var(--color-basic-s), 96%, 1);
}
.container-subscription-packages .subscription-package-grid .subscription-package-grid-item-action .button-android {
border-radius: 0.65rem;
}
[data-theme="light"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item-action
.button-android {
background: linear-gradient(
180deg,
hsla(var(--color-android-h), var(--color-android-s), 50%, 1) 0%,
hsla(var(--color-android-h), var(--color-android-s), 30%, 0.8) 100%
);
box-shadow:
6px 10px 10px -3px rgba(50, 79, 4, 0.2),
inset -2px -2px 16.3px -3px #7ca834;
}
[data-theme="dark"]
.container-subscription-packages
.subscription-package-grid
.subscription-package-grid-item-action
.button-android {
background: linear-gradient(360deg, #84b439 0%, #587a21 100%);
box-shadow:
6px 10px 10px -3px rgba(50, 79, 4, 0.6),
inset -2px -2px 16.3px -3px #bdeb75;
}
.subscription-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin-bottom: 1rem;
background: rgba(0, 0, 0, 0.2);
padding: 0.25rem;
border-radius: 0.75rem;
width: -moz-fit-content;
width: fit-content;
margin-inline: auto;
}
[data-theme="light"] .subscription-toggle {
background: hsla(var(--color-android-h), var(--color-android-s), 40%, 0.2);
}
[data-theme="dark"] .subscription-toggle {
background: hsla(var(--color-android-h), var(--color-android-s), 70%, 0.2);
}
.subscription-toggle .toggle-button {
padding: 0.75rem 3rem;
border: none;
background: rgba(0, 0, 0, 0);
cursor: pointer;
transition: all 0.3s ease;
border-radius: 0.5rem;
min-width: 140px;
font-size: 1rem;
line-height: 26px;
font-weight: 400;
letter-spacing: -0.0001em;
}
@media (max-width: 768px) {
.subscription-toggle .toggle-button {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"] .subscription-toggle .toggle-button {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .subscription-toggle .toggle-button {
font-size: 14.7px;
line-height: 25px;
}
}
.theme-transitioning .subscription-toggle .toggle-button {
transition: color 0.3s;
}
[data-theme="light"] .subscription-toggle .toggle-button {
color: hsla(var(--color-android-h), var(--color-android-s), 12%, 0.6);
}
[data-theme="dark"] .subscription-toggle .toggle-button {
color: hsla(var(--color-android-h), var(--color-android-s), 96%, 1);
}
.subscription-toggle .toggle-button--active {
background-color: #82ae13;
color: hsla(var(--color-android-h), var(--color-android-s), 96%, 1) !important;
box-shadow: 0px 4px 12px -4px rgba(95, 138, 50, 0.5);
font-size: 1rem;
line-height: 26px;
font-weight: 500;
letter-spacing: -0.0001em;
}
@media (max-width: 768px) {
.subscription-toggle .toggle-button--active {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"] .subscription-toggle .toggle-button--active {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .subscription-toggle .toggle-button--active {
font-size: 14.7px;
line-height: 25px;
}
}
.subscription-toggle .toggle-button:hover:not(.subscription-toggle .toggle-button--active) {
background: #282e24;
}
.container-products .product-group {
--product-group-margin-bottom: 1.75rem;
width: 100%;
margin-bottom: var(--product-group-margin-bottom);
}
@media (min-width: 35.5em) {
.container-products .product-group {
--product-group-margin-bottom: 1.25rem;
}
}
@media (min-width: 48em) {
.container-products .product-group {
--product-group-margin-bottom: 1.75rem;
}
}
@media (min-width: 64em) {
.container-products .product-group {
--product-group-margin-bottom: 2rem;
}
}
.container-products .product-group-title {
--title-margin-bottom: 1rem;
margin-bottom: var(--title-margin-bottom);
font-weight: 700;
}
@media (max-width: 63.9975em) {
.container-products .product-group-title {
margin-inline-start: 0.75rem;
}
}
@media (min-width: 35.5em) {
.container-products .product-group-title {
--title-margin-bottom: 1.25rem;
}
}
@media (min-width: 48em) {
.container-products .product-group-title {
--title-margin-bottom: 1rem;
}
}
@media (min-width: 64em) {
.container-products .product-group-title {
--title-margin-bottom: 1.15rem;
}
}
.container-products .container-products-grid {
--grid-gap: 0.25rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
row-gap: var(--grid-gap);
-moz-column-gap: var(--grid-gap);
column-gap: var(--grid-gap);
}
@media (min-width: 35.5em) {
.container-products .container-products-grid {
--grid-gap: 0.25rem;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
}
@media (min-width: 48em) {
.container-products .container-products-grid {
--grid-gap: 0.35rem;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
}
@media (min-width: 64em) {
.container-products .container-products-grid {
--grid-gap: 0.5rem;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
}
[data-theme="light"] .container-products .container-products-grid-item {
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
}
[data-theme="dark"] .container-products .container-products-grid-item {
box-shadow: none;
}
.container-products .container-products-grid-item a {
display: block;
width: 100%;
height: 100%;
}
.container-product-list-header {
margin-bottom: calc(var(--layout-spacing) * 1.25);
align-self: flex-start;
}
.container-product-list-grid {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
row-gap: 1.5rem;
-moz-column-gap: 1rem;
column-gap: 1rem;
}
@media (min-width: 64em) {
.container-product-list-grid {
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
row-gap: 2.5rem;
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
}
}
.container-product-list-grid-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.container-product-list-grid-item--image {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.container-product-list-grid-item--name {
font-size: 1rem;
line-height: 26px;
font-weight: 500;
letter-spacing: -0.0001em;
text-align: center;
justify-self: center;
align-self: center;
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
text-decoration: none;
color: var(--color-text-primary);
}
@media (max-width: 768px) {
.container-product-list-grid-item--name {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"] .container-product-list-grid-item--name {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .container-product-list-grid-item--name {
font-size: 14.7px;
line-height: 25px;
}
}
.container-product-list-grid-item--price {
font-size: 0.875rem;
font-weight: 500;
color: #fff;
background: #f33;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
}
.container-product-list-grid-item .button-fill,
.container-product-list-grid-item .button-ghost {
height: -moz-min-content;
height: min-content;
}
.container-product-details .product-details__wrapper {
width: 100%;
display: flex;
flex-direction: column;
row-gap: 0.5rem;
-moz-column-gap: 1rem;
column-gap: 1rem;
}
.container-product-details .product-details__wrapper--top {
display: flex;
-moz-column-gap: 1rem;
column-gap: 1rem;
padding-inline: 1.25rem;
margin-bottom: 0.75rem;
}
.container-product-details .product-details__image {
width: 100px;
height: 135px;
}
.container-product-details .product-details__image img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.container-product-details .product-details__meta {
display: flex;
flex-direction: column;
row-gap: 0.75rem;
}
.container-product-details .product-details__meta--name {
font-size: 1.125rem;
line-height: 136%;
font-weight: 500;
letter-spacing: -0.001em;
margin-top: 0.45rem;
}
@media (max-width: 768px) {
.container-product-details .product-details__meta--name {
font-size: 16px;
line-height: 26px;
}
}
[dir="rtl"] .container-product-details .product-details__meta--name {
font-size: 1.1025rem;
line-height: 136%;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .container-product-details .product-details__meta--name {
font-size: 15.68px;
line-height: 26px;
}
}
.container-product-details .product-details__meta-price-wrapper {
display: flex;
align-items: center;
-moz-column-gap: 0.75rem;
column-gap: 0.75rem;
}
.container-product-details .product-details__meta-price {
display: flex;
align-items: baseline;
-moz-column-gap: 0.35rem;
column-gap: 0.35rem;
}
.container-product-details .product-details__meta-price--separator {
font-size: 1.25rem;
font-weight: 400;
opacity: 0.5;
}
.container-product-details .product-details__meta-price--amount {
font-size: 1.75rem;
font-weight: 600;
}
.container-product-details .product-details__meta-price--currency {
font-size: 1rem;
line-height: 26px;
font-weight: 500;
letter-spacing: -0.0001em;
opacity: 0.7;
}
@media (max-width: 768px) {
.container-product-details .product-details__meta-price--currency {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"] .container-product-details .product-details__meta-price--currency {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .container-product-details .product-details__meta-price--currency {
font-size: 14.7px;
line-height: 25px;
}
}
.container-product-details .product-details__meta-price--flag {
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
align-self: center;
margin-inline-end: 0.1rem;
}
.container-product-details .product-details__meta-price--flag svg {
width: 100%;
height: 100%;
}
.container-product-details .product-details__wrapper--purchase {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
-moz-column-gap: 1rem;
column-gap: 1rem;
width: 100%;
height: 100%;
}
@media (min-width: 48em) {
.container-product-details .product-details__wrapper--purchase {
flex-direction: row;
}
}
.container-product-details .product-details__wrapper--purchase .discount-coupon-wrapper {
flex: 1;
height: 100%;
display: flex;
align-items: center;
gap: 0.75rem;
padding-inline: 1.25rem;
padding-block: 0.35rem;
}
@media (min-width: 48em) {
.container-product-details .product-details__wrapper--purchase .discount-coupon-wrapper {
border-radius: 0.5rem;
padding-block: 0.5rem;
}
}
[data-theme="dark"] .container-product-details .product-details__wrapper--purchase .discount-coupon-wrapper {
background: hsla(var(--color-success), 0.1);
}
[data-theme="light"] .container-product-details .product-details__wrapper--purchase .discount-coupon-wrapper {
background: hsla(var(--color-success-h), var(--color-success-s), 30%, 0.05);
}
.container-product-details .product-details__wrapper--purchase .discount-coupon-wrapper .discount-coupon-input-wrapper {
flex: 1;
display: flex;
align-items: center;
gap: 0.75rem;
position: relative;
}
.container-product-details
.product-details__wrapper--purchase
.discount-coupon-wrapper
.discount-coupon-input-wrapper.discount-coupon-filled {
width: 100% !important;
justify-content: space-between;
}
.container-product-details .product-details__wrapper--purchase .discount-coupon-wrapper .discount-coupon-input {
width: 100%;
font-size: 0.875rem;
line-height: 1.5715;
font-weight: 400;
letter-spacing: 0.02em;
}
@media (max-width: 768px) {
.container-product-details .product-details__wrapper--purchase .discount-coupon-wrapper .discount-coupon-input {
font-size: 0.875rem;
line-height: 1.5715;
}
}
[dir="rtl"]
.container-product-details
.product-details__wrapper--purchase
.discount-coupon-wrapper
.discount-coupon-input {
font-size: 13.72px;
line-height: 24px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"]
.container-product-details
.product-details__wrapper--purchase
.discount-coupon-wrapper
.discount-coupon-input {
font-size: 13.72px;
line-height: 24px;
}
}
.container-product-details .product-details__wrapper--purchase .discount-coupon-wrapper .discount-coupon-button {
position: absolute;
width: 120px;
height: 100%;
right: 0;
background: hsl(var(--color-success));
border-radius: 0.5rem;
color: #fff;
font-size: 0.875rem;
line-height: 1.5715;
font-weight: 400;
letter-spacing: 0.02em;
}
@media (max-width: 768px) {
.container-product-details .product-details__wrapper--purchase .discount-coupon-wrapper .discount-coupon-button {
font-size: 0.875rem;
line-height: 1.5715;
}
}
[dir="rtl"]
.container-product-details
.product-details__wrapper--purchase
.discount-coupon-wrapper
.discount-coupon-button {
font-size: 13.72px;
line-height: 24px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"]
.container-product-details
.product-details__wrapper--purchase
.discount-coupon-wrapper
.discount-coupon-button {
font-size: 13.72px;
line-height: 24px;
}
}
.container-product-details .product-details__wrapper--purchase .discount-coupon-wrapper .discount-coupon-button i {
width: 1.75rem;
height: 1.75rem;
margin-inline-end: -0.125rem !important;
margin-inline-start: -0.5rem !important;
}
.container-product-details .product-details__wrapper--purchase .discount-coupon-wrapper .discount-coupon-tag {
display: flex;
align-items: center;
row-gap: 0.5rem;
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
border-radius: 0.25rem;
height: 100%;
padding-top: 0.5rem;
padding-bottom: 0.3rem;
padding-inline-start: 0.85rem;
padding-inline-end: 0.35rem;
}
[data-theme="dark"]
.container-product-details
.product-details__wrapper--purchase
.discount-coupon-wrapper
.discount-coupon-tag {
background: hsla(var(--color-success-h), var(--color-success-s), 40%, 0.15);
}
[data-theme="light"]
.container-product-details
.product-details__wrapper--purchase
.discount-coupon-wrapper
.discount-coupon-tag {
background: hsla(var(--color-success-h), var(--color-success-s), 30%, 0.15);
}
.container-product-details .product-details__wrapper--purchase .discount-coupon-wrapper .discount-coupon-tag-icon {
width: 1.75rem;
height: 1.75rem;
margin: -0.25rem;
margin-top: -0.4rem;
}
[data-theme="dark"]
.container-product-details
.product-details__wrapper--purchase
.discount-coupon-wrapper
.discount-coupon-tag-icon
path {
fill: hsla(var(--color-success-h), var(--color-success-s), var(--color-success-l), 0.5);
}
[data-theme="light"]
.container-product-details
.product-details__wrapper--purchase
.discount-coupon-wrapper
.discount-coupon-tag-icon
path {
fill: hsla(var(--color-success-h), var(--color-success-s), 20%, 0.8);
}
.container-product-details
.product-details__wrapper--purchase
.discount-coupon-wrapper
.discount-coupon-tag
.discount-coupon-remove {
background: none;
border: none;
cursor: pointer;
padding: 0.75rem;
}
.container-product-details
.product-details__wrapper--purchase
.discount-coupon-wrapper
.discount-coupon-tag
.discount-coupon-remove
svg {
width: 1.25rem;
height: 1.25rem;
margin: -0.25rem;
}
.container-product-details
.product-details__wrapper--purchase
.discount-coupon-wrapper
.discount-coupon-tag
.discount-coupon-remove
svg
path {
stroke-width: 3;
}
[data-theme="dark"]
.container-product-details
.product-details__wrapper--purchase
.discount-coupon-wrapper
.discount-coupon-tag
.discount-coupon-remove
svg
path {
stroke: hsla(var(--color-success-h), var(--color-success-s), 96%, 1);
}
[data-theme="light"]
.container-product-details
.product-details__wrapper--purchase
.discount-coupon-wrapper
.discount-coupon-tag
.discount-coupon-remove
svg
path {
stroke: hsla(var(--color-success-h), var(--color-success-s), 15%, 1);
}
.container-product-details
.product-details__wrapper--purchase
.discount-coupon-wrapper
.discount-coupon-tag
.discount-coupon-code {
font-size: 1rem;
line-height: 26px;
font-weight: 400;
letter-spacing: -0.0001em;
line-height: 1 !important;
}
@media (max-width: 768px) {
.container-product-details
.product-details__wrapper--purchase
.discount-coupon-wrapper
.discount-coupon-tag
.discount-coupon-code {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"]
.container-product-details
.product-details__wrapper--purchase
.discount-coupon-wrapper
.discount-coupon-tag
.discount-coupon-code {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"]
.container-product-details
.product-details__wrapper--purchase
.discount-coupon-wrapper
.discount-coupon-tag
.discount-coupon-code {
font-size: 14.7px;
line-height: 25px;
}
}
.container-product-details .product-details__wrapper--purchase .quantity-selector-wrapper {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
-moz-column-gap: 0.75rem;
column-gap: 0.75rem;
padding-inline: 1.25rem;
padding-block: 0.35rem;
}
@media (min-width: 48em) {
.container-product-details .product-details__wrapper--purchase .quantity-selector-wrapper {
border-radius: 0.5rem;
padding-block: 0.5rem;
}
}
[data-theme="dark"] .container-product-details .product-details__wrapper--purchase .quantity-selector-wrapper {
background: hsla(var(--color-info-h), var(--color-info-s), var(--color-info-l), 0.15);
}
[data-theme="light"] .container-product-details .product-details__wrapper--purchase .quantity-selector-wrapper {
background: hsla(var(--color-info-h), var(--color-info-s), 55%, 0.1);
}
.container-product-details .product-details__wrapper--purchase .quantity-selector {
display: flex;
align-items: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
height: 38px;
}
.container-product-details .product-details__wrapper--purchase .quantity-selector__btn {
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s;
border-radius: 0.25rem;
color: #fff;
height: 100%;
width: 42px;
padding: 0.25rem;
touch-action: manipulation;
}
[data-theme="dark"] .container-product-details .product-details__wrapper--purchase .quantity-selector__btn {
background: hsla(var(--color-info-h), var(--color-info-s), 60%, 1);
}
[data-theme="light"] .container-product-details .product-details__wrapper--purchase .quantity-selector__btn {
background: hsla(var(--color-info-h), var(--color-info-s), 20%, 0.9);
}
.container-product-details .product-details__wrapper--purchase .quantity-selector__btn:nth-child(1) {
border-radius: 0.25rem 0 0 0.25rem;
}
.container-product-details .product-details__wrapper--purchase .quantity-selector__btn:nth-child(3) {
border-radius: 0 0.25rem 0.25rem 0;
}
.container-product-details .product-details__wrapper--purchase .quantity-selector .quantity-value {
width: 44px;
height: 100%;
border: none;
outline: none;
text-align: center !important;
font-size: 1.125rem;
font-weight: 400;
padding: 0 !important;
color: var(--color-text-primary);
padding-inline-start: auto;
border-radius: 0;
}
[data-theme="dark"] .container-product-details .product-details__wrapper--purchase .quantity-selector .quantity-value {
background: hsla(var(--color-info-h), var(--color-info-s), 55%, 0.4);
}
[data-theme="light"] .container-product-details .product-details__wrapper--purchase .quantity-selector .quantity-value {
background: hsla(var(--color-info-h), var(--color-info-s), 40%, 0.15);
}
.container-product-details
.product-details__wrapper--purchase
.quantity-selector
.quantity-value::-webkit-outer-spin-button,
.container-product-details
.product-details__wrapper--purchase
.quantity-selector
.quantity-value::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.container-product-details .product-details__wrapper--purchase .stock-info {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 13px;
line-height: 23px;
font-weight: 400;
letter-spacing: 0.025em;
opacity: 0.7;
}
@media (max-width: 768px) {
.container-product-details .product-details__wrapper--purchase .stock-info {
font-size: 13px;
line-height: 23px;
}
}
[dir="rtl"] .container-product-details .product-details__wrapper--purchase .stock-info {
font-size: 12.74px;
line-height: 23px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .container-product-details .product-details__wrapper--purchase .stock-info {
font-size: 12.74px;
line-height: 23px;
}
}
.container-product-details .product-details__wrapper--purchase .stock-info .stock-count {
font-size: 1.25rem;
line-height: 140%;
font-weight: 600;
letter-spacing: 0.0185em;
margin-right: 0.25rem;
opacity: 1 !important;
}
@media (max-width: 768px) {
.container-product-details .product-details__wrapper--purchase .stock-info .stock-count {
font-size: 1.125rem;
line-height: 25px;
}
}
[dir="rtl"] .container-product-details .product-details__wrapper--purchase .stock-info .stock-count {
font-size: 1.225rem;
line-height: 140%;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .container-product-details .product-details__wrapper--purchase .stock-info .stock-count {
font-size: 1.1025rem;
line-height: 25px;
}
}
.container-product-details .product-details__wrapper .final-summary {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.container-product-details .product-details__wrapper .final-summary__top {
display: flex;
flex-direction: column;
row-gap: 0.75rem;
padding-inline: 1.25rem;
padding-block: 0.75rem;
}
[data-theme="dark"] .container-product-details .product-details__wrapper .final-summary__top {
background: hsla(var(--color-info-h), var(--color-info-s), var(--color-info-l), 0.2);
}
[data-theme="light"] .container-product-details .product-details__wrapper .final-summary__top {
background: hsla(var(--color-info-h), var(--color-info-s), 55%, 0.15);
}
.container-product-details .product-details__wrapper .final-summary__bottom {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
padding-inline: 1.25rem;
padding-block: 0.75rem;
}
[data-theme="dark"] .container-product-details .product-details__wrapper .final-summary__bottom {
background: hsla(var(--color-success-h), var(--color-success-s), var(--color-success-l), 0.3);
}
[data-theme="light"] .container-product-details .product-details__wrapper .final-summary__bottom {
background: hsla(var(--color-success-h), var(--color-success-s), 40%, 0.3);
}
.container-product-details .product-details__wrapper .final-summary__row {
display: flex;
align-items: center;
justify-content: space-between;
}
.container-product-details .product-details__wrapper .final-summary__label {
font-size: 0.875rem;
line-height: 1.5715;
font-weight: 400;
letter-spacing: 0.02em;
opacity: 0.9;
}
@media (max-width: 768px) {
.container-product-details .product-details__wrapper .final-summary__label {
font-size: 0.875rem;
line-height: 1.5715;
}
}
[dir="rtl"] .container-product-details .product-details__wrapper .final-summary__label {
font-size: 13.72px;
line-height: 24px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .container-product-details .product-details__wrapper .final-summary__label {
font-size: 13.72px;
line-height: 24px;
}
}
.container-product-details .product-details__wrapper .final-summary__label--emphasized {
font-size: 1.125rem;
line-height: 136%;
font-weight: 600;
letter-spacing: -0.001em;
opacity: 1;
}
@media (max-width: 768px) {
.container-product-details .product-details__wrapper .final-summary__label--emphasized {
font-size: 16px;
line-height: 26px;
}
}
[dir="rtl"] .container-product-details .product-details__wrapper .final-summary__label--emphasized {
font-size: 1.1025rem;
line-height: 136%;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .container-product-details .product-details__wrapper .final-summary__label--emphasized {
font-size: 15.68px;
line-height: 26px;
}
}
.container-product-details .product-details__wrapper .final-summary__label .discount-coupon-value {
font-size: 0.875rem;
line-height: 1.5715;
font-weight: 300;
letter-spacing: 0.02em;
margin-inline-start: 0.35rem;
opacity: 0.6;
}
@media (max-width: 768px) {
.container-product-details .product-details__wrapper .final-summary__label .discount-coupon-value {
font-size: 0.875rem;
line-height: 1.5715;
}
}
[dir="rtl"] .container-product-details .product-details__wrapper .final-summary__label .discount-coupon-value {
font-size: 13.72px;
line-height: 24px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .container-product-details .product-details__wrapper .final-summary__label .discount-coupon-value {
font-size: 13.72px;
line-height: 24px;
}
}
.container-product-details .product-details__wrapper .final-summary__value {
font-size: 1.125rem;
line-height: 136%;
font-weight: 400;
letter-spacing: -0.001em;
}
@media (max-width: 768px) {
.container-product-details .product-details__wrapper .final-summary__value {
font-size: 16px;
line-height: 26px;
}
}
[dir="rtl"] .container-product-details .product-details__wrapper .final-summary__value {
font-size: 1.1025rem;
line-height: 136%;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .container-product-details .product-details__wrapper .final-summary__value {
font-size: 15.68px;
line-height: 26px;
}
}
.container-product-details .product-details__wrapper .final-summary__value--emphasized {
font-size: 1.25rem;
line-height: 140%;
font-weight: 600;
letter-spacing: 0.0185em;
}
@media (max-width: 768px) {
.container-product-details .product-details__wrapper .final-summary__value--emphasized {
font-size: 1.125rem;
line-height: 25px;
}
}
[dir="rtl"] .container-product-details .product-details__wrapper .final-summary__value--emphasized {
font-size: 1.225rem;
line-height: 140%;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .container-product-details .product-details__wrapper .final-summary__value--emphasized {
font-size: 1.1025rem;
line-height: 25px;
}
}
.container-product-details .product-details__wrapper .checkout-wrapper {
padding-inline: 1.25rem;
padding-block: 0.75rem;
display: flex;
flex-direction: column;
row-gap: 1rem;
width: 100%;
}
.container-product-details .product-details__wrapper .checkout-wrapper .secure-payment-info {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 1.5rem;
}
.container-product-details .product-details__wrapper .checkout-wrapper .secure-payment-info .secure-payment-text {
font-size: 13px;
line-height: 23px;
font-weight: 300;
letter-spacing: 0.025em;
opacity: 0.7;
margin-bottom: 0.125rem;
}
@media (max-width: 768px) {
.container-product-details .product-details__wrapper .checkout-wrapper .secure-payment-info .secure-payment-text {
font-size: 13px;
line-height: 23px;
}
}
[dir="rtl"]
.container-product-details
.product-details__wrapper
.checkout-wrapper
.secure-payment-info
.secure-payment-text {
font-size: 12.74px;
line-height: 23px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"]
.container-product-details
.product-details__wrapper
.checkout-wrapper
.secure-payment-info
.secure-payment-text {
font-size: 12.74px;
line-height: 23px;
}
}
.container-product-details .product-details__wrapper .checkout-wrapper .secure-payment-info .secure-payment-logo {
height: 18px;
}
.container-product-details .product-details__wrapper .checkout-wrapper .secure-payment-info .secure-payment-logo svg {
height: 12px;
}
.container-product-details
.product-details__wrapper
.checkout-wrapper
.secure-payment-info
.secure-payment-logo
svg
path {
fill: var(--color-text-primary);
}
.container-product-details .product-details__wrapper .checkout-wrapper .checkout-payment-methods {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
[data-theme="light"] .container-product-details .product-details__wrapper .checkout-wrapper .checkout-payment-methods {
opacity: 0.6;
}
.container-product-details .product-details__wrapper .checkout-wrapper .checkout-payment-methods svg {
max-width: 320px;
margin-inline: auto;
}
[dir="rtl"] .quantity-selector__btn:nth-child(1) {
border-radius: 0 0.25rem 0.25rem 0 !important;
}
[dir="rtl"] .quantity-selector__btn:nth-child(3) {
border-radius: 0.25rem 0 0 0.25rem !important;
}
[dir="rtl"] .discount-coupon-button {
left: 0;
right: auto !important;
}
.container-product-description .product-description-wrapper .product-description-content * {
font-family:
"Alexandria",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
sans-serif;
font-size: 1rem;
line-height: 26px;
font-weight: 400;
letter-spacing: -0.0001em;
}
@media (max-width: 768px) {
.container-product-description .product-description-wrapper .product-description-content * {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"] .container-product-description .product-description-wrapper .product-description-content * {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .container-product-description .product-description-wrapper .product-description-content * {
font-size: 14.7px;
line-height: 25px;
}
}
.sticky-checkout-wrapper {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
transform: translateY(100%);
transition: transform 0.3s ease-in-out;
pointer-events: none;
}
.sticky-checkout-wrapper.sticky-checkout--visible {
transform: translateY(0);
pointer-events: auto;
}
.sticky-checkout-wrapper .sticky-checkout-content {
padding: 1rem 1.25rem;
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
[data-theme="dark"] .sticky-checkout-wrapper .sticky-checkout-content {
background: var(--color-background-primary);
border-top: 1px solid var(--color-border-primary);
}
[data-theme="light"] .sticky-checkout-wrapper .sticky-checkout-content {
background: var(--color-background-primary);
border-top: 1px solid var(--color-border-primary);
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}
@media (min-width: 48em) {
.sticky-checkout-wrapper .sticky-checkout-content {
padding: 1.25rem 2rem;
padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
}
}
@media (min-width: 64em) {
.sticky-checkout-wrapper .sticky-checkout-content {
padding: 1.5rem 2.5rem;
padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}
}
.sticky-checkout-wrapper .button-fill {
width: 100%;
max-width: none;
}
body.sticky-checkout-active {
padding-bottom: calc(80px + env(safe-area-inset-bottom));
}
@media (min-width: 48em) {
body.sticky-checkout-active {
padding-bottom: calc(100px + env(safe-area-inset-bottom));
}
}
@media (min-width: 64em) {
body.sticky-checkout-active {
padding-bottom: calc(120px + env(safe-area-inset-bottom));
}
}
.container-orders {
padding-top: var(--layout-spacing);
padding-bottom: var(--layout-spacing);
min-height: calc(100vh - 200px);
}
@media (min-width: 64em) {
.container-orders {
padding-top: calc(var(--layout-spacing) * 1.5);
}
}
.orders-page-title {
font-size: 3rem;
line-height: 80%;
font-weight: 700;
color: var(--color-text-primary);
margin-bottom: calc(var(--layout-spacing) * 1.25);
}
@media (max-width: 768px) {
.orders-page-title {
font-size: 20px;
line-height: 28px;
}
}
[dir="rtl"] .orders-page-title {
font-size: 2.94rem;
line-height: 80%;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .orders-page-title {
font-size: 19.6px;
line-height: 28px;
}
}
@media (min-width: 64em) {
.orders-page-title {
margin-bottom: calc(var(--layout-spacing) * 1.5);
}
}
.orders-list-view {
width: 100%;
}
.orders-group {
margin-bottom: calc(var(--layout-spacing) * 1.5);
}
.orders-group:last-child {
margin-bottom: 0;
}
.orders-group-title {
font-size: 1.25rem;
line-height: 140%;
font-weight: 600;
letter-spacing: 0.0185em;
color: var(--color-text-secondary);
margin-bottom: 0.75rem;
padding-inline-start: 1rem;
}
@media (max-width: 768px) {
.orders-group-title {
font-size: 1.125rem;
line-height: 25px;
}
}
[dir="rtl"] .orders-group-title {
font-size: 1.225rem;
line-height: 140%;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .orders-group-title {
font-size: 1.1025rem;
line-height: 25px;
}
}
@media (min-width: 64em) {
.orders-group-title {
margin-bottom: 1rem;
}
}
.orders-list {
display: flex;
flex-direction: column;
-moz-column-gap: 0.75rem;
column-gap: 0.75rem;
row-gap: 0.75rem;
}
.order-item {
width: 100%;
}
.order-item__content {
width: 100%;
display: flex;
align-items: center;
-moz-column-gap: 1rem;
column-gap: 1rem;
row-gap: 1rem;
padding: 1rem;
border: none;
border-radius: 0;
background: var(--oli-background);
box-shadow: var(--shadow-sm);
cursor: pointer;
transition: all 0.2s ease;
}
[data-theme="light"] .order-item__content {
--oli-background: hsla(var(--color-info-h), var(--color-info-s), 80%, 0.2);
}
[data-theme="dark"] .order-item__content {
--oli-background: hsla(var(--color-info-h), var(--color-info-s), var(--color-info-l), 0.1);
}
.order-item__content:active {
transform: translateY(0);
}
.order-item__content:focus {
outline: 2px solid hsl(var(--color-primary));
outline-offset: 2px;
}
.order-item__info {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
row-gap: 0.5rem;
min-width: 0;
}
.order-item__image {
width: 75px;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
overflow: hidden;
flex-shrink: 0;
}
.order-item__image img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.order-item__chevron {
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-tertiary);
flex-shrink: 0;
transition: transform 0.2s ease;
}
.order-item__chevron svg {
width: 20px;
height: 20px;
}
.order-item__title {
font-size: 1rem;
line-height: 26px;
font-weight: 500;
letter-spacing: -0.0001em;
color: var(--color-text-primary);
margin: 0;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
@media (max-width: 768px) {
.order-item__title {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"] .order-item__title {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .order-item__title {
font-size: 14.7px;
line-height: 25px;
}
}
.order-item__count {
font-size: 1rem;
line-height: 26px;
font-weight: 400;
letter-spacing: -0.0001em;
color: var(--color-text-secondary);
margin: 0;
}
@media (max-width: 768px) {
.order-item__count {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"] .order-item__count {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .order-item__count {
font-size: 14.7px;
line-height: 25px;
}
}
.order-status {
display: flex;
align-items: center;
-moz-column-gap: 0.75rem;
column-gap: 0.75rem;
row-gap: 0.75rem;
margin-bottom: 0.25rem;
}
.order-status__badge {
display: inline-flex;
align-items: center;
padding: 0.15rem 0.85rem;
border-radius: 1rem;
font-size: 13px;
line-height: 23px;
font-weight: 500;
letter-spacing: 0.025em;
line-height: 1;
white-space: nowrap;
}
@media (max-width: 768px) {
.order-status__badge {
font-size: 13px;
line-height: 23px;
}
}
[dir="rtl"] .order-status__badge {
font-size: 12.74px;
line-height: 23px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .order-status__badge {
font-size: 12.74px;
line-height: 23px;
}
}
.order-status__badge--completed {
background: hsla(var(--color-success), 0.25);
color: hsl(var(--color-success));
}
[data-theme="dark"] .order-status__badge--completed {
color: hsl(var(--color-success));
}
.order-status__badge--pending {
background: hsla(var(--color-warning), 0.5);
color: #fff;
}
.order-status__badge--cancelled {
background: hsla(var(--color-error), 0.85);
color: #fff;
}
.order-status__number {
font-size: 1rem;
line-height: 26px;
font-weight: 500;
letter-spacing: -0.0001em;
color: var(--color-text-tertiary);
}
@media (max-width: 768px) {
.order-status__number {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"] .order-status__number {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .order-status__number {
font-size: 14.7px;
line-height: 25px;
}
}
.order-detail-view {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1050;
display: flex;
flex-direction: column;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform;
transform: translateX(100%);
}
[data-theme="dark"] .order-detail-view {
background: hsla(var(--color-info-h), var(--color-info-s), 10%, 0.2);
}
[data-theme="light"] .order-detail-view {
background: hsla(var(--color-info-h), var(--color-info-s), 100%, 0.2);
}
[dir="rtl"] .order-detail-view {
transform: translateX(-100%);
}
.order-detail-view.order-detail-view--active {
transform: translateX(0);
}
.order-detail-view::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.1);
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.order-detail-view.order-detail-view--active::before {
opacity: 1;
}
.order-detail-view .order-detail-wrapper {
flex: 1;
display: flex;
flex-direction: column;
max-height: 100vh;
overflow-y: auto;
box-shadow: var(--shadow-xl);
}
[data-theme="dark"] .order-detail-view .order-detail-wrapper {
background: hsla(var(--color-info-h), var(--color-info-s), 10%, 1);
}
[data-theme="light"] .order-detail-view .order-detail-wrapper {
background: hsla(var(--color-info-h), var(--color-info-s), 94%, 1);
}
@media (min-width: 64em) {
.order-detail-view .order-detail-wrapper {
margin: 1rem;
border-radius: 1rem;
max-height: calc(100vh - 2rem);
width: calc(100% - 2rem);
max-width: 480px;
margin-inline-start: auto;
}
[dir="rtl"] .order-detail-view .order-detail-wrapper {
margin-inline-start: 1rem;
margin-inline-end: auto;
}
}
.order-detail-header {
position: sticky;
top: 0;
z-index: 10;
border-bottom: 1px solid hsla(var(--color-info-h), var(--color-info-s), 70%, 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: space-between;
}
[data-theme="dark"] .order-detail-header {
background: hsla(var(--color-info-h), var(--color-info-s), 30%, 0.2);
}
[data-theme="light"] .order-detail-header {
background: hsla(var(--color-info-h), 45%, 75%, 0.4);
}
@media (min-width: 64em) {
.order-detail-header {
border-radius: 1rem 1rem 0 0;
}
[dir="rtl"] .order-detail-header {
border-radius: 1rem 1rem 0 0;
}
}
.order-detail-header__id {
display: flex;
align-items: center;
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
row-gap: 0.5rem;
padding-inline-end: 1rem;
}
.order-detail-header__id-value {
font-size: 1rem;
line-height: 26px;
font-weight: 500;
letter-spacing: -0.0001em;
color: var(--color-text-primary);
}
@media (max-width: 768px) {
.order-detail-header__id-value {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"] .order-detail-header__id-value {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .order-detail-header__id-value {
font-size: 14.7px;
line-height: 25px;
}
}
.back-button {
display: flex;
align-items: center;
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
row-gap: 0.5rem;
padding: 0.75rem 1rem;
background: none;
border: none;
border-radius: 0;
cursor: pointer;
transition: background 0.2s ease;
width: 100%;
justify-content: flex-start;
}
[data-theme="light"] .back-button {
color: var(--color-text-primary);
}
[data-theme="light"] .back-button:hover {
background: hsla(var(--color-info-h), var(--color-info-s), 10%, 0.2);
}
[data-theme="dark"] .back-button {
color: var(--color-text-primary);
}
[data-theme="dark"] .back-button:hover {
background: hsla(var(--color-info-h), var(--color-info-s), 10%, 1);
}
.back-button__text {
font-size: 1rem;
line-height: 26px;
font-weight: 500;
letter-spacing: -0.0001em;
}
@media (max-width: 768px) {
.back-button__text {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"] .back-button__text {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .back-button__text {
font-size: 14.7px;
line-height: 25px;
}
}
.back-button svg {
width: 20px;
height: 20px;
transition: transform 0.2s ease;
}
.order-detail-content {
flex: 1;
display: flex;
flex-direction: column;
-moz-column-gap: 1rem;
column-gap: 1rem;
row-gap: 1rem;
overflow-y: auto;
padding-bottom: 5rem;
}
.order-detail-product {
display: flex;
align-items: flex-start;
-moz-column-gap: 1rem;
column-gap: 1rem;
row-gap: 1rem;
padding: 1rem;
}
.order-detail-product__image {
width: 75px;
height: 100%;
overflow: hidden;
flex-shrink: 0;
}
.order-detail-product__image img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.order-detail-product__info {
flex: 1;
display: flex;
flex-direction: column;
column-row-gap: 0.5rem;
row-row-gap: 0.5rem;
min-width: 0;
margin-top: 0.25rem;
}
.order-detail-product__title {
color: var(--color-text-primary);
margin: 0;
line-height: 1.3;
}
.order-detail-product__count {
font-size: 0.875rem;
line-height: 1.5715;
font-weight: 400;
letter-spacing: 0.02em;
color: var(--color-text-secondary);
margin: 0;
}
@media (max-width: 768px) {
.order-detail-product__count {
font-size: 0.875rem;
line-height: 1.5715;
}
}
[dir="rtl"] .order-detail-product__count {
font-size: 13.72px;
line-height: 24px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .order-detail-product__count {
font-size: 13.72px;
line-height: 24px;
}
}
.section-title {
font-size: 1rem;
line-height: 26px;
font-weight: 600;
letter-spacing: -0.0001em;
color: var(--color-text-primary);
padding-inline-start: 1rem;
}
@media (max-width: 768px) {
.section-title {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"] .section-title {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .section-title {
font-size: 14.7px;
line-height: 25px;
}
}
.purchase-details {
display: flex;
flex-direction: column;
-moz-column-gap: 1rem;
column-gap: 1rem;
row-gap: 1rem;
}
.purchase-details .detail-field-group {
display: flex;
flex-direction: column;
padding: 1rem;
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
row-gap: 0.5rem;
}
[data-theme="dark"] .purchase-details .detail-field-group {
background: hsla(var(--color-info-h), var(--color-info-s), 14%, 1);
}
[data-theme="light"] .purchase-details .detail-field-group {
background: hsla(var(--color-info-h), 55%, 60%, 0.1);
}
.purchase-details .detail-field {
display: flex;
flex-direction: column;
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
row-gap: 0.5rem;
}
.purchase-details .detail-field__label {
font-size: 1rem;
line-height: 26px;
font-weight: 500;
letter-spacing: -0.0001em;
color: var(--color-text-secondary);
}
@media (max-width: 768px) {
.purchase-details .detail-field__label {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"] .purchase-details .detail-field__label {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .purchase-details .detail-field__label {
font-size: 14.7px;
line-height: 25px;
}
}
.purchase-details .detail-field__input-group {
display: flex;
align-items: center;
padding: 0.7rem;
border-radius: 0.5rem;
}
[data-theme="dark"] .purchase-details .detail-field__input-group {
background: hsla(var(--color-info-h), 20%, 70%, 0.3);
}
[data-theme="light"] .purchase-details .detail-field__input-group {
background: hsla(var(--color-info-h), 35%, 80%, 0.4);
}
.purchase-details .detail-field .code-block {
flex: 1;
background: none;
border: none;
outline: none;
font-size: 1.125rem;
line-height: 136%;
font-weight: 400;
letter-spacing: -0.001em;
color: var(--color-text-primary);
letter-spacing: 0.5px;
}
@media (max-width: 768px) {
.purchase-details .detail-field .code-block {
font-size: 16px;
line-height: 26px;
}
}
[dir="rtl"] .purchase-details .detail-field .code-block {
font-size: 1.1025rem;
line-height: 136%;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .purchase-details .detail-field .code-block {
font-size: 15.68px;
line-height: 26px;
}
}
.purchase-details .detail-field .code-block pre {
margin: 0;
line-height: 1;
}
.copy-button {
display: flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
padding: 0.5rem;
margin: -0.5rem;
border-radius: 0.25rem;
color: #fff;
border: none;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
[data-theme="dark"] .copy-button:hover {
background: hsla(var(--color-info-h), var(--color-info-s), 14%, 0.5);
}
[data-theme="light"] .copy-button:hover {
background: hsla(var(--color-info-h), 55%, 60%, 0.3);
}
.copy-button:active {
transform: scale(0.95);
}
.copy-button:focus {
box-shadow: 0 0 0 2px hsla(var(--color-info-h), var(--color-info-s), 80%, 1);
}
.copy-button--success {
background: hsl(var(--color-success)) !important;
animation: successPulse 0.3s ease;
}
@keyframes successPulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.copy-button svg {
display: inline-block;
width: 1.75rem;
height: 1.75rem;
min-width: 1.75rem;
min-height: 1.75rem;
margin: 0;
}
.copy-button svg path {
stroke: var(--color-text-primary);
}
.order-details {
display: flex;
flex-direction: column;
-moz-column-gap: 1rem;
column-gap: 1rem;
row-gap: 1rem;
}
.order-detail-info {
display: flex;
flex-direction: column;
}
[data-theme="dark"] .order-detail-info {
background: hsla(var(--color-info-h), var(--color-info-s), 14%, 1);
}
[data-theme="light"] .order-detail-info {
background: hsla(var(--color-info-h), 55%, 60%, 0.1);
}
.order-detail-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
}
.order-detail-row:not(:last-child) {
border-bottom: 1px solid hsla(var(--color-info-h), var(--color-info-s), 88%, 0.1);
}
.order-detail-label {
font-size: 1rem;
line-height: 26px;
font-weight: 400;
letter-spacing: -0.0001em;
opacity: 0.8;
flex-shrink: 0;
}
@media (max-width: 768px) {
.order-detail-label {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"] .order-detail-label {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .order-detail-label {
font-size: 14.7px;
line-height: 25px;
}
}
.order-detail-value {
font-size: 1rem;
line-height: 26px;
font-weight: 500;
letter-spacing: -0.0001em;
color: var(--color-text-primary);
}
@media (max-width: 768px) {
.order-detail-value {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"] .order-detail-value {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .order-detail-value {
font-size: 14.7px;
line-height: 25px;
}
}
@media (prefers-reduced-motion: reduce) {
.order-detail-view {
transition: none;
}
.order-detail-view.order-detail-view--active {
transform: translateX(0);
}
.copy-button--success {
animation: none;
}
.order-item__content,
.copy-button,
.back-button {
transition: none;
}
}
.order-item__content:focus .order-item__title {
color: hsl(var(--color-primary));
}
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.usage-instructions {
display: flex;
flex-direction: column;
-moz-column-gap: 1rem;
column-gap: 1rem;
row-gap: 1rem;
}
.usage-instructions-content {
font-size: 1.125rem;
line-height: 136%;
font-weight: 400;
letter-spacing: -0.001em;
padding: 1rem;
}
@media (max-width: 768px) {
.usage-instructions-content {
font-size: 16px;
line-height: 26px;
}
}
[dir="rtl"] .usage-instructions-content {
font-size: 1.1025rem;
line-height: 136%;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .usage-instructions-content {
font-size: 15.68px;
line-height: 26px;
}
}
[data-theme="dark"] .usage-instructions-content {
background: hsla(var(--color-info-h), var(--color-info-s), 14%, 1);
}
[data-theme="light"] .usage-instructions-content {
background: hsla(var(--color-info-h), 55%, 60%, 0.1);
}
[dir="ltr"] .order-item__chevron {
transform: rotate(180deg);
}
[dir="rtl"] .back-button svg {
transform: rotate(180deg);
}
.store-app-installation {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
touch-action: manipulation;
}
.store-app-installation__header {
margin-bottom: 1.25rem;
}
.store-app-installation__content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
row-gap: 0.85rem;
padding: 1.25rem;
}
[data-theme="dark"] .store-app-installation__content-wrapper {
background: hsla(var(--color-info-h), var(--color-info-s), var(--color-info-l), 0.15);
}
[data-theme="light"] .store-app-installation__content-wrapper {
background: hsla(var(--color-info-h), var(--color-info-s), 55%, 0.1);
}
.store-app-installation__icon {
width: 80px;
height: 80px;
border-radius: 22%;
display: flex;
align-items: center;
justify-content: center;
}
[data-theme="dark"] .store-app-installation__icon {
background: linear-gradient(
180deg,
hsla(var(--color-primary-h), var(--color-primary-s), 40%, 0.3) 0%,
hsla(var(--color-primary-h), var(--color-primary-s), 28%, 0.36) 100%
);
box-shadow:
0 0 0 3px hsla(var(--color-primary-h), 0%, 0%, 0.5),
0 0 0 5px hsla(var(--color-primary-h), 53%, 58%, 0.3),
inset 0 0 6px 3px hsla(var(--color-primary-h), 38%, 80%, 0.35);
}
[data-theme="light"] .store-app-installation__icon {
background: linear-gradient(
180deg,
hsla(var(--color-primary-h), var(--color-primary-s), 55%, 0.3) 0%,
hsla(var(--color-primary-h), var(--color-primary-s), 60%, 0.226) 100%
);
box-shadow:
0 0 0 3px rgba(255, 255, 255, 0.5),
0 0 0 5px hsla(var(--color-primary-h), 42%, 62%, 0.3),
inset 0 0 6px 3px hsla(var(--color-primary-h), 27%, 68%, 0.35);
}
.store-app-installation__icon img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center;
border-radius: 22%;
}
.store-app-installation__info {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@media (max-width: 35.4975em) {
.store-app-installation__info {
width: 100%;
}
}
.store-app-installation__name {
font-size: 1.125rem;
line-height: 136%;
font-weight: 600;
letter-spacing: -0.001em;
margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
.store-app-installation__name {
font-size: 16px;
line-height: 26px;
}
}
[dir="rtl"] .store-app-installation__name {
font-size: 1.1025rem;
line-height: 136%;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .store-app-installation__name {
font-size: 15.68px;
line-height: 26px;
}
}
.store-app-troubleshooting {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
.store-app-troubleshooting__content-wrapper {
display: flex;
flex-direction: column;
border-radius: 1rem;
padding: 1.25rem;
}
[data-theme="dark"] .store-app-troubleshooting__content-wrapper {
background: linear-gradient(
180deg,
hsla(var(--color-primary-h), var(--color-primary-s), 40%, 0.3) 0%,
hsla(var(--color-primary-h), var(--color-primary-s), 28%, 0.36) 100%
);
box-shadow:
0 0 0 3px hsla(var(--color-primary-h), 0%, 0%, 0.5),
0 0 0 5px hsla(var(--color-primary-h), 53%, 58%, 0.3),
inset 0 0 6px 3px hsla(var(--color-primary-h), 38%, 80%, 0.35);
}
[data-theme="light"] .store-app-troubleshooting__content-wrapper {
background: linear-gradient(
180deg,
hsla(var(--color-primary-h), var(--color-primary-s), 55%, 0.1) 0%,
hsla(var(--color-primary-h), var(--color-primary-s), 60%, 0.1) 100%
);
box-shadow:
0 0 0 3px rgba(255, 255, 255, 0.5),
0 0 0 5px hsla(var(--color-primary-h), 42%, 62%, 0.3),
inset 0 0 6px 3px hsla(var(--color-primary-h), 27%, 68%, 0.35);
}
.store-app-troubleshooting__header {
font-size: 1.125rem;
line-height: 136%;
font-weight: 600;
letter-spacing: -0.001em;
margin-bottom: 1rem;
}
@media (max-width: 768px) {
.store-app-troubleshooting__header {
font-size: 16px;
line-height: 26px;
}
}
[dir="rtl"] .store-app-troubleshooting__header {
font-size: 1.1025rem;
line-height: 136%;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .store-app-troubleshooting__header {
font-size: 15.68px;
line-height: 26px;
}
}
.store-app-troubleshooting__tips {
font-size: 0.875rem;
line-height: 1.5715;
font-weight: 400;
letter-spacing: 0.02em;
list-style: decimal;
padding-inline-start: 1.5rem;
margin-bottom: 0;
margin-top: 0;
}
@media (max-width: 768px) {
.store-app-troubleshooting__tips {
font-size: 0.875rem;
line-height: 1.5715;
}
}
[dir="rtl"] .store-app-troubleshooting__tips {
font-size: 13.72px;
line-height: 24px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .store-app-troubleshooting__tips {
font-size: 13.72px;
line-height: 24px;
}
}
.container-available-apps {
max-width: 1088px;
padding-inline: var(--layout-spacing);
padding-top: 3.5rem;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
@media (max-width: 63.9975em) {
.container-available-apps {
padding-top: 2rem;
}
}
.container-available-apps .container-available-apps-wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
box-shadow:
0px 4px 60px -40px rgba(120, 149, 177, 0.25),
0px 4px 60px -40px rgba(120, 149, 177, 0.25);
}
[data-theme="dark"] .container-available-apps .container-available-apps-wrapper {
background: hsla(var(--color-info-h), var(--color-info-s), 50%, 0.2);
}
[data-theme="light"] .container-available-apps .container-available-apps-wrapper {
background: hsla(var(--color-info-h), var(--color-info-s), 50%, 0.2);
}
.container-available-apps .container-available-apps-header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
flex-wrap: wrap;
padding-inline: 2rem;
padding-top: 1.5rem;
padding-bottom: 2rem;
position: sticky;
top: 3rem;
z-index: 100;
}
@media (max-width: 63.9975em) {
.container-available-apps .container-available-apps-header {
padding-bottom: 1.5rem;
padding-inline: 1.1rem;
}
}
@media (max-width: 63.9975em) {
.container-available-apps .container-available-apps-header {
margin-bottom: 0;
flex-direction: column;
align-items: flex-start;
row-gap: 1rem;
}
}
.container-available-apps .container-available-apps-header .container-headline {
font-size: 2rem;
line-height: 34px;
font-weight: 700;
letter-spacing: -0.002em;
margin: 0;
text-align: start;
}
@media (max-width: 768px) {
.container-available-apps .container-available-apps-header .container-headline {
font-size: 1.5rem;
line-height: 26px;
}
}
[dir="rtl"] .container-available-apps .container-available-apps-header .container-headline {
font-size: 1.96rem;
line-height: 34px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"] .container-available-apps .container-available-apps-header .container-headline {
font-size: 1.47rem;
line-height: 26px;
}
}
@media (max-width: 63.9975em) {
.container-available-apps .container-available-apps-header .container-headline {
width: 100%;
}
}
.container-available-apps .container-available-apps-header .container-available-apps-search {
display: flex;
align-items: center;
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
box-shadow: 0 4px 25px 0 rgba(88, 116, 158, 0.3);
min-width: 260px;
max-width: 320px;
width: 100%;
margin-inline-start: auto;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
[data-theme="dark"] .container-available-apps .container-available-apps-header .container-available-apps-search {
background: hsla(var(--color-info-h), var(--color-info-s), 80%, 0.3);
}
[data-theme="light"] .container-available-apps .container-available-apps-header .container-available-apps-search {
background: hsla(var(--color-info-h), 35%, 50%, 0.6);
}
@media (max-width: 63.9975em) {
.container-available-apps .container-available-apps-header .container-available-apps-search {
margin-top: 0;
margin-inline-start: 0;
min-width: 0;
max-width: none;
width: 100%;
}
}
.container-available-apps
.container-available-apps-header
.container-available-apps-search
.available-apps-search-input {
border: none;
background: rgba(0, 0, 0, 0);
outline: none;
width: 100%;
font-size: 1.125rem;
line-height: 136%;
font-weight: 400;
letter-spacing: -0.001em;
color: var(--color-text-primary);
}
@media (max-width: 768px) {
.container-available-apps
.container-available-apps-header
.container-available-apps-search
.available-apps-search-input {
font-size: 16px;
line-height: 26px;
}
}
[dir="rtl"]
.container-available-apps
.container-available-apps-header
.container-available-apps-search
.available-apps-search-input {
font-size: 1.1025rem;
line-height: 136%;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"]
.container-available-apps
.container-available-apps-header
.container-available-apps-search
.available-apps-search-input {
font-size: 15.68px;
line-height: 26px;
}
}
.container-available-apps
.container-available-apps-header
.container-available-apps-search
.available-apps-search-input::-moz-placeholder {
opacity: 0.7;
}
.container-available-apps
.container-available-apps-header
.container-available-apps-search
.available-apps-search-input::placeholder {
opacity: 0.7;
}
[data-theme="dark"]
.container-available-apps
.container-available-apps-header
.container-available-apps-search
.available-apps-search-input::-moz-placeholder {
color: #fff;
}
[data-theme="dark"]
.container-available-apps
.container-available-apps-header
.container-available-apps-search
.available-apps-search-input::placeholder {
color: #fff;
}
[data-theme="light"]
.container-available-apps
.container-available-apps-header
.container-available-apps-search
.available-apps-search-input::-moz-placeholder {
color: #fff;
}
[data-theme="light"]
.container-available-apps
.container-available-apps-header
.container-available-apps-search
.available-apps-search-input::placeholder {
color: #fff;
}
.container-available-apps
.container-available-apps-header
.container-available-apps-search
.available-apps-search-icon {
font-size: 1.25rem;
display: flex;
align-items: center;
background: none;
border: none;
outline: none;
cursor: pointer;
padding: 0;
margin: 0;
color: var(--color-text-primary);
}
[data-theme="dark"]
.container-available-apps
.container-available-apps-header
.container-available-apps-search
.available-apps-search-icon {
color: #fff;
}
[data-theme="light"]
.container-available-apps
.container-available-apps-header
.container-available-apps-search
.available-apps-search-icon {
color: #fff;
opacity: 0.7;
}
.container-available-apps .container-available-apps-grid {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 0.425rem;
padding-inline: 0;
padding-bottom: 2rem;
}
@media (max-width: 63.9975em) {
.container-available-apps .container-available-apps-grid {
padding-bottom: 1.5rem;
padding-inline: 0;
grid-template-columns: 1fr;
}
}
@media (min-width: 48em) and (max-width: 63.9975em) {
.container-available-apps .container-available-apps-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.container-available-apps .container-available-apps-grid .available-apps-card {
display: flex;
flex-direction: column;
padding: 1rem;
min-width: 0;
box-shadow: 0 2px 12px 0 rgba(80, 120, 180, 0.07);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.container-available-apps .container-available-apps-grid .available-apps-card:hover {
box-shadow: 0 4px 24px 0 rgba(80, 120, 180, 0.13);
}
[data-theme="dark"] .container-available-apps .container-available-apps-grid .available-apps-card {
background: hsla(var(--color-info-h), var(--color-info-s), 80%, 0.1);
}
[data-theme="light"] .container-available-apps .container-available-apps-grid .available-apps-card {
background: hsla(var(--color-info-h), var(--color-info-s), 20%, 0.1);
}
.container-available-apps .container-available-apps-grid .available-apps-card .available-apps-card-header {
display: flex;
align-items: center;
-moz-column-gap: 0.65rem;
column-gap: 0.65rem;
width: 100%;
}
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-header
.available-apps-card-icon {
width: 64px;
height: 64px;
min-width: 64px;
min-height: 64px;
border-radius: 27%;
overflow: hidden;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-header
.available-apps-card-icon
img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-header
.available-apps-card-details {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
min-width: 0;
}
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-header
.available-apps-card-details
.available-apps-card-title {
font-size: 1.125rem;
line-height: 136%;
font-weight: 500;
letter-spacing: -0.001em;
margin-bottom: 0.25rem;
}
@media (max-width: 768px) {
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-header
.available-apps-card-details
.available-apps-card-title {
font-size: 16px;
line-height: 26px;
}
}
[dir="rtl"]
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-header
.available-apps-card-details
.available-apps-card-title {
font-size: 1.1025rem;
line-height: 136%;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"]
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-header
.available-apps-card-details
.available-apps-card-title {
font-size: 15.68px;
line-height: 26px;
}
}
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-header
.available-apps-card-details
.available-apps-card-version {
font-size: 0.875rem;
line-height: 1.5715;
font-weight: 500;
letter-spacing: 0.02em;
background: hsla(var(--color-info-h), var(--color-info-s), 86%, 0.2);
border-radius: 0.4rem;
padding: 0.1rem 0.35rem;
display: inline-block;
margin-top: 0.1rem;
width: -moz-fit-content;
width: fit-content;
opacity: 0.7;
}
@media (max-width: 768px) {
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-header
.available-apps-card-details
.available-apps-card-version {
font-size: 0.875rem;
line-height: 1.5715;
}
}
[dir="rtl"]
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-header
.available-apps-card-details
.available-apps-card-version {
font-size: 13.72px;
line-height: 24px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"]
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-header
.available-apps-card-details
.available-apps-card-version {
font-size: 13.72px;
line-height: 24px;
}
}
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-header
.available-apps-card-toggle {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
transition: transform 0.3s ease;
color: var(--color-text-primary);
padding: 0.5rem;
}
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-header
.available-apps-card-toggle
svg {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-header
.available-apps-card-toggle.expanded {
transform: rotate(90deg);
}
[dir="ltr"]
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-header
.available-apps-card-toggle {
transform: rotate(180deg);
}
[dir="ltr"]
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-header
.available-apps-card-toggle.expanded {
transform: rotate(90deg);
}
.container-available-apps .container-available-apps-grid .available-apps-card .available-apps-card-content {
max-height: 0;
overflow: hidden;
transition:
max-height 0.3s ease,
padding 0.3s ease;
padding-top: 0;
}
.container-available-apps .container-available-apps-grid .available-apps-card .available-apps-card-content.expanded {
max-height: 500px;
padding-top: 1rem;
}
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-content
.available-apps-card-description {
font-size: 1rem;
line-height: 26px;
font-weight: 400;
letter-spacing: -0.0001em;
line-height: 1.6;
margin-bottom: 1rem;
opacity: 0.8;
}
@media (max-width: 768px) {
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-content
.available-apps-card-description {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"]
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-content
.available-apps-card-description {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"]
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-content
.available-apps-card-description {
font-size: 14.7px;
line-height: 25px;
}
}
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-content
.available-apps-card-features {
list-style: none;
padding: 0;
margin: 0 0 1rem 0;
}
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-content
.available-apps-card-features
li {
font-size: 1rem;
line-height: 26px;
font-weight: 400;
letter-spacing: -0.0001em;
padding: 0.25rem 0;
opacity: 0.8;
position: relative;
padding-left: 1.5rem;
}
@media (max-width: 768px) {
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-content
.available-apps-card-features
li {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"]
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-content
.available-apps-card-features
li {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"]
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-content
.available-apps-card-features
li {
font-size: 14.7px;
line-height: 25px;
}
}
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-content
.available-apps-card-features
li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--color-success);
font-weight: bold;
}
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-content
.available-apps-card-actions {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
}
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-content
.available-apps-card-actions
.button-outline {
flex: 1;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
border: 1px solid var(--color-primary);
background: rgba(0, 0, 0, 0);
color: var(--color-primary);
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
text-align: center;
font-size: 1rem;
line-height: 26px;
font-weight: 500;
letter-spacing: -0.0001em;
}
@media (max-width: 768px) {
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-content
.available-apps-card-actions
.button-outline {
font-size: 15px;
line-height: 1.4;
}
}
[dir="rtl"]
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-content
.available-apps-card-actions
.button-outline {
font-size: 0.98rem;
line-height: 26px;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
[dir="rtl"]
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-content
.available-apps-card-actions
.button-outline {
font-size: 14.7px;
line-height: 25px;
}
}
.container-available-apps
.container-available-apps-grid
.available-apps-card
.available-apps-card-content
.available-apps-card-actions
.button-outline:hover {
background: var(--color-primary);
color: #fff;
}
.container-available-apps .container-available-apps-cta {
width: 100%;
display: flex;
justify-content: center;
margin-top: -8.5rem;
padding: 2rem;
}
@media (max-width: 63.9975em) {
.container-available-apps .container-available-apps-cta {
padding-inline: 0.5rem;
}
}
.container-available-apps .container-available-apps-cta .button-fill {
padding: 1.25rem 2.5rem;
border-radius: 1rem;
color: #daebfd;
background: linear-gradient(0deg, #5f9ff8 -4.18%, #4379c3 106.37%),
url("/app/images/premium-package-background-2.png");
background-blend-mode: overlay;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow:
0px 12px 40px -6px rgba(130, 191, 251, 0.15),
0px 12px 40px -14px rgba(0, 128, 255, 0.35),
0px 4px 60px -40px rgba(120, 149, 177, 0.25),
0px 4px 60px -40px rgba(120, 149, 177, 0.25),
inset 0px 0px 7px 5px rgba(137, 195, 252, 0.9),
inset 0px 9px 25px rgba(52, 148, 245, 0.45),
inset 0px 17px 56px #8bc4fd;
}
.container-available-apps .container-available-apps-cta .button-fill:hover {
background: linear-gradient(180deg, #4f8ecd 0%, #7fb8f7 100%);
box-shadow: 0 12px 40px -6px rgba(80, 120, 180, 0.22);
}
.subscription-package-grid--centered {
display: flex !important;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
}
@media (max-width: 767px) {
.subscription-package-grid--centered {
flex-direction: column;
align-items: center;
}
}